Google Store 如何利用 glTF 3D 模型改变产品教育

Google 为全球广大用户提供种类繁多、持续改进的硬件产品。Google 的智能手机、智能手表、耳机、平板电脑、智能家居设备等产品均通过 Google Store(谷歌商店) 以及遍布全球的实体和数字第三方零售商销售。作为一个以在人工智能、智能家居和个人设备体验方面不断开拓创新而闻名的全球品牌，Google 面临着一项重大挑战：打造引人入胜、行之有效的产品培训和营销材料，并使其在世界各地都能有效发挥作用。可以去glbxz.com官方下载模型glb和gltf格式模型   http://glbxz.com

2021 年，Google 开始在谷歌商店中利用 glTF ™ 3D 产品模型，同时支持图片和视频等传统媒体。当时，我领导着 Google 硬件营销客户体验团队。我们着手采用并优化低多边形 3D 资源管道和 WebGL 框架，以提升 Pixel 和 Nest 产品在谷歌商店和第三方电商渠道的用户体验。将交互式 3D 技术引入谷歌商店是顺理成章的一步：作为网络上最受欢迎的开源 3D 查看器之一<model-viewer>的开发者，我们拥有深厚的内部专业知识，能够为各种目标用户提供高质量的基于浏览器的 3D 和 AR 体验。此外，作为 Khronos Group 的积极参与者，Google 直接参与了 glTF 3D 格式的持续演进，确保这一开放标准能够满足像我们这样的用例的需求。

Google 的产品教育和营销材料中更多地使用 3D 模型，这一转变产生了重大影响，不仅促进了公司自身目标的实现，也为 glTF 生态系统带来了重要的补充。本案例研究探讨了 Google 如何利用 glTF 改进产品教育、降低成本、简化工作流程，同时提升 3D 内容创作的水平。

挑战

2021 年之前，Google 依靠静态图片和视频等传统媒体进行产品培训和营销。制作这些素材，并用合适的语言和文化符号将其呈现给全球不同的受众，既耗时又耗资。这是一个永无止境的挑战：一套产品培训材料完成后，新功能发布或产品更新可能又需要团队重新开始。

理论上，使用数字产品模型可以让我们更高效地创建新材料，并轻松更新，以跟上产品发展的步伐。然而，在 Google 产品培训和电商体验中采用 3D 模型仍存在一些已知的挑战需要克服。

1. 视觉保真度：Google 的产品，尤其是 Pixel 手机，以其独特的品牌色彩和时尚的设计而闻名。因此，数字模型必须与这些产品的真实颜色和纹理相匹配。
2. 兼容性： 我的目标不仅仅是打造更好的 Google Store，更是一个更美好的网络。因此，我的团队并非只想在我们自己的网站上添加 3D 素材，而是希望能够轻松地将这些素材部署到第三方零售商网站、社交媒体平台以及其他服务（例如 Google 搜索和 AR 体验）上。
3. 文件大小和性能：我们在 Google Store中实现的任何零售体验都必须面向全球所有客户群。商店中的模型需要进行优化，以便在不同设备（包括手机和较慢的互联网连接）上实现良好的运行。
4. 面向未来：尽管最终比传统媒体更高效，但开发逼真的 3D 产品模型需要大量投资。确保我们创建的模型能够随着新技术、新设备或新 Web 标准的出现而持续发挥作用至关重要。

解决方案与实施

在应对这些挑战的同时，我们致力于提升产品教育和客户参与度，其方法以 <model-viewer> 和 glTF 为中心。通过这些基于标准的方法，我们能够实现更高效的工作流程、更快的内容创建速度和更佳的用户体验，从而彻底改变我们产品在网络上的呈现方式。

glTF 是创建轻量级且视觉上引人入胜的 3D 模型的理想解决方案。为了给 Google Store 打造互动体验，我们将高保真模型压缩成针对网页优化的低多边形 GLB 文件。这种方法使我们能够应对全球范围内扩展 3D 资源的挑战，确保模型能够在跨平台和设备快速加载，同时保持高水平的细节。我们使用 <model-viewer> 将 3D 模型直接嵌入 Google 商店商品页面，让顾客能够以传统图片或视频无法比拟的方式旋转、缩放和浏览商品。

内容创作流程由 Google 内部团队与外部供应商XYZ Agency共同协作完成。XYZ Agency 创建高保真 3D 模型，Google 团队将其用于营销材料以及 Google 商店中部署的低多边形 glTF 模型。所有模型都存储在一个集中式数字资产管理 (DAM) 平台中，确保全球营销团队能够轻松访问，并实现跨地区和平台的一致性。

在创建网页优化素材资源时，我们会从高保真基础文件中导出低多边形 GLB 模型：Google 商店中的模型包含 2 万到 9 万个三角形，具体取决于模型的复杂程度。然后，我们使用DRACO压缩几何网格。作为内部最佳实践，我们将网页优化素材资源的大小限制为 2 MB，以确保交互式 3D 体验能够快速渲染。

开发 PBR 中性色调映射器

随着 Google 对 glTF 的使用范围不断扩大，我们在呈现逼真色彩方面遇到了挑战。我们将问题归咎于素材色调映射：像 ACES 这样的电影色调映射器可达到的色彩范围有限，尤其是在输出到 sRGB 屏幕时。Google 的几款产品品牌颜色恰好落在 ACES 所衰减的色彩范围内，导致产品在最终渲染中显得褪色。线性色调映射（又称“未应用色调映射器”）可以提高饱和度，但也带来了新的问题，例如智能手机或智能手表等闪亮物体的色调倾斜或尺寸损失。

在埃米特·拉利什 (Emmett Lalish) 的带领下，谷歌团队通过创建全新的色调映射器解决了这个问题，该映射器专为在电子商务等场景中实现精准的色彩呈现而设计。这项工作于 2024 年 5 月作为 Khronos 官方规范发布，名为Khronos PBR 中性色调映射器 (Khronos PBR Neutral Tone Mapper )。内容创作者可以在纹理文件中验证 glTF 模型的色值，而 Khronos PBR 中性色调映射器可在灰阶照明下，在最终渲染中实现精确的 1:1 色彩呈现，并在阳光等彩色光线下呈现无偏差的色彩。

Khronos PBR 中性色调映射器的开发对 Google 和整个互联网的内容创作者来说都是一大利好。它缩短了 QA 周期，因为我们现在在最终渲染中遇到色彩问题的可能性大大降低。PBR 色调映射器还使更新资源文件变得更加容易，无需在新配色发布时进行大量的额外 QA。

资产的可重用性也得到了提升。我们的 3D 模型不仅用于 Google 商店，还用于创建视频、动画和其他营销材料。借助 Khronos PBR 中性色调映射器，我们的营销和图形设计团队可以改变场景中的光照，而无需调整基础模型以实现色彩保真度。此色调映射器现已成为 <model-viewer> 的默认设置。

结果

Google 推出的交互式3D 产品模型对客户体验和内部工作流程都产生了显著影响。通过从基于视频和照片的教育材料转向 3D 模型，Google 将产品教育材料的开发成本降低了 50% 以上。我们的产品信息发布速度也比以前快了四倍。

Google 正在持续拓展 3D 技术在产品教育中的应用。过去三年，Google 提供的交互式产品教育体验数量增长了四倍，受益于 3D 模型的产品数量也增长了两倍。例如，Pixel 7 的发布为每个 SKU 提供了三种交互式配色，从而提供了更具沉浸感的产品探索体验。

我们的零售合作伙伴也从中受益。Google 现已将这些模式扩展到超过 15 家第三方零售商，包括百思买 (Best Buy) 和 Telstra。无论顾客在哪里购买 Google 产品，都能获得引人入胜、最新的体验。

Google 和 Web 的未来

通过这个过程，Google 开发出了最佳实践，任何希望通过 3D 模型改善电子商务体验的品牌都可以应用这些最佳实践：

1. 文件大小优化：将模型大小保持在 2MB 以下可确保快速加载时间和流畅的用户体验，尤其是在网速较慢的地区。
2. 平衡保真度与性能：确保 3D 模型的视觉准确性至关重要。Google 使用 PBR 中性色调映射器是解决色彩问题的关键，而 DRACO 压缩等其他工具则可以在不增大文件大小的情况下呈现更丰富的细节。
3. 跨平台一致性：通过在所有产品线上标准化 glTF 的使用，Google 能够确保在 Google Store、第三方零售商以及社交媒体和 AR 体验等其他平台中获得一致的体验。

glTF 将成为未来沉浸式体验的基础，无论是在网页上，还是通过下一代 AR 和 VR 体验。我的目标始终是创造一个更美好、更实用、更易访问的网络。下一步，我预计将超越交互式产品教育，拓展到虚拟试穿和完全沉浸式的虚拟环境。随着 AR 和 VR 技术的不断发展，谷歌在 3D 领域的投资以及对 Khronos Group 的参与，使我们能够在网页上提供更丰富、更具互动性的体验。

3D 技术彻底改变了 Google 引导和吸引客户的方式。借助 glTF，Google 打造了一套可扩展且高效的解决方案，不仅提升了客户体验，还简化了内部工作流程并降低了成本。Google 在 3D 模型方面的经验教训，可以为任何希望通过互动式沉浸式内容增强电商战略的品牌提供蓝图。