WebGL 시대의 퍼포먼스

WebGL은 웹 경험에 새로운 차원을 열어주어, 브라우저에서 직접 풍부한 3D 그래픽을 가능하게 했습니다. 하지만 큰 힘에는 큰 책임이 따릅니다. 최적화되지 않은 Three.js 씬은 빠르게 브라우저를 무력화시킬 수 있습니다. 퍼포먼스는 나중에 생각할 문제가 아닙니다; 그것은 사용자 경험의 핵심 구성 요소입니다.

핵심 최적화 기법

• 지오메트리 인스턴싱: 단일 드로우 콜로 동일한 오브젝트의 여러 복사본을 렌더링합니다.
• 텍스처 아틀라싱: 여러 텍스처를 단일 이미지로 결합하여 HTTP 요청과 GPU 메모리 사용을 줄입니다.
• 레벨 오브 디테일 (LOD): 카메라에서 멀리 떨어진 오브젝트에는 더 단순한 모델을 사용합니다.
• 셰이더: 커스텀 GLSL 셰이더를 사용하여 복잡한 계산을 CPU에서 GPU로 오프로드합니다.

// Three.js에서 InstancedMesh 사용 예시
const mesh = new THREE.InstancedMesh(geometry, material, count);
scene.add(mesh);