CSM Shadow bug?

Questions
, , , ,
1

Three.js CSM is super useful when making games with a camera that goes far out in the world but for some reason it appears a bit weird when I added it in. Here is some screenshots.

image
image387Ă—506 24.3 KB

image
image668Ă—763 52.4 KB

It looks a bit too stripy I think I have the wrong version of csm or something. But it also has a bug on normal box meshes also. The box also blends in the color of the platform everything is sitting at which makes it hard to see.

image
image477Ă—518 6.51 KB

if you see closely it has some weird shadows also on the sides. Here is my csm code.

const ambientLight = new THREE.AmbientLight(0xffffff);
ambientLight.intensity = 1;// max=1
scene.add(ambientLight);

let csm = new CSM( {
  maxFar: 20,
  cascades: 0.1,
  mode: 'practical',
  fade: true,
  parent: scene,
  shadowMapSize: 2000,
  lightDirection: new THREE.Vector3( -1, -1, -1 ).normalize(),
  camera: camera
} );

const additionalDirectionalLight = new THREE.DirectionalLight( 0x000020, 1.5 );
additionalDirectionalLight.position.set( -1, -1, -1 ).normalize().multiplyScalar( - 200 );
scene.add( additionalDirectionalLight );

// further lines

function animate() {	
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  csm.update();
  camera.updateMatrixWorld();
};
2

This effect is called shadow acne… you can mitigate it by adjusting the light.shadow.bias value to some small value…

Like .0001 or -.0001. Try experimenting with different bias values until you get rid of the shadow acne but still have shadows that don’t “peter pan” meaning… float above the surface too much.

3

Do I put it on the “additionalDirectionalLight” element? like additionalDirectionalLight.shadow.bias = 0.0001 because it would just pull up with the same product even if i put the bias

4

Does it also work with csm by the way? because I cant see if it works

5

How many lights do you have? You probably have to set a bias on all the lights that are set to cast shadows. I usually just use 1 shadowcasting directional light, and ambient light… and maybe a point light…
It’s possible it isn’t on csm shadows… u can check the docs…

6

only have 1 directional light and 1 ambient light I think ill find other ways how to fix it.

7

Oh i fixed it by just adjusting the csm a bit I saw a default csm setting and got it to be working.

image

let csm = new CSM( {
  fade: true,
  far: 100,
  cascades: 4,
  shadowMapSize: 4096,
  lightDirection: new THREE.Vector3(-0.6, -1, 0.7),
  camera: camera,
  parent: scene,
  lightIntensity: 1
} );

it looks really nice. Also thanks for the help

image
image562Ă—522 26.6 KB

1 Like
8

Ahh sweet… glad u got it working!