Skip to main content

构建 Aether 1：无界之声

你是否也想创造这样的体验？
  • ✅ 一个让访客能“感觉”到声音的沉浸式产品发布网站。
  • ✅ 一个融合品牌、3D 和工程技术，将 WebGL、AI 辅助工具和叙事设计推向极致的沙盒项目。
  • ✅ 一个即使产品是虚构的，但每一像素的体验都真实存在的网站。 别担心，这不是天方夜谭。本篇技术案例研究将为你揭示其实现过程！

这篇学完，你就能：

  • 学习如何雕刻、动画化和优化耳机及充电盒的 3D 模型。
  • 了解构成网站生命力的粒子流场、无限滚动、音频反应着色器和自定义控制器。
  • 掌握 GPU 友好材质、伪景深、选择性辉光以及其他在移动硬件上保持 60 FPS 的技巧。
  • 了解哪些工具和技术是有效的，以及如何将这些经验应用到你自己的项目中。

图示：Aether 1，一个融合了3D、声音和WebGL的无界体验。

访问网站

Aether 1 最初是 OFF+BRAND 的一个内部实验：我们能否打造一个如此身临其境的产品发布网站，让访客能感觉到声音？

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

这篇技术案例研究是那次探索的生动剧本。在其中你会发现：

  • 3D 创作工作流 – 我们如何雕刻、动画化和优化耳机及其充电盒。
  • 交互式 WebGL 架构 – 粒子流场、无限滚动、音频反应着色器和自定义控制器，这些都让网站感觉充满活力。
  • 性能技巧 – GPU 友好的材质、伪景深、选择性辉光以及其他使项目在移动硬件上以 60 FPS 运行的策略。
  • 工具栈 & 总结 – 什么有效，什么无效，以及为什么这里的每一个教训都可以转化到你自己的项目中。

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

一、3D 创作工作流​

作者：Celia Lopez

耳机和充电盒的 3D 创作​

对于耳机的形状，我们需要从头开始创造一个。为了帮助我们快速勾勒出脑海中的想法，我们使用了 Midjourney。借助来自互联网的参考资料和 AI 的帮助，我们确定了艺术方向。

尺寸参考和耳机创作​

为确保尺寸与现实生活中的参考相符，我们使用了苹果耳机并进行迭代，直到找到有趣的东西。我们使用 Figma 向团队展示所有的迭代版本，每次都导出正面、侧面和背面三张图片，以帮助他们更好地可视化物体。

充电盒也是如此。

故事板​

对于故事板，我们首先勾勒出我们的想法，并尝试将每个特定场景与 3D 可视化相匹配。

在最终确定每个部分的静帧之前，我们进行了一段时间的迭代。有些部分在 3D 中表现起来太棘手，所以我们相应地调整了工作流程。

动态​

为了让每个人都对流程、外观和感觉达成一致，我们创建了一个完整的动态版本。

展开和重命名​

为了给开发者准备场景，我们需要花一些时间展开 UV、清理文件并重命名元素。我们专门使用 C4D 进行展开，因为形状不太复杂。重命名所有部件并组织文件也非常重要，这样开发者可以轻松识别哪个对象是哪个。（在下面的例子中，我们展示了技术——而不是完整的工作流程或完美的展开。）

流体流动烘焙​

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

时间​

我们决定从无限滚动和循环体验开始。当用户释放滚动时，七个锚点会巧妙地自动引导进程。为了让开发者更容易地划分烘焙动画，我们为每一步使用了特定的时间——每个锚点之间有 200 个关键帧。

AO 烘焙​

因为耳机在旋转，我们无法烘焙光照。我们只烘焙了环境光遮蔽（Ambient Occlusion）阴影以增强真实感。为此，在展开对象后，我们将耳机的所有不同部分组合成一个单一的对象，应用一个带有环境光遮蔽的单一纹理，并在 Redshift 中进行烘焙。充电盒也是如此。

法线贴图烘焙​

仅对于 Play-Stade 触摸板，我们需要一个法线贴图，所以我们导出了它。然而，由于 AO 已经烘焙，UV 必须保持不变。

相机路径和目标​

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

二、WebGL 特性与交互式架构​

作者：Adrian Gubrica

GPGPU 粒子​

粒子是为 3D 场景增添额外细节层次的好方法，Aether 1 就是这种情况。为了补充声波的平静运动，使用了流场模拟——一种以在粒子系统中产生可信和自然运动而闻名的技术。通过正确的设置，产生的运动也可以非常令人放松。

为了计算流场，使用了噪声算法——特别是 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 艺术家合作时，这个工作流程被证明非常有效，因为它让他们可以控制体验的多个方面——如时间、运动和过渡——同时让我可以专注于实时交互和逻辑。

说到实时操作，我通过添加多个空对象来扩展场景，动画化它们的位置和缩放值，以作为各种交互事件的驱动器——例如触发交互点或在滚动期间调整输入强度。这种方法使得直接在 Blender 的时间轴中微调这些事件并将其与其他烘焙动画精确对齐变得容易。

三、优化技巧​

这个项目的视觉期望非常高，从一开始就很清楚性能优化将是一个重大挑战。因此，我在整个开发过程中密切监控性能指标，不断寻找节省资源的机会。这常常导致对最初看起来对我们的目标要求过高或不切实际的问题，产生意想不到但有效的解决方案。其中一些优化已经提到——例如使用 GPGPU 技术进行粒子模拟和显著降低光标流体模拟的分辨率。然而，还有其他几个关键优化在保持稳定性能方面发挥了至关重要的作用：

人造景深​

其中之一是在耳机特写视图中使用景深。景深通常用作后处理层，使用某种卷积来模拟渲染场景的渐进式模糊。我从一开始就认为这是一个不错的选择，以防我们有多余的 fps，但不是一个现实的选择。

然而，在实现了粒子模拟之后，该模拟在粒子的片段着色器中使用了 smoothstep 函数来绘制蓝色圆圈，我想知道是否仅仅修改其值就足以让它看起来像是模糊的。经过几次小调整，粒子变得模糊了。

剩下的唯一问题是模糊不像真实相机那样是渐进的，也就是说它不会根据相机的焦点变得模糊。所以我决定尝试使用相机的视图位置来获得某种深度值，这出人意料地做得很好。

我将相同的 smoothstep 技术应用于背景中的旋转管，但现在没有了渐进效果，因为它大部分时间都处于恒定距离。

瞧。几乎免费的景深（不完美，但效果不错）。

人造辉光​

辉光也是后处理堆栈的一部分——通常是一个昂贵的效果，因为它需要额外的渲染通道。当使用选择性辉光时，这就变得更加苛刻，我需要用它来使耳机的核心发光。在这种情况下，渲染通道实际上加倍以隔离和混合特定的元素。

为了解决这个性能问题，我用一个简单的平面替换了辉光效果，该平面使用一个预先生成的辉光纹理，与耳机核心的形状相匹配。该平面被设置为始终面向相机（一种广告牌技术），从而在没有计算开销的情况下创造出辉光的错觉。

令人惊讶的是，这种方法效果很好。经过一些微调——特别是调整深度写入设置——我甚至能够避免与附近几何体的可见重叠，保持了干净和令人信服的外观。

自定义高性能玻璃材质​

耳机视觉吸引力的很大一部分来自背面的光泽表面。然而，在 WebGL 中实现逼真的反射总是具有挑战性——而且通常很昂贵——尤其是在使用双面材质时。

为了解决这个问题，我使用了一个我经常依赖的策略：将 MeshStandardMaterial 用于基础物理光照模型，并结合一个玻璃 matcap 纹理，通过 onBeforeCompile 回调注入。这个设置在真实感和性能之间提供了很好的平衡。

为了进一步增强效果，我在边缘添加了菲涅尔光照并引入了轻微的不透明度，这共同帮助创造了一个令人信服的玻璃状表面。最终结果与项目提供的视觉概念非常匹配——而没有实时反射或更复杂材质的沉重成本。

简化的光线投射​

在高多边形网格上进行光线投射可能缓慢且效率低下。为了优化这一点，我为兴趣点使用了不可见的低多边形代理网格——例如耳机形状及其交互区域。

这种方法显著降低了光线投射的性能成本，同时给了我更大的灵活性。我可以自由调整可投射区域的大小和位置，而不会影响视觉网格，从而使我能够为最佳用户体验微调交互。

移动性能​

得益于上述优化技术，即使在像 iPhone SE (2020) 这样的旧设备上，该体验也能保持稳定的 60 FPS。

四、工具选型​

  • Three.js: 对于这种规模的项目，Three.js 是明确的选择。其内置的材质、加载器和实用程序使其成为构建高度交互式 WebGL 场景的理想选择。在设置 GPGPU 粒子模拟时，它特别有用，该模拟通过 Three.js 生态系统提供的专用插件得到支持。
  • lil-gui: 通常与 Three.js 一起使用，在开发过程中创建调试环境方面发挥了重要作用。它还允许设计师交互式地调整和微调体验的各种参数，而无需深入研究代码。
  • GSAP: 大多数线性动画都由 GSAP 及其时间轴系统处理。在手动将动画与 Lenis 提供的滚动进度同步时，它被证明特别有用，提供了对时间和过渡的精确控制。
  • Lenis: 如前所述，Lenis 为滚动行为提供了平滑可靠的基础。其 syncTouch 参数有助于管理移动设备上的 DOM 移位，这在基于滚动的体验中可能是一个常见的挑战。

五、成果与总结​

Aether 1 成功地展示了品牌叙事、先进的 WebGL 交互和严谨的 3D 工作流程如何融合成一个单一、高性能且情感上引人入胜的网络体验。

通过烘焙关键动画、使用空对象作为事件触发器，并依赖 Three.js、GSAP 和 Lenis 等工具，团队能够在不牺牲精致度的情况下快速迭代。同时，从 Midjourney 概念草图到 C4D 展开和 Blender 导出的 3D 流程确保了视觉保真度与品牌愿景保持一致。

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

六、制作人员名单​

作者贡献​

  • 总负责人 – Ross Anderson
  • 3D – Celia Lopez
  • WebGL – Adrian Gubrica

网站制作人员​

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