SSAO used with EffectComposer - How to enable NormalPass

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 :
// doc : 

function Effects() {

  return (
        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

export default Effects;

And I use this module in my scene:

<div className="App">
            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}/>
            position={[0, -0.8, 0]}
          <Shoe appData={appData} configuration={models_and_config} cuirTextCat={cuirTextCat} doublureTextCat={doublureTextCat}/>
          <Effects />

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

<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.


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