Three.js - 뷰포트와 EffectComposer를 함께 사용합니다.

Question

최근 장면을 렌더링하는 Three.js 데모를 만든 다음 뷰포트를 창의 더 작은 섹션으로 설정하고 오버 헤드 카메라에서 장면을 렌더링하여 미니 - 지도 스타일 효과;

http://stemkoski.github.io/Three.js/Viewports-Minimap.html

관련 코드는 다음과 같습니다 : 코드에서 확인할 수있다

// w = window width, h = window height, mapWidth = minimap width, mapHeight = minimap height 
renderer.setViewport(0, 0, w, h); 
renderer.clear(); 

// full scene with perspective camera 
renderer.render(scene, camera); 

// minimap with orthogonal camera 
renderer.setViewport(0, h - mapHeight, mapWidth, mapHeight); 
renderer.render(scene, mapCamera); 

... 그리고 그것이 마치 마법처럼 작동합니다.

자, 장면에 후 처리를 추가하여이 예제를 확장하고자합니다. THREE.EffectComposer을 composer으로 설정하고 적절한 렌더링 과정을 추가했으며 위 코드에서 renderer.render(scene, camera)을 composer.render()으로 바꿨지 만 이제는 미니 맵이 사라집니다. 라이브 예제는 http://stemkoski.github.io/Three.js/Viewports-Minimap-Effects.html을 참조하십시오.

이 예제를 어떻게 수정합니까? 더 구체적으로, EffectComposer의 설정이 나중에 뷰포트 렌더링과 함께 작동하도록 설정해야합니까? 또는 더 좋게도, 뷰어를 사용할 수있는 두 번째 RenderPass를 작곡가에 추가 할 수 있습니까?

Answer 1

처음 보았을 때부터 코드를 변경 한 것처럼 보였지만 원래 질문에 따라 미니 맵을 렌더링하기 전에 깊이 버퍼를 지워야합니다.

renderer.clear(false, true, false); 
renderer.render(scene, mapCamera); 

코드를 작성하지 않고 작동했다면 나는 운이 좋았다고 생각합니다.

또한 OrthographicCamera.near은 양수 여야하므로 근거리 평면이 카메라 앞에 있습니다. 정사각형 카메라를 약간 뒤로 이동시켜 근거리 평면을 합리적인 양수 값으로 설정합니다.

OrthographicCamera.left (.right/.top/.bottom)은 월드 좌표로 표시되어야하며 픽셀 단위의 창 크기 함수가 아닙니다.

three.js r.62