Three.Js Shading Language And Signed Distance Fields

Learn all about the Three.js Shading Language while specialising in Signed Distance Fields.

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 or 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

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.

Description

Three.js Shading Language (TSL) is a framework built to simplify shader development within the Three.js ecosystem.Signed Distance Fields are a way to draw scenes and animations predominantly using mathematical functions.You can draw anything with Signed Distance Fields, and TSL makes that more accessible for developers, especially those without deep knowledge of low-level GLSL, WGSL or graphics programming.So, in the course, we will cover,Basic environment development setup,Importing the required libraries using import maps or a bundler / build tool,Discuss the pre-requisites of a TSL scene,Fragment Shader coordinates,Create several animated patterns from easy to more advanced,Draw various styles of lines,Implement Uniforms and UniformArray,Interact with our scenes using a GUI,Learn the basics of Signed Distance Fields,Draw distance lines using SDF information,Colouring and animating 2D SDFs,Learn the Basics of Raymarching,Lighting 3D SDFs using Lambertian, Ambient and Phong specular,Using Hard and Soft Shadowing,Implement SDF Reflections,Colouring and animating 3D SDFs.And moreBy using TSL's node-based shader graph system, developers can create and manage shaders without needing 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.Since TSL is written at the Javascript or TypeScript 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.Thanks for taking part in my Three.js Shading Language (TSL) and Signed Distance Fields course.Sean

Overview

Section 1: Introduction

Lecture 1 Getting Started

Lecture 2 What Do We Have

Lecture 3 PositionLocal

Lecture 4 Some Patterns

Lecture 5 Lines : Part 1

Lecture 6 Lines : Part 2

Lecture 7 Uniform and UniformArray

Lecture 8 Signed Distance Fields

Lecture 9 Distance Lines

Lecture 10 Colouring 2D SDFs

Lecture 11 Raymarching

Lecture 12 Lighting 3D SDFs

Lecture 13 SDF Shadows

Lecture 14 SDF Reflections

Lecture 15 Colouring 3D SDFs

People who have experience with Threejs and want to write shader code using the techniques of signed distance fields.