Chacmool:Chrome Canary 版中的增强现实功能

Chris Wilson
Chris Wilson

在为 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 加入对话