Waylog Blog

WebGL과 Three.js로 3D 웹 경험 구현하기: 평면을 넘어서

Frontend

애플의 제품 소개 페이지를 보면 스크롤에 따라 제품이 360도로 회전하거나 분해되는 화려한 애니메이션을 볼 수 있습니다. 동영상인가 싶지만, 마우스로 돌려보면 반응합니다. 이것이 바로 3D 웹입니다.

1. WebGL (Web Graphics Library)

브라우저에서 GPU를 사용하여 3D 그래픽을 렌더링 할 수 있게 해주는 저수준(Low-level) API입니다. OpenGL ES 2.0을 기반으로 합니다. 문제는 이게 너무 어렵다는 겁니다. 삼각형 하나 그리는데 코드 수십 줄을 짜야합니다(셰이더, 버퍼, 행렬 계산 등).

2. Three.js: 3D 웹의 제이쿼리

WebGL을 쉽게 다룰 수 있게 추상화해 준 라이브러리입니다. 현재 웹 3D 표준이나 다름없습니다.

2.1 3대 필수 요소

Three.js로 무언가를 보여주려면 3가지가 필요합니다.

  1. Scene (장면): 물체들을 배치할 공간. 무대.
  2. Camera (카메라): 그 장면을 바라보는 시점.
  3. Renderer (렌더러): 카메라에 담긴 장면을 <canvas> 태그에 그려주는 놈.

2.2 Mesh (물체)

Mesh는 **Geometry(모양)**와 **Material(재질)**의 결합입니다.

  • new BoxGeometry(): 정육면체 모양
  • new MeshStandardMaterial({ color: 'red' }): 빨간색 재질
  • new Mesh(geo, mat): 빨간 정육면체 탄생!

3. R3F (React Three Fiber)

React 생태계에서는 Three.js를 컴포넌트 방식으로 래핑 한 R3F를 많이 씁니다.

<Canvas>
  <mesh>
    <boxGeometry />
    <meshStandardMaterial color="red" />
  </mesh>
</Canvas>

선언적이고 직관적입니다.

메타버스나 인터랙티브 웹이 뜨면서 3D 웹 개발 능력은 희소성 있는 강력한 무기가 되고 있습니다.