three.quarks

three.quarks is a high-performance javascript particle system based visual effect library for threejs written in modern TypeScript.

three.quarks computes most particle information on CPU, and it uses customized shader , instancing, batch techniques to render those particles with as few draw calls as possible. three.quarks supports one dimension piecewise Bézier curves for the customizable transform visual effect. Most importantly, developers can customize how the particle system works by adding their own Behavior.

Install

Package install

npm install three.quarks

Add particle system to the scene

const clock = new THREE.Clock();
const batchSystem = new BatchedRenderer();
const texture = new TextureLoader().load("atlas.png");
// Particle system configuration
const muzzle = {
    duration: 1,
    looping: false,
    startLife: new IntervalValue(0.1, 0.2),
    startSpeed: new ConstantValue(0),
    startSize: new IntervalValue(1, 5),
    startColor: new ConstantColor(new THREE.Vector4(1, 1, 1, 1)),
    worldSpace: false,

    maxParticle: 5,
    emissionOverTime: new ConstantValue(0),
    emissionBursts: [{
        time: 0,
        count: new ConstantValue(1),
        cycle: 1,
        interval: 0.01,
        probability: 1,
    }],

    shape: new PointEmitter(),
    material: new MeshBasicMaterial({map: texture, blending: AdditiveBlending, transparent: true}),
    startTileIndex: new ConstantValue(91),
    uTileCount: 10,
    vTileCount: 10,
    renderOrder: 2,
    renderMode: RenderMode.Mesh
};

// Create particle system based on your configuration
muzzle1 = new ParticleSystem(muzzle);
// developers can customize how the particle system works by 
// using existing behavior or adding their own Behavior.
muzzle1.addBehavior(new ColorOverLife(new ColorRange(new THREE.Vector4(1, 0.3882312, 0.125, 1), new THREE.Vector4(1, 0.826827, 0.3014706, 1))));
muzzle1.addBehavior(new SizeOverLife(new PiecewiseBezier([[new Bezier(1, 0.95, 0.75, 0), 0]])));
// texture atlas animation
muzzle1.addBehavior(new FrameOverLife(new PiecewiseBezier([[new Bezier(91, 94, 97, 100), 0]])));
muzzle1.emitter.name = 'muzzle1';
muzzle1.emitter.position.x = 1;

batchSystem.addSystem(muzzle1);

// Add emitter to your Object3D
scene.add(muzzle1.emitter);
scene.add(batchSystem);

Add batch renderer update in your main loop

// update batched renderer
batchSystem.update(clock.getDelta());

Import VFX JSON

const batchSystem = new BatchedRenderer();
const loader = new QuarksLoader();
loader.setCrossOrigin("");
loader.load(jsonURL, (obj) => {
    // the API uses manuel loading because users may need to 
    // store the VFX somewhere to reuse it later.
    QuarksUtil.addToBatchRenderer(obj, batchRenderer);
    scene.add(obj);
}, () => {
}, () => {
});
scene.add(batchSystem);

Play multiple instances of loaded effect

const effect = obj.clone(true);
scene.add(effect);
QuarksUtil.setAutoDestroy(effect, true);
QuarksUtil.addToBatchRenderer(effect, batchSystem);
QuarksUtil.play(effect);

Note: the texture url reference is defined by the texture’s name field. you may need to modify the texture url in json as needed.

Export VFX JSON

JSON.stringify(muzzle1.emitter.toJSON())
JSON.stringify(muzzle1.emitter.parent.toJSON())