Three.js 에서 대상을 멀리서 봤을 때 자글거리는 증상

Three.js를 사용하여 대상을 표현하는데 자글거리는 증상이 나옵니다.

카메라를 이동해서 가까이 가면 증상이 나오지 않지만 멀리 떨어지면 나오는 증상이었습니다.

대상을 구성하는 요소들이 겹치면서 자글거리는 것 같다고 생각이 들었지만 어떻게 처리해야 하는지 알 수 없었습니다.

그러다가 다음과 같은 글을 찾았습니다.

https://github.com/jeromeetienne/AR.js/issues/401

댓글에 나와있는 답변에서 아래와 같은 내용을 봤습니다.

var renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true,
    logarithmicDepthBuffer: true
});

공식 문서에서 "WebGLRenderer" -> "logarithmicDepthBuffer" 항목을 찾아보니 다음과 같은 설명과 예시를 볼 수 있었습니다.

https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer
( ctrl + f -> logarithmicDepthBuffer 검색 )

https://threejs.org/examples/#webgl_camera_logarithmicdepthbuffer

이 옵션은 깊이에 관련된 옵션으로 보였고, 옵션을 적용하니 문제는 쉽게 해결되었습니다.