SSR Pass is not compatible with SSAO pass

I’ve got a silly question. I want to use Both SSR and SSAO. However, it only works one at a time. How can I do like multiply or overlay two effects together?

Code right now, the sequence is like this.

import { SSRPass } from "three/examples/jsm/postprocessing/SSRPass"
import { SSAOPass } from "three/examples/jsm/postprocessing/SSAOPass"

const ssrPass = new SSRPass({
    width: innerWidth,
    height: innerHeight,
    selects: selects,

  ssrPass.renderToScreen = false;

  const ssaoPass = new SSAOPass(scene, camera);
  ssaoPass.renderToScreen = false;




didn’t help the issue at all.

First SSAO works fine, then if SSR is enabled, it seems SSAO is overwritten by SSR.
It looks like only one pass can be used at a time.

Based on my research, it might need a mask pass to get this to work?

Any help is much appreciated!

Yes, not chainable now ~

SSAOPass and SSRPass share many same inputs: Beauty / Depth / Normal ( in fact current SSRPass’ structure started from copy codes from SSAOPass ).

I think the easiest way should render these inputs first then apply SSAO and SSR effects.

But this way seems too specific to the two passes.

AFAIK, currently, the EffectComposer can only chain passes one by one. The more general way should modify the EffectComposer to let it support multi-inputs?

I’ll try both.


both these effects are rendering the input passes it requires inside the pass itself.

Beauty , depth & normal are being rendered twice in each pass .

So SSR and SSAO are currently not chainable

1 Like

@Vr_Tech Partly ok.

Now SSAOPass and SSRPass can chain beauty render result.
But still render Depth / Normal for themselves, I’ll keep separating these inputs.

PS: Because the demo scene is too small, I can’t make the SSAO effect obviously, but it really exists.

1 Like

@gonnavis This is amazing! I think this would work with any scene. :star_struck: I’ll try with a larger one but this looks great so far.

1 Like