Rendering multiple scenes with RenderPass

Questions
1

Hello, I’m trying to figure out if it’s possible to render 2 scenes using postprocessing so that the objects in one scene are drawn in front of the objects in the other scene while also maintaining per-scene postprocessing.

I’m able to render 2 scenes using the normal render pipeline, here’s an example where you can see that the grey box is always drawn in font of the blue box. fiddle, normal rendering

But when I attempt this same setup using postprocessing, I run into issues. Here’s an example where I’m combining the 2 scenes plus BokehPass (DoF) which results in drawing issues. And if I remove the BokehPass then only the foreground scene will draw: fiddle, postprocess rendering

Ultimately what I’m trying to do is have the DoF postprocessing affect only the background scene objects and not the objects in the foreground scene. If this is even possible? I found this post which suggests to me that it is possible but I can’t seem to assemble the right bits to make it work.

It could be that I just have a fundamental misunderstanding about how scene layering works. I’ve looked into layers and multiple cameras etc but I think using 2 Scenes and RenderPass’ is the right approach.

2

i don’t have a plain three example but just watch line 21 and 45 and ignore the rest: r3f hud - CodeSandbox

gl.autoClear = true
gl.render(scene, camera)

gl.autoClear = false
gl.clearDepth()
gl.render(hudScene, hudCamera)
3

Thanks, that was exactly the set of clues I was looking for!

The mistake I made is that I was adding the foregroundScene and the backgroundScene to the EffectComposer along with the Bokeh.

Basically I just had to remove the foregroundScene from the composer and change the renderers to update like so:

function updateRender() {
  composer.render(0.1);
  renderer.clearDepth();
  renderer.render(fgScene, camera);
}

Here’s the updated fiddle.

3 Likes