利用 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 团队使用高级网络技术创建了一个 3D 虚拟空间，解决了其中的许多难题。在本案例研究中，您可以了解该团队如何为客户打造更具沉浸感的体验，这些体验的推出速度是传统数字资产的 4 倍，成本仅为传统数字资产的一半。

挑战：产品培训

若要让刚接触 Google 硬件产品的销售人员和客户了解互操作性和 AI 等功能的优势，成本高昂且难度大。传统的产品教育策略依赖于使用实体产品制作，然后托管在数字学习平台上的数字内容。这些学习平台提供产品技术规范、图片和视频，但不会提供实体或联网产品。

学习内容（如视频）的制作成本高昂，要面向全球市场进行本地化非常复杂，而且在产品之间几乎不可能重复使用。创建初始资产时，需要为演员、衣橱、侦察、位置费用、制片厂费用、电影制作人和后期制作工作设定预算。生产成本和可交付成果也需要考虑本地化；对于传统营销来说，修改资产、位置、产品、文案和人才尤为难以大规模管理。考虑到大部分受支持的产品每几个月就会推出一次功能更新，而这些资源在完成发布之前就已过时。

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

为了寻找更好的产品信息分享方式，DSM 团队在应用中尝试了 VR/AR 体验。结果十分喜人，不仅提高了销售终端的互动度，还提高了购物篮金额。 然而，对于销售人员和客户来说，应用下载是进入市场的一大障碍，而且只有应用能够体验，意味着应用无法嵌入到其他第一方或第三方媒体资源（如 store.google.com）。

借助 <model-viewer> 的轻量级解决方案

在看到 3D 产品模型在产品教育领域大获成功之后，该团队决定将这种方法推广到 Web 平台。实现此目的的方法之一是使用 <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 团队能够导出可针对网页进行优化的低多边形渲染。他们为实现这一目标而采取的一些最佳做法涉及以下几个方面。

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

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

<model-viewer>

DSM 团队使用 Google 的 <model-viewer> 开源网络组件将新创建的 3D 模型嵌入到其网页中。为了使第 1 步中创建的模型与 <model-viewer> 兼容，资源必须采用 gITF 或 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 模型并与之交互的绝佳方式。但是，与使用 <model-viewer> 相比，有时 DSM 团队需要更具沉浸感且互连的网络体验。例如，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 资源和体验的迭代，该团队使交互式产品培训体验的数量增至原来的 3 倍，受益于此 Web 技术的产品数量增加了两倍。

最终的结果是，提供品牌真实的产品培训，用于规模不断扩大的用例组合，这种组合比以前的策略更具可持续性、一致性和互动性。展望未来，DSM 团队现在拥有一系列可靠的沉浸式体验组件，他们可以快速适应动态业务目标。与早期更传统的流程相比，这些改进让 DSM 团队能够以不到原来 4 倍的速度发布新产品培训内容，费用却不到后者的一半。