I'm facing an issue where I am attempting to overlay two scenes in my rendering process, but the second scene is completely removing the content of the first scene.
Here is how my renderer is set up:
this.renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: false,
preserveDrawingBuffer: true
});
this.renderer.autoClear = false;
I have included the preserveDrawingBuffer property because I require exporting a portion of the renderer as a PNG and need it to maintain its buffer.
After setting up my first scene, I create a composer for it as follows:
let renderPass = new THREE.RenderPass(this.scene, this.camera);
var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
effectCopy.renderToScreen = true;
var rtParameters = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
stencilBuffer: true
};
this.composer = new THREE.EffectComposer(this.renderer,
new THREE.WebGLRenderTarget(this.width, this.height, rtParameters));
this.composer.setSize(this.width, this.height);
this.composer.addPass(renderPass);
this.composer.addPass(effectCopy);
Next, I create my second scene, and its composer is similar to the first one, with the addition of a THREE.FXAAShader to its composer.
Lastly, my update function is structured like this:
update() {
this.renderer.clear();
// They're actually different sizes and positions, so I move the viewport accordingly. This code snippet shows them as same for simplicity.
this.renderer.setViewport(0, 0, this.width, this.height);
this.composer1.render();
this.renderer.setViewport(0, 0, this.width, this.height);
this.composer.render();
...
}
I have experimented with changing the backgrounds of the scenes, and adjusting the renderers' properties like alpha, autoClear, and preserveDrawingBuffer, but so far, I haven't been able to resolve the issue.
DEMONSTRATION
Here is a Jsfiddle example of the two scenes where one scene is overshadowing the other.