SPACE
to play / pauseARROW RIGHT
orL
to go forwardARROW LEFT
orJ
to go backwardARROW UP
to increase volumeARROW DOWN
to decrease volumeF
to toggle fullscreenM
to toggle mute0 to 9
to go to the corresponding part of the videoSHIFT
+,
to decrease playback speedSHIFT
+.
or;
to increase playback speed
Noise images and generators
- PerlinNoiseMaker
- Noise Texture Pack
- EffectTextureMaker
- Noise Texture (Figma plugin)
Others
GLSL
- Smoothstep (Kronos doc)
- Smoothstep (Book of Shaders)
Three.js documentation
Shortcuts ⌨️
Unlock content 🔓
To get access to 93 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 93 hours of video, a members-only Discord server and future updates, join us for only $95!
Introduction 00:00
In this lesson, we are going to learn how to create an animated smoke coming out from a coffee mug.
The table and the mug have already been modeled and baked in Blender, which we are not going to cover in this lesson focused on shaders. I used a similar technique for the Portal chapter which you’ll see a bit later in the course. Still, if you are curious, you can find the model in the Resources associated with the lesson.
This smoke is inspired by My Room in 3D, a personal project I did while streaming. It’s a great exercise to practice both vertex and fragment shaders.
Perlin noise functions are bad 01:39
In the previous lessons we have been using Perlin functions to create various effects like the Raging Sea or the Shader Patterns, but using Perlin functions is actually bad for performance and can result in a frame rate drop, especially for devices with weaker GPUs.
While using Perlin function is convenient, we are going to use a much more performant approach in this lesson and use a simple Perlin image instead.
This technique is actually what most video games do in order to maintain solid performance and it’s even more important for the web since we are only allotted a portion of the computing power video games have access to.
Where to find noise textures
The Perlin noise image we are going to use in this exercise is available in the static/
folder as perlin.png
, but there are many ways to retrieve or create these kinds of images.
You can download them from various online tools and resources:
You can use softwares like Figma and its Noise Texture plugin, Photoshop and its filters. In fact, we can even use Blender by rendering the noise on a plane in front of the camera.
Finally, you can use the Perlin function in WebGL but only once at the beginning and save it in a texture using a WebGLRenderTarget. While this approach is interesting and enables tweaking the Perlin easily, it’s farfetched for this lesson.
While choosing a noise texture, keep in mind the following 3 rules:
- Enough variations so that we don’t see the pattern repeating too much.
- Big enough so that it’s precise enough. Yet, you don’t need a huge resolution since the pixels are going to be interpolated.
- A repeating pattern (or “tilling”) so that we can put the image side by side with itself and not see the separation.
The Perlin image provided with the project is a good example with a 128x128 resolution and it’s repeating properly as shown in this picture composed of 4 times the same Perlin noise.
Also note that we are only going to use the red channel of the picture. A nice trick would be to save different noises in the 4 different channels in order to get multiple noises while loading only one image. Yet, for the sake of learning and simplification, we are going to use a simple grayscale picture.
How to use it 🤔
- Download the Starter pack or Final project
- Unzip it
- Open your terminal and go to the unzip folder
-
Run
npm install
to install dependencies
(if your terminal warns you about vulnerabilities, ignore it) -
Run
npm run dev
to 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