Hey team! It’s me with a new feature!
You can now design complex and intricate particle systems using the Node Particle Editor (NPE).
NPE
NPE lets you define one or multiple particle systems. It creates a ParticleSystemSet that can be used directly.
javascript
const npe = await BABYLON.NodeParticleSystemSet.ParseFromSnippetAsync("#8O4BJ2");
const particleSystemSet = await npe.buildAsync(scene);
particleSystemSet.start();
Here’s a complete example you can try out:
Babylon.js Playground
How To Use NPE
To use NPE, head to https://npe.babylonjs.com.
The default setup matches the one we just showed. Let’s dive deeper.
To set up a particle system, you’ll need three core components:
- The particle system itself, defined by a ParticleSystem block
- The creation logic, using at least a Create Particle block and a Shape block
- The update logic
Note: For now, NPE only generates CPU-based particle systems.
The particle system block
This block defines the static properties of the system (like capacity or emitRate). You must provide, at a minimum, a particle input and a texture input.
Creation phase
Every time a particle is created, this code runs. Each input is dynamic, meaning it’s evaluated per particle.
In this example, each new particle is given a randomly chosen lifetime between 1 and 2.
The shape blocks are how you define shape emitters
Update phase
The update logic is executed every frame for each particle. In this example, we update the position by adding the velocity (also known as scaled direction, i.e., direction adjusted for frame rate).
Each particle property can be updated:
The blocks labeled Position and Scaled direction are contextual values — they reflect the intrinsic properties of a particle.
For basic behaviors, we offer direct function blocks so you don’t need to manually wire everything. For example, the earlier logic can be replaced with a BasicPositionUpdate:
Managing random values
A core feature of any particle system is randomness. To support this, we provide three types of randomization blocks:
Random
The basic node for generating random values. It can generate values per particle, per system, or on every call.
Gradient
Use this to create value ramps. Based on an input from 0 to 1, it picks the appropriate value from a range.
In this case, we use the AgeGradient contextual value (representing particle life from 0 to 1) to determine color. The particle is born white and fades to red, reaching full red at 75% of its lifetime.
Triggers
To add more complex behaviors, you can use triggers to link multiple particle systems—for example, to start a new one when a specific condition is met.
Here is a pretty complex example
And more precisely on the top right corner:
Here, we’ve introduced a Trigger block. This block must be connected to another particle system—it’s designed to start a clone of that system when a specific condition is met. You can also limit the maximum number of simultaneous systems to avoid overloading the CPU.
In our example, if a particle from the source system has a position.y greater than a random value between 0.5 and 1.5, it triggers a clone of the target system. However, this trigger will only fire once every 250ms, and no more than 5 instances can be active at the same time.
Another option is to use the onStart and onEnd events on each particle system:
In this example, the “Wave2” particle system will start when the “Wave” system ends. For this to work, “Wave” must have a target duration—otherwise, it would loop endlessly and never emit an onEnd event.
Also note: “Wave2” is set to not start automatically.
Going further
I hope you will find it useful!!
Here is a link to an issue to track incoming features for NPE:
Node Particle Editor · Issue #16740 · BabylonJS/Babylon.js
Documentation: Node Particle Editor | Babylon.js Documentation
Just kidding - I know it’s talent and hard work.