Postprocessing: ao glitch on ios

[drcmda]

reference: https://github.com/react-spring/drei/issues/8

the sandbox he is referring to: https://codesandbox.io/s/r3f-drei-standardeffects-frcmm

<StandardEffects/> is just a wrapper around the following pp config: https://github.com/react-spring/drei/blob/master/src/StandardEffects.ts (smaa + ao + bloom)

and it can be overwritten by doing:

<StandardEffects ao={{
  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,
}} />

could it be caused by my default values or is it something deeper?

[vanruesc]

The precision of the depth texture attachment seems to be limited on that device; the SSAOEffect detects false discontinuities due to the large steps between depth values. What's the default near plane setting of the camera? Try changing it to 0.3 or 0.1.

The rangeThreshold and rangeFalloff parameters also directly affect the occlusion detection. Your default values are quite large (~25 units for proximity checks plus 5 units of falloff). This means that occlusion shadows will appear everywhere even where they don't make much sense. Try the following settings:

ao={{
    samples: 21, // May get away with less samples
    rings: 4, // Just make sure this isn't a multiple of samples
    distanceThreshold: 1.0, // These are perfectly fine **
    distanceFalloff: 0.0, // **
    rangeThreshold: 0.015, // Controls sensitivity based on camera view distance **
    rangeFalloff: 0.002, // **
    luminanceInfluence: 0.9,
    radius: 14, // Spread range
    scale: 1.0, // Controls intensity **
    bias: 0.05 // **
}}

It would also be interesting to see if enabling the stencilBuffer flag during the EffectComposer creation fixes the issue on the iOS device. (This would switch to UnsignedInt248Type for the depth texture instead of UnsignedIntType.)

[drcmda]

I'll forward it, and thanks for always taking the time and effort! Always learning something when coming here.

The default near is 0.1, i have otherwise changed the values to yours.

[vanruesc]

I did some testing with my Android phone and found that it also struggles with the SSAOEffect. It renders the same weird stripes in the sandbox example and the postprocessing SSAO demo.

Try changing it to 0.3 or 0.1.

@drcmda Sorry, I messed up here: you should always aim to set the near plane value as high as possible. If you can set it to 1.0, you'll get much better depth precision. This doesn't fix the artifacts, however, because there is actually another issue that causes them.

Since the artifacts look like they are caused by insufficient depth precision, I tried using a WebGL 2 context with a FloatType depth texture. This didn't change anything, though, which was surprising because FloatType is guaranteed to work in WebGL 2 and the depth precision should have increased. Then I tried packed RGBA depth which appeared to have a positive effect on the artifacts but didn't completely fix the issue.

After some research I came across a post that mentions how depth buffer precision alone doesn't help if the shader doesn't also declare the depth sampler as highp. Adding this qualifier when GL_FRAGMENT_PRECISION_HIGH is defined solves the issue.

Since SSAO works fine on desktop in its current state I guess texture samplers just default to highp in this environment.

I'll publish a fix shortly.

[vanruesc]

Fixed in [email protected].