ShaderMaterial and TSL

Custom Shaders with ShaderMaterial and TSL

Built-in materials cover most surfaces; for the rest Three.js 30,815 offers three levels of control. ShaderMaterial takes your own GLSL (WebGL's language) and injects the matrices and attributes. onBeforeCompile edits the GLSL of a built-in material, keeping its lighting. The Three.js Shading Language (TSL) builds shaders from JavaScript functions and compiles them to WGSL or GLSL, which is how WebGPURenderer materials are written.

Subsections