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 :)