I recently created a Three.js demo that renders a scene, and then sets the viewport to a smaller section of the window and renders the scene from an overhead camera, creating a mini-map style effect; the code is available at:
http://stemkoski.github.io/Three.js/Viewports-Minimap.html
The relevant code snippet 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 );
// minimap with orthogonal camera
renderer.setViewport( 0, h - mapHeight, mapWidth, mapHeight );
renderer.render( scene, mapCamera );
...and it works like a charm.
Now, I want to extend this example by adding some postprocessing to the scene; I've set up a THREE.EffectComposer
called composer
, added the appropriate rendering passes, and I switched renderer.render( scene, camera )
in the code above with composer.render()
, but now the minimap disappears; see http://stemkoski.github.io/Three.js/Viewports-Minimap-Effects.html for a live example.
How can I fix this example? More specifically, are there settings in EffectComposer
that need to be set to work in conjunction with a viewport render afterwards? Or even better, is it possible to add a second RenderPass to the composer that allows us to use a viewport?