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:

• PerlinNoiseMaker
• Noise Texture Pack
• EffectTextureMaker

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.