Library

Zero-dependency WebGL2 particle engine. One file, ES module or UMD. TypeScript definitions included.

Three.js addon

Drop-in module for three.js apps: spawn effects as Object3Ds, parent them to meshes, and render into your WebGLRenderer's context and depth buffer. three is a peer dependency (not bundled). See it live on the three.js demo.

Presets

All effect presets from the demo gallery as ready-to-load JSON. Open any of them in the editor, tweak, and export your own.

Sprites

The presets use Kenney's Particle Pack (white-on-transparent PNGs — tint them any color at runtime). Grab it from the original source, released under CC0.

Quick start

Drop the library into your WebGL game. ParticleBeast can own its own canvas, or render straight into your existing WebGL2 context (it saves and restores all GL state it touches).

import { ParticleBeast } from './particle-beast.js';

const beast = new ParticleBeast(myCanvasOrGlContext);
const explosion = await beast.loadEffect('presets/explosion.json');

// when something blows up:
beast.spawn(explosion, { position: [x, y, z], tint: '#ff8833' });

// in your game loop:
beast.update(deltaSeconds);
beast.render(viewMatrix, projectionMatrix);