CODEWITHSUNDEEP
javascriptthree.js
Stemkoski
Stemkoski

Reputation: 9045

Three.js - using viewports and EffectComposer together

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?

Upvotes: 1

Views: 2173

Answers (1)

WestLangley
WestLangley

Reputation: 104783

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

Upvotes: 1

Related Questions