⚠️ This lesson is not yet translated in your language, it will be available soon!

Welcome to this chapter on Visual Effects (VFX) in Three.js and React Three Fiber. In this chapter, you will learn how to create stunning visual effects that will make your 3D scenes come to life.

My goal is to help you get started with VFX and inspire you to create your own effects. I spent countless hours cross-referencing different resources, experimenting, searching for the right approach for you to learn in a few hours what would have taken you weeks or months.

Preview of the TSL GPGPU project we will build together.

The art of VFX

VFX stands for Visual Effects. It is the art of creating effects to enhance the visual experience of a movie, video game, or for us our 3D web experiences.

VFX can be used to create realistic effects, such as explosions, fire, water, smoke, or fantastical effects, such as magic spells, teleportation, and much more.

In our context, even if you are not building a game, VFX can be used to add that little extra touch to your projects. It can be used to create a more immersive experience, to make your scenes more engaging, or to create a more polished look. Ultimately building more professional and visually appealing projects.

Let's say your project has a drag & drop feature. You can add a particle effect when the user drops an item, or when the item is dragged around. This will make the interaction more engaging and fun.

By entering the world of VFX, be prepared to see video games and movies in a different light. You will start to notice the effects that are used to create what you see on the screen.

Composition between multiple types of effects

An effect is composed of one or more elements. These elements can be particles, shaders, textures, meshes, trails, and more. By combining these elements, you can create complex and beautiful effects.

We will learn how to create each of these elements with Three.js and React Three Fiber in the following lessons. But first, let's take a look at each of them.

Particles

Particles are small elements that are emitted from a source. They can be used to create effects such as fire, wind, rain, snow, magic spells, you name it.

By playing with the number of particles and their properties, such as their size, texture, color, speed, and lifetime, you can create an infinite number of effects.

They can be sprites (2D images that always face the camera), or 3D objects.

Preview of the firework lesson.

Meshes/Geometry

As we often think about particles as points or sprites, I think it's important to mention that meshes can also be used to create effects. For example rocks coming out of the ground, or a portal opening.

By playing with the geometry, material, and shaders, you can create unique effects that stand out.

In the wizard game we will build together, see how the ice shards from the ground add to the overall effect.

Trails

Trails are a type of effect that creates a line behind an object. They can be used to create effects such as a comet, a laser beam, or wind.

They give the impression of movement and can be used to create a sense of speed or direction.

To create them we can use particles or meshes (such as lines or tubes). We will learn both methods in the following lessons.

We will play with the trails to create a comet effect and more.

Shaders/Texures

We already learned about shaders in the dedicated chapter. In the context of VFX, shaders can be applied on particles, meshes, or the whole scene to make them move, change color, distort, and more. The only limit is your imagination.

By combining shaders with textures, you can create even more complex effects. Textures can be used to add details to your effects, such as noise, patterns, or images.

SFX

SFX stands for Sound Effects, and while it is not directly related to VFX, it is an important part of the experience. Adding sound effects to your VFX and by syncing them with the visual effects, you can create a more immersive and cohesive experience.

We won't learn how to create sound effects in this course, but we will learn an interesting technique to play spatialized sounds in the 3D space.

CPU vs GPU

When creating VFX, especially in a limited environment such as the web, it is important to be mindful of the performance of your effects.

When creating VFX, you want to offload as much work as possible to the GPU. This means that you want to use shaders, textures, and other GPU-accelerated techniques to create your effects.

For simple effects, such as a few particles, you can use the CPU. However, for complex effects, such as thousands of particles, you will want to use the GPU.

We will learn both CPU and GPU techniques in this course, but we will focus on GPU techniques as much as possible. This will ensure that your effects run smoothly on most devices.

We will create a simple GPU VFX engine that will allow us to create complex effects with ease. We will also discover WebGPU with TSL with a lovely GPGPU project.

Going further

VFX is a vast field, and there are many techniques and effects that we won't cover in this course. However, by learning the basics, you will be able to create a wide range of effects.

Resources

While the Three.js ecosystem is sparse on VFX, there are many resources available for game development, which can be applied to Three.js. Unity, Unreal, and Godot are great engines to learn more about VFX.

As always, cross-referencing different resources is a great way to learn. Here are some resources to get you started:

• Gabriel Aguiar YouTube channel has great tutorials on VFX in Unity and now Godot. I also recommend his course on Udemy named Visual Effects for Games in Unity - Beginner To Intermediate.

• Brackeys YouTube channel has great tutorials on VFX in Unity (and now Godot after a long break).

• Coreb Games YouTube channel like the previous ones but with Unreal Engine.

• VFX Apprentice YouTube channel or website contains many videos on VFX and its principles.

Try to replicate the effects you see in these tutorials in Three.js and React Three Fiber. You will learn a lot by doing so.

ArtStation or Pinterest are also great places to find inspiration.

Libraries

Unfortunately, Three.js doesn't have a built-in VFX engine like Unity or Unreal. However, there are some libraries that can help you create VFX in Three.js:

• Quarks VFX the most advanced VFX library for Three.js. It is based on Unity Shuriken implementation allowing you to import Unity VFXs in Three.js. It is a paid library but it can save you a lot of time depending on your project and needs.
• VFX Composer Suite from Hendrik Mans is a great library to create VFX in Three.js. It is free and open-source but is less maintained than Quarks VFX.
• Wawa VFX the library we built together in this course. It is a simple VFX engine that allows you to create complex effects with ease. It is free and open-source. I plan to convert it to TSL in the future. Feel free to contribute to it.

Conclusion

I hope you are as excited as I am to dive into the world of VFX. I can't wait to see what you will create with the knowledge you will gain in this chapter.