Ringed Mesh Shadow Quality Worsens with Distance to Light Source

I was trying to create Saturn’s rings and implement shadows but noticed terrible shadow quality in the simulation. I adjusted the distance of Saturn from the light source (at (0, 0, 0)) to try and get to the bottom of it.

At x = 5, and point light intensity 50:

Not the greatest, but tolerable for now.

And at x = 20 and point light intensity 1000:

And finally at x = 170 and point light intensity 1000000 (intending to use values of similar magnitude in simulation):

Here’s a codepen illustrating the issue.

Interestingly, this does not occur with a SpotLight but this isn’t a solution as I do need a point light.

Is the intensity too high? Is the solution just to scale everything down?

For reference, this is the texture:


Found this excerpt on threejsfundamentals:

Smaller means better looking shadows so make the area as small as you can and still cover your scene.

So the solution is to just reduce the scale (including intensity) of everything in the scene.

Although, I’m still not sure why I get this streak effect on the ring mesh:


Updated pen.

Used the latest release and shadow.bias

  const sunlight = new THREE.PointLight(0xffffff, 10);
  sunlight.castShadow = true;
  sunlight.shadow.bias = -0.005;
  sunlight.decay = 2;

That seems to have done the trick!

In my case, I had to reduce the sunlight.shadow.bias to -0.0001 to keep the shadow of the sphere:

Thanks for the help

1 Like