Postprocessing SAO makes everything blurry and pixelated

Questions
,
1

Hey, im implementing SAO from this example in Angular 2+.
but it looks really blurry and seems like antialiasing is not working.
With some tweaking I get it brighter, but those were the default settings.

How can I use antialiasing with SAO or SSAO? What else can I do to improve quality?
What else can I provide?

saoPass.OUTPUT.Beauty

40
Bildschirmfoto 2019-06-27 um 12.03.40.jpg767×669 53.1 KB

saoPass.OUTPUT.Default
24
Bildschirmfoto 2019-06-27 um 12.17.24.png1118×821 144 KB

My renderer:

this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.shadowMap.enabled = true
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
this.renderer.setPixelRatio(window.devicePixelRatio)
this.renderer.toneMappingExposure = 1
this.renderer.toneMapping = THREE.Uncharted2ToneMapping
this.renderer.gammaOutput = true
this.renderer.gammaInput = true
this.renderer.gammaFactor = 2.2

SAO:

this.effectComposer = new EffectComposer(this.renderer)

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(window.innerWidth, window.innerHeight))

this.saoPass['params']['output'] = SAOPass.OUTPUT.Beauty
this.saoPass['params']['saoBias'] = .5
this.saoPass['params']['saoIntensity'] = .18
this.saoPass['params']['saoScale'] = 1
this.saoPass['params']['saoKernelRadius'] = 100
this.saoPass['params']['saoMinResolution'] = 0
this.saoPass['params']['saoBlur'] = false
this.saoPass['params']['saoBlurRadius'] = 8
this.saoPass['params']['saoBlurStdDev'] = 4
this.saoPass['params']['saoBlurDepthCutoff'] = .01

this.effectComposer.addPass(this.saoPass)

Loop:

private updateRenderer() {

  this.orbitControls.update()

  this.effectComposer.render()
}
2

You can add FXAA to your post-processing pipeline in order to improve aliasing effects. A demo for this can be found here:

https://threejs.org/examples/webgl_postprocessing_fxaa

3

Alright thanks. Just wondering why the example looks so smooth.

I tried to add the FXAA and getting an Error when instantiating a new ShaderPass with the FXAAShader:

when doing:

import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass'
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader'

this.fxaaPass: ShaderPass = new ShaderPass(FXAAShader)

‘FXAAShader’ only refers to a type, but is being used as a value here.

when doing:

import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass'

this.fxaaPass: ShaderPass = new ShaderPass(THREE.FXAAShader)

TypeError: undefined is not an object (evaluating ‘this.uniforms[ this.textureID ]’)
render — ShaderPass.js:48
render — EffectComposer.js:144
updatePostprocessing — plan3d.ts:671
updateRenderer — plan3d.ts:409
animate — plan3d.ts:398
onInvokeTask — core.js:16954
runTask — zone.js:188
invokeTask — zone.js:496
timer — zone.js:2054
(anonyme Funktion) — web-animations.min.js:15:23144
forEach
d — web-animations.min.js:15:23021

4

This is a known issue and already fixed in the latest three.js version. When you install it via npm (0.106.1), this error should be gone.

5

Okay thanks error is gone, but now with SAO & FXAA it still looks very blurry and dark and still pixelated like hell.
FXAA does not really have any impact? And why is it so dark and blurry? These are the default settings like in the example. Looks completely different

12

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)

this.saoPass['params']['output'] = SAOPass.OUTPUT.Default
this.saoPass['params']['saoBias'] = 1
this.saoPass['params']['saoIntensity'] = .05
this.saoPass['params']['saoScale'] = 5
this.saoPass['params']['saoKernelRadius'] = 1
this.saoPass['params']['saoMinResolution'] = 0
this.saoPass['params']['saoBlur'] = true
this.saoPass['params']['saoBlurRadius'] = 8
this.saoPass['params']['saoBlurStdDev'] = 4
this.saoPass['params']['saoBlurDepthCutoff'] = .01

this.effectComposer.addPass(this.saoPass)

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

this.effectComposer.addPass(this.fxaaPass)

In loop:

this.effectComposer.render()
6

Can you demonstrate the issue with a live example?

7

Posts above were on a iMac tested Safari and Chrome need to test tomorrow again on iOS.
Right now im on a w7 PC Chrome/Firefox and the blurry and pixelated stuff is gone. FXAA seems to work, but now when I use SAOPass.OUTPUT.SAO I only see white, theres no ambient occlusion. Same on the sao threejs example I see only white when set to SAO

Im not getting the jsFiddle to work. How to include the threejs example files properly? Anyway thats basicly what happens. The models used are gltf’s exported from Blender. They are placed to form a shelf dynamicly.

Here is a live example on a test server where SAO and FXAA is enabled (meanwhile inactive)

8

Fixed here: Edit fiddle - JSFiddle - Code Playground

The live example on your test server looks strange:

image
image1366×1808 105 KB

It would be good if you can reproduce the issue with a fiddle. In any event, SAOPass produces the best quality but it’s also a very slow FX pass. You might get better performance with SSAO and still have a decent quality.

9

Okay weird. The test server example on my w7 PC with Chrome looks very good, but has no visible ambient occlusion. FXAA is working tho.
Today testing on a iMac on Chrome it looks like the picture you posted. Is it hardware related?

Im gonna try to reproduce the whole thing in a fiddle. May I send you the whole project?

1 Like
10

Not sure. This might need some debugging.

In general, it’s better if you can reproduce the issue in a smaller test case. The whole project might be too complicated.

11

A possible cause might be devicePixelRatio

3 Likes
12

@Fluqz Do you have the following line in your app?

renderer.setPixelRatio(window.devicePixelRatio);
13

Yes, I do set the renderer’s pixel ratio as shown above, but still looks strange and even more pixelated when deleting the line.

14

I tried to reproduce the issue in this jsFiddle, but it is actually working.
I do see the SAO and FXAA.

Then I included SAO in a test project I made recently. I uploaded it to a github repo
This is also a Angular 2+ project as mine and I get the same behavior. Could it be module related?

Code goes from app.component.ts -> scene-manager.ts -> room.ts & light.ts & exhibition.ts
Most important stuff is in scene-manager.ts

15

What did you set for you near/far settings of the camera?

16

@Fyrestar Near is .1 and far 300. When reducing the far it gets brighter, but stays blurry and pixelated

17

Try a higher near, like 1-10

18

No, thats not doing the trick.

Here’s a test repo on github which happens to have the same issue with SAO.

20

Anything new here? Not getting this to work after all.

21

No, as you can see. If you research, investigate and isolate the issue you can solve it yourself too.