[threeJS] 최적화

Performance Optimization (성능 최적화)

 

1. Geometry Merging: 여러 개의 작은 지오메트리 대신 하나의 큰 지오메트리로 병합함으로써 draw call을 줄일 수 있습니다.
2. LOD (Level of Detail): 카메라에서 멀리 떨어진 객체는 상세 수준을 줄여 렌더링합니다. Three.js는 이를 위한 THREE.LOD 클래스를 제공합니다.
3. Culling: 화면 밖의 객체는 렌더링하지 않습니다. 이는 Three.js가 자동으로 수행하지만, 추가적인 제어가 필요한 경우 직접 구현할 수도 있습니다.
4. Texture & Material Optimization: 불필요하게 큰 텍스처나 복잡한 재질을 사용하면 성능에 영향을 줄 수 있습니다. 텍스처 크기를 적절하게 조절하고 필요한 경우 mipmapping을 활용하세요.
5. Shaders Optimization: 커스텀 쉐이더를 사용하는 경우, 최적화되지 않은 쉐이더 코드는 성능에 큰 영향을 미칠 수 있습니다.
6. Use Mesh Instancing: 같은 모양의 객체를 여러 번 그리는 경우, Mesh Instancing을 사용하여 성능을 개선할 수 있습니다.
7. Limit Lights: 조명의 수를 제한하고, 필요한 경우에만 그림자를 사용합니다. 조명과 그림자는 계산 비용이 높을 수 있습니다.
8. Use Buffer Geometry: 가능한 경우 THREE.BufferGeometry를 사용하여 메모리 사용을 효율화합니다.
9. Animate Only What's Necessary: 모든 프레임에서 전체 씬을 렌더링하지 않고, 변화가 있는 부분만 렌더링하면 성능을 향상시킬 수 있습니다.
10. Tools & Profiling: 브라우저의 성능 프로파일링 도구를 사용하여 병목 현상을 찾고, Three.js의 renderer.info를 통해 렌더링에 대한 통계를 확인하세요.