针对网络的增强现实

Joe Medley
Joe Medley

在 Chrome 67 中,我们宣布推出了同时适用于增强现实 (AR) 和虚拟现实 (VR) 的 WebXR Device API,不过仅启用了 VR 功能。VR 是一种完全基于计算设备的内容。另一方面,AR 可让您在现实世界中渲染虚拟对象。为了支持放置和跟踪这些对象,我们刚刚在 Chrome Canary 中添加了 WebXR Hit Test API,这是一种新方法,可帮助沉浸式 Web 代码在现实世界中放置对象。

在哪里可以获得它?

此 API 旨在在未来继续使用 Canary 版。我们希望延长测试期,因为这是一个全新的 API 方案,我们希望确保它可靠且适合开发者。

除 Chrome Canary 版外,您还需要:

  • 搭载 Android O 或更高版本的兼容的智能手机
  • 安装 ARCore
  • 两个 Chrome 标志 (chrome://flags):WebXRDevice API (#webxr) 和 WebXR 命中测试 (#webxr-hit-test)

通过这些,您可以深入了解演示版或试用我们的 Codelab。

它只是网络

在今年的 Google I/O 大会上,我们通过 Chrome 的早期版本展示了增强现实技术。在这三天中,我反复对开发者和非开发者这样说,希望我知道在我的沉浸式网络文章中提到:“它就是网络”。

“我需要安装什么 Chrome 扩展程序?”“没有扩展,它只是一个网络。”

“我需要特殊的浏览器吗?”“这只是网络。”

“What app do I need to install?”“没有什么特别的应用,只是网络而已。”

显而易见的是,您是在这个专题网站上阅读本文。如果您使用此新 API 构建演示,请准备好应对此问题。您会接触到很多东西。

说到 IO,如果您想详细了解沉浸式 Web 平台的整体情况,可以在哪里查看这个视频

有何用处?

增强现实将为许多现有网页锦上添花。 例如,它可以帮助人们在教育网站上学习,并让潜在买家在购物时直观地看到家里的物品。

我们的演示对此进行了说明。用户可以通过此类对象放置真实大小的对象呈现效果,如同在现实世界中一样。放置后,图片会保留在所选 surface 上,显示与实际项在该 surface 上时的大小,并允许用户在其周围移动,并使其距离更近或更远。与二维图像相比,这样能让观看者更深入地了解对象。

如果您不明白我的意思,使用演示时就会明白。如果您没有可以运行演示的设备,请点击本文顶部的视频链接。

演示和视频未能展现的一点是 AR 如何传达真实对象的大小。此处的视频展示了我们构建的名为 Chacmool 的教育演示版。如需详细了解此演示,请参阅配套文章。在本次讨论中,重要的是,当你将查克穆尔雕像放入增强现实中时,你会看到它的大小,就像它实际上在你身边一样。

Chacmool 的示例具有教育意义,但也可以很容易地商业化。假设有一个家具购物网站,允许您在客厅摆放沙发。AR 应用可告诉您沙发是否适合您的空间以及它与其他家具放在一起的显示效果。

射线投射、撞击测试和十字线

实现增强现实时需要解决的一个关键问题是如何将对象放置在真实世界视图中。执行此操作的方法称为光线投射。光线投射是指计算指针射线与现实世界中表面之间的交集。这个交集称为“命中”,用于确定是否发生命中的情况为“命中测试”。

现在您可以试用 Chrome Canary 版中的新代码示例。在执行任何操作之前,请仔细检查您是否已启用正确的标志。现在,加载示例并点击“Start AR”。

请注意以下几点。首先,速度计(您可能从其他沉浸式示例中识别出)显示每秒 30 帧,而不是 60 帧。这是网页从相机接收图片的速率。

AR 运行速度为每秒 30 帧

AR 命中测试演示

另一个值得注意的是向日葵图片。它会随着您移动并贴靠地面(例如地板和桌面)而移动。如果您点按屏幕,一朵向日葵将放置在平面上,一朵新的向日葵将随您的设备一起移动。

随设备一起移动并尝试锁定到 Surface 的图像称为十字线。十字线是一种临时图像,有助于将对象放置在增强现实中。在此演示中,十字线是要放置的图像的副本。但其实并不一定。例如,在 Chacmool 演示中,它是一个与所放置对象的底部形状大致相同的矩形框。

深入探索代码

Chacmool 演示展示了 AR 可能在正式版应用中呈现的效果。幸运的是,WebXR 示例代码库中有一个简单得多的演示。我的示例代码来自该代码库中的 AR 命中测试演示。请注意,我喜欢简化代码示例,因为这有助于您了解相关情况。

对于 AR 和 VR,进入 AR 会话和运行渲染循环的基本步骤相同。如果您不熟悉,可以参阅我上一篇文章。更具体地说,进入并运行 AR 会话与进入 VR 魔法窗口会话几乎完全一样。与魔法窗口一样,会话类型必须为非沉浸模式,并且引用类型的框架必须为 'eye-level'

新 API

现在,我将向大家展示如何使用以下新 API。回想一下,在 AR 中,十字线会尝试在放置内容之前找到一个表面。可以通过点击测试来完成。如需执行点击测试,请调用 XRSession.requestHitTest()。该架构如下所示:

xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
  //
});

此方法的三个参数表示光线投射。光线投射由光线上的两个点(origindirection)定义,并基于这些点计算得出 (frameOfReference)。原点和方向都是 3D 矢量。无论您提交什么值,它们都会被标准化(转换)为长度为 1。

移动十字线

当您移动设备时,十字线需要随设备一起移动,因为它会尝试查找可以放置对象的位置。这意味着必须在每一帧中重新绘制十字线。

requestAnimationFrame() 回调开始。与使用 VR 一样 您需要练习和姿势

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Do the hit test and draw the reticle.
  }
}

获得时段和姿态后,确定光线投射的位置。示例代码使用 gl-Matrix 数学库。但 gl-Matrix 并不是必需的。重要的是知道您要用它计算什么,以及它基于设备的位置。从 XRPose.poseModalMatrix 检索设备位置。获得光线投射后,调用 requestHitTest()

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Calculate the origin and direction for the raycast.
    xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
    .then((results) => {
      if (results.length) {
        // Draw for each view.
      }
    });
  }
  session.requestAnimationFrame(onXRFrame);
}

虽然在点击测试示例中不那么显而易见,但您仍然需要循环遍历视图来绘制场景。系统使用 WebGL API 完成绘制。如果你有抱负的想法 也可以这样做不过,我们建议您使用框架。沉浸式 Web 示例使用的是专为 Cottontail 演示创建的一个示例,自 5 月以来,Three.js 一直支持 WebXR。

放置对象

当用户点按屏幕时,对象便会放置在 AR 中。为此,您可以使用 select 事件。此步骤的关键是确定要将其放置在何处。 由于移动的十字线为您提供了恒定的点击测试来源,因此放置对象最简单的方法是在上次命中测试的十字线位置进行绘制。如果需要,可以举例说明您有正当理由不显示十字线,您可以在选择事件中调用 requestHitTest()如示例中所示

总结

若要解决此问题,最好的方法是逐步浏览示例代码或尝试 Codelab。希望以上介绍的背景已足够,让大家对这两个方面都有所了解。

我们还没有构建沉浸式 Web API,而且还没有长远。随着我们的进展 我们会陆续在此发布新的文章