Introduction 00:00

Let’s be honest, a huge part of building shaders is about math.

We calculate distances, angles, directions. We transform, we project, we normalize, and we regret not being more attentive in school.

TSL offers a wide range of mathematical nodes, from basic arithmetic to trigonometry, matrices, procedural functions, and much more.

Don’t worry, we’re not going to review them all. But we’ll try some, just to get the hang of it, know what can be done, and learn a few tricks along the way.

The lesson starts with a bit of theory, but you’ll get plenty of opportunities to practice those concepts in the following lessons.

Setup 00:59

The starter already contains the following:

• OrbitControls to rotate around
• A floor already using the MeshStandardNodeMaterial with the fade out
• A torus knot knot already using the MeshStandardNodeMaterial
• Running the WebGPURenderer
• Some lighting with shadows

Arithmetic nodes 01:13

Until now, we’ve been doing basic arithmetic with add(), sub(), mul(), and div().

Most of the math nodes can be used as standalone functions, or chained:

const foo = float(0.25)
const bar = float(0.5).add(foo)

// Same as
const foo = float(0.25)
const bar = add(float(0.5), foo)

And while we can use JavaScript numbers as the arguments, we can’t chain the number until it’s converted to a node (like float()):

// Works
const bar = add(0.25, 0.5)

// Doesn't work
const bar = 0.25.add(0.5)

Some nodes support more than 2 parameters:

const bar = add(0.25, 0.35, 0.4)

And TSL handles type conversion automatically, like multiplying a vector by a float:

const foo = vec3(0.25, 0.25, 0.25)
const bar = foo.mul(4)

But this automatic type conversion can lead to unexpected results:

const foo = int(1)
const bar = foo.add(float(0.3)) // <--- 1 (integer)

const foo = float(0.3)
const bar = foo.add(int(1)) // <--- 1.3 (float)

Again, there are many available nodes, like pow(), mod(), step(), min(), cos(), remap(), clamp(), etc. and we are not going to test them all now, but have a look at the list so that you know what’s available.

Constants 04:07

TSL provides classic mathematical constants that we often use such as

• PI
• TWO_PI
• HALF_PI
• EPSILON
• INFINITY