AlexKempton AlexKempton - 4 months ago 19
Javascript Question

three.js: cubemap and renderer.autoclear = false

I have two scenes which I am rendering separately and overlaying, so have

renderer.autoClear
set to
false
. I am using
renderer.clear()
inside the rendering loop, and all is well:

// This works fine!
renderer.clear();
renderer.render( bgScene, bgCamera )
renderer.clearDepth();
renderer.render( scene, camera );


However, I have now added a cubecamera to the scene, to make a reflective object. Unfortunately, having
renderer.autoClear
set to
false
is causing issues, where the texture of the reflective object isn't clearing when the surroundings change, causing that typical "painting" effect:

// Causes "painting" effect
cubeCamera.updateCubeMap( renderer, scene );


Here is a simplified fiddle that replicates the issue. I haven't included the two scenes, to keep things simple. I am aware that this could actually be a bug in the library, in which case I'll post it up in the repo.

https://jsfiddle.net/pqoz74rf/4/

Answer

Problem solved by the great WestLangley, over on github. Auto clear must be on when updating the cubemap but can be switched off again for other parts of the render.

renderer.autoClear = true;
cubeCamera.updateCubeMap( renderer, scene );

renderer.render( bgScene, bgCamera )
renderer.autoClear = false;

renderer.clearDepth();
renderer.render( scene, camera );

Updated fiddle: https://jsfiddle.net/pqoz74rf/6/

Comments