🎥 절두체 컬링과의 전쟁

🧱 절두체 컬링 이슈

🌀 문제 상황

Three.js에서 Points 객체를 이용해 입자 기반으로 오브젝트를 구성하고 있었는데, 이상하게도 특정 카메라 위치나 거리에서 일부 오브젝트가 렌더링되지 않는 현상이 발생했다.

직접적인 원인을 추적해본 결과, 이는 Three.js의 절두체 컬링(Frustum Culling) 때문에 발생한 이슈였다.

❗ 절두체 컬링이란?
카메라의 시야(절두체) 밖에 있는 오브젝트를 자동으로 렌더링 대상에서 제외하여 성능을 최적화하는 기술이다.

하지만 내가 동적으로 생성한 THREE.Points 오브젝트는 boundingSphere가 자동으로 업데이트되지 않아서 절두체 밖으로 인식되었고, 그 결과 렌더링되지 않는 상황이 벌어졌던 것이다.

절두체 안	절두체 밖

---

🔍 절두체(Frustum)란?

Three.js와 같은 3D 그래픽 라이브러리에서 절두체(Frustum)는 카메라가 "볼 수 있는 공간"을 의미한다.
정확히 말하면 카메라가 바라보는 방향을 기준으로 잘린 피라미드 형태의 공간이며, 이 공간 안에 있는 객체들만 렌더링된다.
이는 GPU 리소스를 절약하고 렌더링 성능을 높이기 위한 중요한 최적화 기법 중 하나다.

---

📷 절두체 구조 이미지

• Near Plane: 가장 가까운 렌더링 거리 (보통 0.1 ~ 0.5)
• Far Plane: 가장 먼 렌더링 거리 (기본 1000 또는 그 이상)
• Frustum 안에 들어 있는 오브젝트만 렌더링됨
• 바깥에 있는 오브젝트는 절두체 컬링(Frustum Culling) 에 의해 렌더링되지 않음

🔍 디버깅 및 해결 과정

📌 아래는 디버깅 중 진행했던 단계별 로그다.

1. 현상 재현
   • 카메라를 위로 이동시키면 특정 Y값 이상에서 오브젝트가 사라짐.(생성은 확인됨)
   • Points가 분명히 씬에 존재하지만 화면에 보이지 않음.
2. 문제 원인 파악
   • geometry.computeBoundingSphere() 를 명시적으로 호출하지 않아 Three.js 내부에서 절두체 교차 판정이 제대로 되지 않음.
3. 해결 방법 적용
   • 동적으로 생성한 geometry에 수동으로 computeBoundingSphere()를 호출
   • 임의의 boundingSphere를 직접 설정하는 방식도 시도:

    geometry.computeBoundingSphere();

    geometry.boundingSphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0), 25);

4. 렌더링 정상화 확인
   • 해당 처리를 적용한 이후, 오브젝트가 정상적으로 보이기 시작했고 컬링도 더 이상 문제되지 않음.
   • boundingBox는 실패

---

💡 배운 점

• Points, InstancedMesh 등 동적으로 구성한 Geometry에는 bounding 정보가 업데이트 되지 않는 경우가 있으므로, 절두체 컬링을 고려한 별도의 처리가 필요하다.
• Three.js에서 성능 최적화를 위해 제공되는 기능들이 때로는 오히려 렌더링 이슈의 원인이 될 수 있음.
• 특히 복잡한 인터랙션을 도입할 경우, 단순한 렌더링 이상을 의심하고 내부 구조를 점검할 필요가 있다.
• 동적으로 BoundingSphere를 계산해주는 것보다 최적화를 위해 BoundingSphere의 초기 값을 설정해줄 필요가 있다.

---

🔜

이번 절두체 컬링 문제를 해결하며, 이제 비주얼적으로 보다 안정된 환경을 만들 수 있게 되었다.