GLTF smooth white surface shows contour banding/rings in lit areas

Questions
1

I have a GLB model (cat cup). Topology is clean and shading is smooth in DCC.
In Three.js, the cup body shows visible concentric/contour-like banding on lit gradients.
Fully shadowed areas look cleaner.

Environment:

  • three: 0.179.1
  • GLTF + MeshStandardMaterial
  • RoomEnvironment
  • EffectComposer: RenderPass → FXAA → OutputPass → custom dither pass
  • Tone mapping tested: NeutralToneMapping / NoToneMapping
  • Renderer: precision=highp, premultipliedAlpha=false

Tried already:

  • FXAA on/off
  • Tone mapping on/off
  • Dither strength 0 ~ 2.4/255
  • Material dithering=true
  • Forced highp on renderer/material/passes
  • Slightly darkened white base color (0.94)
  • Recompute normals only if missing
  • Runtime subdivision test (made things worse, reverted)
  • Same artifact appears in gltf-viewer too

Question:
Is this expected PBR banding / display quantization behavior?
What is the most reliable fix for this case (mobile + desktop): roughness noise map, custom blue-noise dithering, postprocess order, or export-side settings?

2

I used dithering into EffectComposer with custom shader and it works ok. Can u send glb model?

1 Like
3

Or a picture?
Is it a single or multi-part model?
I was modifying some models in Blender and ran into problems where I had to flip and recompute normals to make the object look okay in three.js. There were some parts where shadows created problems, so I had to do without. I also had to modify textures to make them look okay.
After all that, I am more suspicious of glb models than I am of three.js.

1 Like
4

image
image1768×1216 65.9 KB

Please look at the cup body ，this is the rendering result in three.js.

image
image1594×1126 218 KB

The topology of this model is very clean.

5

cafebase.glb (1.3 MB)

This is my model.

And this is my material setting:

const tuneCeramicMaterial = (mat: any) => {
if (!mat.isMeshStandardMaterial) return;
mat.metalness = 0.03;
mat.roughness = 0.78;
mat.envMapIntensity = 0.3;
mat.dithering = true;
mat.precision = ‘highp’;
if (mat.color.r > 0.94) mat.color.setScalar(0.94);
if (mat.clearcoat !== undefined) {
mat.clearcoat = 0.08;
mat.clearcoatRoughness = 0.7;
}

mat.needsUpdate = true;
};

6

In the first picture, is your problem with the (slightly shaded) areas on the lower left of the cup?
That kind of problem may be caused by the shading routines.
If so, adjusting the bias a tiny bit might get rid of that problem.

Below is an example of the kinds of problems I have run into with shadows. See the lit area in the lower center with the pale vertical lines.

shadow_bias_-0005_62deg
shadow_bias_-0005_62deg1412×908 146 KB

1 Like
7

Hi Phil,

You were spot on! Adjusting the shadow bias fixed it immediately—the artifacts on the cup are gone and the surface looks perfectly smooth now.

Thanks for sharing that cockpit example, it really helped me pin down the cause. Truly appreciate the help!

2 Likes