Three.js Shading Language: How the Node System in Three.js Works
summary
Explains limitations of current Three.js materials and introduces Three.js Shading Language (TSL) as a solution; describes how the node-based system generates shaders from node graphs and demonstrates experimental TSL demos targeting WebGPU.
AI-written summary · about
chapters (21)
- 0:00Introduction
- 1:27Three.js Shading Language
- 5:30Standard material problems
- 8:47Need for new shader approach
- 11:59TSL simplifies shaders
- 13:06Node system in TSL
- 15:15TSL architecture and codegen
- 18:26Materials with TSL
- 21:23Built-in TSL functions
- 23:09Math and optimization in TSL
- 25:18Variables and Assign node
- 27:27Debugging TSL tools
- 28:13Extending node materials
- 29:39TSL benefits
- 31:05Cross-platform and WebGPU
- 32:11WebGL GPU computing
- 35:42Compute shaders in TSL
- 37:29TSL texture capabilities
- 39:21Physics demo
- 46:55GPU vs fallback performance
- 47:16TSL limitations
related talks
44mWebGL and Shaders: Programming Light
43mShaders: How to Create Mind-Blowing Effects on Your Website
20mThe future of the web is paved with shaders
33mLighting Talks
22mTresJS, a declarative way of creating 3D scenes from Vue components
26mCreative experiments with WebGL shaders in JavaScript
42mThree.js: Build Interactive 3D Environments in Your Browser
51mCreate a 3D Low Poly Planet Scene with TresJS Solution LIVE