The Problem
Creating custom Three.js materials with the new Three‑shading‑language (TSL) requires hand‑written shader code, which is error‑prone and hard to visualize. Designers need a visual way to assemble node graphs, preview the result on WebGPU, and export ready‑to‑use material definitions.
What This Does
tsl-node-editor provides a browser‑based node editor (see src/App.tsx) that lets users drag‑and‑drop functional blocks to compose TSL shaders. The core graph logic lives in src/viewer.ts and src/tslGltfExporter.ts, which translate the node network into valid TSL source and optional GLTF assets. The preview panel uses the WebGPU backend bundled in viewer.html and the WebGPU‑enabled Three.js runtime to render the material in real time. Export buttons in the UI write out files via the functions in src/tslGltfExporter.ts, supporting raw TSL, a Three.js material wrapper, or a full TypeScript app scaffold.
How To Use It
Setup
Clone the repo git clone https://github.com/takahirox/tsl-node-editor.git cd tsl-node-editor
Install dependencies (npm is declared in package.json)
npm install
Configuration
The project has no external configuration files; all runtime options are hard‑coded in the source. If a custom WebGPU context or Three.js scene is required, modify src/main.tsx (entry point) or src/viewer.ts.
Running
npm run dev
npm run dev invokes Vite (see vite.config.ts) which serves index.html and hot‑reloads the React app. Open http://localhost:5173 (default Vite port) to access the editor. The live preview is rendered in the <canvas> element defined in viewer.html, which is loaded by the React component.
Real‑World Use
A product team building a configurator for custom 3D avatars could embed the editor in an internal portal. Designers assemble material nodes, click Export → TSL, and the generated shader string is stored in the backend. At runtime, the avatar renderer loads the exported TSL via Three.js’s ShaderMaterial, ensuring visual fidelity between design and production.
// Example: loading exported TSL at runtime import { ShaderMaterial, Mesh } from 'three'; import tslSource from './exportedMaterial.tsl';
const material = new ShaderMaterial({ vertexShader: tslSource.vertex, fragmentShader: tslSource.fragment }); const mesh = new Mesh(geometry, material); scene.add(mesh);
Code Health & Issues
Low – No automated tests – repository lacks .test. files; test coverage is 0% (see file list). Medium – Experimental code style – README notes “vibe‑coding”, indicating ad‑hoc changes; may lead to regressions. Low – CI only for deployment – .github/workflows/deploy.yml builds and deploys the demo but does not run lint or tests. Low – Limited error handling – src/viewer.ts creates WebGPU devices without try/catch; failures on unsupported browsers will crash the UI. Low – Documentation gaps – README covers basic start‑up but omits details on extending node types or customizing export pipelines. None – License present – LICENSE file includes MIT terms, satisfying basic legal requirements.
The Bottom Line
tsl-node-editor delivers a functional, visual workflow for authoring TSL shaders with live WebGPU preview, suitable for rapid prototyping or internal tooling. The codebase is small and TypeScript‑based but lacks tests, robust error handling, and comprehensive documentation, making it a moderate‑risk choice for production pipelines without additional quality‑gate investments. It is best suited for teams comfortable with experimental JavaScript projects and willing to augment the repo with their own testing and validation layers.