Postprocessing SAO makes everything blurry and pixelated

What is the resolution of your pass? This looks crazy under sampled?

The resolution of the SAOPass is 256. How to set a higher resolution? I tried

  this.saoPass.setSize(w, h) 
  this.saoPass.resolution = new THREE.Vector(1024, 1024)

Also setting resolution in FXAAShader where PixelRatio is 1

  // FXAA
  let pixelRatio = this.renderer.getPixelRatio()
  this.fxaaPass = new ShaderPass(FXAAShader)
  this.fxaaPass.material['uniforms']['resolution'].value.x = 1 / (this.w * pixelRatio)
  this.fxaaPass.material['uniforms']['resolution'].value.y = 1 / (this.h * pixelRatio)

Did you try saoPass.resolution.set(1024,1024) ?

Ah, yeah, just call .setSize(1024,1024) don’t override the resolution property. It should probably be read only anyway…

this.effectComposer = new EffectComposer(this.renderer)

// SAO
this.renderPass = new RenderPass(this.scene, this.camera)

this.effectComposer.addPass(this.renderPass)

this.saoPass = new SAOPass(this.scene, this.camera, false, true, new THREE.Vector2(1024,1024)
//OR
//this.saoPass.setSize(1024,1024)
1 Like

I removed everything unnecessary like CubeMap, glTF models, specific renderer properties, FXAA and set a higher SAO resolution (2048, 2048), but still looks unchanged.

Test Repo

It works though?

It “worked” the whole time, but thats not an acceptable result, is it? The bottom half of the torus should not be visible, the lines on the torus look weird, the ground should be the same color as the wall behind (directLight is at 45° & ambientLight position does not matter), when scrolling out, everything gets black and between ground and wall should be SAO as well. Or am I wrong?

This is with the same settings as the sao example

I’m confused. The first issue was that you were rendering 1/4 or 1/16th of the resolution and that superimposing that. Result very blocky, but blurry splotches.

Now it’s something else. I’m not sure how you are getting different results if you are copying the code. Did you try with the balls from the example, not the plane and such?

Oh sorry I forgot to mention that I had different SAO settings in the first picture and changed to the settings of the example in the second

You do realize this is hard to debug if the parameters keep changing? The first pictures show severe undersampling. Youre showing a big image, with a smaller one superimposed (the result of your composition probably). This other one seems to work fine resolution wise (in parts AO looks correct) but it’s not being applied correctly to the geometry.

I strongly advise making a fiddle.

Ill keep the example settings now. Although this does not really matter, because you can tweak the example settings around and it will never look like the pics i posted.

And I dont think that AO looks correct, does it? Why is it brighter in the corner between ground and wall. This is where i gets dark actually. Also the bottom half of the torus is visible, which lays beneath the ground plane?

I wasnt able to reproduce the issue in a fiddle.Thats why I made this small Test Repository posted above, which has the same environment as my real project and is having the exact same issue with SAO. So I was able to reproduce it here. Is that so much worse than a fiddle, realizing no one is lookings inside the repo?

I think you answered this yourself :slight_smile: The forum has somewhat more mercy than SO but you see that people lose patience. On SO this would be filed under “not clear what the user is asking”. I have literally no idea what i’m looking at in this pictures. As far as i can tell, the ambient occlusion effect seems to be working in your image. There is something unrelated going on but it could be infinitely many things.

Hint: screen space shader effects have ZERO to do with angular. You need a page similar to the example if not the copy of the example, and then your geometry/scene loaded for comparison.

Yeah, but im not able to reproduce it except in my test project which i made for that reason. To have same circumstances I made an angular project. The project uploaded is so small and structured much better than any fiddle. It has 3 files that are important. SceneManager.ts for rendering and scene, Room.ts for creating the 2 planes, cuboid and torus, and light.ts for light.
That is what you are looking at, its almost as simple as the example and I removed anything unrelated. I will try to get a fiddle too, but i need some time for that

1 Like

Why are you unable to reproduce it?

@pailhead

I was only able to reproduce it in a angular environment with jsm files.
Also I had different results on a W7 PC as on a iMac 2009

I finally figured it out I guess. I had to set the renderer resolution/ratio correctly and also the resolution of the SAO and the FXAA pass.

    this.w = window.innerWidth || 1
    this.h = window.innerHeight || 1
    this.ratio = window.devicePixelRatio || 1

    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.composer = new EffectComposer(this._renderer)
    this.composer.setSize( this.w, this.h )

    this.renderPass = new RenderPass(this._scene, this.camera)
    this.composer.addPass(this.renderPass)
    this.SAO = new SAOPass(this._scene, this.camera, true, true)
    this.composer.addPass(this.SAO)

    this.FXAA = new ShaderPass(FXAAShader)
    this.FXAA.material['uniforms']['resolution'].value.x = 1 / (this.w)
    this.FXAA.material['uniforms']['resolution'].value.y = 1 / (this.h)
    this.FXAA.renderToScreen = false
    this.composer.addPass(this.FXAA)

    this.SAO.resolution.set(4096, 4096)

To get a realistic SAO effect, not just a almost completly black screen, I had to tweak the near and far of my camera. They are affecting the SAO.params. I had to increase the range of the dat.GUI variables to get close to something realistic

1 Like

I still notice that the resolution with and without SAO & FXAA differs. The small notches between the shelf modules have stairs. Is there anything I can do?

with SAO & FXAA

without

Have you tried using

this.ssaaRenderPass = new SSAARenderPass(this._scene, this.camera)
this.composer.addPass(this.ssaaRenderPass)

instead of

this.renderPass = new RenderPass(this._scene, this.camera)
this.composer.addPass(this.renderPass)

This works for me in my project. In case this works for you too, you can set antialias to false and maybe remove the FXAAShader.

1 Like

That works like a charm! Awesome, thank you.

this is the final solution:

    this.w = window.innerWidth || 1
    this.h = window.innerHeight || 1
    this.ratio = window.devicePixelRatio || 1

    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.gammaOutput = true
    this._renderer.gammaInput = true
    this._renderer.gammaFactor = 2.2

    this._camera = new THREE.PerspectiveCamera(40, this.w / this.h, .1, 50)
    this._camera.position.set(-3, 1.75, 5)
    this._camera.lookAt(new THREE.Vector3(0, 1.5, 0))

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

    this.ssaaRenderPass = new SSAARenderPass(this._scene, this.camera, 0xAAAAAA, 0)
    this.composer.addPass(this.ssaaRenderPass)

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

    this.SAO.params.saoBias = .5
    this.SAO.params.saoIntensity = .0012
    this.SAO.params.saoScale = .3
    this.SAO.params.saoKernelRadius = 40
    this.SAO.params.saoMinResolution = 0


    // Animate
    this.composer.render()

I noticed that with the SAOPass and SSAARenderPass (code from above), when viewed from a perpendicular angle, my walls are covered in stripes (view img1).

Also when orbiting around, sometimes I notice circles or lines from the light src in yellow/red (seen on img1 on the floor, or img2 on shelf)

Bildschirmfoto 2019-12-13 um 13.05.27

This is my lighting:

    this.roomSize = 4

    // Ambientlight
    this.hemisphereLight = new THREE.HemisphereLight(0xffffff, 0xfffdfa, .34)
    this.hemisphereLight.position.set(10, 0, 10)

    this._scene.add(this.hemisphereLight)

    // Top Down lightsrc
    this.directionalLight = new THREE.DirectionalLight(0xfffdfa, .12) //,3000
    this.directionalLight.name = 'directionallight'
    this.directionalLight.position.x = shelf.center.x
    this.directionalLight.position.y = 90
    this.directionalLight.position.z = shelf.center.z
    this.directionalLight.lookAt(shelf.center)

    this.directionalLight.shadow.mapSize.width = 4096  
    this.directionalLight.shadow.mapSize.height = 4096 
    this.directionalLight.shadow.camera.near = .1       
    this.directionalLight.shadow.camera.far = 300  
    

    this.directionalLight.shadow.camera.left = -this.roomSize
    this.directionalLight.shadow.camera.right = this.roomSize
    this.directionalLight.shadow.camera.top = this.roomSize
    this.directionalLight.shadow.camera.bottom = -this.roomSize
    this.directionalLight.shadow.radius = 10

    this.directionalLight.castShadow = true

    this._scene.add(this.directionalLight)


    // Room lightsrc
    this.pointLight = new THREE.PointLight(0xfffdfa, .56)
    this.pointLight.name = 'pointlight'
    this.pointLight.position.x = 0
    this.pointLight.position.y = Room.instance.height - .1
    this.pointLight.position.z = 5
    this.pointLight.castShadow = false
    this.pointLight.lookAt(shelf.center)

    this.pointLight.shadow.mapSize.width = 2048 
    this.pointLight.shadow.mapSize.height = 2048  
    this.pointLight.shadow.bias = .01 

    this._scene.add(this.pointLight)

    // Top front lightsrc
    this.shadowLight = new THREE.DirectionalLight(0xffffff, .12)
    this.shadowLight.name = 'shadowlight'
    this.shadowLight.position.x = 0
    this.shadowLight.position.y = 25
    this.shadowLight.position.z = 50
    this.shadowLight.lookAt(shelf.center)

    this.shadowLight.shadow.mapSize.width = 4096 
    this.shadowLight.shadow.mapSize.height = 4096
    this.shadowLight.shadow.camera.near = 1     
    this.shadowLight.shadow.camera.far = 100     
    this.shadowLight.castShadow = true
    this.shadowLight.shadow.radius = 6

    this._scene.add(this.shadowLight)

Did you have similar problems?