# Strange Shadow Artifacts

**URL:** <https://discourse.threejs.org/t/strange-shadow-artifacts/38900>\
**Category:** Questions\
**Tags:** shadows\
**Created:** [June 6, 2022, 2:52am UTC](https://discourse.threejs.org/t/strange-shadow-artifacts/38900 "2022-06-06T02:52:36Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![AxiomOfChoice](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/axiomofchoice/32/26811_2.png) [@AxiomOfChoice](https://discourse.threejs.org/u/AxiomOfChoice)\
**Post date:** [June 6, 2022, 2:52am UTC](https://discourse.threejs.org/t/strange-shadow-artifacts/38900/1 "2022-06-06T02:52:36Z")

</div>

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.

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/8/6848748cf90a02a3e15d9c135a86cb35461c3884.m4v](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/8/6848748cf90a02a3e15d9c135a86cb35461c3884.m4v)

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:

```javascript
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.

---

<div class="post-metadata">

**Author:** ![AxiomOfChoice](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/axiomofchoice/32/26811_2.png) [@AxiomOfChoice](https://discourse.threejs.org/u/AxiomOfChoice)\
**Post date:** [June 7, 2022, 8:02am UTC](https://discourse.threejs.org/t/strange-shadow-artifacts/38900/2 "2022-06-07T08:02:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 7, 2022, 8:18am UTC](https://discourse.threejs.org/t/strange-shadow-artifacts/38900/3 "2022-06-07T08:18:01Z")

</div>

Do you mind demonstrating the shadow artifacts with a small [live example](https://jsfiddle.net/f2Lommf5/)?

---

<div class="post-metadata">

**Author:** ![AxiomOfChoice](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/axiomofchoice/32/26811_2.png) [@AxiomOfChoice](https://discourse.threejs.org/u/AxiomOfChoice)\
**Post date:** [June 7, 2022, 9:30pm UTC](https://discourse.threejs.org/t/strange-shadow-artifacts/38900/4 "2022-06-07T21:30:50Z")

</div>

Here is my minimal version.

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/drpgutvx/78/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

To be clear these artifacts are new to the minimal version and I do not see them on my own version.  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/c/1c5455df299cff3b0059675623fe2370a17a9854.png)

It is these artifacts  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/4/7475e551ebf3f0db8c5904fe92e20002c53c7dfe.png)  
that I am concerned about.

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [June 8, 2022, 2:57pm UTC](https://discourse.threejs.org/t/strange-shadow-artifacts/38900/5 "2022-06-08T14:57:40Z")

</div>

Maybe this could help you :

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

instead of

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

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/g3Lukx82/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<div class="post-metadata">

**Author:** ![AxiomOfChoice](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/axiomofchoice/32/26811_2.png) [@AxiomOfChoice](https://discourse.threejs.org/u/AxiomOfChoice)\
**Post date:** [June 8, 2022, 7:37pm UTC](https://discourse.threejs.org/t/strange-shadow-artifacts/38900/6 "2022-06-08T19:37:57Z")

</div>

The artifacts are still there.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/e/4e00b4a7bc8c46349f33ea4e1711635b4a437d31.png)

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

---

<div class="post-metadata">

**Author:** ![N8Three](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/n8three/32/29045_2.png) [@N8Three](https://discourse.threejs.org/u/N8Three)\
**Post date:** [June 9, 2022, 5:09pm UTC](https://discourse.threejs.org/t/strange-shadow-artifacts/38900/7 "2022-06-09T17:09:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![AxiomOfChoice](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/axiomofchoice/32/26811_2.png) [@AxiomOfChoice](https://discourse.threejs.org/u/AxiomOfChoice)\
**Post date:** [June 9, 2022, 9:41pm UTC](https://discourse.threejs.org/t/strange-shadow-artifacts/38900/8 "2022-06-09T21:41:38Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![N8Three](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/n8three/32/29045_2.png) [@N8Three](https://discourse.threejs.org/u/N8Three)\
**Post date:** [June 9, 2022, 11:49pm UTC](https://discourse.threejs.org/t/strange-shadow-artifacts/38900/9 "2022-06-09T23:49:37Z")

</div>

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](https://github.com/mrdoob/three.js/blob/0c26bb4bb8220126447c8373154ac045588441de/src/renderers/shaders/ShaderChunk/shadowmap_pars_fragment.glsl.js) this file

---

<div class="post-metadata">

**Author:** ![AxiomOfChoice](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/axiomofchoice/32/26811_2.png) [@AxiomOfChoice](https://discourse.threejs.org/u/AxiomOfChoice)\
**Post date:** [June 10, 2022, 12:03am UTC](https://discourse.threejs.org/t/strange-shadow-artifacts/38900/10 "2022-06-10T00:03:06Z")

</div>

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