Three.js shadows grainly/artifacty on animated object

Question

I'm trying to get soft shadows to look nice on this animated mesh test

https://codesandbox.io/s/zen-black-et9cs?file=/src/App.js

No amount of playing with the shadow mapSize or shadowBias appears to fix this strange grainyness/artifacting I see on the animated mesh shadow.

Does anyone have any thoughts on what to try to improve these shadows?

Answer 1

This call is causing it:

softShadows({
  frustum: 3.75, // Frustum width (default: 3.75) must be a float
  size: 0.005, // World size (default: 0.005) must be a float
  near: 9.5, // Near plane (default: 9.5) must be a float
  samples: 17, // Samples (default: 17) must be a int
  rings: 11, // Rings (default: 11) must be a int
});

Answer 2

How I ended up improving this a bit was messing with the softShadows drei parameters - mainly lowering the "size" parameter. It's not perfect, but it's better.

softShadows({
  frustum: 3.75, // Frustum width (default: 3.75) must be a float
  size: 0.002, // World size (default: 0.005) must be a float
  near: 9.5, // Near plane (default: 9.5) must be a float
  samples: 17, // Samples (default: 17) must be a int
  rings: 11, // Rings (default: 11) must be a int
});