Trail Renderer / Particle system

Since ThreeJS doesn’t have any built-in trail renderers nor particle system, how do you guys deal with VFX?

I’ve looked at mkkellogg’s TRjs (https://github.com/mkkellogg/TrailRendererJS) and squarefeet’s SPE (https://github.com/squarefeet/ShaderParticleEngine), but it seems like they’re both inactive from 3y+.

I’ve also seen @Usnul’s engine (Particle engine) which looks really cool, but it seems like its not yet open-source.

Does this mean my only option is to create my own? I wonder how long that will take and how complex it would be.

2 Likes

Basic particle system are actually not hard to implement. Especially since there are so many resources about this topic on the web. If you google “simple particle system”, you will find many youtube videos and text-based tutorials. One resource I can recommend is:

https://natureofcode.com/book/chapter-4-particle-systems/

It provides a good conceptual overview about particle systems and their building blocks (emitter, particle, lifespan etc.) along with some code.

2 Likes

Having read this, I decided to rush a little bit and release my engine earlier. You can find it here:

if you have any trouble - feel free to drop me a line or create an issue.

3 Likes

@Mugen87 Thanks for the resources, I’ll check it out. From what I’ve seen, it seems like the particle systems I linked are GPU-based, wouldn’t this make it a lot harder to implement? Also, I haven’t found any good resources on trail renderers, do you have any insights on that? I’ve seen the ExtrudeBufferGeometry, not sure if that’s what I’d need to use to make trails, since the points aren’t generated on the fly (need to specify curve ahead of time).

@Usnul Wow, that’s really amazing. Thanks for sharing, I’ll definitely check it out

I think it’s just something that a lot of people tend to gravitate towards. Tons of particles? - who doesn’t want that, right? :smiley:

Well, in practice you don’t really need to run your simulation on the GPU, I found. If you have less that, say, 100,000 particles being simulated at a time - it’s not a huge deal to simulate them on the CPU.

My engine uses a mix of CPU and GPU for the simulation, sorting and physics are done on the CPU and parameter interpolation is done on the GPU from an encoded parameter texture.

For a real game you will probably want to have tens of different particle emitters in your scene at any given time, and only with a handful of particles each. Most of the emitters in my game have around 30-100 particles at any given time, that’s super low, but it’s not because the engine can’t handle more, it’s because that’s all that’s needed. I’m sure that doesn’t fit every use-case, but I do believe that it covers majority of common use-cases.

2 Likes

WOW! Christmas sure came early this year :heart_eyes:

3 Likes

Hi guys,

I am actively working on a full-featured particle system engine that is very similar to Unity’s Particle System for threejs. I open sourced it under MIT License.

Alchemist0823/three.quarks - GitHub

It has also has a visual editor.

Alchemist0823/three.quarks-editor - GitHub

5 Likes