SSAARenderPass + SAOPass showing weird stripes

Questions
1

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.setClearColor(0xffffff)
    this._renderer.setPixelRatio(this.ratio)        
    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, this.camera, 0x000000, 0)
    this.ssaaRenderPass.setSize(this.w, this.h)
    this.ssaaRenderPass.unbiased = true
    this.composer.addPass(this.ssaaRenderPass)

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

    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

Bildschirmfoto 2019-12-13 um 12.48.43
Bildschirmfoto 2019-12-13 um 12.48.43997×1057 55 KB
Bildschirmfoto 2019-12-13 um 13.06.28
Bildschirmfoto 2019-12-13 um 13.06.281069×981 64.9 KB

2

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
3

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?

4

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

1 Like
5

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.

6

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?

7

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.