Volumetric SpotLights

[sneha-belkhale]

Hey all,

I came across a cool and efficient implementation of volumetrics for spotlights -- and was able to achieve a pretty neat effect by using this approach paired with a noise texture and using multiple cones with decreasing radii.

I think this could be helpful for people, as it is the only one i've seen that does not require multiple render passes. I think it's not fundamental enough to add to the THREE.Spotlight, but probably better for an example.

Let me know!

[Usnul]

I think it's really cool, the only problem is that for this technique to work - you need to sort your primitives (polygons that make up the cones), and that's one thing that WebGL doesn't do. Basically - you either have to sort the polygons yourself, or this technique won't work.

[sneha-belkhale]

@Usnul, for the demo above I was using additive blending. Also for this specific use case, the only reason there are multiple cones is so that it looks more full when you walk inside / underneath.

[Usnul]

You're right, for one cone it should work 👍

[mrdoob]

An example of this would be great indeed!

[arpu]

looks like this is the same https://github.com/jeromeetienne/threex.volumetricspotlight

[arpu]

found this https://codepen.io/tgcnzn/pen/OJWPEOj as example

[mrdoob]

Seems like @vis-prime is working on a solution for this: https://twitter.com/vis_prime/status/1635468289316114433

[vis-prime]

It's the same implementation

There's a cylinder mesh overlapping the spotlight It's material has the shader which does volume effect

and optionally depth map can be passed to prevent sharp intersection between the scene meshes and the cylinder mesh

It'll be available in drei-vanila library someday but for now here's a Demo and messy Code Camera is not locked here so you can get to know the limitations and strengths

based on r3f drei spotlight & demo