Introduction 00:00

In the previous lessons, we discovered TSL and its many features. So many that you probably forgot most of them already. We need to practice them, bit by bit, which is why we’ll redo some of the Shaders lesson in a familiar environment.

Let’s start with the Shader Patterns. Most of the patterns are simple; we can focus on fragments only (don’t worry, more vertex manipulation in the upcoming lessons), and we’ll discover some tricks and make mistakes along the way.

Don’t worry, we’re not going to do all the patterns.

Like in the original lesson, if you’re looking for a challenge, try to do the patterns on your own. And remember that there are always many solutions. Some solutions can be more clever, some more performant, some make more sense, and some are more maintainable. As long as you practice, you’re in the right direction.

Setup 01:14

The starter already contains the following:

• The plane on which we are going to draw the pattern
• OrbitControls to rotate around
• A floor to have a little bit of scenery
• Running the WebGPURenderer with the Inspector

Pattern 1 01:39

Let’s start with the first pattern.

What you see is the UV coordinates of the plane, and it will be the main input of every upcoming pattern. But the first question is, how do we display this UV on the plane?

The material is an instance of MeshBasicNodeMaterial, meaning that we can already assign nodes.

We went for the Basic instead of a shaded material such as Phong, Lambert, or Standard to focus on the pattern without it being affected by light or shadow.

To output the pattern, we use the colorNode which expects a vec3() node:

// Pattern 1
material.colorNode = vec3()

Since we didn’t provide any argument to the vec3(), it used the default values which are 0 for the x, y and z (more like r, g and b since we use it as a color).

Let’s try with some values.

material.colorNode = vec3(1, 0.5, 0.2)

It’s working, but now we want the UV gradient, which we can get from the uv() node as the first argument of vec3() and 1 as the last argument:

material.colorNode = vec3(uv().x, uv().y, 1)

This is a valid solution, but there is a shorter version. When sending a vector as an argument to a bigger vector, it’ll take the respective properties in the order it was provided.

This means that we don’t have to explicitly provide the x and the y separately:

material.colorNode = vec3(uv(), 1)

Pattern 2 04:11

Here’s another easy one.

To create this linear gradient, we can use the x coordinate of uv() only, but on all 3 values of the vec3() so that we get a grayscale gradient:

// Pattern 2
material.colorNode = vec3(uv().x, uv().x, uv().x)

And again, there is a shorter version. If we provide one value to a vector, this single value will be used as all properties of the vector:

material.colorNode = vec3(uv().x)

Pattern 3 05:13

Let’s try something harder.