Build Particles Effect with three.js or PixiJS
Last week, I made two small application for practicing the particles effect in my spare time, this article about what I learned.
TL;DR
If you can separate final rendering result to thousands of parts and have a fast renderer, you can integrate the particles effects in your application :)
The source code of the two small applications I made:
Image particles(built with PixiJS)
3D bird particles(built with three.js)
Rendering graphics is a heavy work, especially for fancy effects cases like this one, so WebGL needs to be used(for web applications). three.js and PixiJS are two famous WebGL wrappers.
Let’s get started
The smallest unit of this effect is the particle, it should take responsibility for initializing the graphic it linked with and provide an update method to be called in application’s rendering loop, use Pixi.js as an example.
If you use three.js, just treat the PIXI.Sprite as THREE.Mesh, PIXI.Container as THREE.Scene.
During the initialization stage, create all the particles and set up the rendering loop.
renderingLoop = () => {
if (this.isOnSetup) { return; } const mouseX = this.mouseX - pixiAPP.renderer.view.offsetLeft;
const mouseY = this.mouseY - pixiAPP.renderer.view.offsetTop;
particles.forEach(element => element.update(mouseX, mouseY));
pixiAPP.render();
}
You don’t need to provide the mouse position if user interactions is not needed :)
Basally, that’s it, please try to implement it if you haven’t.
Surprising things I found
For rendering image particles, I found PixiJS has better performance than three.js. So I think I’ll use PixiJS for my projects if they are purely 2D😃
(during the comparison, I even was not using PixiJS’s ParticleContainer)
Maybe I was wrong with my experimenting, please let me know if you have any thoughts with that :)
Thanks for your time!
