Hello, I am facing the problem with shadow stripes on model

Questions
1

Capture.PNG
Capture.PNG708×581 69.2 KB

Materials : PBR based MeshStandardMaterial.

Lights used : hemisphier light, ambientLight, DirectionalLight
Directional light is used to display the shadow. Direction light’s position set to (0, 200, 50) and bias is set to -0.002

Problem: Some angles, black lines are visible on product, which is facing to the light.

Please find below jsfiddle for a demo. Can you help me to remove the shadow stipes?

https://jsfiddle.net/7a6gwjyn/

2

If I turn of castshadow and recieveshadow, I still see the lines. I think that is caused by a texture in your model.

If I change your material by replacing it with a MeshNormalMaterial, then I no longer see the lines.

 for (let i = 0; i < childrens.length; i++) {
   childrens[i].castShadow = true;
   childrens[i].receiveShadow = true;
   childrens[i].material =  new THREE.MeshNormalMaterial()
 }
3

@seanwasere

i have to use MeshStandardMaterial along with PBR flow, so would please try with MeshStandardMaterial only ?

4

same thing, your problem is not shadow

even if I turn off shadows in your renderer, it still see the lines

renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
//renderer.shadowMap.enabled = true;
//renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
5

Let me check the other model and give you the exact issue

6

Tightening up the shadow frustum and descreasing the bias a bit fixes it:

      dirLight.shadow.camera.top = 170;
      dirLight.shadow.camera.bottom = -70;
      dirLight.shadow.camera.left = -150;
      dirLight.shadow.camera.right = 150;
      dirLight.shadow.camera.near = 25;
      dirLight.shadow.camera.far = 250;
      dirLight.shadow.bias = -0.005;

Updated fiddle: https://jsfiddle.net/mr1n5scL/

2 Likes
7

I concede, there is a shadow problem if you look really closely. This is usually solved by tweaking the bias.
Left, shadows enabled in renderer
Right, no shadows enabled in renderer

image
image1482×537 145 KB

1 Like
8

Can you try it with my updated fiddle? I can’t see any artifacts.

both
both2824×776 302 KB

9

Oh no, I just changed the sliders and I broke it. This is a best as I can milk it with those pesky sliders.

image
image1172×616 116 KB

10

its a solution, tanks

6 Likes
11

I have found solution in docs. three.js docs

Very tiny adjustments here (in the order of 0.0001 ) may help reduce artifacts in shadows