1

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?

1 Answer 1

1

You appear to be changing the code since I first looked at it, but based on your original question, you need to clear the depth buffer before you render the mini-map.

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

If your code was working without doing that, I think you were just lucky.

Also, OrthographicCamera.near should be a positive number, so the near plane is in front of the camera. Move your orthographic camera back a bit, and set the near plane to a reasonable, positive value.

OrthographicCamera.left ( .right/.top/.bottom ) should be in world coordinates -- not a function of the window size in pixels.

three.js r.62

1
  • I found a work-around using a second composer to generate the minimap; apparently my luck derived from using either no composers or all composers. You're absolutely right about clearing the depth buffer; I also switched to world coordinates for left/right/top/bottom, which is much nicer to read. Having the near plane value be positive makes much more sense and is consistent with perspective camera settings. Thanks again; as usual, you've taught me some new things and I appreciate your time :)
    – Stemkoski
    Nov 2, 2013 at 3:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.