CODEWITHSUNDEEP
javascriptthree.jstransparencyviewport
João David
João David

Reputation: 157

Overlapping viewports with three.js

I'm trying to make a camera (gui camera) render above the scene camera. My ideia was to set the gui camera to have a transparent background, and so it would be possible to see through it, but it is not working as I expected.

I defined the renderer like:

renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);

And I am trying to render like so:

// Render Main Camera
renderer.setClearColor(0x000000, 1);
renderer.render(scene, sceneCamera);

// Render GUI Camera
renderer.setClearColor(0x000000, 0);
renderer.render(scene, guiCamera);

I used this https://threejs.org/examples/webgl_multiple_views.html as an example for multiple viewports but it's different since their viewports aren't overlapping.

Thanks in advance.

Upvotes: 1

Views: 1186

Answers (1)

pailhead
pailhead

Reputation: 5431

To elaborate on the comment. By default three will clear your frame buffer before you call .render(). So if you call it several times the effect would be as if you only called the last one.

If you set renderer.autoClear = false you will disable this feature. If you move your camera for example you'll see streaking as your objects from different frames get painted one on top of another.

Hence calling renderer.clear() before your first render would allow you to paint the same frame with several .render() calls.

It might make sense to use something like const guiScene = new Scene() and put your UI objects in there.

Upvotes: 2

Related Questions