Volumetric display of particles

Hi, community!

Since the moment, when @marquizzo asked this question: Clipping Solids (SDF functions), I time to time thought on it.

So this evening I had a thought of how it could be done and I wrote an example:

The idea: to write geometry’s index and vertices into data textures and then, in vertex shader of PointsMaterial, perform raycasting from each vertex of THREE.Points() against faces of an arbitrary geometry in textures, using the same principle, like in this example: How fill a loaded STL mesh ( NOT SIMPLE SHAPES LIKE CUBE ETC) with random particles and animate with this geometry bound in three.js, but in shaders, so I found an answer on SO:
https://stackoverflow.com/a/42752998
and use it with slight modifications.

Codepen:

PS I perfectly understand that this approach is imperfect, and I bet that there are many other ways to achieve the same visual result :slight_smile:
PPS Thank @marquizzo for such cool and interesting questions :beers:

10 Likes

That’s super cool. Seems like a lot of work for each point, but hey, gpu can do it, right? :slight_smile:

I think you could probably do something similar with a spatial index on CPU for this number of points. But that’s neither here nor there. Unity released an implementation of mesh SDF a while ago, they had some tweets going out on that. I was curious how they achieved it there.

reminds me of a GDC talk by suckerpunch studio, they talked about Infamous: Second son, they had some kind of an implementation for distributing points on a mesh there, and even sampling texture at the correct UV.

Anyway, this is really cute looking, and runs quite smooth, thanks for sharing!

1 Like

That is so cool! I knew it would require raytracing of some sort.

With additive blending and some vertex jitter, you can actually perceive the thickness of the object!

3 Likes

@Usnul @marquizzo
Thanks guys :slight_smile:

I see that this approach is not for complex geometries and/or big amount of points/particles. :thinking:

For some reason i sometimes see pentagrams in the pattern it creates ^^

2 Likes

@Fyrestar Hell of an approach :smile:

1 Like