WebGL / Three.js - 시작하기 ( Getting Started ) #03

Three.js 를 이용한 WebGL 살펴보기. 무려 "Getting Started"으로만 3일째 정리 글이다. 회사를 퇴근하고나서 실험해보고 연습하다 정리를 하려니 진도가 많이 나가지는 못한다. 태풍 볼라벤이 수도권에 영향을 직접적으로 끼치고 간 날이기도 한 오늘 "Getting Started" 에 사용된 자바스크립트 함수나 변수를 간단히 살펴보고 마무리 지어보도록 하자.

 

 

 

비쥬얼 스튜디오와 IE9 (Internet Explorer 9) 를 이용해 디버깅을 시도해 보았다가 재대로 지원하지 못해 오류를 띄우는 관계로 다소 생소한 크롬 개발자도구를 이용해 분석 및 살펴보기에 들어갔다.

 

 

 

먼저 『 THREE.WebGLRenderer() 』 함수를 살펴보았다. 최소화 되어 있는 min.js 이다보니 암호화 및 모두 붙어있어 알아보기는 힘들지만 내부적으로 결코 간단하지 않은 양의 처리가 이루어지는 것을 볼 수 있다. 자세한 내용은 최소화 버젼이 아닌 풀버젼의 js 파일을 열람해보면 볼 수 있다.

 

 

결과적으로 『 THREE.WebGLRenderer() 』 처리가 이루어진 후의 『 var renderer 』에 생성된 값이다. 스크롤이 필요할 만큼 다양한 값들이 생성되는 것을 확인해볼 수 있다.

 

 

이번에는 14번째 줄의 body 에 추가되는 자식요소를 살펴보기위해 renderer.domElement 를 살펴봤다. 타입이 HTMLCanvasElement 로 나온다. 좀 더 목록을 살펴보자.

 

 

우선 앞서 봤던 대로 domElement 객체는 HTMLCanvasElement 로 HTML5 부터 사용되기 시작한 Canvas 요소임을 확인할 수 있다. id는 지정되어있지는 않지만 localName 과 nodeName 역시 Canvas 라는 것을 명시해주고 있다. 좀 더 살펴보자.

 

 

출력되는 형태인 outerHTML 값은 "<canvas width="1177" height="568"></canvas>" 로 앞서 살펴보았던 body 안에 추가되었던 HTML 구문과 일치한다. ownerDocument 는 해당 요소의 부모(주인)에 대한 정보로 살펴보기 위해 열람해둔 부분이므로 설명은 생략하고 넘어간다.

 

 

이번에는 『 THREE.Scene() 』 을 거쳐 초기화된 『 scene 』 를 살펴보았다. 얼핏 빛에 관련된 배열과 객체를 나타내는 배열 등 몇몇의 배열 요소가 보인다. 실질적으로 카메라나 큐브 등과 같은 객체를 생성하고나면 『 scene 』 에 add 하는 과정을 거친다. 따라서 이 『 scene 』 요소는 각각의 추가에 따라 살펴볼 거니 기억해두자.

 

 

카메라 오브젝트를 통해 초기화된 camera 의 정보이다. 이제 다시한번 scene 정보를 살펴보자.

 

 

add를 통해 카메라 객체(오브젝트)를 추가하기전의 모습이다.

 

 

add 를 통해 카메라를 추가한 후의 모습이다. 자세히보면 children 배열에 요소가 1개 추가가 되어있는 것을 확인할 수 있다. 배열 인덱스로는 0번으로 생성시에 넣어준 초기화 값 aspect, far, fov(field of view) 등이 설정되있는 것을 볼 수 있다. 또한 자세히 살펴보면 scene 은 id 값이 1이고, 카메라는 2라는 id값을 갖는것도 확인 해 볼 수 있다. 추가되는 순서대로 식별을 위해 붙여놓는게 아닌가 싶은데 확인은 차차 진행하면서 느긋하게 알아가보자.

 

 

Mesh를 통해 초기화한 cube 의 값이다. id 값이 3인것을 봐서는 역시 구분자로 id값은 순차적으로 증가하는 듯 싶다. 해당 값은 THREE 네임스페이스 안에서 관리하고 있지 않을까 라고 글을 쓰다가 생각이 문뜩 든다. 확인은 나중으로 미루고 다시 한번 add후의 모습을 봐보자.

 

 

우측의 창을 보면 scene 의 children 배열 요소를 볼 수 있다. 1번 배열 인덱스에 THREE.Mesh 요소로 방금 만든 cube 객체가 추가되어 있는 모습을 볼 수 있다.

 

 

 

객체 추가로는 마지막 요소인 빛이다. 이것도 이번에 간단히 패스해 넘어가고 다시 scene 값을 살펴보자

 

 

우측의 scene 의 children 배열의 2번 인덱스에 THREE.PointLight 가 추가되었다. scene 이 1번째 camera 가 2번째 cube가 3번째 light 가 4번째로 id 값이 4가 되어있는것도 확인했다.

 

중요한건 여기까지 오면서 브라우저에 display 되는 것은 무엇 하나 없다는 점이다. 여태까지의 과정을 디버깅을 통해 순차적으로 진행했는데 배경에는 나오는게 없었다. 마지막인 render 과정을 진행해보도록 하자.

 

 

canvas에 cube가 실질적으로 그려진 모습을 확인해 볼 수 있다.

 

디버깅 과정을 통해서 확인한 결과. 과정은 다음과 같다.

 

1. 렌더러 초기화를 통해 canvas 를 그린다.

2. 렌더링에 사용할 객체를 생성 및 초기화 하고 내부 배열에 담아 보유하고 있는다.

3. 최종적으로 초기화 및 생성하여 보유하고 있던 요소를 가지고 렌더링 과정을 통해 canvas에 그린다.

 

이런 일련의 과정을 Three.js 에서 서포트 해 주는것 같다. 아직 확인해볼 것도 많고 알아가야할 부분도 많다. 오늘은 여기까지지만 앞으로 알아야할 것도 많고 확인해야할 부분도 많다. 서두르기보다는 천천히 꾸준히 알아가보자.

 

---

초안용 메모 2012.08.28 Kinesis 작성