Strange Shadow Artifacts

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.

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.

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

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.

It is these artifacts
that I am concerned about.

Maybe this could help you :

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

instead of

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

The artifacts are still there.

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

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.


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?

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

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

1 Like