Three.js TSL Doc
Official interactive TSL tour from the Three.js team, live code editor, WGSL/GLSL toggle, and instant console output to learn shader nodes hands-on.
mrdoob / Three.js team
Three.js Marketplace
Three.js Marketplace
Kickstart your Three.js and React Three Fiber (R3F) projects with our free and premium components themes and tools. Designed for freelancers, developers, and agencies, each product includes essential features to get you up and running quickly.
Web Development
Help with your project?
Custom Three.js, WebGL, and WebGPU development — from product visualizers to interactive 3D websites.
Links
Featured Badge
Add this badge to your website to show you are featured on Three.js Resources.
Description
An interactive, learn-by-editing walkthrough of TSL (Three.js Shading Language), built by the Three.js core team. Switch between WGSL and GLSL output, edit fragment and vertex code live, and see console output update in real time as you go. Covers the fundamentals: nodes, uv(), vec3(), basic composition. A solid first stop before diving into shader recipes, compute shaders, or production patterns.
Author Name: mrdoob / Three.js team
Sponsors
Want to write shaders yourself?
Learn TSL — the Three.js Shading Language — step by step in our interactive shader course, with live code you edit in the browser.
Related Resources
tsl textures
TSL Textures is a collection of procedural textures created using Three.js Shading Language (TSL).
Three.js Water Pro
Three.js Water Pro is a complete ocean rendering system for Three.js, built with TSL and WebGPU.
Powershot
Authentic camera emulation for Three.js