Visual Effects with Particles: a Guide for Beginners
One of the best aspects of 3D is that one can build things that can speak for themselves. Isn’t it satisfying to show family and friends what your team is working on and see lights in their eyes? Creating visual effects with Particle Systems is a perfect example. In this article, I am going to create my first effect, a Magic Orb, using a new tool our Babylon.js Team just released: The Particle Editor.
Background on Particle Systems
For those completely new to Particles, Particle Systems are commonly used in 3D scenes to simulate phenomena like fire, smoke, or visual effects like in our demo. They uses small 2D sprites which always face the camera to give the impression of volume. A particle system is displayed with one single draw call which ensures good performance. The magic comes from the parametrization of a Particle System (e.g. shape of the emission source, evolution of the speed of the particles, lifetime, color, rotation…) combined with the chosen 2D sprite. The aha moment for me was when I realized that Jason Carter and Patrick Ryan, our demo wizards, had used particles to simulate God rays (sunbeams through the water) in our Underwater demo built for our latest Babylon.js 4.1 release.
Check out our Particles 101 Documentation to dive into the possibilities.
Introduction to Babylon.js Particle Editor
Particle Systems have been around for a while in Babylon.js (V1.5 according to our records!). What’s new is that you can now create and edit them not only in your code but also via an Editor accessible via our Inspector. The Particle Editor is part of our efforts to solidify Babylon.js simplicity. It is the newest member of a set of tools that allow to create/edit bits of Babylon.js applications without writing code, via property tool bars or visual programming interfaces such as configurable nodes. We started with the Node Material Editor to create shaders in our last release and have more editors in the pipe…
Check out our Particle Editor intro videos (Part 1, Part 2 and Part 3)
Conception of the Magic Orb Demo
The time to get our hands into the demo have finally come!
The first step is to come up with the effect you want to build. In my case, I found inspiration by looking at the existing particles demos of Babylon.js such as the amazing Sun from Patrick Ryan and by watching Unity tutorials on YouTube about particles. I finally landed on the doing a custom version of the Unity 5 — Game Effects VFX — Glowing Orb from Gabriel Aguiar.
The second step is to determine how many particle systems are needed to create the desired effect (it is usually a combination of several Particles Systems) and what type of 2D sprite you are going to use in each system. Gaining experience by looking at examples greatly helps. It may not be obvious at first to decompose an effect into several Particle Systems and even less obvious to picture what 2D sprite to use in each system. In the case of the Magic Orb Demo we have four particles systems and are using three different 2D sprites (we are re-using one for 2 different systems).
Workflow and first particle system
Creating and saving a Particle System, entails going through the following steps:
- Add new CPU/GPU Particle System
- Replace the default particle texture with the picture you chose for the 2D Sprite
- Change the Particle System parameters — that’s when the magic happens!
- Save to snippet Server, update the snippet ID in your code on the playground and save the playground
Putting it in practice with the first Particle system, the outer circles, means the following:
- Start from a basic Babylon.js Playground displaying a Particle system such as the one used in the Intro video
- Replace the code to use the Snippet server
- Change the texture with a circle with glow picture
- Edit parameters — some key ones are point as emitter type, 3 as rate, and gradients for size and color
Check out the parameters for this first System looking at the Particle Editor in this playground.
I spent most of the time changing the 2D sprite with various versions of the circle and tweaking the parameters to find the right visual balance.
Adding more particle systems
At this point, you know the ropes and what is left is to repeat the process to add the 3 other Particle Systems, making sure to combine them using Add as Blend mode. Some of the key parameters for those 3 Particle Systems:
1. Core in the center: use a point of light image as 2D sprite. Choose a Point emitter at the Origin. Add initial rotation and angular speed to give the impression of a living core.
2. Sparks emitted by the orb: re-use the same 2D sprite as the one of the Core. As emitter, use an invisible sphere of the same size as the core to simulate that the sparks are emitted by the core. Change the particle size over time and use “Direction randomizer” at 1 to make their movement look more natural.
3. Smoke across the surface of the orb: use a smoke 2D sprite. Use as emitter the same invisible sphere than for the sparks but set “Radius range” to “0” to have the smoke emitted just from its surface. Set the transparency value to 10% in the color gradients to ensure the smoke is not too present. Add initial rotation and angular speed to make it alive.
And this is it! Check out the final Playground of the demo here.
In a nutshell
I hope this got you all pumped up into Particle Systems with Babylon.js. As you can imagine, we have just scratched the surface of the possibilities in this article. With GPU Particles you can have millions of particles, with noise textures you can apply custom changes to the direction of the particles, with Sub Emitters you can spawn new particles from existing ones,… and the list goes on. I wish you a lot of fun creating your own visual effect!
Thomas Lucchini — Babylon.js Team
https://twitter.com/thomlucc
