What's the fastest way to use stencil shadows in modern three.js?

There used to be a ShadowVolume. Is there a replacement now? Is there any open-source solution if not in the core three.js?

Are you referring to this example? https://threejs.org/examples/webgl_shadowmesh

Related issue at github:

I’m looking for the modern version of this:

https://cs.calvin.edu/courses/cs/352/files/three.js/mrdoob-three.js-25dddd2/examples/webgl_stencil.html

ShadowMeshes just work with a planar shadow, but I’m looking for volumetric stencil shadows. Note how in the demo above the shadows of the torus on the cube and vice versa.

It used to be called a “ShadowVolume”, but it looks to have been deprecated some versions ago. Looking for the modern equivalent?

I couldn’t find an example so I built one.

For anyone in need in the future:

3 Likes

Here’s a live version of you demo :slight_smile:

I put together a small little shadow volume experiment awhile ago that does shader based geometry projection:

https://github.com/gkjohnson/threejs-sandbox/tree/master/shadow-volumes

And the demo:

https://gkjohnson.github.io/threejs-sandbox/shadow-volumes/index.html

The geometry is modified to create bridge polygons between all connected triangles and extended based on face normal in the vertex shader. I’m sure it’s entirely impractical especially with complex geometry but maybe it’s worth sharing anyway.

I’m curious as to what your use case for shadow volumes is! I haven’t seen them used in awhile.

2 Likes

Currently 3D platformer game shadows that run nicely on mobile.