Descriptions
Three.js Shading Language and Signed Distance Fields, Three.js Shading Language (TSL) is a framework that simplifies shader development within the Three.js ecosystem and enables creating graphics using Signed Distance Fields (SDFs), a mathematical approach for drawing scenes and animations. TSL’s node-based shader graph makes complex 2D and 3D visuals accessible to developers without deep GLSL, WGSL, or low-level graphics expertise, and it is renderer-agnostic so shaders run across WebGL and WebGPU. The course covers practical, hands-on topics and examples: environment setup, importing libraries, using import maps or bundlers, fragment and vertex shader coordinates, uniforms and uniform arrays, generating animated patterns, drawing SDF lines and shapes in 2D and 3D, ray marching, lighting (Lambertian, Ambient, Phong), hard and soft shadows, reflections, adaptive device pixel ratio, atmospheric scattering, ambient occlusion, Fresnel effect, fractal brownian motion, Gerstner water, clouds, domain repetition, Mandelbulb/Juliabulb/Kleinian Inversion fractals, GUI interaction and keyboard interactivity, and best practices for integrating TSL into JavaScript/TypeScript projects to benefit from IDE tooling and tree shaking.
What you’ll learn
- Threejs Shading Language
- Signed Distance Fields
- Using TSL with import maps or a build tool
- Setting up a development environment
- TSL imports like color, texture, convertColorSpace and positionLocal
- Writing Fragment and Vertex Shaders
- Generate patterns using fract, sin, cos, atan, floor, mod
- Drawing SDF lines and shapes in 2D and 3D
- Using Uniform and UniformArray
- Drawing distance lines
- Colouring 2D and 3D SDFs
- Raymarching
- Lighting 3D SDFs
- SDF Shadows
- SDF Reflections
- SDF Union, Intersect and Subtraction
- Ambient Occlusion
- Fresnel Effect
- Adaptive DPR
- Atmospheric Scattering
- Fractal Brownian Motion
- Gerstner/Tricoidal water algorithm
- Adding Clouds
- Domain Repetition
- Mandelbulb, Juliabulb & Kleinian Inversion Fractals
- and much more
Who this course is for
- People who have experience with Threejs and want to write shader code using the techniques of signed distance fields.
Specificatoin of Three.js Shading Language and Signed Distance Fields
- Publisher : Udemy
- Teacher : Sean Bradley
- Language : English
- Level : Intermediate
- Number of Course : 30
- Duration : 5 hours and 42 minutes
Content of Three.js Shading Language and Signed Distance Fields
Requirements
- This is an intermediate course about Three.js and you should already have some experience using it.
- You will need a modern graphics card capable of running GLSL and WGSL shader code.
Pictures
Sample Clip
Installation Guide
Extract the files and watch with your favorite player
Subtitle : English
Quality: 720
Download Links
Downloadly
Rapidgator
Password file(s): www.downloadly.ir
File size
6.33 GB
