欢迎来到关于 Three.js 和 React Three Fiber 中视觉效果 (VFX) 的本章。在本章中，您将学习如何创建令人惊叹的视觉效果，使您的 3D 场景栩栩如生。

我的目标是帮助您入门 VFX，并激励您创建自己的效果。我花费了无数小时交叉参考不同的资源、实验、寻找正确的方法，以便让您在几个小时内学到本需要几周或几个月才能掌握的内容。

我们将一起构建的 TSL GPGPU 项目预览。

VFX 的艺术

VFX 是视觉效果 (Visual Effects) 的缩写。它是一种创建效果以增强电影、视频游戏或我们的 3D Web 体验的艺术。

VFX 可用于创造逼真的效果，例如爆炸、火焰、水、烟雾，或是奇幻的效果，例如魔法咒语、传送等等。

在我们的背景下，即使您没有在构建游戏，VFX 也可用于为您的项目增加一些额外的触感。它可用于创造更具沉浸感的体验，让您的场景更具吸引力，或创造更精致的外观。最终构建出更加专业且视觉上吸引人的项目。

假设您的项目具有拖放功能。您可以在用户放下一个物品或者拖动物品时添加一个粒子效果。这将使互动更加引人入胜且有趣。

进入 VFX 的世界后，准备好从不同的角度看待视频游戏和电影。您会开始注意到用于创建您在屏幕上看到的效果。

多种效果类型的合成

一个效果由一个或多个元素组成。这些元素可以是粒子、shader、纹理、mesh、trails 等。通过结合这些元素，您可以创建复杂而美丽的效果。

我们将在接下来的课程中学习如何使用 Three.js 和 React Three Fiber 创建每种元素。但首先，让我们来看看它们。

粒子

粒子是从一个源头发射出来的小元素。它们可以用于创建例如火焰、风、雨、雪、魔法咒语等效果。

通过控制粒子的数量及其属性，例如大小、纹理、颜色、速度和寿命，可以创造出无穷无尽的效果。

它们可以是精灵（始终面向摄像机的二维图像）或三维对象。

烟花课程的预览。

Meshes/Geometry

虽然我们常常将粒子视为点或精灵，我认为有必要提到，meshes也可以用于创建效果。例如，从地面冒出的岩石或开启的传送门。

通过调整geometry、material和着色器，你可以创造出独特且引人注目的效果。

在我们将一起构建的巫师游戏中，看看地面冒出的冰晶是如何增加整体效果的。

Trails

Trails 是一种在物体后方产生一条线的效果。它们可用于创建彗星、激光束或风的效果。

它们带来了运动的印象，可以用于创造速度感或方向感。

我们可以使用粒子或meshes（如线或管）来创建它们。在接下来的课程中，我们将学习这两种方法。

我们会使用trails来创造彗星效果等。

Shaders/Textures

在专门的章节中我们已经学习过shaders。在VFX的背景下，shaders可以应用于particles、meshes或整个场景来让它们移动、改变颜色、扭曲等。唯一的限制是你的想象力。

通过将shaders与textures结合，可以创造出更复杂的效果。textures可以用于为你的效果添加细节，如噪声、图案或图像。

SFX

SFX代表Sound Effects，虽然它不直接与VFX相关，但却是体验的重要部分。通过为你的VFX添加声效并将其与视觉效果同步，可以创造出更具沉浸感和连贯性的体验。

我们不会在本课程中学习如何制作声效，但我们将学习一种有趣的技术来在3D空间中播放空间化的声音。

CPU vs GPU

在创建VFX时，特别是在诸如Web这样受限的环境中，关注效果的性能是很重要的。

在创建VFX时，希望将尽可能多的工作交给GPU。这意味着你需要使用shaders、textures和其他GPU加速技术来创建效果。

对于简单的效果，例如少数particles，你可以使用CPU。然而，对于复杂的效果，例如成千上万的particles，你会希望使用GPU。

我们将在本课程中学习CPU和GPU技术，但我们将尽可能多地关注GPU技术。这将确保你的效果在大多数设备上流畅运行。

我们将创建一个简单的GPU VFX引擎，让我们可以轻松创建复杂效果。我们还将通过一个有趣的GPGPU项目来探索具有TSL的WebGPU。

更进一步

VFX是一个庞大的领域，有许多技术和效果我们在课程中不会涉及。然而，通过学习基础知识，你将能够创建各种效果。

资源

虽然Three.js生态系统在VFX方面不算丰富，但有许多可用于游戏开发的资源可以应用于Three.js。Unity、Unreal和Godot都是学习更多VFX的优秀引擎。

一如既往，交叉查阅不同资源是学习的好方法。以下是一些入门资源：

• Gabriel Aguiar 的YouTube频道有关于Unity和现在的Godot中VFX的优秀教程。我还推荐他在Udemy上的课程 Visual Effects for Games in Unity - Beginner To Intermediate。

• Brackeys YouTube频道有关于Unity（以及在长时间休整后的Godot）中VFX的优秀教程。

• Coreb Games YouTube频道如前述的与Unreal Engine相关。

• VFX Apprentice YouTube频道或网站包含许多关于VFX及其原理的视频。

尝试在Three.js和React Three Fiber中复制这些教程中看到的效果。通过这样做，你会学到很多。

ArtStation 或 Pinterest 也是寻找灵感的好地方。

库

不幸的是，Three.js没有内置的VFX引擎像Unity或Unreal。不过，有一些库可以帮助你在Three.js中创建VFX：

• Quarks VFX 是Three.js中最先进的VFX库。它基于Unity Shuriken实现，允许你将Unity VFX导入Three.js。它是一个付费库，但根据你的项目和需求，它可以为你节省大量时间。
• VFX Composer Suite 由Hendrik Mans开发，是一个在Three.js中创建VFX的优秀库。它是免费和开源的，但没有Quarks VFX维护得那么频繁。
• Wawa VFX 是我们在本课程中一起构建的库。它是一个简单的VFX引擎，可以轻松创建复杂效果。它是免费且开源的。我计划在未来将其转换为TSL。欢迎为其贡献。

结论

我希望你能和我一样对进入VFX世界感到兴奋。我迫不及待地想看到你在本章中获得知识后会创造出什么。