Threejs 에서 카메라가 가까워지면 객체가 사라지는 현상 Shader의 절두체 컬링 비활성화 방법

카메라 범위를 벗어나는 경우 객체 전체의 렌더링이 비활성화되는 증상

해당 문제는 카메라가 절두체 컬링 처리에 의해 원 포지션을 벗어나는 경우 아예 렌더링하지 않는 증상으로, 포지션을 벗어나더라도 렌더링하게끔 하기 위해 원본 메시에 대해 frumstumCulled를 비활성화해야 한다.

필자의 경우 Shader 과 Instance 처리를 통해 하나의 메시 데이터를 원점에서 생성하고, 수 많은 인스턴스를 버퍼에 복제, 그리고 각 인스턴스마다 attribute를 임의 할당하여 대량 출력하는 방법을 사용하였다. 해당 방법을 사용해서 인스턴스 출력의 최적화를 수행할 수 있다.

상기 코드와 같이 원본 지오메트리에 대해 인스턴스 버퍼 공간을 만들고, 인스턴스 어마운트 설정을 통해 개수를 지정, 각 인스턴스에 대해서 Attribute를 지정하였다.

하나의 인스턴스 처럼 처리하여 각각의 인스턴스에 대해서 렌더링되는 버텍스의 포지션을 변경하도록 쉐이더를 구현하였다. 하지만 위와 같이 수행하니 최초 생성하는 카피본의 인스턴스 범위를 벗어나 음수 영역으로 이동하니 렌더링해야 하는 또 다른 인스턴스가 있음에도 불구하고, 절두체 처리에 의해 모든 입자의 출력이 사라지는 증상을 확인할 수 있었다. 해당 문제를 해결하기 위해 원본 메시의 절두체 옵션을 비활성화 해주었다.

만약 메시가 하나가 아니라, 다양한 메시와 부모 관계에 있는 메시인 경우, traverse 로 순회하면서 모든 메시에 대해서 절두체 컬링을 비활성화할 수 있다.

다시 출력 하면 제대로 렌더링되는 것을 확인할 수 있다.