利用 Google 硬件在 Web 上使用交互式 3D 模型：新一代产品培训体验

Melissa Mitchell
Melissa Mitchell
Aron Halil
Aron Halil
LinkedIn
Bernice Yung
Bernice Yung
Emmett Lalish
Emmett Lalish
GitHub

Google 的设备和服务营销 (DSM) 部门负责监督各种产品（包括智能手机、手表、耳机、平板电脑、智能家居设备和相关订阅）的市场推广策略，这些产品均可通过 Google 商店和全球第三方供应商购买。用户可以在线上和实体零售店中了解这些产品。

该团队面临的一个长期挑战是，如何向消费者和零售商介绍 Google 硬件生态系统和先进 AI 体验的用例和优势。为了更好地帮助消费者了解产品和功能，DSM 团队利用先进的 Web 技术打造了一个 3D 虚拟空间，以解决其中许多问题。在本案例中，您可以了解该团队如何为客户打造更具沉浸感的体验，并将这些新体验的发布速度提高了 4 倍，同时将传统数字资产的成本降低了一半。

挑战：产品培训

向刚接触 Google 硬件产品的销售助理和客户介绍互操作性和 AI 等功能的好处是一项费时费力的工作。传统的产品培训策略依赖于使用实体产品制作的数字内容，然后将其托管在数字学习平台上。这些学习平台提供产品技术规格、图片和视频，但不提供实体产品或联网产品的访问权限。

视频等学习内容的制作成本高昂，针对全球市场进行本地化处理非常复杂，而且几乎不可能在产品之间重复使用。制作初始素材资源需要预算来支付选角、服装、外景勘察、外景费用、摄影棚费用、摄制组和后期制作工作。制作费用和交付成果也需要考虑本地化；对于传统营销而言，修改素材资源、地点、产品、文案和艺人，要想大规模管理，难度尤其高。考虑到受支持的大多数产品每隔几个月就会推出新功能，这些素材资源在制作完成时就已经过时了。

探索更好的商品信息分享方式

为了寻找更好的方式来分享产品信息，DSM 团队在应用中尝试了 VR/AR 体验。实验结果非常喜人，不仅增强了互动度，还提高了销售终端的购物车内商品数量。不过，应用下载对销售助理和客户来说都是一项重要的入门障碍，而将体验限制在应用中意味着无法将其嵌入到 store.google.com 等其他第一方或第三方媒体资源中。

使用 <model-viewer> 的轻量级解决方案

在看到 3D 产品模型在产品介绍方面的成功应用后，该团队决定将这种方法引入到网站上。实现此目的的一种方法是使用 <model-viewer> 为各个产品创建 3D 体验。

<model-viewer> 是一个 Web 组件，可让您以声明方式将 3D 模型添加到网页，同时将模型托管在您自己的网站上。您可以在 Google 商店的 Pixel Fold 页面上看到这一点。在该页面上，用户可以通过 <model-viewer> 从任何角度查看 Pixel Fold 的各种折叠状态。3D 模型很容易集成到 HTML 用户体验的其余部分，其中的按钮可通过摄像头角度和交互式颜色变体来讲述故事。借助 <model-viewer>，您可以为用户提供您能想象到的任何体验。

创建 3D 模型

开发 3D 虚拟体验的第一步是创建 3D 产品模型。DSM 团队使用 CAD 创建了 3D 模型。通过与制作产品 CAD 的设计师密切合作，DSM 团队能够导出可针对 Web 进行优化的低多边形渲染。他们在以下方面采用了一些最佳实践来实现这一目标。

  • 几何图形：
    • 重点确保从各个角度都能准确呈现几何图形（形状和比例）。
    • 避免使用法线贴图来斜切边缘。
    • 将车贴创建为单独的几何图形。
  • 颜色和材质：
    • 目标：一致地视觉呈现物理属性。
    • 考虑实时光照动态。
    • 为每种网格类型（不透明、透明、贴花）使用单独的纹理集和材质。
    • 如果需要进一步调整，请与原始 CAD 设计师一起迭代设计。
  • 文件大小：
    • 以 GLB 格式导出为低多边形模型，以便 <model-viewer> 可以使用该模型。
    • 由 3D 设计师手动压缩几何网格，或通过供应商或 DRACO (OS) 等压缩软件压缩几何网格。

由于这些 3D 模型将经常在手机上使用，因此我们通过将纹理文件大小上限设置为 2 MB 对其进行了优化，以支持旧款设备和较弱的互联网连接。

<model-viewer>

DSM 团队使用 Google 的 <model-viewer> 开源 Web 组件将新创建的 3D 模型嵌入到其网页中。为了让第一步中创建的模型与 <model-viewer> 兼容，资源需要采用 glTF 或 GLB 格式（扩展名为 .glb）。这两种格式都很紧凑、可压缩，并且可以快速加载到 GPU 中。所有主要的永久更新型浏览器都支持 <model-viewer> 组件。

在此步骤中，DSM 团队遇到的最大挑战是 Google 硬件配色方案无法准确呈现。该团队最终发现，ACES 色调映射（电影行业标准）是导致颜色丢失的原因。为了解决此问题，他们开发了新的 Khronos PBR 中性色调映射器，专门用于解决这些缺陷并准确地将颜色呈现到屏幕上，同时避免与线性色调映射相关的过曝亮点和色相偏移。

<model-viewer src="Pixel8Pro_Bay_enUS.glb" ar ar-modes="scene-viewer webxr quick-look"
camera-controls poster="poster.webp"
shadow-intensity="1" tone-mapping="commerce"></model-viewer>

如需详细了解 <model-viewer>，请访问 modelviewer.dev。如需测试 3D 模型并下载完整的入门网站，请试用我们的编辑器。

使用 three.js 的大型解决方案

<model-viewer> 是一种性能出色的展示和与 3D 模型互动的方式。不过，有时 DSM 团队需要更具沉浸感且互联的 Web 体验，而 <model-viewer> 无法提供。例如，Nest Mini + C 的发布。<model-viewer> 可以让潜在客户在网络上以 3D 方式体验产品，但无法展示其与其他 Google 硬件产品和 Google 助理等 AI 功能搭配使用时的实用性。

为此，该团队转而使用了 <model-viewer> 的基础库 three.js。Three.js 是一个开源 JavaScript 游戏引擎，该团队能够为包含 Nest 室内摄像头、灯具和音箱的虚拟住宅环境创建可重复使用的素材资源框架。这为团队提供了基础，以便就设备如何相互交互提供实时反馈。

Dialogflow

打造互联体验的最后一步是添加 Google 助理。这意味着，用户可以通过互联的虚拟体验来试用真实的命令和日常活动。不过，从用户现有账号中插入 Google 助理会带来许多隐私问题。为了打造注重隐私保护的解决方案，DSM 与 Google Cloud Dialogflow 服务合作，在该领域模仿 Google 助理。以下概要图展示了 Web 应用如何使用 Dialogflow 的 API（改编自 Dialogflow 基础知识）。对于每轮对话，该 Web 应用都使用 Dialogflow 的意图分类，而 API 会返回与意图匹配的预先确定的最终用户表述。

用户流程图。

如需详细了解 Dialogflow，请参阅 Google Cloud 文档。

最终结果：可嵌入的 iFrame

最终结果是一个素材资源库，可通过 <model-viewer> 嵌入到网页中，或在完整的虚拟环境中使用，以帮助客户详细了解各个产品以及产品之间的关联方式。这种体验既真实又可扩展，而且经济高效。这项首个虚拟体验于 2021 年 5 月推出，虽然它已不再显示在 Google 商店网站上，但您仍然可以试用。

成果

自 Nest Mini +C 发布以来，DSM 在过去两年内发布 Pixel 产品组合时，一直在重复使用和扩展该框架，并取得了越来越大的成功。通过实现这些 3D 素材资源和体验的迭代，该团队迄今已将互动式产品介绍体验的数量提高了 4 倍，受益于此 Web 技术的商品数量也增加了 3 倍。

最终结果是，为不断增加的各种用例提供品牌化、真实的产品培训，这种方式比以往的策略更具可持续性、更具凝聚力，并且更具互动性。今后，DSM 团队现在拥有丰富的沉浸式体验组件组合，可以快速适应动态的业务目标。这些改进使 DSM 团队能够以比之前更传统流程快 4 倍的速度发布新的产品培训内容，且成本不到之前的一半。