Introduction
A visual node editor for TSL shaders, rendered live on WebGPU in your browser — and embeddable anywhere with an npm package.
Fluorite is a visual node editor for building fragment shaders with
TSL, the
Three.js Shading Language. You wire typed nodes — math, vectors, procedural
patterns, textures — into a graph, and the graph rooted at the output node's
color port renders as a shader.
How it works
- The graph is the artifact. A workflow is a JSON node graph; there is no compiled representation to keep in sync. Saving a workflow is saving JSON.
- Evaluation happens in the browser. The editor walks the graph against
live
three/tslnode objects and renders the result with aMeshBasicNodeMaterialon WebGPU (with a WebGL2 fallback). The server never evaluates a graph. - Embeds are one component away.
@fluorite/reactrenders any workflow as a live shader in a React app:<Workflow id="…" />. Under the hood it fetches the workflow from a public API endpoint and evaluates it on the viewer's GPU. - Embeds track the live draft. Every save in the editor shows up in embeds on their next revalidation — no publish step in between.
Where to go next
- Quickstart — from sign-in to an embedded shader.
- Workflows — the graph, autosave, and revisions.
- Embed in React — drop a workflow into your app.
- HTTP API — the public workflow endpoint.