SSAARenderPass + SAOPass showing weird stripes

Hey Im using the SSAARenderPass + SAOPass to get a Ambient Occlusion effect, which works. But when orbiting around I see weird stripes on the walls. Where are these coming from? How to avoid them? What else can I provide?

As you see, the stripes rotate with the camera and get bigger when zooming off.

    this._renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } )
    this._renderer.shadowMap.enabled = true
    this._renderer.shadowMap.type = THREE.PCFSoftShadowMap 
    this._renderer.setSize( this.w, this.h )
    this._renderer.toneMappingExposure = 1
    this._renderer.toneMapping = THREE.Uncharted2ToneMapping
    this._renderer.outputEncoding = THREE.GammaEncoding
    this._renderer.gammaFactor = 2

    this.composer = new EffectComposer(this._renderer)
    this.composer.setSize( this.w, this.h )

    Color.anisotropy = this._renderer.capabilities.getMaxAnisotropy()

    this.composer.setSize(this.w, this.h)
    this.ssaaRenderPass = new SSAARenderPass(this._scene,, 0x000000, 0)
    this.ssaaRenderPass.setSize(this.w, this.h)
    this.ssaaRenderPass.unbiased = true

    this.SAO = new SAOPass(this._scene,, true, true)
    this.SAO.resolution.set(2048, 2048)

    this.SAO.params.saoBias = .01
    this.SAO.params.saoIntensity = .0012
    this.SAO.params.saoScale = .3
    this.SAO.params.saoKernelRadius = 40
    this.SAO.params.saoBlurRadius = 4
    this.SAO.params.saoMinResolution = 0

camera = new THREE.PerspectiveCamera(45, w / h, .1, 100)

Can you please try to narrow the near and far plane as good as possible and check if this mitigates the issue? Do you already see an improvement when using 1 for the near plane value?

1 Like

Yes, when setting the near to 1, the lines are pretty much gone! Thanks alot.
Could you explain how the near and far are involved here shortly?

the depth has fixed amount of steps, and those steps are shorter if far-near is small

1 Like

The screen-space ambient occlusion approaches are very sensitive in context of depth precision. A large view frustum can quickly make such AO passes unusable.

By adjusting the camera far and near i could solve this issue in all major devices bt in ios safari its still exist i have adjusted the near and far to the maximum where the object can be shown in the scene. Any other suggestions?

I was facing the exact same issue. Tried everything from changing near , far, saoBais, all possible antialiasing etc…

Eventually got i resolved by simple enabling logarithmicDepthBuffer: true when initialising the WebGLRenderer.

As per the docs, Enabling might cause a dip in performance, so be considerate about using it as per your performance budget.

Hope this might fix your issue too.