SSAO used with EffectComposer - How to enable NormalPass

Questions
,
1

I’m trying to use an Screen Space Ambient Occlusion effect from @react-three/postprocessing library.

So here is what I wrote:


import { EffectComposer, SSAO } from "@react-three/postprocessing";
import { BlendFunction } from "postprocessing";

// doc : https://docs.pmnd.rs/react-postprocessing/effects/ssao
// doc : https://docs.pmnd.rs/react-postprocessing/effect-composer 

function Effects() {

  return (
    <EffectComposer>
      <SSAO
        blendFunction={BlendFunction.MULTIPLY} // blend mode Use NORMAL to see the effect
        samples={30} // amount of samples per pixel (shouldn't be a multiple of the ring count)
        rings={4} // amount of rings in the occlusion sampling pattern
        distanceThreshold={1.0} // global distance threshold at which the occlusion effect starts to fade out. min: 0, max: 1
        distanceFalloff={0.0} // distance falloff. min: 0, max: 1
        rangeThreshold={0.5} // local occlusion range threshold at which the occlusion starts to fade out. min: 0, max: 1
        rangeFalloff={0.1} // occlusion range falloff. min: 0, max: 1
        luminanceInfluence={0.9} // how much the luminance of the scene influences the ambient occlusion
        radius={20} // occlusion sampling radius
        scale={0.5} // scale of the ambient occlusion
        bias={0.5} // occlusion bias
      />
    </EffectComposer>
  );
}


export default Effects;

And I use this module in my scene:

<div className="App">
        <Canvas
          camera={{
            fov: 22.895,
            far: 100,
            near: 0.5,
            position: [3.62, 2.734, 3.408],
            rotation: [-0.627, 0.71, 0.441],
          }}
        >
          <Lights appData={appData}/>
          <Environment preset="city" background blur={1}/>
          <ContactShadows
            resolution={512}
            position={[0, -0.8, 0]}
            opacity={1}
            scale={10}
            blur={2}
            far={0.8}
          />
          <Shoe appData={appData} configuration={models_and_config} cuirTextCat={cuirTextCat} doublureTextCat={doublureTextCat}/>
          <Effects />
          <OrbitControls
            enablePan={false}
            minPolarAngle={-1}
            maxPolarAngle={Math.PI}
            minDistance={8}
            maxDistance={20}
          />
        </Canvas>
      </div>

But I get this error in the development console:

SSAO.tsx:12 Please enable the NormalPass in the EffectComposer in order to use SSAO.
(anonymous)	@	SSAO.tsx:12
mountMemo	@	react-reconciler.development.js:8279
useMemo	@	react-reconciler.development.js:8739
useMemo	@	react.development.js:1650
SSAO2	@	SSAO.tsx:10
renderWithHooks	@	react-reconciler.development.js:7363
updateForwardRef	@	react-reconciler.development.js:11457
beginWork	@	react-reconciler.development.js:13880
beginWork$1	@	react-reconciler.development.js:19513
performUnitOfWork	@	react-reconciler.development.js:18686
workLoopSync	@	react-reconciler.development.js:18597
renderRootSync	@	react-reconciler.development.js:18565
performConcurrentWorkOnRoot	@	react-reconciler.development.js:17836
workLoop	@	scheduler.development.js:266
flushWork	@	scheduler.development.js:239
performWorkUntilDeadline	@	scheduler.development.js:533

I have tried to use disableNormalPass?: boolean argument of EffectComposer and set it to false to make sure normal pass is enabled but I still get the error.

(see doc here: React Postprocessing Documentation)

Can someone help me understand why I get this and how to solve it?
I have make research online but did not found anything interesting to help me more…

Thanks in advance for any help you can give

2 
<EffectComposer enableNormalPass>

btw don’t use SSAO, it’s old and slow. use N8AO, it is faster and better looking, it bases on a newer research paper.

i don’t think you need a normal pass for it, so try it without first (would be faster).

PS. sorry for the confusion, the flag was reverted (disableNormalPass → enableNormalPass) because it was on by default which is silly bc only two effects ever needed it (SSAO, SSGI). in the future it will set it automatically.

2 Likes
3

Ok big thanks for your help and advice about N8AO, it’s working really good now !