three.quarks is a high-performance javascript particle system based visual effect library for threejs written in modern TypeScript.
Join our discord for discussion.
three.quarks is a high-performance general-purpose particle system library with a WYSIWYG visual editor three.quarks-editor for it. It runs on top of the well-known WebGL library called three.js.
- Port Simulation Compiler code to Rust
- WebAssembly Particle Simulation on CPU. (WIP)
- GPU simulation on GPU (WIP)
- Node based / scriptable particle system (WIP)
- Unity / Standalone Cross-platform Native plugin to run VFX
- Semi-compatible Unity (shuriken) Particle system
- Support Mesh Standard Material and Mesh Basic Material
- Batch Render Multiple Particle System (reduce draw calls) - BatchedParticleRenderer
- Emission Shape and Control
- Mesh Surface Emitter
- Plugin System - Plugin
- Customizable Behaviors
- Customizable Emitter Shape
- 4 Type of renderer
- BillBoard
- Stretched BillBoard
- Mesh Renderer
- Trail Renderer TrailBatch
- Spawn Particle on Mesh Surface
- Configuable RenderMode and BlendMode
- 1D Bézier curve function for adjusting
- Texture Atlas Animation
- User Extension and Customization
- A realtime editor to test and create visual effects three.quarks-editor
- VFX json load and save
three.quarks computes most particles information on CPU, and it uses customized shader , instancing, batch technique to render those particles with as less draw call as possible. three.quarks supports 1 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.
Launch Examples
yarn install # install dependencies
yarn build:production # build three.quarks
yarn example # start an HTTP server to serve example particle effects
Check examples folder
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: 1,
cycle: 1,
interval: 0.01,
probability: 1,
}],
shape: new PointEmitter(),
material: new MeshBasicMaterial({map: texture, blending: AdditiveBlending, transparent: true}),
startTileIndex: 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());
const batchSystem = new BatchedRenderer();
const loader = new QuarksLoader();
loader.setCrossOrigin("");
loader.load(jsonURL, (obj) => {
obj.traverse((child) => {
if (child.type === "ParticleEmitter") {
batchRenderer.addSystem(child.system);
}
});
scene.add(obj);
}, () => {
}, () => {
});
scene.add(batchSystem);
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.
JSON.stringify(muzzle1.emitter.toJSON())
JSON.stringify(muzzle1.emitter.parent.toJSON())
three.quarks-editor can help you preview a set of particle system at once. and you can also adjust all the particle system at real time and export those system as a JSON file. Your app or game can load those JSON file later. It even includes a Javascript scripting system to test those effect in a similar environment to your application.
yarn install three.quarks
Check test folder
More examples will come up later.