Postprocessing: Postprocessing on a WebGLRenderTarget

[emmelleppi]

Hello ✌🏼

I’m trying to apply postprocessing to a scene rendered inside a mesh (a cube) through a WebGLRenderTarget.

As you can see there is the main scene with 2 tori and 1 cube. Then I render on the cube material a second scene with the WebGLRenderTarget. In this second scene the background is yellow and there is a torus that rotates.
I would like to apply postprocessing only to this second scene.

Here the sandbox

I tried to pass the WebGLRenderTarget as target to the EffectComposer and the second scene (and its camera) to the EffectPass, but nothing.

Is there any way to do what i'm trying to do?

PS: Among other things, as soon as I apply the postprocessing, the ClearColor of the main scene changes from aquamarine to yellow

[vanruesc]

Hi,

I think you're looking for something like this:

const scene1 = new Scene();
const scene2 = new Scene();

scene1.background = new Color("orange");
scene2.background = new Color("aquamarine");

const renderPass1 = new RenderPass(scene1, camera1);
const renderPass2 = new RenderPass(scene2, camera2);

const savePass = new SavePass();
const effectPass = new EffectPass(camera1, effect1, effect2, effect3, ...);

someMaterial.map = savePass.renderTarget.texture;

composer.addPass(renderPass1);
composer.addPass(effectPass);
composer.addPass(savePass);
composer.addPass(renderPass2);

Note that scene.background sets the clear color, meaning that any manual change to the clear color will be overridden. Mixing manual render target management and rendering with the effect composer workflow can easily lead to bugs. It's better to create custom passes instead.

[vanruesc]

Also note that the NormalPass temporarily sets the clear color to 0x7777ff because it's supposed to render a normal map. For your use case it might be better to set renderPass.overrideMaterial to new MeshNormalMaterial().

[emmelleppi]

Ok I managed to do everything, it works 😄

Here is the link to a small demo I did yesterday.

I apply different effects depending on the scene: the scene inside the televisions has GLITCH + NOISE + VIGNETTE, the main scene has SSAO + BLOOM + VIGNETTE.

Then I tried to put a reflection on the floor but what you see in the demo is a gag 😅
I should use Three.js CubeCamera or Reflector to get that effect, but when I try to integrate them into the scene nothing works anymore. I guess it's because in their onBeforeRender they go to act on the renderer in a way that is incompatible with what I did.

So I saved the scene texture in a SavePass and reproduced it on a transparent surface resting on the floor.
I'll have to investigate how to achieve a similar effect

Thank you very much for helping 🙏

[vanruesc]

Nice, I'm glad I could help 😄 The result looks great!

Cine Shader doesn't seem to be using Reflector, so I think it's either using a CubeCamera or Screen Space Reflections.