构建 Aether 1：无界之声

Aether 1 最初是 OFF+BRAND 的一个内部实验：我们能否打造一个极具沉浸感的产品发布网站，让访客能够真正地“感受”到声音？

这款耳机本身是虚构的，但体验中的每一个像素都是真实的——这是一个端到端的沙盒项目，我们的品牌、3D 和工程团队在这里将 WebGL、AI 辅助工具和叙事设计的应用，远远超出了一个典型产品页面的范畴。

体验地址：https://www.aether1.ai/

这篇技术案例研究，正是那次探索的活生生的实践手册。在本文中，你将看到：
3D 创作流程 – 我们如何雕刻、制作动画并优化耳机及其充电盒。
交互式 WebGL 架构 – 粒子流场、无限滚动、音频响应式着色器以及让网站充满生机的自定义控制器。

性能技巧 – GPU 友好的材质、伪景深效果、选择性辉光以及其他使项目在移动设备上保持 60 FPS 运行的策略。

工具栈与经验总结 – 哪些方法有效，哪些无效，以及为什么这里的每一条经验都可以应用到你自己的项目中。

无论你是开发者、设计师还是制作人，接下来的部分将为你揭开那些帮助我们证明“无界之声”可以在网络上存在的决策、实验和来之不易的优化。

1. 3D 创作流程
作者：Celia Lopez
耳机和充电盒的 3D 创作
对于耳机的形状，我们需要从零开始创造。为了帮助我们快速勾勒出脑海中的想法，我们使用了 Midjourney。借助来自互联网的参考资料和 AI 的帮助，我们最终确定了艺术方向。

alt text

尺寸参考与耳机创作
为了确保尺寸与现实生活中的参考物相匹配，我们使用了苹果耳机进行参考，并不断迭代，直到找到一些有趣的设计。我们使用 Figma 向团队展示所有的迭代版本，每次都导出正面、侧面和背面三张图片，以帮助他们更好地想象这个物体。
充电盒的创作过程也是如此。
故事板
对于故事板，我们首先草拟了我们的想法，并尝试将每个特定场景与 3D 可视化效果相匹配。

alt text

在最终确定每个部分的静态画面之前，我们进行了一段时间的迭代。有些部分在 3D 中表现起来过于棘手，所以我们相应地调整了工作流程。
动态演示
为了让每个人都对流程、外观和感觉达成一致，我们创建了一个完整的动态版本。
UV 展开与重命名
为了给开发者准备好场景文件，我们需要花一些时间展开 UV、清理文件并重命名元素。由于形状不太复杂，我们专门使用 C4D 进行 UV 展开。同时，重命名所有部件并整理文件也非常重要，这样开发者可以轻松识别哪个对象是哪个。（在下面的示例中，我们展示的是技术手法——并非完整的工作流程或完美的 UV 展开。）

alt text

流体流动的烘焙
几乎所有的动画都是从 C4D 烘焙到 Blender，然后导出为 .glb 文件。
时间控制
我们决定从一个无限滚动和循环的体验开始。当用户释放滚动时，七个锚点会巧妙地自动引导进程。为了方便开发者分割烘焙好的动画，我们为每一步都使用了特定的时间——每个锚点之间有 200 个关键帧。
AO 烘焙
由于耳机是旋转的，我们无法烘焙光照。我们只烘焙了环境光遮蔽（Ambient Occlusion）阴影以增强真实感。为此，在展开对象 UV 后，我们将耳机的所有不同部分合并成一个单一的对象，应用一个带有环境光遮蔽的单一纹理，并在 Redshift 中进行烘焙。充电盒也采用了同样的方法。
法线贴图烘焙
仅对于 Play-Stade 触控板，我们需要一张法线贴图，所以我们导出了它。然而，由于 AO 已经烘焙，UV 必须保持不变。
摄像机路径与目标
为了确保网页体验中的流畅流动，使用单一摄像机至关重要。然而，由于我们有不同的焦点，我们需要两条具有不同中心和大小的独立圆形路径，以及一个空物体（null object）作为整个流程中的目标参考。
2. WebGL 特性与交互式架构
作者：Adrian Gubrica
GPGPU 粒子
粒子是为 3D 场景增添额外细节层次的绝佳方式，Aether 1 项目就是如此。为了补充声波的平静动态，我们使用了一种流场模拟（flow-field simulation）技术——这种技术以在粒子系统中产生可信且自然的运动而闻名。通过正确的设置，由此产生的运动也可以让人感到非常放松。
为了计算流场，我们使用了噪声算法——特别是 Simplex4D。由于这些算法在 CPU 上的性能开销可能非常大，我们实现了一种 GPGPU 技术（本质上是 WebGL 中与计算着色器等效的技术）来在 GPU 上高效地运行模拟。计算结果被存储并在两个纹理之间更新，从而实现了平滑且高性能的运动。
平滑的场景过渡
为了在场景之间创建无缝过渡，我开发了一个自定义控制器来管理每个场景应该在何时渲染或不渲染。我还实现了一种手动控制其滚动状态的方法，例如，允许我显示一个场景的最后位置而无需物理上滚动到那里。通过将此与一个主要使用 GSAP 来制作值动画的自定义过渡函数相结合，我能够创建到目标场景的向前和向后动画。
值得注意的是，所有场景和过渡都显示在一个“后期处理场景”中，该场景由一个正交摄像机和一个全屏平面组成。在片元着色器中，我将所有渲染结果合并在一起。
当在主场景的每次滚动结束时进行过渡以创建无限循环时，这种过渡技术变得尤为棘手。为了实现这一点，我创建了主场景的两个实例（A 和 B），并在每次发生过渡时在它们之间进行切换。
用于无限滚动的自定义滚动控制器
如前所述，主场景在滚动的开始和结束处都有一个无限循环，这会触发一个回到场景开始或结束的过渡。这种行为通过在向后移动时增加一些阻力以及其他微妙的效果得到了增强。实现这一点需要对 Lenis 库进行仔细的手动调整。
我最初的想法是使用 Lenis 的 infinite: true 属性，起初这似乎是一个快速的解决方案——特别是对于返回到起始滚动位置。然而，这种方法需要手动监听滚动速度并预测滚动是否会超过某个阈值，以便在恰当的时刻停止它并触发过渡。虽然可行，但很快就证明这种方法并不可靠，经常导致不可预测的行为，如滚动状态损坏、意外的过渡或混乱的浏览器滚动历史。
由于这些问题，我决定移除 infinite: true 属性，并手动处理滚动过渡。通过结合使用 Lenis.scrollTo()、Lenis.stop() 和 Lenis.start()，我能够以更高的控制力和可靠性在每次滚动结束时重新创建相同的循环效果。一个额外的好处是能够保留 Lenis 在滚动开始和结束时的默认缓动效果，这为体验增添了平滑和精致的感觉。
带有流体模拟通道的光标
由鼠标或触摸移动触发的流体模拟近年来已成为沉浸式网站的一大趋势。但它不仅仅是时髦，它持续地增强了视觉吸引力，并为用户体验增添了令人满意的一层交互性。
在我的实现中，我将流体模拟用作一个跟随指针移动的蓝色叠加层。它还充当了菲涅尔通道（下面会详细解释）的遮罩，并用于在最终渲染中创建动态的位移和 RGB 色偏效果。
由于流体模拟可能性能开销很大——需要多个通道来计算真实的行为——我将其缩减到仅为屏幕分辨率的 7.5%。这一优化在保持整体性能流畅的同时，仍然产生了视觉上引人注目的效果。
耳机上的菲涅尔通道
在主场景滚动进程的前半部分，用户将鼠标悬停在耳机上时可以看到其内部零件，为场景增添了一个很好的互动感。我通过将流体模拟通道用作耳机材质上的遮罩来实现这一效果。
然而，起初实现这一点并不直接，因为耳机和流体模拟使用不同的坐标系。我最初的想法是为耳机创建一个单独的渲染通道，并在该特定通道中应用流体遮罩。但这种方法成本高昂，并会给后期处理管线引入不必要的复杂性。
经过一些实验，我意识到可以利用相机的视图位置，将其作为一种屏幕空间的 UV 投影应用到材质上。这使我能够直接在耳机的材质中准确采样流体纹理——这正是我所需要的，可以在没有额外渲染开销的情况下实现该效果。
音频响应
由于该项目是耳机的展示，一些场景参数需要对音频做出反应。我使用了背景音频的一个频率通道——那个能产生最明显“跳动”的通道，因为音轨的其余部分音调非常稳定——它作为驱动各种效果的输入。这包括修改波形动画的节奏和形状，影响粒子流场的强度，以及塑造触控板的可视化效果。
背景音频本身也使用了 Web Audio API 进行处理，特别是低通滤波器。当用户在主场景的第一部分悬停在耳机上时，以及在开始和结束的场景过渡期间，这个滤波器会被触发。低通效果有助于增强动画的冲击力，创造出一种时间放缓的微妙感觉。
动画与空物体
大多数动画都直接烘焙到 .glb 文件中，并使用 THREE.js 的 AnimationMixer 通过滚动进度进行控制。这包括摄像机运动以及耳机的动画。
当与另一位 3D 艺术家合作时，这个工作流程被证明非常有效，因为它让他们能够控制体验的多个方面——如时间、运动和过渡——同时让我可以专注于实时交互和逻辑。
说到实时操作，我通过添加多个空物体（empties）来扩展场景，通过动画化它们的位置和缩放值，来作为各种交互事件的驱动器——例如触发交互点或在滚动期间调整输入强度。这种方法使得直接在 Blender 的时间轴中微调这些事件并使它们与其他烘焙动画精确对齐变得容易。
3. 优化技术
这个项目对视觉效果的期望非常高，从一开始就很清楚，性能优化将是一个重大挑战。因此，我在整个开发过程中密切监控性能指标，不断寻找任何可能节省资源的机会。这常常导致一些出人意料但有效的解决方案，解决了最初看起来对于我们的目标来说要求过高或不切实际的问题。其中一些优化已经提到——例如使用 GPGPU 技术进行粒子模拟，以及显著降低光标流体模拟的分辨率。然而，还有其他几个关键的优化在维持稳定性能方面发挥了至关重要的作用：
人造景深
其中之一是在耳机特写视图中使用景深。景深通常作为后期处理层使用，通过某种卷积来模拟渲染场景的渐进式模糊。我从一开始就认为这是一个“如果有额外帧率就很好”的功能，但不是一个现实的选择。
然而，在实现了粒子模拟之后，它在粒子的片元着色器中使用了 smoothstep 函数来绘制蓝色圆圈，我突然想到，或许仅仅修改它的值就足以让它看起来像是模糊的？经过几次微调，粒子变得模糊了。
唯一剩下的问题是，模糊不像真实相机那样是渐进的，也就是说，它不会根据相机的焦点而变得模糊。所以我决定尝试使用相机的视图位置来获取某种深度值，令人惊讶的是，这个方法效果很好。
我将相同的 smoothstep 技术应用于背景中旋转的管道，但这次没有渐进效果，因为它在大部分时间里都处于一个几乎恒定的距离。
瞧！几乎免费的景深效果（虽然不完美，但效果不错）。
人造辉光
辉光（Bloom）也是后期处理栈的一部分——这通常是一个成本高昂的效果，因为它需要额外的渲染通道。当使用选择性辉光时，这会变得更加苛刻，而我需要用它来让耳机的核心发光。在这种情况下，渲染通道实际上会加倍，以仅隔离和混合特定的元素。
为了解决这个性能问题，我用一个简单的平面来替代辉光效果，这个平面使用预先生成的、与耳机核心形状相匹配的辉光纹理。这个平面被设置为始终朝向相机（即“公告牌”技术），从而在没有计算开销的情况下创造出辉光的错觉。
令人惊讶的是，这种方法效果非常好。通过一些微调——特别是调整深度写入设置——我甚至能够避免与附近几何体的可见重叠，保持了干净且令人信服的外观。
自定义的高性能玻璃材质
耳机视觉吸引力的一个主要部分来自于背面的光泽表面。然而，在 WebGL 中实现逼真的反射总是具有挑战性的——而且通常成本高昂——尤其是在使用双面材质时。
为了解决这个问题，我使用了一个我经常依赖的策略：将 MeshStandardMaterial（用于基础物理光照模型）与一个玻璃 matcap 纹理相结合，通过 onBeforeCompile 回调注入。这个设置在真实感和性能之间提供了一个很好的平衡。
为了进一步增强效果，我在边缘添加了菲涅尔光照，并引入了轻微的不透明度，这些共同帮助创造了一个令人信服的玻璃般表面。最终效果与项目提供的视觉概念非常接近——而且没有实时反射或更复杂材质带来的沉重成本。
简化的光线投射
在高多边形网格上进行光线投射（Raycasting）可能会缓慢且效率低下。为了优化这一点，我为兴趣点（例如耳机形状及其交互区域）使用了不可见的低多边形代理网格。
这种方法显著降低了光线投射的性能成本，同时给了我更大的灵活性。我可以自由调整可投射区域的大小和位置，而不会影响视觉网格，从而使我能够微调交互以获得最佳的用户体验。
移动端性能
得益于上述优化技术，该体验保持了稳定的 60 FPS——即使在像 iPhone SE (2020) 这样的旧设备上也是如此。
4. 精选工具
Three.js: 对于这种规模的项目，Three.js 是明确的选择。其内置的材质、加载器和实用程序使其成为构建高度交互式 WebGL 场景的理想选择。在设置 GPGPU 粒子模拟时它特别有用，该功能通过 Three.js 生态系统提供的专用插件得到支持。
lil-gui: 通常与 Three.js 一起使用，它在开发过程中创建调试环境方面起到了关键作用。它还允许设计师交互式地调整和微调体验的各种参数，而无需深入研究代码。
GSAP: 大多数线性动画都由 GSAP 及其时间轴系统处理。在手动将动画与 Lenis 提供的滚动进度同步时，它被证明特别有用，为时间和过渡提供了精确的控制。
Lenis: 如前所述，Lenis 为滚动行为提供了平滑可靠的基础。其 syncTouch 参数有助于管理移动设备上的 DOM 移位问题，这在基于滚动的体验中是一个常见的挑战。
5. 结果与总结
Aether 1 成功地展示了品牌叙事、先进的 WebGL 交互和严谨的 3D 工作流程如何融合成一个单一的、高性能且富有情感吸引力的网络体验。
通过烘焙关键动画、使用空物体作为事件触发器，并依赖 Three.js、GSAP 和 Lenis 等工具，团队能够在不牺牲精致度的情况下快速迭代。同时，从 Midjourney 概念草图到 C4D 的 UV 展开和 Blender 导出，整个 3D 管线确保了视觉保真度与品牌愿景保持一致。
最重要的是，这里概述的每一种技术都是可以移植的。无论你是在考虑音频响应式视觉效果、无限滚动的冒险，还是仅仅试图从一个沉重的场景中挤出额外的每秒帧数，上面记录的解决方案都表明，深思熟虑的规划和乐于实验的精神，可以将 WebGL 的应用推向了远超常规产品页面的高度。