The Problem

Building Three.js Shading Language (TSL) materials by hand means juggling GLSL-style code fragments, texture loading, and WebGPU quirks with no visual feedback. This repo is a node-graph editor that lets you assemble TSL materials visually, preview them live in WebGPU, and export the result as code — aimed at developers who want a Material Editor-style workflow for Three.js.

What This Does

src/App.tsx drives the React-based node graph UI. src/viewer.ts owns the WebGPU preview pipeline and texture handling, including ensureKtx2Support, isKtx2Entry, and textureFromNode. src/tslGltfExporter.ts handles serialization: cleanArgs, assignLink, and createDefaultNodeSerializer convert the node graph into TSL, material, or app output (JS/TS). public/basis/ ships the Basis transcoder WASM for KTX2 texture support.

The fork adds GLTF geometry/material/texture nodes and export paths beyond the upstream. The README is candid: experimental, "vibe-coding" approach, pull requests not accepted, issues welcome.

How It Is Wired

Execution starts at src/main.tsx mounting App.tsx; index.html and viewer.html are the two HTML entry points. The static analysis resolved 6 internal modules with 0 import edges between them — the module graph shows no hub and no cycles, so there is no central coupling point to worry about. Within files, 7 internal call edges exist; the densest path is textureFromNode calling isKtx2Entry and ensureKtx2Support in src/viewer.ts, which is where KTX2 texture loading routes through. src/tslGltfExporter.ts is the serialization owner with 4 functions and 3 types; it carries the highest cognitive load at 52 branch points over 177 lines. Cross-module wiring beyond this is not mapped by the analysis.

How To Use It

Setup: npm install (lockfile present, Node.js 18+ required). Running: npm run dev starts the Vite dev server; open in a WebGPU-capable browser (Chrome/Edge 113+). The live demo is at https://takahirox.github.io/tsl-node-editor/. No environment variables are required.

Real-World Use

A team prototyping a WebGPU product page can assemble a PBR material from GLTF geometry and KTX2 textures in the node graph, verify it live in the preview pane, then export the resulting TSL/JS and drop it into their Three.js app. The export path (createDefaultNodeSerializer) is the integration seam — generated code is plain Three.js TSL, so it ports into an existing renderer without this editor at runtime.

Code Health & Issues

Static analysis found 1 medium finding: high branching density in src/tslGltfExporter.ts (52 branch points over 177 lines); the suggested fix is decomposing decision-heavy logic into table/strategy dispatch.

Additional findings from the audit:

  • Med – No dependency update bot configured; add .github/dependabot.yml.
  • Med – No dependency vulnerability scan in CI; add dependency-review-action or osv-scanner.
  • Med – deploy.yml checkout keeps the GitHub token (persist-credentials not disabled); a malicious postinstall script could read a pushable credential.
  • Low – No timeout-minutes on workflow jobs; a wedged job runs to the platform default.
  • Low – Missing .editorconfig, .gitattributes, and formatter config.
  • Med/SDLC – No test files detected anywhere in the repo.

Seven of 17 declared dependencies are behind major versions, including typescript (2 majors behind) and vite (1 major behind).

The Bottom Line

A functional, focused node editor for Three.js TSL with working WebGPU preview and GLTF export — genuinely useful for prototyping. The lack of tests, the high branching in the exporter, and 7 stale dependencies make it risky as a production dependency, but it is fine as a reference implementation or a single-user tool. The upstream README's "no PRs accepted" stance means you should fork it if you need changes.