[THREE.JS-EX] 카메라(Camera), 2분할


이해가 되지 않는 부분은 아래의 코드처럼 카메라 생성 시 초기화로 카메라를 y축으로 180도 회전시켰는가… 이다.

cameraOrtho.rotation.y = Math.PI;
cameraPerspective.rotation.y = Math.PI;

이 글의 예제 코드는 THREE.JS 공식 사이트의 EXAMPLES에서 제공되는 코드를 이해하고 제 나름대로의 코드로 재구성한 것입니다.

[THREE.JS-EX] TransformControls를 이용하여 Spline 편집


_initialize 함수를 보면 아래의 변수가 정의되는 것을 볼 수 있습니다.

this._splineHelperObjects = [];
this._positions = [];
this._splines = {};

_splineHelperObjects는 스플라인의 제어점에 대한 Mesh 객체를 담고 있습니다. _positions는 _splineHelperObjects에 저장된 Mesh들의 position 속성 객체들 항목으로 참조하고 있고 _splines은 key-value 컨테이너로 uniform, centripetal, chordal를 key로 하여 THREE.CatmullRomCurve3 객체를 value로 가집니다. 이때 이 value에 mesh를 속성으로하여 THREE.Line 객체를 갖습니다.

이 글의 예제 코드는 THREE.JS 공식 사이트의 EXAMPLES에서 제공되는 코드를 이해하고 제 나름대로의 코드로 재구성한 것입니다.

웹에서 Binary Data를 파일로 저장하기

웹에서 ArrayBuffer를 파일로 저장하기 위한 코드에 대한 내용입니다.

웹에서는 PC에 저장된 파일을 읽거나 쓸때 반드시 사람의 행위가 수반되어야 합니다. 즉, 버튼과 같은 UI를 사람이 의도하여 클릭을 해야만 한다는 것입니다. 이를 위해 필요한 UI에 대한 DOM 요소를 아래처럼 생성해 둡니다.

<button id="exportFile">Export To File</button>

그리고 위의 버튼에 대한 클릭 이벤트에 대한 코드는 다음과 같이 지정하구요.

const exportButton = document.getElementById( 'exportFile' );
exportButton.addEventListener( 'click', exportFile );

위의 exportFile 함수에 대한 코드는 다음과 같습니다.

function exportFile() {
    const buffer = createData(); /* ArrayBuffer 형식의 데이터를 생성하는 함수 */ 
    const blob = new Blob( [ buffer ], 
        { type: 'application/octet-stream' } )
    link.href = URL.createObjectURL( blob );
    link.download = 'file.dat';
    link.click();
}

위의 코드에서 link는 다음처럼 동적으로 생성된 a 테그 요소입니다.

const link = document.createElement( 'a' );
link.style.display = 'none';
document.body.appendChild( link );

결과적으로 사용자가 버튼을 클릭하면 a Tag가 클릭한 것으로 처리되어 파일 저장이 진행됩니다.

여기서 추가로 만약 저장하고자 하는 데이터가 바이너리가 아닌 텍스트라면 위의 코드 중 변경해야할 부분은 어딜까요? exportFile 함수에 대한 코드 중 3,4번의 buffer가 단순한 문자열 값이며 type: ‘text/plain’로 지정해 주면 됩니다.

DBMS 살펴보기

운영 중인 시스템에서 사용하는 DBMS를 살펴보는 방식은 해당 DBMS의 내용을 기술해 놓은 문서를 보거나 실제 DBMS에 저장된 데이터를 DB 툴을 통해 살펴보는 방식이 있습니다. 이 포스트는 운영중인 DBMS의 내용을 문서나 DB 툴 없이 java 코드를 통해 살펴보는 내용을 정리한 글입니다.

DBMS를 파악함에 있어서 관련 문서나 담당자의 설명 없이 해당 DBMS에 저장된 데이터를 통해 파악하는 것은 정확하지 않은 추측일 가능성이 큽니다. 관련 문서나 담당자의 설명과 DB 툴이나 이 글의 내용을 통해 DBMS에 실제로 저장된 데이터를 살펴보는 것 모두를 병행하여 코로스체킹(Cross Checking)을 해야 합니다.

흔히 가장 많이 사용하는 DBMS인 MySQL을 토대로 하였고 Java의 JDBC를 사용하였습니다. 테스트한 서버의 MySQL의 버전이 무엇인지는 모르겠으나 사용한 JDBC에 대한 jar 라이브러리는 mysql-connector-java-8.0.22.jar입니다.

이 프로그램의 결과는 해당 DBMS를 JDBC로 연결하고 해당 DB에 저장된 테이블 이름들을 가져온 후 각 테이블에 대해 최근에 저장된 단 3개의 필드값을 지정된 파일에 저장하는 것입니다. 테이블들이 많을 경우 제외할 테이블을 지정할 수 있습니다.

코드는 다음과 같습니다.

package tstMySQL;

import java.io.File;
import java.io.FileWriter;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashSet;
import java.util.Iterator;
import java.util.Set;

public class MainEntry {
    public static void main(String[] args) {
        File file = new File("d:/text.txt");
        PrintWriter writer = null;
			
        Connection con = null;
        PreparedStatement pstmt = null;   
        ResultSet rs = null;
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            con = DriverManager.getConnection("jdbc:mysql://localhost:3306/geos", "ID", "#PW");
            pstmt = con.prepareStatement("SHOW TABLES");
            rs = pstmt.executeQuery();
            ArrayList<String> tableNames = new ArrayList<String>();
            
            while(rs.next()) {
                String tableName = rs.getString(1);
                tableNames.add(tableName);
            }
            
            rs.close();
            pstmt.close();
            
            writer = new PrintWriter(new FileWriter(file));
            
            String[] ignoredTablesArray = { "etc", "abc" };
            Set<String> ignoredTables = new HashSet<String>(Arrays.asList(ignoredTablesArray));
            
            Iterator<String> iter = tableNames.iterator();
            while(iter.hasNext()) {
            	String tableName = iter.next();
            	if(ignoredTables.contains(tableName)) continue;
            	
            	writer.println("# TableName : " + tableName);
            
            	pstmt = con.prepareStatement("SELECT * FROM " + tableName + " ORDER BY ID DESC LIMIT 3");
            	rs = pstmt.executeQuery();
            	ResultSetMetaData rsmd = rs.getMetaData();        
                int fieldCount = rsmd.getColumnCount();

                while(rs.next()) {
                    for(int iField=0; iField<fieldCount; iField++) {
                        Object obj = rs.getObject(iField+1);
                        String value = obj == null ? "NULL" : obj.toString();
                        String fieldName = rsmd.getColumnName(iField+1);
                        writer.println("  " + fieldName + " : " + value);
                    }
                    writer.println();
                }

                rs.close();
                pstmt.close();
                            }
        } catch(Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if(rs != null) rs.close();
                if(pstmt != null)pstmt.close();
                if(con != null) con.close();
                if(writer != null) writer.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}

27번 코드에 DBMS 연결을 위한 정보를 정확히 입력해야 합니다. 42번 코드는 파악할 필요가 없는 테이블의 이름으로 변경하면 되구요. 52번째 코드에서 각 테이블에 대해 살펴보고자 하는 SQL 문을 지정하고 있는데요. 여기서는 최근에 저장된 3개의 레코드만을 조회하고 있습니다. 이 부분은 DBMS의 테이블에 맞는 쿼리로 구성해야 합니다. 최종 결과는 19번 코드에서 지정한 D:/text.txt 파일로 저장됩니다.

GLSL를 이용한 그래픽 효과

3차원 그래픽에서 특수 효과는 쉐이더를 통해 대부분 구현됩니다. 이 글은 간단한 GLSL 쉐이더 코드를 통해 물과 불에 대한 효과를 소개합니다.

먼저 불에 대해 구현하고자 하는 모습은 다음과 같습니다.

다음은 물에 대한 결과입니다.

전체 소스코드는 아래 링크를 통해 다운로드 받으실 수 있습니다. 웹기반에서 구현된 코드이므로 js와 css, html 파일로 구성되어 있으며 WebGL 2.0으로 쉐이더 코드가 실행됩니다.