SPACEto play / pauseARROW RIGHTorLto go forwardARROW LEFTorJto go backwardARROW UPto increase volumeARROW DOWNto decrease volumeFto toggle fullscreenMto toggle mute0 to 9to go to the corresponding part of the videoSHIFT+,to decrease playback speedSHIFT+.or;to increase playback speed
Three.js documentation
Others
Shortcuts ⌨️
Unlock content 🔓
To get access to 91 hours of video, a members-only Discord server, subtitles, lesson resources, future updates and much more join us for only $95!
Want to learn more? 👋
That's the end of the free part 😔
To get access to 91 hours of video, a members-only Discord server and future updates, join us for only $95!
Introduction 00:00
Often, while creating shaders, we need to draw specific patterns like stars, circles, light lenses, waves, etc.
It can help to effectively see those pattern on a geometry or it can be to move the vertices just like we did with the flag in the previous lesson.
We could use textures but drawing the shape gives us more control; we can animate the shape parameters, and there is no texture to load.
It's much more complicated than drawing with other APIs like canvas because the code is the same for every fragment, and all we have are coordinates and our mathematical skills.
Yes, there will be some maths in this lesson. It's one of the most frustrating parts for some people but fear not; even if you are doing poorly with maths, you'll find a solution.
In this lesson, we will try to draw various patterns on a plane. We will start very thoroughly, and things will get more challenging with time. It's the perfect occasion to discover classic techniques and use built-in functions.
For each pattern, we first study the result; then, we try to reproduce it. If you want to get better at this, pause the lesson on each pattern and try to do it yourself. Even if you fail, the solution will make more sense if you tried on you own.
Setup 03:21
Currently, we only have one plane on the scene with a ShaderMaterial as a PlaneGeometry. As a reminder, ShaderMaterial is like RawShaderMaterial, with some code prepended to the shaders like importing the matrices, importing some attributes, or setting the precision.
Send the UV coordinates to the fragment 04:33
Because we will draw the plane patterns, most of our code will be in the fragment shader. But first, we need to send the UV coordinates from the vertex shader to that fragment shader.
To retrieve the uv attribute in the vertex shader, we should have written something like this:
attribute vec2 uv;But because we are using a ShaderMaterial, this code is already prepended to the vertex shader.
To send this value from the vertex shader to the fragment shader, we need a varying. We are going to call it vUv and assign it with the uv:
varying vec2 vUv;
void main()
{
// ...
vUv = uv;
}In the fragment shader, we can retrieve this vUv varying with the same declaration:
varying vec2 vUv;
void main()
{
// ...
}We now have access to the uv coordinates in our fragment shader as vUv. The values go from 0, 0 on the bottom-left corner to 1, 1 on the top-right corner.
Pattern 1 10:38
This lovely color pattern is the easiest one to get. We just need to use the vUv in the gl_FragColor with the blue value being 1.0:
varying vec2 vUv;
void main()
{
gl_FragColor = vec4(vUv, 1.0, 1.0);
}Pattern 2 12:37
This is exactly the same pattern but with the blue value being 0.0:
varying vec2 vUv;
void main()
{
gl_FragColor = vec4(vUv, 0.0, 1.0);
}Pattern 3 13:36
Things get a little more interesting here. To get this gradient, we only use the x property of the vUv, but in all first three values of gl_FragColor:
varying vec2 vUv;
void main()
{
gl_FragColor = vec4(vUv.x, vUv.x, vUv.x, 1.0);
}From now, we are going to draw black and white patterns like this. Instead of sending the value on r, g, and b separately, we can create a float variable named strength:
varying vec2 vUv;
void main()
{
float strength = vUv.x;
gl_FragColor = vec4(vec3(strength), 1.0);
}We will now focus on the strength variable and try to draw the following patterns.
Instead of replacing your previous patterns, you can comment so you can get back to them later.
Pattern 4 16:40
This pattern is exactly the same but on the y axis:
float strength = vUv.y;Pattern 5 17:35
This pattern is exactly the same but we invert the value with 1.0 - ...:
float strength = 1.0 - vUv.y;Pattern 6 18:18
To squeeze the gradient like this, we simply multiply the value. The strength will jump quickly to 1, but we can't show a color brighter than white so the rest of the gradient stays white:
float strength = vUv.y * 10.0;Pattern 7 19:23
Now we are talking. To repeat the gradient, we use a modulo. The modulo operation finds the remainder after a division of the first number by the second one.
0.5modulo1.0will be0.50.8modulo1.0will be0.81.2module1.0will be0.21.7modulo1.0will be0.72.0modulo1.0will be0.02.4modulo1.0will be0.4
It's like having the first number going back to 0 once it reaches the second number.
In many languages, we can use the % to apply the modulo but in GLSL we have to use the mod(...) function:
float strength = mod(vUv.y * 10.0, 1.0);How to use it 🤔
- Download the Starter pack or Final project
- Unzip it
- Open your terminal and go to the unzip folder
-
Run
npm installto install dependencies
(if your terminal warns you about vulnerabilities, ignore it) -
Run
npm run devto launch the local server
(project should open on your default browser automatically) - Start coding
- The JS is located in src/script.js
- The HTML is located in src/index.html
- The CSS is located in src/style.css