Building Aether 1: Sound Without Boundaries

项目概述

Aether 1始于OFF+BRAND的内部实验：我们能否创建一个如此沉浸式的产品发布网站，让访问者真正"感受"到声音？虽然耳机本身是虚构的，但体验的每个像素都是真实的——这是一个端到端的沙盒环境，我们的品牌、3D和工程团队将WebGL、AI辅助工具和叙事设计推向了远超典型产品页面的境界。

本技术案例研究是这次探索的实况手册，内容包括：

• 3D创作工作流——如何建模、动画化和优化耳机及其充电盒
• 交互式WebGL架构——粒子流场、无限滚动、音频反应着色器和自定义控制器
• 性能优化技巧——GPU友好材质、伪景深、选择性泛光等保持移动设备60FPS的技术
• 工具栈与经验总结——什么有效、什么无效，以及如何将这些经验应用到你的项目中

1. 3D创作工作流

作者：Celia Lopez

耳机形状创建

我们需要从头开始创建耳机形状。为了快速勾勒想法，使用了Midjourney。借助互联网参考和AI帮助，我们确定了艺术方向。

尺寸参考与耳机创建

为确保尺寸符合真实参考，使用Apple耳机进行迭代，直到找到有趣的设计。使用Figma向团队展示所有迭代，每次导出前、侧、后三张图像以帮助可视化。

故事板

首先草图化想法，并尝试将每个特定场景与3D可视化匹配。在确定各部分静态帧之前进行了多次迭代，有些部分在3D中表现过于复杂，因此相应调整了工作流。

运动

为确保大家对流程、外观和感觉达成一致，创建了完整运动版本。

展开与重命名

为准备开发者使用的场景，需要花费时间展开UV、清理文件和重命名元素。由于形状不太复杂，专门使用C4D进行展开。重命名所有部件并组织文件非常重要，以便开发者轻松识别各个对象。

流体流动烘焙

几乎所有动画都从C4D烘焙到Blender，并导出为.glb文件。

时序

决定从无限滚动和循环体验开始。当用户释放滚动时，七个锚点微妙地自动引导进度。为便于开发者分割烘焙动画，为每个步骤使用特定时序——每个锚点之间200个关键帧。

AO烘焙

由于耳机在旋转，无法烘焙光照。只烘焙了环境光遮蔽阴影以增强真实感。展开对象后，将耳机的所有不同部分合并为单个对象，应用带有环境光遮蔽的单一纹理，并在Redshift中烘焙。

法线贴图烘焙

仅为Play-Stade触摸板需要法线贴图，因此进行了导出。但由于AO已烘焙，UV必须保持不变。

相机路径和目标

为确保Web体验中的流畅流程，使用单个相机至关重要。但由于有不同的焦点，需要两个具有不同中心和大小的独立圆形路径，以及一个空对象作为整个流程中的目标参考。

2. WebGL特性与交互架构

作者：Adrian Gubrica

GPGPU粒子

粒子是为3D场景添加额外细节层的好方法。为了补充音频波的平静运动，使用了流场模拟技术——这是一种以在粒子系统中产生可信自然运动而闻名的技术。

使用噪声算法（特别是Simplex4D）计算流场。由于这在CPU上可能非常性能密集，实施了GPGPU技术（本质上是WebGL等效的计算着色器）以在GPU上高效运行模拟。结果在两个纹理中存储和更新，实现平滑高性能运动。

平滑场景过渡

为创建场景之间的无缝过渡，开发了自定义控制器来管理每个场景何时应该或不应该渲染。还实现了手动控制滚动状态的方法，例如可以显示场景的最后位置而无需实际滚动到那里。

无限滚动自定义控制器

主场景在滚动开始和结束处具有无限循环，触发过渡回场景的开始或结束。通过仔细手动调整Lenis库实现了这一行为。

带有流体模拟的光标

由鼠标或触摸移动触发的流体模拟近年来已成为沉浸式网站的主要趋势。在我的实现中，使用流体模拟作为跟随指针移动的蓝色覆盖层。

耳机上的菲涅尔通道

在主场景滚动进程的前半部分，用户可以在悬停时看到耳机的内部部件。通过使用流体模拟通道作为耳机材质上的遮罩来实现此效果。

音频反应性

由于项目是耳机的展示，某些场景参数需要具有音频反应性。使用背景音频的一个频率通道作为输入来驱动各种效果。

动画和空对象

大多数动画直接烘焙到.glb文件中，并通过THREE.js的AnimationMixer使用滚动进度进行控制。

3. 优化技术

人工景深

在耳机的特写视图中使用景深。通过修改粒子片段着色器中的smoothstep函数值使其看起来模糊。

人工泛光

使用带有预生成泛光纹理的简单平面来替代昂贵的泛光效果，该纹理匹配耳机核心的形状。

自定义高性能玻璃材质

使用MeshStandardMaterial作为基础物理光照模型，结合通过onBeforeCompile回调注入的玻璃matcap纹理。

简化光线投射

对高多边形网格进行光线投射可能缓慢且低效。使用不可见的低多边形代理网格进行优化。

移动性能

得益于上述优化技术，即使在iPhone SE（2020）等旧设备上也能保持稳定的60 FPS。

4. 选定工具

• Three.js：构建高度交互的WebGL场景
• lil-gui：创建调试环境
• GSAP：处理大多数线性动画
• Lenis：提供平滑可靠的滚动行为基础

5. 结果与经验总结

Aether 1成功展示了品牌叙事、高级WebGL交互和严格的3D工作流如何融合成单一、高性能且情感吸引人的Web体验。

最重要的是，这里概述的每种技术都是可转移的。无论您是在考虑音频反应视觉效果、无限滚动冒险，还是简单地试图从重场景中挤出额外的帧率，上述记录的解决方案表明，周密的规划和愿意实验的态度可以将WebGL推远超出典型产品页面的期望。

6. 作者贡献

• 总体指导：Ross Anderson
• 3D：Celia Lopez
• WebGL：Adrian Gubrica

7. 网站致谢

• 艺术指导：Ross Anderson
• 设计：Gilles Tossoukpe
• 3D：Celia Lopez
• WebGL：Adrian Gubrica
• AI集成：Federico Valla
• 动效：Jason Kearley
• 前端/Webflow：Youness Benammou