How to overlay multiple scenes with the same camera for display

[WREQI]

How to overlay multiple scenes with the same camera for display

[WREQI]

I did this without displaying the output to the screen for the content in the first scene

[WREQI]

After rendering in Composer, a new scene appears with aliasing, and anti aliasing smaa has been added

[vanruesc]

How to overlay multiple scenes with the same camera

That depends on how you define overlay.

You could try rendering one scene and then saving that image to another render target using a CopyPass. Then you could render the other scene and finally use a TextureEffect to blend the previously rendered image with the current scene.

[WREQI]

I don't quite understand. This did not successfully display two scenes

[vanruesc]

The texture for the TextureEffect should be copyPass.texture and you'll probably want to use BlendFunction.ALPHA. The TextureEffect needs to be added to an EffectPass:

const effectPass = new EffectPass(camera, textureEffect);

composer.addPass(renderPass1); // Render scene that should be blended with another scene
composer.addPass(copyPass); // Save the result
composer.addPass(renderPass2); // Render the other scene
composer.addPass(effectPass); // Blend the saved result with the current image

Setting renderToScreen is not necessary because the last pass will automatically render to screen unless composer.autoRenderToScreen is set to false.

[WREQI]

Thank you, according to your method, it was successfully displayed, but the effect is very different from the actual expected effect. 1. After adding post-processing, the object color becomes distorted. I tried setting the BlendFunction function to add, but the normal is not correct. 2. All objects in the scene Helper have perspective penetrating through the objects in the scene

[WREQI]

The last image is the original effect I want (without post-processing)

[WREQI]

@vanruesc

[vanruesc]

I'm sorry, but it's not clear to me what result you're trying to achieve.

If you're simply trying to render two scenes separately, one after another, then you can chain two RenderPass instances like you've done in the first screenshot. In that case, you must disable the internal clear pass of the second RenderPass:

const renderPass1 = new RenderPass(...);
const renderPass2 = new RenderPass(...);
renderPass2.clearPass.enabled = false;

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

[WREQI]

Color distortion, The color in Figure 1 is incorrect Figure 2 is the real color

[WREQI]

The edges will have obvious jagged edges, and the rotating arrows will disappear

this demo
https://stackblitz.com/edit/three-ez-postprocessing-external-pzgzg6?file=src%2Fmain.ts

[WREQI]

@vanruesc

[vanruesc]

If you render a blue arrow on a blue background, you won't be able to see it. The green arrow is slightly transparent, so rendering that on a blue background will yield green-blue results.

The following example uses MSAA to reduce aliasing artifacts. Please note that raising the outline edge strength above 1 will interfere with antialiasing because it expects colors to be in low dynamic range [0.0, 1.0]:

https://stackblitz.com/edit/three-ez-postprocessing-external-2zdftd?file=src%2Fmain.ts

This demo first renders the main scene. Then it applies the outline effect to that scene and finally the transform gizmo is rendered on top of that. The result is then copied to screen.

[WREQI]

I added a new box and plane to Scene2, but it encountered rendering errors @vanruesc

https://stackblitz.com/edit/three-ez-postprocessing-external-kk7sr4?file=src%2Fmain.ts