Maxime Heckel 花了几个月时间从零开始搭建自己的个人网站，并加入了 3D 作品来展示他的着色器和 WebGL 技能。在这个过程中，他逐渐意识到后期处理对于让场景看起来出色有多么关键。自定义后期处理为他提供了一个创意出口，他也对抖动、色彩量化、像素化或 CRT RGB 单元等复古效果产生了特别的偏爱。这些细微的细节在现代网络与许多 90 年代和 21 世纪初出生的人仍然怀念的技术时代之间形成了一种令人愉悦的对比。
抖动最初是一种早期的图形技术，它通过有意在图像或渲染结果中加入噪点，欺骗观众的大脑，使其在渐变和阴影中感知到比硬件实际输出更多的颜色或更平滑的过渡。当时的调色板非常有限，因此游戏设计师非常依赖这种技术。其结果是一种独特的视觉风格，与计算机开始普及、但高级图形尚未实现的时代紧密相连。如今，抖动更多是一种艺术选择，而非权宜之计，艺术家和游戏设计师用它来唤起那个时代，或在自我设定的颜色限制内进行创作。例子包括 Basement Studio 的点击式游戏 Basement Chronicle、@loackme 的艺术作品，以及 @aweusmeuh 使用原版 Game Boy 相机拍摄的实验摄影。
Heckel 专注于将抖动应用于 React Three Fiber 和 Three.js 项目，以赋予它们独特的风格。该方法以后期处理为核心，即像对照片使用图像滤镜一样，对已渲染的场景应用着色器。要构建自定义效果，他会声明一个继承自 Effect 的类，定义通过父类构造函数调用的片段着色器，声明必要的 uniform 变量，然后使用 wrapEffect 包装该类，使其能够在 EffectComposer 中作为 JSX 组件使用。
本系列的第一部分讲解了抖动技术的工作原理，将其实现为着色器，并构建了一个可应用于任何 3D 场景的初始抖动后期处理效果。
来源: Hacker News · 由HeadlinesBriefing整理摘要