High-performance particles & VFX
for Babylon.js

Babylon.quarks is a GPU-batched particle system and visual-effects library for Babylon.js — trails, stretched billboards, mesh particles, sub-emitters and 20+ behaviors, a Shuriken-style visual effect editor, WebGL & WebGPU rendering, and a Unity → Quarks exporter. Open-source and TypeScript-first.

View demos ↓ Open the editor GitHub ★ $ npm i babylon.quarks
Babylon.js 9+ WebGL & WebGPU TypeScript MIT licensed GPU-batched

Everything you need for game-ready VFX

A batched renderer built for high particle counts, a full behavior stack, and a visual editor — all running on Babylon.js.

GPU-batched rendering

One draw call across many systems for high particle counts, with adaptive performance scaling.

Trails & stretched billboards

Ribbon trails, velocity-stretched billboards, and four billboard alignment modes.

Mesh particles

Render particles as instanced meshes, or emit from any mesh surface.

Sub-emitters & 20+ behaviors

Color / size / rotation over life, noise, turbulence, forces, collision, velocity, and more.

Shuriken-style editor

A Unity-like visual effect editor with a module inspector, curves, gradients and a timeline.

Unity → Quarks exporter

Export a Unity Shuriken effect straight to Babylon.quarks JSON and load it in one call.

Quick start

Install the package, load an exported effect with QuarksLoader, register it with the batched renderer, and tick it every frame. 

# install
npm i babylon.quarks

// render an effect in your Babylon scene
import { BatchedRenderer, QuarksLoader, QuarksUtil } from "babylon.quarks";

const renderer = new BatchedRenderer("vfx", scene);
const root = new QuarksLoader(scene).parse(effectJson);
QuarksUtil.addToBatchRenderer(root, renderer);
QuarksUtil.play(root);

// tick the simulation every frame
scene.onBeforeRenderObservable.add(() => {
    renderer.update(scene.getEngine().getDeltaTime() / 1000);
});

// ...or build a system in code — no JSON needed
import { ParticleSystem, ConstantValue, IntervalValue, SphereEmitter,
         SizeOverLife, PiecewiseBezier, Bezier } from "babylon.quarks";
import { Texture } from "@babylonjs/core/Materials/Textures/texture";

const sparks = new ParticleSystem({
    scene,
    startLife: new IntervalValue(1, 2),
    startSpeed: new IntervalValue(2, 5),
    startSize: new IntervalValue(0.1, 0.3),
    emissionOverTime: new ConstantValue(60),
    shape: new SphereEmitter({ radius: 0.2 }),
    texture: new Texture("particle.png", scene),
});
sparks.addBehavior(new SizeOverLife(new PiecewiseBezier([[new Bezier(1, 0.9, 0.6, 0), 0]])));
renderer.addSystem(sparks);
sparks.play();

Explore the demos

18 interactive particle demos — emitter shapes, blending, trails, sub-emitters, GPU turbulence and more. Open any of them in the editor.

Why Babylon.quarks?

Babylon.js ships a capable built-in ParticleSystem, but Babylon.quarks adds a GPU-batched renderer for high particle counts, a modular behavior stack (noise, turbulence, collision, sub-emitters, by-speed modifiers…), first-class trail and mesh rendering, and a visual effect editor — plus a JSON format you can author in Unity and import directly. It's the toolkit for authoring complex, reusable effects.