ThreeJS
최근에 three.js 를 통해 UI/UX 를 구현하는 사이트들을 보고서 해당 라이브러리를 익혀보고자 관련 도큐를 찾아보고 샘플 코드들을 찾아보게 되었다. 이를 통해 배운 내용들을 앞으로도 블로그에 포스팅 해볼 예정이다.
WebGL
Three.js 는 WebGL 을 통해 좀 더 편하게 개발자가 3D 를 구현할 수 있게 해주는 라이브러리다.
WebGL 은 대부분의 브라우저 위에서 동작 가능하며 GPU 를 통해서 렌더링을 하기 때문에 속도가 빠른 편이라고 도큐에서는 설명한다. 실제로도 MACBOOK AIR M2 에서 대략 1000 개 이상의 도넛을 렌더링 해봤는데 1초 이하의 시간이 걸렸었다. 이러한 빠른 계산이 가능한 이유는 GPU 는 1000개 이상의 병렬계산이 가능하기 때문에 1000 개 정도의 도넛을 렌더링 하는 건 오래 걸리지 않는다고 한다.
문제는 WebGL 을 통해 Rendering 하기 위해서는 렌더링 하고자 하는 모델의 꼭지점을 좌표로 나타내고 이를 어떤 화면에 어떤 방식으로 보여줄지에 대해서 정보를 같이 반영해야 한다고 한다. 도큐에서는 단순한 삼각형 하나를 렌더링하기 위해서 native WebGL 을 쓰면 100 줄의 코드가 필요하다는데 Three.js 가 이러한 부분을 좀 더 편하게 개발할 수 있도록 도와주는 라이브러리라고 소개를 하고 있다.
Basic Concept
Three.js 로 간단한 예제를 구현해보면서 어떻게 렌더링을 할 수 있는 지 배워볼 수 있었다.
Install
npm install threeDescription
Three.js 를 통해서 3D 를 구현하기 위해서는 다음의 4 가지가 반드시 들어가야 한다.
- Scene
- Object
- Camera
- Renderer
Scene
모바일 화면을 개발하기 위해서 Screen 을 만드는 것처럼 3D Model 을 렌더링 하기 위해서는 이를 올려둘 Scene 이 필요하다.
const scene = new THREE.Scene();Object
Scene 위에 올라가는 것, 즉 내가 렌더링 하고자 하는 모든 것을 의미한다.
이번 예제에서는 Cube 라는 모델을 올리는데 이러한 모델을 Mesh 라고 Geometrics 와 Material 로 구성된다.
Three.js 에서 제공하는 기본 Geometrics 는 BufferGeometrics 를 상속받아 구현한 것으로 3D 공간에 구현하고자 하는 좌표, 꼭지점으로 이해하면 된다. 이를 구현하기 위해서는 Metrics 를 제공해야 하는데 3열로 구성해서 배열 형태로 넣어주면 된다. 각 열은 순서대로 x, y, z 를 의미한다.
Material 은 이러한 Geometrics 에 Shape 을 입혀주는 것으로 보면된다. 때문에 색상, 텍스쳐 등의 속성들을 argument 로 넣어주게끔 구성되어 있다. 재미있는 부분은 Light 를 구현할 때 이러한 Material 을 어떻게 구성하는지에 따라서 반사가 되는 Object 가 될 수도 있고 나무와 같은 질감의 Object 를 구현할 수도 있다.
Camera
Rendering 하고자 하는 Object 를 구현하고 이를 Scene 에 추가를 한다고 바로 화면에서 볼 수 있는게 아니다. 이러한 렌더를 보기 위한 Camera 를 생성하고 이를 Scene 에 같이 올려야 우리가 렌더링 하고자 하는 Object 를 볼 수가 있다. Camera 도 여러 종류가 있었는데 그 중에서 써본 카메라는 PerspectiveCamera 다. 가장 일반적인 카메라로 각도와 Aspect Ratio 를 넣어 초기화 하면 쓸 수 있다.
Renderer
JS 의 requestAnimationFrame 을 재귀호출 하면서 애니메이션 효과를 구현할 수 있는 것처럼 Three.js 또한 Canvas 를 활용한 라이브러리이기에 이러한 프로세스가 있는 것으로 보인다. Three.js 에서 제공하는 WebGLRenderer Class 가 있고 이를 통해서 Scene 에 추가한 Object 를 화면에 렌더링 할 수 있다.
정리
샘플 코드만 따라해봐도 이러한 Three.js 를 통해서 쉽게 3D 를 구현할 수 있긴 하지만 알아야 하는 배경지식들이 꽤 많다. 이번 포스팅은 기본적인 요소를 다시 한 번 정리를 해보고자 작성한 포스팅이지만 배운 내용들을 가지고 웹사이트 또는 모바일을 개발해서 호스팅 해보면 좀 더 재미있을 거 같아 프로젝트를 같이 진행해보려고 한다.
