three.quarks: Particle System and VFX Engine for Three.js

RepositoryAlchemist0823/three.quarksTool

three.quarks is a TypeScript-based particle system and VFX library for Three.js. It minimizes draw calls via batch rendering, offers a visual web editor, and supports importing from Unity's Shuriken system. It helps WebGL and browser game developers create high-performance visual effects.

Key points

  1. BatchedRenderer combines particle systems to minimize WebGL draw calls and boost framerates.
  2. WYSIWYG visual editor at quarks.art/create enables interactive design and JSON export.
  3. QuarksLoader loads exported JSON particle effects directly into Three.js scenes at runtime.
  4. Supports importing particle systems created with Unity's Shuriken system.
  5. Extensible architecture featuring plugins for custom emitters and particle behaviors.

Why it matters

Hand-coding complex particle effects in Three.js is computationally heavy and difficult to tweak. three.quarks brings game-engine-style visual authoring and batched rendering performance to the browser.

Analysis

Background and Problem

Visual effects like smoke, explosions, or magic spells are notorious performance bottlenecks in WebGL. Poorly optimised particle systems create excessive draw calls that quickly exhaust GPU resources, especially on mobile hardware. In addition, Three.js lacks built-in visual authoring tools comparable to those in modern game engines.

Architecture and Features

Written in TypeScript, three.quarks addresses these bottlenecks through its central BatchedRenderer. Rather than rendering each emitter separately, it batches draw operations across systems.

  • Configuration: Particle attributes such as velocity, lifespan, and color gradients are controlled through utility classes like IntervalValue and ConstantColor.
  • Editor workflow: The web-based editor at quarks.art/create gives artists and developers a real-time preview to design effects and export them as JSON.
  • Runtime integration: Using QuarksLoader, teams can load exported JSON files directly into their Three.js scene graphs without hardcoding particle properties.
  • Unity compatibility: The ability to import setups from Unity's Shuriken engine significantly reduces friction when porting 3D assets to the web.

Maturity and Audience

With more than 1,100 GitHub stars, an MIT licence, and live production demos, three.quarks is a mature, capable library. It is ideal for WebGL developers, creative technologists, and digital agencies building interactive 3D web experiences and browser games.

Mentioned links

Found in

Summary generated by AI (Gemini 3.8 Flash, 1 November 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Repository:gkjohnson/three-gpu-pathtracer

    three-gpu-pathtracer: GPU-Accelerated Path Tracing for Three.js

    three-gpu-pathtracer is a renderer and utility library that adds GPU-accelerated path tracing to Three.js using WebGPU compute shaders and BVH structures. It brings physically based rendering and realistic lighting directly to web browsers. It helps 3D front-end developers create high-fidelity interactive graphics.

    2kstarsJavaScript

    Web development· Tool

  • Repository:pmndrs/postprocessing

    postprocessing: Post-Processing Library for Three.js

    postprocessing is a JavaScript library by Poimandres that extends Three.js with modular post-processing passes and effects. It provides rendering pipelines for fullscreen effects like bloom alongside color space handling for WebGL developers.

    2.9kstarsJavaScript

    Web development· Tool

  • Repository:img2threejs/img2threejs

    img2threejs: Procedural Code-Only Image-to-3D for Three.js

    img2threejs turns reference images into procedural, animation-ready Three.js models generated purely as code, avoiding traditional mesh extraction or photogrammetry.

    15.1kstarsPython

    AI & LLMs· Tool

  • Repository:MengTo/threeui

    ThreeUI Community: Interactive 3D and WebGL Components for React

    ThreeUI Community is an open-source component library and interactive catalogue providing 3D and shader-based UI elements for React. Maintained by Meng To (DesignCode), it delivers the complete source code for all free community components without requiring an account.

    5.2kstarsHTML

    Web development· Tool

  • Repository:ashemag/human-atlas

    Human Atlas: Open-Source 3D Anatomy Explorer in the Browser

    Human Atlas is an open-source, interactive 3D anatomy explorer built with React, Three.js, and shadcn/ui. It breaks down the BodyParts3D reference model into 2,234 selectable meshes across 15 anatomical systems, offering search, layer toggles, and exploded views.

    2.9kstarsTypeScript

    Web development· Tool

  • Repository:cocopon/tweakpane

    Tweakpane: Compact GUI Library for In-Browser Parameter Tuning

    Tweakpane is a dependency-free UI pane library designed to fine-tune parameters and monitor dynamic value changes in real time. Inspired by dat.GUI, it provides clean controls primarily for creative coders, 3D demos, and interactive prototypes.

    4.6kstarsTypeScript

    Web development· Tool

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.