3D 모델링과 좌표계 설계 그리고 최적화 (작성중)

맨땅에 헤딩은 아프다 하지만 개발해야만한다.

개요

DOMS 프로젝트를 하면서 3D 모델링을 하기 위해 다뤘던 기술적인 내용들이다.

WebGL 이란

Web Graphics Library 의 약자로 2D 및 3D 를 렌더링 하기 위한 JavaScript API 이다. OpenGL ELS2.0 기반으로 HTML5 의 Canvas 위에 그려진다.

Three.js

일반적인 웹개발자들이 쉽게 WebGL 을 활용할 수 있도록 친절히 three.js 라는 라이브러리를 만들어 놓았다. Three.js는 WebGL의 상위 레이어로, WebGL의 복잡한 API를 감싸서 더 사용하기 쉬운 API를 제공한다. 이를 통해 우리는 더 적은 코드로 강력한 3D 그래픽을 만들 수 있었다. Three.js는 내부적으로 WebGL을 사용하여 렌더링을 수행한다. WebGL 을 다루는 라이브러리는 three.js 말고도 여러가지가 있었지만, 우리는 Three.js 를 선택했다.

Babylon.js: 매우 강력한 3D 엔진으로, 게임 개발과 같은 복잡한 3D 어플리케이션을 만드는 데 적합하다. 물리 엔진, 애니메이션, 충돌 감지 등 다양한 기능을 제공한다.
PlayCanvas: 클라우드 기반의 3D 게임 엔진으로, 협업 기능이 뛰어나고 실시간으로 편집할 수 있는 기능을 제공한다. 상업적 프로젝트에 많이 사용됩니다.
A-Frame: Mozilla에서 개발한 웹 프레임워크로, 특히 VR(가상 현실) 콘텐츠 제작에 최적화되어 있다. HTML과 같은 간단한 태그를 사용하여 3D 장면을 정의할 수 있다.
PixiJS: 2D 렌더링에 중점을 둔 라이브러리지만, WebGL 기반으로 매우 빠르고 효율적이다. 2D 게임이나 애니메이션을 만들 때 많이 사용된다.

Three.js 의 기본 구성 요소

three.js 는 3차원 객체로 구성되는 장면(Scene) 이 있고, 이 장면을 모니터와 같은 출력 장치에 출력할 수 있는, 즉 렌더링 할 수 있는 Renderer 가 있다. Scene 을 렌더링할 때는 어떤 시점에서 Scene 을 보는가에 따라 다양한 모습으로 렌더링 된다. 그 시점을 Camera 로 정의한다.

다시, Scene 은 Light 와 3차원 모델인 Mesh 로 구성된다. 3차원 형상이 화면 상에 표시되기 위해서는 적절한 광원이 필요하기 때문에, light 가 필요하다.

그리고 이 mesh 는 object3D 의 파생 클래스인데, Mesh 는 형상 등을 정의하는 Geometry 와 색상 및 투명도를 정의하는 Material 로 정의된다.

보다 자세한 내용은 fundamentals 를 참조해서 보길 바란다.