Strange Shadow Artifacts

Questions
1

So I am working on a project in which I am trying to incorporate dynamic shadows but I am running into strange jagged outlines. The setup is a solar system with one sun and one planet, the planet’s geometry is taken from Blender and the sun is just a PointLight. The problem occurs when I am trying tor get the planet to cast shadows onto itself, specifically the planet has a valley which should have a smooth shadow going over it as it rotates around the sun.

I see these weird jagged outlines which definitely do not match the outline of the geometry.

I am quite new to shadows in threejs so forgive me if this is a simple problem but I could not find anything similar to this online.

Here is the specific light setup:

const light = new THREE.PointLight(this.starColor, 2, 50);
light.visible = true;
light.shadow.mapSize.width = 4096;
light.shadow.mapSize.height = 4096;
light.shadow.normalBias = 0.1;
light.shadow.bias = 0.002;
light.castShadow = true;

I have tried playing around with the bias and the normal bias but to no avail.
The mapSize property also seems to not matter so maybe I am understanding it wrong.

2

Some more progress on the problem but no solution yet.

  • I have replaced the Blender model with a custom geometry in three.js and the problem persisted so I don’t think blender is the problem.
  • I have tried to change the near and far properties of the shadow camera but no effect there either.
  • I have tried to change the type of shadow from PCFSoftShadowMap to all the other options but again no effect.
  • The radius property on the shadow did change the result but only made it worse.
3

Do you mind demonstrating the shadow artifacts with a small live example?

4

Here is my minimal version.

To be clear these artifacts are new to the minimal version and I do not see them on my own version.
image

It is these artifacts
image
that I am concerned about.

5

Maybe this could help you :

geometry = new THREE.IcosahedronGeometry(1, 160);

instead of

geometry = new THREE.IcosahedronGeometry(1, 16);

6

The artifacts are still there.

image
image134×558 16.3 KB

And even if they were not, I want the low detail geometry so that wouldn’t work for me.

7

Those look like classic shadow aliasing artifacts - they can be alleviated by increasing bias, increasing shadow map resolution, or implementing softer shadows - point lights in three don’t have support for the more advanced VSM shadow system, so you’d have to hack one together yourself.

2 Likes
8

Unfortunately increasing bias anymore causes weird extra artifacts and shadow resolution is already at a maximum.

I guess I will have to self implement vsm shadows, sounds like an interesting enough task so I’m excited.

Would vsm shadows have to be calculated in the fragment shader? I am a little confused with where exactly they should be added. Would it be necessary to change three.js code or can I implement it on top of it?

9

You’d add them in the fragment shader when computing the contribution from the point light. You’d modify the getPointShadow function in three.js/shadowmap_pars_fragment.glsl.js at 0c26bb4bb8220126447c8373154ac045588441de · mrdoob/three.js · GitHub this file

10

That makes a lot of sense. Thank you very much for your help!

1 Like