Prismorphic
A material editor and its Three.js preview runtime. A canonical node graph, compiled to GLSL, previewed in real time, and exported as versioned, documented JSON.
- Year
- 2025 — mise en ligne à venir
- Role
- Design, architecture and development
- Scope
- Data format · GLSL compiler · Editor · Real-time runtime
- Stack
- TypeScript · Three.js · GLSL · Vite · JSON Schema · Playwright
The problem
A real-time render material is hard to tune in code. You need to see, adjust, compare, undo. Game-engine editors do that work, but their output stays locked in the engine.
Prismorphic answers a precise constraint: produce materials tuned visually, exportable in a readable, versioned, shareable format, then reloaded identically by a web runtime.
The format then becomes the contract. A material JSON file describes a canonical graph, independent of the editor that produced it and of the engine that displays it.
The chain
The pipeline is explicit end to end: the material JSON is resolved and diagnosed into a graph, that graph is compiled to GLSL with a cache, the shader is bound to a Three.js MeshPhysicalMaterial, the preview applies parameter changes live, and the whole is re-exported as JSON.
That linearity is what makes the system verifiable. Each step has typed inputs and outputs, and a graph error is diagnosed before compilation rather than producing a silently wrong shader.
A user’s journey follows the same logic: start from a preset, adjust parameters, inspect the graph, watch the preview, export.
What was built
- A versioned JSON material format, specified normatively and validated by machine-usable schemas.
- A graph-to-GLSL compiler with a cache, and an integration test suite that checks real shader compilation in a browser.
- A Three.js runtime that binds the generated shader and applies parameter changes without rebuilding the material.
- An editor cut into independent packages — editing shell, preview runtime, shared contracts — reusable separately.
Why this tool exists
Prismorphic is not a technical demo: it is the tool that was missing from the studio’s interactive projects. Tuning a material in a dedicated editor, then loading it as-is into a production scene, removes the usual gap between what the designer signed off and what the site displays.
It is the same logic as the World Editor on the home page: when art direction asks for a finish that no in-code tweak can reach, you build the tool rather than lower the bar.
Prepare a project of the same order
Decisions to take before scoping, design, or migration.
