5分钟阅读
艺术背后的硬技术！iPhone17 3D网页背后的技术拆解
大家都知道，苹果官网一直是设计师心中的“标杆”。每年新品发布，苹果都会同步推出精美的3D模型，让用户可以360°无死角地感受产品的每一个细节。
我们在惊叹这种视觉效果的同时，有没有想过：它们到底是怎么实现的？
来自 Needle Tools 的技术大佬 Hybrid Herbst 第一时间拆解了 iPhone 17 官网 3D 展示背后的技术原理。如果你是一名 3D 从业者，尤其是从事实时渲染、Three. js 相关工作的设计师或开发者，这篇文章绝对值得一读。
🧑💻 作者介绍
Hybrid Herbst @hybridherbst
🛠 专注修复问题与构建流程 | 🐙 设计与开发双修 | ⚡ 擅长着色器编写
所属团队：@needletools @prefrontalcortex @amusevision
Mastodon： [email protected]
🛠 技术拆解
苹果的 3D 查看器是基于 Three. js 和 glTF 格式构建的，并且每年都在变得更强大！今年用上了 CAD 级模型、环境融合、反射探针和遮挡处理等技术。我们来一一解析：
首先，整体视觉效果非常干净。为什么？
- 查看器会“吸附”到几个标准视角（如正面、侧面）；
- 很可能在不同视角下使用了不同的环境光效，并进行平滑过渡。
在选择“颜色”选项时，手机会有一个平滑放大的过渡动画。值得注意的是：只有这一部分是真正的 3D 模型，其余菜单选项其实都是视频，并通过黑场淡入淡出完成切换。
去年，苹果的 3D 资源使用的是 .glb（二进制格式），并使用了 Don McCurdy 开发的 gltf-transform 进行处理。而今年，glTF 文件被拆分为：. gltf + .bin + 纹理 三个部分，文件名都做了随机哈希处理。还有一个意外发现：mac 的 Finder 现在居然可以直接预览 KTX 纹理文件！
由于没有经过后期压缩处理，我们可以从文件信息中看到它们的“出身”：这些模型是从 Maya 中通过 Matias Codesal 开发的 maya-glTF 插件导出的，而这位开发者同样在 USD 领域有很多贡献。
Herbst 使用了 Needle Viewer 进行分析。这是一个非常强大的网页端 3D 分析工具，可以查看模型的每一个细节，并且支持 PWA 安装，能自动打开 GLB 文件。
从 glTF 所使用的扩展来看，苹果用上了一整套“PBR Next”材质特性，包括今年新增的 Clearcoat（清漆） 和 Iridescence（虹彩） 效果。
一些基本数据：
- 51 张纹理
- 46 个网格
- 37 种材质
- 5.3 万个顶点
- 7.2 万个三角面
- 三种颜色的模型总共约 20 MB
很多小细节都是用纹理表现的：
- 螺丝
- 散热孔
- 闪光灯
而有些部分则是实实在在的几何模型，比如 整个 USB-C 接口：
还有著名的 苹果 Logo——这样做非常合理：用几何体代替贴图可以实现“矢量级”清晰度，永远不担心放大后模糊！
更多几何细节，包括“摄像头旁边的那个小孔”：
借助 Needle Viewer，我们可以轻松查看不同的纹理通道：
- Albedo（漫反射）
- Normal（法线）
- Roughness（粗糙度）
- Metallic（金属度）
值得注意的是，金属度值并不是非 0 即 1——现实中物体的金属属性往往是渐变的。
环境遮蔽（AO）贴图也非常干净：
表面细节处理也很到位，通过法线贴图+粗糙度贴图模拟出了喷砂/微铣削的质感：
在 Viewer 中开启“Surface Review”模式，可以更清楚地看到表面材质的细节：
这种处理方式很好地强化了表面的“触觉感”：
不过，在镜头反射的表现上，苹果官网的效果比我们在 Viewer 中看到的要真实得多。这是为什么？
原来，苹果使用了 Reflection Probes（反射探针）——也就是为镜头的反射单独定制了小范围的环境贴图。这些贴图经过精心调整，模拟真实镜头对光线的折射效果：
在 Three. js 中，你可以通过代码覆写特定材质的 .envMap 属性来实现这一点。而在 Needle Engine 中，你不需要写代码就可以直接使用反射探针。
苹果还用了另一个技巧，让实时渲染的效果更接近他们的产品静帧图（通常经过离线渲染和逐张调光）。在实时渲染中，通常不会对每个视角单独调光，但苹果做到了：
Herbst 认为，苹果很可能为设计师开发了一个小工具，可以像处理静帧图一样，为每一个视角精确布置灯光。他甚至在网页资源中找到了这些灯光文件——它们以独立的 glTF 文件加载，其中包含放置在中性环境前的“光点”和“阴影点”：
下面这个环境文件很可能就是导致某个视角出现暗斑的“元凶”：
所以说，要达到这样的质量水平，需要多方面的配合：
- 高质量的纹理
- 干净的几何模型
- 反射探针
- 环境光融合
如果你也想实现类似效果：
- Three. js 提供了技术基础；
- Needle Tools 能让这个过程变得更简单。
希望这篇文章能让你对网页端高质量实时渲染有更深入的了解。如果你喜欢这类内容，欢迎关注 Herbst 和 Needle Tools！
想获取更多 AI 辅助设计和设计灵感趋势？欢迎关注我的公众号「设计小站」：sjxz00。