Layering Two Scenes Together?

Questions
1

Hey All,

So I basically want to render a blurred version of my scene behind an unblurred version of my scene. The goal was to essentially create “colored glows” behind an image quad.

The methodology I have been using right now goes like this:

  1. Create two Meshes, one with layer set to 0 and one with layer set to 1
  2. Create an effect composer with the h & v blur passes.
  3. Set renderer autoClear to false
  4. On every RAF loop note using typescript
    this.renderer.clear();
    this.camera.layers.set(this.blurLayer); //blurLayer is 1
    this.blurComposer.render(dT); //dT just delta time from ThreeClock
    this.renderer.clearDepth();
    this.camera.layers.set(0);
    this.renderer.render(this.scene,this.camera);

So essentially I am rendering camera layer 0 on top of a blurred camera layer 1. It worked smoothly in v115.0 but in the more recent versions its been causing jank and Chrome errors such as “took N seconds to complete the Request Animation Frame”

Is there something I am not cleaning up properly? Or is there a better method to doing this?

Thanks!

2

Um, I don’t understand why you are using two meshes and layers. A single mesh should be sufficient. The idea is to use EffectComposer with an instance of RenderPass (representing your beauty pass) and two instances of ShaderPass for using HorizontalBlurShader and VerticalBlurShader to produce the blurred image. Next, you render you scene normally again and mix it with the blurred image.

Ideally, you perform the beauty pass only once and reuse it for making the blurred image and the final composition.

BTW: If you are not sharing a link to you app, it won’t be possible to say something about performance.

1 Like
3

Hey Mugen,

Thanks for the reply. After trying to put out a demo version for you to see I noticed that the performance was better. So I looked at the differences between my local and demo that I was building on Stackblitz, and it was that I had “renderer.outputEncoding = sRGBEncoding;”. I think I had this line in previous three versions and it just stayed in as I upgraded versions. When I removed it, everything was smooth again.

And in terms of the single mesh, I wanted to have the “blurred mesh” use a different shader to add movement.

4

Okay, in this case it makes sense to have two of them :+1:.