In the first two parts of this tutorial series, we learned the basics of implementing a particle system. This time we will use this knowledge to implement a simple particle system and apply this system to our own projects.

Orbital particle systems demonstration

In order to realize the particle system, we do not need any new knowledge, what we need to do is to add more physical parameters in the particle, and reasonably organize the code to achieve the reuse of the system, the need to add physical parameters can refer to the source code at the end of the article, we focus on the code organization here.

In order to realize the reuse of ParticleSystem, I introduce the concept of Emitter, and each particle effect such as snowflake, flame, explosion, etc. is realized as a subclass of Emitter. The particle system acts as a steward controlling the initiation, stopping, and destruction of the emitter.

Class structure of particle systems

Each transmitter can be divided into cubes and spheres according to shape. It is not hard to imagine that scenes such as snowflakes, starry sky and fluorescent light are more suitable to be realized with cubic space particles, while the shape of special effects such as flame and smoke is closer to sphere. Please refer to the comparison below.

Snowflakes in particle systems

The flame of particle systems

Fluorescence of particle systems

Note that the blending mode of particle materials should be set according to the particle type, such as flame and fluorescent particles, set the blending type to THREE.AdditiveBlending mode, Additive blending mode works by stacking two pixels in the shader to create a stronger halo effect.

The main content of the particle system is these, in addition to the above demonstration effect, theoretically can adjust the parameters to achieve more cool effect, waiting for you to find, if there is a question can refer to the source code or give me a message.

I had the idea of implementing a particle system at first because I was working on a small game called Three. js, in which particle effects such as explosions and flame jets were needed, but there was no such built-in tool in Three. js. So I decided to learn how to implement one myself. After learning the official example and github source code, I tried to share what I learned, which resulted in this series of tutorials. If you can learn something from it, I think it’s all worth it.

The DEMO presentation