postprocessing: SSAO broken on windows

This is how it looks on my machine:

And this happens on windows:

200923_215241_7VLwgkfkk3

the first one runs 60fps, the other 2fps, it seems to really struggle for some reason.

do you know what it could be? i have it online here: http://warm-vessel.surge.sh and here’s a codesandbox: https://codesandbox.io/s/lllt8?file=/src/App.js

the AO config:

<EffectComposer multisampling={0}>
  <SSAO samples={25} intensity={60} luminanceInfluence={0.5} radius={10} scale={0.5} bias={0.5} />
  <SMAA edgeDetectionMode={EdgeDetectionMode.DEPTH} />
</EffectComposer>

These props will overwrite the following default props:

new SSAOEffect(camera, normalPass.renderTarget.texture, {
  blendFunction: BlendFunction.MULTIPLY,
  samples: 30,
  rings: 4,
  distanceThreshold: 1.0,
  distanceFalloff: 0.0,
  rangeThreshold: 0.5,
  rangeFalloff: 0.1,
  luminanceInfluence: 0.9,
  radius: 20,
  scale: 0.5,
  bias: 0.5,
  ...props,
}),

the high intensity is intentional, im going for a pixelated raytraced look emulating soft shadows with AO.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 36 (35 by maintainers)

Most upvoted comments

I think I found the reason why the powerPreference setting is ignored in your app: https://www.khronos.org/webgl/public-mailing-list/public_webgl/1703/msg00022.php explains that the canvas needs to have event listeners for webglcontextlost and webglcontextrestored set prior to the WebGL context creation or else the powerPreference setting will be ignored. Your app appears to create a Canvas without setting these listeners.

ThreeJS sets the listeners correctly if you don’t provide your own canvas. See https://github.com/mrdoob/three.js/blob/33acbbef6b7cd6afa98e1cf6f02d3f23aaf5bfa0/src/renderers/WebGLRenderer.js#L200-L203 and https://github.com/mrdoob/three.js/pull/12753 for details.

vanruesc on Sep 24, 2020

the weird thing is, that demo now runs fine again. it seems to be related by my computer switching gfx cards. similar to the reports i got. sometimes my system gets really slow and it switches from dedicated to integrated. i dont think it does anything out of the ordinary with normal textures.

it creates the composer, adds a render pass and then a normal pass

        // Initialize composer
        const effectComposer = new EffectComposer(gl, {
          depthBuffer,
          stencilBuffer,
          multisampling: isWebGL2Available() ? multisampling : 0,
          frameBufferType,
        })
        // Add render pass
        effectComposer.addPass(new RenderPass(scene, camera))
        // Create normal pass
        const pass = new NormalPass(scene, camera)
        effectComposer.addPass(pass)

which it keeps and forwards it to effects that may need it

new SSAOEffect(camera, normalPass.renderTarget.texture, {
        blendFunction: BlendFunction.MULTIPLY,
        samples: 30,

i am looking for something now that would allow me to switch between gfx cards manually to see if it’s really that.

drcmda on Oct 10, 2020

I had the same issue in a project even though the SSAO demo worked fine for me. I found out that you can replicate that issue when you pass a value like null as the normal texture to the SSAO effect instead of the actual normal pass rendertarget texture and don’t use a normalDepthBuffer in the SSAO effect. In my case I used a normal pass and passed its rendertarget texture but had it still give me that wrong gray AO. It turns out I forgot to add the normal pass to the composer. Since the normal pass wasn’t updated then a plain white texture was used in the SSAO shader which is probably the reason why the shader then gave these distorted results (due to an incorrect normal texture). So make sure the normal pass updates and that the normal pass’s rendertarget texture is correct (e.g. not plain white).

0beqz on Oct 10, 2020