CSM shadows look "bad" [Solved]

Questions
1

I’ve tried using Three.js’ Cascading Shadow Maps before, however every time I try it, the shadows don’t look like the example’s shadows. What should I change to get better shadows?
Fiddle
My test:

image
image1400×817 81.1 KB

Three.js example:

image
image609×512 45.5 KB

2

By default the cascades extend for the full length of the camera frustum (up to 100000) which is 1000 in this case and very large. You can either make the camera far clip plane closer to the camera or set the maxFar option to a smaller value like 50. Shadows will not render outside of the maxFar range.

A couple other things:

  • It looks like CSM.setupMaterial does not work with MeshLambertMaterial which means you’re getting all overlapping shadows and light intensities. I recommend opening an issue at the three.js repo about this.

  • Enabling fade will make the shadows fade out gradually which looks a bit better, as well: csm.fade = true.

2 Likes
3

Interesting, I’ll open an issue on the repo soon.
I made the recommended changes, and the shadows look great now! :slight_smile:
Thank you!

1 Like