Skip to content

Three Shader Language Tutorials

Welcome to my course on Three Shader Language (TSL).

Course Access

Three Shader Language Tutorials

Overview

Three.js Shading Language (TSL) is a framework built to simplify shader development within the Three.js ecosystem.

It is a powerful addition to Three.js to simplify shader creation for developers, especially those without deep knowledge of low-level GLSL, WGSL or graphics programming.

By using TSL's node-based shader graph system, developers can create and manage shaders, eliminating the need to write complex GLSL or WGSL code manually.

TSL is renderer-agnostic, meaning shaders created with it work seamlessly across different rendering backends like WebGL and WebGPU.

It automatically optimizes shader graphs, reducing redundant calculations and improving performance.

For example, shared inputs like positionWorld are calculated only once, even if it used by multiple nodes.

Since TSL is written at the Javascript layer, along side your existing Three.js code, you will be able to benefit from the features provided by your IDE, such as IntelliSense code completion, code formatting and linting. Your final production code can also benefit from tree shaking provided by your bundler.

TSL uses a node-based system for creating shaders. This is similar to shader graphs in other engines (e.g., Unity, Unreal Engine).