在过去的几个月里，我花时间从零开始构建个人网站，终于将一些 3D 工作纳入其中，以展示我的着色器和 WebGL 技能。在这个过程中，我真正理解了后处理在使场景看起来美观方面所起的关键作用，这为我过去在 React Three Fiber 和着色器项目上长期的挫折带来了一些解决方案——不管我投入多少工作和心血，我的愿景都无法实现。花时间构建、组合和实验自定义后处理效果给了我一个额外的创造性出口，其中我总是对我开发出的几种 "复古 " 效果怀有特别的喜爱。诸如抖动、颜色量化或像素化/CRT RGB 单元这样的细腻细节，它们在现代网页景观与我们这些 90 年代/2000 年代初的孩子们常常怀念的过去技术时代之间带来了愉悦的对比。考虑到我在剖析这些效果的各个方面上投入的时间，我想和你深入探讨驱动它们的概念以及我在此过程中学到的着色器技术。在这篇文章中，我希望能让你信服后处理效果的强大，并且没有什么比优雅的复古氛围更适合应用到网站上 👌✨。我们还将看看一些来自非常有才华的人们的抖动和像素艺术实例，他们使用的过程与我之后将介绍的相同，以及我在学习这些内容时创作的一些作品。抖动起初作为一种早期图形技术，用来欺骗观众的大脑，使其在渐变/阴影中看到更多的颜色或平滑感，这些是在当时的计算机可以输出的，通过故意在图像或渲染上引入噪声来实现的。当时的颜色调色板非常有限，因此依赖这种技术对游戏设计师实现他们的愿景至关重要。因此，这赋予了那个特定时间游戏和媒体独特的外观和感觉，那时计算机变得无处不在，但图形能力尚未成熟。如今，抖动更多的是一种艺术选择，而非权宜之计。许多艺术家或游戏设计师将此技术作为创造性出口，以赋予他们的作品独特的复古氛围，呼应那个早期游戏的时代，或在自我设定的颜色限制范围内工作。一些优秀的抖动使用示例包括：Basement Studio 的游戏《Basement Chronicle》：一款制作精良的点击式冒险游戏，让我想起自己早期的游戏体验。@loackme 的艺术作品，我是此作品的绝对粉丝。@aweusmeuh 使用原始游戏男孩相机进行实验摄影，展现出一种绝妙的抖动效果。如下图，左到右分别为 Basement Studio、@aweusmeuh 和 @loackme_ 精心制作的抖动艺术。这也是我们将在本博文中探讨抖动的方式：为我们的 React Three Fiber/Three.js 项目赋予独特的风格！在这第一部分中，我们将探讨抖动技术的工作原理，将其作为着色器实现，并构建第一个自定义抖动后处理效果的迭代，能够施加在任何 3D 场景之上。使用 React Three Fiber 的抖动初步处理。对于这个项目，我们将创建一个自定义后处理效果。就像我们为 Moebius 风格着色器所做的那样，依赖后处理将使我们能够对已渲染场景应用一个着色器，并改变其风格，就像给照片添加 "图像过滤器 " 一样。要创建一个自定义效果，我们将：声明一个从 Effect 扩展的类，定义我们的片段着色器，并使用 super 关键字从父构造函数中调用它，定义我们效果所需的 uniform 集合，使用 @react-three/post-processing 的 wrapEffect 函数并将我们的效果类作为参数传递。这样，我们就可以在 EffectComposer 中将我们的效果用作 JSX 组件。