Model imported from Blender has shadowy facets on its flat faces

Questions
,
1

I’m importing a model from Blender as a .glb file. The face of it should be completely flat, but when I render it in threejs I see strange faceted shadows.

I thought the problem could be because the original geometry was quite complicated, but even after I simplified it in Blender the issue still shows up a bit.

Issue in the browser:

Screen Shot 2020-04-06 at 11.50.49 PM
Screen Shot 2020-04-06 at 11.50.49 PM1858×1314 82.8 KB

Simplified geometry in Blender:

Screen Shot 2020-04-06 at 11.41.43 PM
Screen Shot 2020-04-06 at 11.41.43 PM3584×2278 1.03 MB

Demo: https://themoaa.org/temp/faces/index.html
GLB file: face-limitedissolve.glb (12.6 KB)
Blend file: face-limitedissolve.blend (569.6 KB)

Any ideas what I could do to fix that so I have clean-looking faces? My full model shows a lotttttt of these things, so it’d be nice to know how to clean them up.

Screen Shot 2020-04-07 at 12.04.33 AM
Screen Shot 2020-04-07 at 12.04.33 AM1956×1224 226 KB

Thank you.

Dunstan

2

You are casting and receiving shadows for all as you traverse the loaded model.
try adding a shadow.bias
https://threejs.org/docs/#api/en/lights/shadows/LightShadow.bias

  if (o.isMesh) {
    o.castShadow = true;
    o.receiveShadow = true;
    o.shadow.bias = -.003
  }

Experiment with the value of the bias. I just used -.003 as an example.

1 Like
3

Thanks so much for the reply, Sean. I actually had to add the bias to the directional light, not the mesh object, and a value of -0.001 ended up working perfectly.

// make light
var dirLight = new THREE.DirectionalLight(0xffffff, 0.54);
dirLight.position.set( -8, 12, 8 );
dirLight.castShadow = true;
dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024);   
scene.add(dirLight);
// add bias
dirLight.shadow.bias = -0.001;

You can see a fixed demo here:
https://themoaa.org/temp/faces/index2.html

4

Yes of course, my bad.