I recently developed an innovative Three.js demo that displays a scene and then adjusts the viewport to show a smaller section of the window with an overhead camera, creating a mini-map effect. You can access the code here:
The key portion of the code is:
// 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 );
// Mini-map with orthogonal camera
renderer.setViewport( 0, h - mapHeight, mapWidth, mapHeight );
renderer.render( scene, mapCamera );
This setup works flawlessly.
Now, my goal is to enhance this demo by adding postprocessing effects to the scene. I have initialized a THREE.EffectComposer named composer, included the necessary rendering passes, and replaced renderer.render( scene, camera ) with composer.render() in the code snippet above. However, upon making this change, the mini-map disappears. You can view the updated example live here:
How can I rectify this issue? Specifically, are there configurations within EffectComposer that need to be adjusted to work seamlessly with a viewport render afterward? Alternatively, is it feasible to incorporate a second RenderPass into the composer to enable the use of a viewport?