How to make 3D smoke

Questions
, , ,
1

How can to use THREE.InstancedBufferGeometry(); so to make smoke effect three.js examples. Is it possible to replace triangles with PNG? Maybe there are other ideas on how to make smoke, taking into account the latest versions of threejs? Examples https://stemkoski.github.io/ for old versions of threejs and not suitable for me.

3

If something like this is what you want, then it’s achievable with sprites like @Chaser_Code has suggested. In the gif I move sprites up and enlarge them slightly as they move. At some point their transparency starts to fade until they are no longer visible. Add some randomization into the process and a bit of coloring - and you get something looks quite believable.
smoke_particles_2022_02_06

here are the color and scale(controls size) curves I use for the particles:
image

5 Likes
4

The best way to archive this is with particle sprites like @Usnul said (points or instanced quads/planes), however it isn’t as simple to implement in a single buffer, it is as long as you use additive blending, but it might not look as desired as you won’t get darkening grayish to black smoke.

As for the latter you need alpha blending which only works by depth-sorting particles, you need to do yourself as three only sorts objects which are going to be a drawcall each. For those larger foggy particle patches you might also want to soft blend with intersections on the scene to get a much more authentic/atmospheric look. But for that you should rather use a full particle system.

2 Likes
5

Raw version with emmiter. For walking, go to codepen:

4 Likes
6

That’s entirely true, you do need to sort to get the right look. Without sorting it looks “ok” generally, but not quite right. When sorting is enabled - it looks way better.

Same with soft particles, that’s actually enabled in that GIF I sent, not very obvious, but again - it’s one of those things that stands out if you don’t have it.

I’d recommend getting a fully-fledged particle engine from somewhere if you’re going to be using particles a lot anyway. Otherwise - maybe go with a subset of these features.

2 Likes
7

Thank you, this is very cool!!!

1 Like
8

You are wellcome