Ringed Mesh Shadow Quality Worsens with Distance to Light Source

Questions
, ,
1

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:

image
image1012×754 53.3 KB

Not the greatest, but tolerable for now.

And at x = 20 and point light intensity 1000:

image
image804×618 48 KB

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

image
image924×552 41.6 KB

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:

Relevant:

2

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:

image

Updated pen.

3

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;
  scene.add(sunlight);

4

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:

image
image694×420 59.6 KB

Thanks for the help

1 Like