Build pro‑level effects in the browser with TSL
XR beta: see the “Preparation” section for compatibility and fallback plans.
Why TSL
Same look with fewer lines
Node composition replaces shader boilerplate and reduces cognitive load.
One codebase, two pipelines
Compile the same nodes to GLSL (WebGL2) or WGSL (WebGPU).
Composable and tunable
Split complex logic into reusable pieces and expose a few params.
Use cases
- Examples · Showroom
Brand showcases
Immersive landings, experiential spaces, and data walls with a dedicated “Examples · Showroom” button to autoplay demos.
- Examples · Material Lab
Tooling & systems
Embed TSL into internal material libraries or design systems so designers can tweak nodes inside “Examples · Material Lab”.
- Examples · Playground
Exploratory R&D
Procedural terrain, volumetric clouds, and XR/sensor PoCs with instant “Examples · Playground” previews.
Preparation
NodeMaterial pipeline
Switch materials to MeshStandardNodeMaterial/MeshPhysicalNodeMaterial (or similar) before wiring nodes.
WebGPU-only effects
Check `navigator.gpu` for Compute/StorageBuffer workflows and auto-fallback to WebGL2 presets.
checkTSLReady()
Run the helper at init (snippet in docs) to log browser support, XR status, and fallback guidance.
Download the compatibility matrix or reuse the script so product/design/engineering stay aligned.
FAQ
- TSL vs hand‑tuned GLSL/WGSL?
- Use TSL for most effects; hand‑tune hot paths and edge cases.
- Will it run on old devices?
- Yes if the browser supports WebGL2; WebGL1‑only environments will not work.
- Can I use it with existing materials?
- Switch to NodeMaterial counterparts and wire nodes to properties.
- Good for data/science viz?
- Yes. Compute algorithms on GPU and render large datasets in real time.