three.quarks is an open-source, MIT-licensed particle system and visual effects engine written in TypeScript for three.js, aimed at developers building real-time VFX for browser games, interactive experiences, and web applications.

What it is

three.quarks is a particle system and VFX library that plugs into the three.js WebGL rendering stack. It is published to npm as three.quarks, ships a companion React Three Fiber package called quarks.r3f, and is documented at quarks.art, alongside a WYSIWYG effect editor at quarks.art/create, an interactive demo at demo.quarks.art, and a Discord server for community support. The library provides four renderers — Billboard, Stretched Billboard, Mesh, and Trail — together with emitter shapes such as PointEmitter and ConeEmitter, parameterised through value types including ConstantValue, IntervalValue, and ConstantColor.

The concrete problem it solves is that three.js offers no particle system of its own: effects otherwise have to be hand-built from geometry, materials, and custom update code, with draw calls managed by the application. three.quarks replaces that with a BatchedRenderer that owns a collection of ParticleSystem instances and batches them to minimise draw calls, and with a declarative API in which emission rate, lifetime, speed, size, colour, and emitter shape are expressed as value objects rather than bespoke per-effect code. It also replaces hand-coded effect definitions with a visual authoring step: effects are designed in the editor, exported as JSON, and loaded at runtime through QuarksLoader.

Key capabilities

• A BatchedRenderer that registers multiple particle systems and is advanced once per frame with batchRenderer.update(delta), batching them to minimise draw calls.
• Four render modes: Billboard for camera-facing sprites, Stretched Billboard for velocity-aligned sprites, Mesh for 3D geometry particles, and Trail for ribbon trails behind particles.
• Declarative effect parameters built from ConstantValue, IntervalValue, and ConstantColor, with emitter shapes including PointEmitter and ConeEmitter.
• Particle behaviours including SizeOverLife, driven by PiecewiseBezier and Bezier curves.
• A JSON effect pipeline in which effects exported from the visual editor are loaded with QuarksLoader, attached via QuarksUtil.addToBatchRenderer, started with QuarksUtil.play, and cleaned up with QuarksUtil.setAutoDestroy when cloned for multiple simultaneous instances.
• Import of particle systems authored in Unity's Shuriken system.
• An extensible plugin system for custom behaviours and emitters, plus a quarks.r3f package exposing QuarksProvider and ParticleSystem components for React Three Fiber.

Who uses it and how

• Browser game teams that need real-time combat, explosion, or ambient effects rendered inside a three.js scene without writing per-effect rendering code.
• Developers of interactive experiences and web applications who reuse one effect across many simultaneous instances, cloning a loaded effect and relying on auto-destroy to release each finished copy.
• Teams already building on React Three Fiber, who compose effects declaratively with QuarksProvider and ParticleSystem instead of imperative scene-graph calls.
• Studios carrying existing Unity Shuriken effects into a web build, using the importer rather than re-authoring the effects from scratch.
• Mixed teams in which a designer authors an effect in the visual editor and an engineer loads the exported JSON at runtime, separating look development from application code.

Getting started

Install the library with npm install three.quarks, adding npm install quarks.r3f three.quarks when the React Three Fiber bindings are wanted. Effects can be authored in the hosted editor at quarks.art/create and previewed through the live demo at demo.quarks.art.

How it compares

The facts name no direct alternative to three.quarks: it sits inside the three.js ecosystem rather than competing with it, supplying the particle and VFX layer that three.js itself does not provide. Its only other named point of contact is Unity's Shuriken particle system, which it treats as an import source rather than a rival, so no comparable library is identified in the material available here.

When to use it — and when not to

Adopting it means owning a three.js scene and wiring batchRenderer.update(delta) into an animation loop; the facts describe no server component, database, or other infrastructure for a self-hoster to operate. Projects that are not built on three.js, or that need to stay inside a native Unity pipeline rather than export effects out of it, should look elsewhere. It is also worth noting that the editor is presented as a hosted service at quarks.art/create, and that the published feature list in the supplied README is truncated mid-section, so the full documented surface should be confirmed against quarks.art before committing.

npm install three.quarks

import * as THREE from 'three';
import {
    BatchedRenderer,
    ParticleSystem,
    ConstantValue,
    IntervalValue,
    ConstantColor,
    PointEmitter,
    RenderMode
} from 'three.quarks';

// 1. Create the batch renderer (manages all particle systems)
const batchRenderer = new BatchedRenderer();
scene.add(batchRenderer);

// 2. Define your particle system
const particles = new ParticleSystem({
    duration: 2,
    looping: true,
    startLife: new IntervalValue(1, 2),
    startSpeed: new ConstantValue(5),
    startSize: new IntervalValue(0.1, 0.3),
    startColor: new ConstantColor(new THREE.Vector4(1, 1, 1, 1)),
    maxParticle: 100,
    emissionOverTime: new ConstantValue(20),
    shape: new PointEmitter(),
    material: new THREE.MeshBasicMaterial({
        map: yourTexture,
        transparent: true
    }),
    renderMode: RenderMode.BillBoard
});

// 3. Add to scene and renderer
scene.add(particles.emitter);
batchRenderer.addSystem(particles);

// 4. Update in your animation loop
function animate() {
    const delta = clock.getDelta();
    batchRenderer.update(delta);
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

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

const batchRenderer = new BatchedRenderer();
const loader = new QuarksLoader();

loader.load('effects/explosion.json', (effect) => {
    QuarksUtil.addToBatchRenderer(effect, batchRenderer);
    scene.add(effect);
});

scene.add(batchRenderer);

// Clone and play the effect multiple times
const instance = loadedEffect.clone();
scene.add(instance);

QuarksUtil.addToBatchRenderer(instance, batchRenderer);
QuarksUtil.setAutoDestroy(instance, true); // Auto-cleanup when finished
QuarksUtil.play(instance);

npm install quarks.r3f three.quarks

import { Canvas } from '@react-three/fiber'
import { QuarksProvider, ParticleSystem } from 'quarks.r3f'
import { ConeEmitter, SizeOverLife, PiecewiseBezier, Bezier, RenderMode } from 'three.quarks'

function FireEffect() {
    const shape = useMemo(() => new ConeEmitter({ angle: 0.3, radius: 0.2 }), [])
    const behaviors = useMemo(() => [
        new SizeOverLife(new PiecewiseBezier([[new Bezier(1, 0.5, 0.2, 0), 0]]))
    ], [])

    return (
        <ParticleSystem
            duration={5}
            looping
            startLife={[1, 2]}
            startSpeed={[2, 4]}
            startSize={0.5}
            startColor={{ r: 1, g: 0.5, b: 0.2, a: 1 }}
            emissionOverTime={40}
            shape={shape}
            renderMode={RenderMode.BillBoard}
            behaviors={behaviors}
            position={[0, 0, 0]}
            autoPlay
        />
    )
}

function App() {
    return (
        <Canvas>
            <QuarksProvider>
                <FireEffect />
            </QuarksProvider>
        </Canvas>
    )
}

npm install
npm run build
npm run examples