# "Progressive-Shadows" a vanilla js implementation of r3F AccumulativeShadows

**URL:** <https://discourse.threejs.org/t/progressive-shadows-a-vanilla-js-implementation-of-r3f-accumulativeshadows/48277>\
**Category:** Showcase\
**Tags:** shadows, shadow-material, shadow-catcher\
**Created:** [February 21, 2023, 7:37am UTC](https://discourse.threejs.org/t/progressive-shadows-a-vanilla-js-implementation-of-r3f-accumulativeshadows/48277 "2023-02-21T07:37:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![orion\_prime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/orion_prime/32/15785_2.png) [@orion\_prime](https://discourse.threejs.org/u/orion_prime)\
**Post date:** [February 21, 2023, 7:37am UTC](https://discourse.threejs.org/t/progressive-shadows-a-vanilla-js-implementation-of-r3f-accumulativeshadows/48277/1 "2023-02-21T07:37:52Z")

</div>

After many trials a vanilla three js implementation of r3f’s cool AccumulativeShadows is finally ready !

demo links  
[https://vis-prime.github.io/progressive-shadows/?scene=simple](https://vis-prime.github.io/progressive-shadows/?scene=simple)  
[https://vis-prime.github.io/progressive-shadows/?scene=rx7](https://vis-prime.github.io/progressive-shadows/?scene=rx7)

github

> **[GitHub - vis-prime/progressive-shadows: progressive-shadows test](https://github.com/vis-prime/progressive-shadows)**
>
> progressive-shadows test. Contribute to vis-prime/progressive-shadows development by creating an account on GitHub.

Video

> <https://twitter.com/vis_prime/status/1627729053024387074?s=20>

huge thanks to @drcmda for the help

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [February 21, 2023, 9:05am UTC](https://discourse.threejs.org/t/progressive-shadows-a-vanilla-js-implementation-of-r3f-accumulativeshadows/48277/2 "2023-02-21T09:05:51Z")

</div>

Nice soft shadows. Look more natural.

In some special conditions the shadows look strange. One example is the shadow near the vertical edge facing the camera (the light is on the opposite side) – the corner shadow is weaker than the shadow next to the walls. Maybe it is because the lights are uniformly distributed within the `lightRadius` range. Would a bell-shape distribution make a more natural shadow?

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/f/5f02b97e0d5cf545612dcb507bd6f22329cac15d.jpeg)

---

<div class="post-metadata">

**Author:** ![orion\_prime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/orion_prime/32/15785_2.png) [@orion\_prime](https://discourse.threejs.org/u/orion_prime)\
**Post date:** [February 21, 2023, 9:27am UTC](https://discourse.threejs.org/t/progressive-shadows-a-vanilla-js-implementation-of-r3f-accumulativeshadows/48277/3 "2023-02-21T09:27:35Z")

</div>

i can replicate the issue  
light radius just adds a random value to x,y,z,

I’ll setup a code sandbox so we can experiment

 ![yes](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/d/8d5b943650990379b17144e8aa3a7f9fbb6756cd.jpeg)

> <https://github.com/vis-prime/progressive-shadows/blob/fd7b849fdfe26b93c62dbed93f151b03b6faad4d/src/ProgressiveShadows.js#L206-L231>

---

<div class="post-metadata">

**Author:** ![orion\_prime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/orion_prime/32/15785_2.png) [@orion\_prime](https://discourse.threejs.org/u/orion_prime)\
**Post date:** [February 21, 2023, 9:34am UTC](https://discourse.threejs.org/t/progressive-shadows-a-vanilla-js-implementation-of-r3f-accumulativeshadows/48277/4 "2023-02-21T09:34:39Z")

</div>

Added option to save shadow as a png image

_alphaTest logic on saved image is not added yet_

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/e/bed510cbeedd15229dcb373078edcb7e2f8d5879.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/e/bed510cbeedd15229dcb373078edcb7e2f8d5879.mp4)