After many trials a vanilla three js implementation of r3f’s cool AccumulativeShadows is finally ready !
demo linkshttps://vis-prime.github.io/progressive-shadows/?scene=simple https://vis-prime.github.io/progressive-shadows/?scene=rx7
github
Video
huge thanks to @drcmda for the help
14 Likes
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?
i can replicate the issue
I’ll setup a code sandbox so we can experiment
randomiseLights() {
const length = this.lightOrigin.position.length()
// Manually Update the Directional Lights
for (let l = 0; l < this.dirLights.length; l++) {
// Sometimes they will be sampled from the target direction
// Sometimes they will be uniformly sampled from the upper hemisphere
if (Math.random() > this.params.ambientWeight) {
this.dirLights[l].position.set(
this.lightOrigin.position.x + MathUtils.randFloatSpread(this.params.lightRadius),
this.lightOrigin.position.y + MathUtils.randFloatSpread(this.params.lightRadius),
this.lightOrigin.position.z + MathUtils.randFloatSpread(this.params.lightRadius)
)
} else {
// Uniform Hemispherical Surface Distribution for Ambient Occlusion
const lambda = Math.acos(2 * Math.random() - 1) - 3.14159 / 2.0
const phi = 2 * 3.14159 * Math.random()
this.dirLights[l].position.set(
Math.cos(lambda) * Math.cos(phi) * length,
Math.abs(Math.cos(lambda) * Math.sin(phi) * length),
Math.sin(lambda) * length
show original
Added option to save shadow as a png image
alphaTest logic on saved image is not added yet
4 Likes
