Banding artifacts on Android when Ambient Occlusion is enabled

I have a project with ambient occlusion turned on, and I’m getting banding artifacts on Android devices. See attached image.

I have tested on several devices. The banding happens on:
Google Pixel 8 (chrome and firefox)
Samsung S21 (chrome)

It does not happen on:
iPad 9th gen (safari and chrome)
Windows (chrome, firefox, and edge)

The settings I am using for the post-processing are:

app.enablePostprocessing([{
type: ‘outline’,
edgeStrength: 3.0,
edgeGlow: 0.0,
edgeThickness: 1.0,
pulsePeriod: 0.0,
visibleEdgeColor: (1, 1, 1),
hiddenEdgeColor: (1, 1, 1)
},{
type: ‘gtao’,
distance: 0.06,
factor: 0.8,
precision: 1,
bentNormals: false,
bounceApprox: true
}])
// constructor doesn’t work for some reason but this does.
app.postprocessing.outlinePass.visibleEdgeColor.set(1, 1, 1)
app.postprocessing.outlinePass.hiddenEdgeColor.set(1, 1, 1)

I tried tweaking the gtao settings, but couldn’t get the banding to go away.

Trying to figure out what causes this, if I can fix the banding, or if it can’t be fixed, a reliable way to know what devices will have this banding so I can disable AO for them, but keep it enabled for other devices.

• This topic was modified 2 weeks ago by backpackvacuum.