在为 Google I/O 大会做准备时，我们希望重点展示 Web 上增强现实 (AR) 的诸多可能性。Chacmool 是我们构建的一个教育类 Web 体验演示，旨在展示基于 Web 的 AR 如何轻松帮助用户参与 AR 体验。借助 Web，您可以随时随地轻松使用 AR。
现在，我们已在搭载 Android O 或更高版本的与 ARCore 兼容的 Android 设备上通过 Chrome Canary 启用此演示。您还需要安装 ARCore。此工作依赖于一项新的 WebXR 提案（WebXR 点击测试 API），因此它处于标志控制之下，并打算在我们与沉浸式 Web 社区群组的其他成员一起测试和优化新 API 提案时，继续留在 Canary 中。事实上，如需访问该演示版，您需要在 chrome://flags: 中启用两个标志：#webxr 和 #webxr-hit-test。启用这两项功能并重启 Canary 后，您就可以查看 Chacmool 演示。
Chacmool AR 体验以教育为中心，利用 AR 的沉浸感和互动性，帮助用户了解古代 Chacmool 雕塑。用户可以在现实中放置等身大小的雕像，并四处移动，从不同的角度和距离查看雕像。AR 的沉浸式特性让用户可以像在现实世界中一样自由探索、发现和玩弄内容。与在平面 2D 屏幕上查看对象相比，在 AR 中查看对象时，我们能够深入了解所看对象，因为我们可以使用非常直观的交互模型（即围绕对象行走，并在物理上靠近或远离对象）从许多不同的角度和距离查看对象。此外，在这种体验中，系统会直接在雕塑上放置注释。这样，用户就可以直接将文字描述的内容与雕塑上的相应特征联系起来。
此演示大约花了一个月的时间来构建，其中利用了 WebXR 团队首个基于 Web 的 AR 演示 WebAR-Article 中的部分组件。雕塑的相关信息来自 Google 艺术与文化页面，3D 模型由 Google 艺术与文化的合作伙伴 CyArk 提供。为了让 3D 模型适合在 Web 上展示，我们结合使用了 Meshlab 和 Mesh Mixer 来修复模型并细分其网格，以缩减文件大小。然后，使用用于压缩和解压缩 3D 几何网格和点云的库 Draco 将模型的文件大小从 44.3 MB 缩减到仅 225 KB。最后，Web Worker 用于在后台线程中加载模型，以便在模型加载和解压缩期间页面保持交互状态，而这项操作通常会导致卡顿并阻止页面滚动。
我们必须强调的是，由于我们是在桌面设备上进行开发并部署到手机上，因此使用 Chrome 的远程调试工具来帮助检查体验，可以缩短代码更改之间的迭代周期，而且 Chrome 中还有强大的开发者工具可用于调试和检查性能。
AR/VR 体验最佳实践
适用于原生 AR 体验设计的大多数设计和工程准则也适用于 Web 版 AR 体验的制作。如需详细了解常规最佳实践，请参阅我们最近发布的增强现实设计准则。
特别是，在设计基于 Web 的 AR 体验时，最好在使用 AR 时使用整个屏幕（即全屏显示，类似于在移动设备上全屏显示视频播放器）。这样可以防止用户滚动视图或被网页上的其他元素分散注意力。进入 AR 的过渡应流畅无缝，在进入 AR 初始配置（例如绘制准星）之前显示相机视图。关于基于 Web 的 AR，需要注意的重要一点是，与原生应用不同，开发者无法访问相机取景框、光照估算、锚点或平面（目前无法访问），因此设计师和开发者在设计基于 Web 的 AR 体验时，务必要考虑这些限制。
此外，由于用于 Web 体验的设备种类繁多，因此优化性能以打造最佳用户体验至关重要。因此，请尽量减少多边形数量，尽可能少用光源，尽可能预计算阴影，并尽量减少绘制调用次数。在 AR 中显示文本时，请使用现代（即基于有符号距离场）文本渲染技术，确保文本在所有距离和角度下都清晰可辨。放置注释时，请将用户的注视视为另一种输入，并仅在注释相关时显示注释（即在用户专注于感兴趣的区域时显示基于接近度的注释）。
最后，由于此类内容是基于 Web 的，因此请务必也应用适用于 Web 的常规最佳设计实践。确保网站在各种设备（桌面设备、平板电脑、移动设备、头盔等）上都能提供良好的体验。支持渐进增强意味着还要针对不支持 AR 的设备进行设计（例如，在非 AR 设备上显示 3D 模型查看器）。
如果您有兴趣开发自己的基于 Web 的 AR 体验，请参阅这篇随附文章，其中详细介绍了如何开始自行在 Web 上构建 AR。（您还可以查看 Chacmool 演示的源代码。）WebXR Device API 正在积极开发中，我们非常欢迎您提供反馈，以便确保它能够支持所有类型的应用和用例，因此请前往 GitHub 加入对话！