A high-performance, GPU-batched particle system and VFX library for Babylon.js — trails, mesh particles, sub-emitters and 20+ behaviors, a Shuriken-style visual effect editor, WebGL & WebGPU rendering, and a Unity → Quarks exporter.

Live demos · Effect editor · API docs · npm

This monorepo holds the babylon.quarks npm package, an in-house visual effect editor, a Unity exporter, and Babylon.js examples. The engine (quarks.core) is historically derived from quarks.art / three.quarks.

• GPU-batched rendering — one draw call across many systems for high particle counts, with adaptive performance scaling
• Full behavior stack — color / size / rotation over life, noise, turbulence, forces, collision, velocity, by-speed modifiers, and sub-emitters
• Trails, stretched billboards & mesh particles — plus emission from mesh surfaces
• Shuriken-style visual editor — module inspector, curves, gradients and a timeline; export / import Quarks JSON
• WebGL & WebGPU · TypeScript-first · Unity → Quarks exporter

• Package: babylon.quarks
• Install:

npm install babylon.quarks @babylonjs/core

Requires an existing Babylon.js Scene. Peer dependency: @babylonjs/core >= 9.

import {
    BatchedRenderer,
    ParticleSystem,
    PointEmitter,
    RenderMode,
    ConstantValue,
    IntervalValue,
    ConstantColor,
    Vector4,
} from 'babylon.quarks';

// One renderer per scene; it batches every system added to it into shared draw calls.
const batchRenderer = new BatchedRenderer('particles', scene);

const system = new ParticleSystem({
    scene,
    duration: 5,
    looping: true,
    startLife: new IntervalValue(4, 5),
    startSpeed: new ConstantValue(1),
    startSize: new IntervalValue(1, 2),
    startColor: new ConstantColor(new Vector4(1, 1, 1, 1)),
    emissionOverTime: new ConstantValue(20),
    shape: new PointEmitter(),
    renderMode: RenderMode.BillBoard,
    texture: myParticleTexture,
    transparent: true,
});
batchRenderer.addSystem(system);

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

Effects designed in the effect editor or Unity exporter (or exported from quarks.art — same JSON format) load with QuarksLoader instead of being hand-coded:

import {BatchedRenderer, QuarksLoader, QuarksUtil} from 'babylon.quarks';

const batchRenderer = new BatchedRenderer('particles', scene);
const loader = new QuarksLoader(scene);
const effect = await loader.load('effects/explosion.json');
QuarksUtil.addToBatchRenderer(effect, batchRenderer);
QuarksUtil.play(effect);

scene.onBeforeRenderObservable.add(() => {
    batchRenderer.update(scene.getEngine().getDeltaTime() / 1000);
});

Disabling an emitter (system.emitter.visible = false, or setEnabled(false) on the node) freezes that system: it is neither drawn nor simulated, and it picks up where it left off when re-enabled. This matches Unity's behaviour for a disabled Particle System, and makes parked effects in a VFX pool free.

For the Babylon.js Playground or plain <script> usage there is a UMD bundle exposed as the BabylonQuarks global — see the package README for a paste-ready Playground snippet:

await BABYLON.Tools.LoadScriptAsync('https://cdn.jsdelivr.net/npm/babylon.quarks/dist/babylon.quarks.umd.min.js');
const {BatchedRenderer, ParticleSystem} = BabylonQuarks;

Full API reference, WebGPU setup and more: package README · API docs.

• Effect editor — our own Shuriken-style visual editor (hierarchy panel + module inspector). Try it live, or run it locally with npm run examples and open editor.html. See the babylon.quarks-editor README to embed it in your own app.
• Unity exporter — author in Unity's Shuriken Particle System and export straight to Quarks JSON via a Unity Editor tool (.unitypackage, UPM, or copy-in).
• Effects exported from the quarks.art editor still load fine — it's the same JSON format, read by QuarksLoader regardless of which tool produced it.

GitHub Pages demo · API docs · Particle benchmark (babylon.quarks vs Babylon's built-in CPU/GPU particle systems)

Muzzle Flash	Explosion (Unity export)	Emitter Shapes	Trail Renderer
Texture Sequencer	Mesh Material	Sub Emitter	Noise Turbulence
Alpha Test Mesh	Custom Plugin	Billboard Modes	Soft Particles
Custom Blending	Follow Moving Objects	Pick-Up Burst	Level-Up
Electric Ball	Black Hole

See ROADMAP.md for planned improvements (WebGPU, GPU simulation, benchmarks, Playground build) and promotion plans.

• packages/babylon.quarks - publishable package
• packages/babylon.quarks-editor - in-house Shuriken-style effect editor (headless core + React UI)
• packages/quarks.core - underlying particle simulation engine
• tools/unity-quarks-exporter - Unity Editor tool that exports Shuriken effects to Quarks JSON
• examples - Vite app used for local demos, the effect editor page and GitHub Pages

npm install
npm run build
npm run examples

Open local examples at http://localhost:8001 (Vite picks the next free port if 8000 is busy).

npm run test
npm run build:examples
npm run check:pack
npm run check

Run the local examples server first, then generate screenshots:

npm run dev
npm run capture:previews

Texture Sequencer reads two images:

• text shape: examples/public/textures/text_texture.png
• logo shape: examples/public/textures/logo_texture.png

Replace these files with your own PNG images to customize the demo output.

See CONTRIBUTING.md for the dev setup, quality checks, demo guide and PR conventions. Package changes are tracked in the babylon.quarks changelog and the babylon.quarks-editor changelog.

1. Run npm run check from repository root.
2. Update the changed package(s)' CHANGELOG.md and bump their package.json version (packages/babylon.quarks and/or packages/babylon.quarks-editor).
3. Verify tarball content with npm run check:pack (covers both publishable packages).
4. Publish a GitHub release — CI publishes both babylon.quarks and babylon.quarks-editor to npm via trusted publishing (or run the Publish npm package workflow manually).