如何

使用WebXR(WebVR,WebAR,Magic Window等)


如何使用WebXR体验助手

Note: 注意: WebXR规范仍在开发中,此API可能不是最新的,并且会更改。有关当前状态,请参阅 本期

介绍

WebXR API 允许浏览器到AR / VR设备进行交互。巴比伦提供了WebXR类,以使向巴比伦场景添加webXR支持变得更加容易。

设定

目前,截至2019年1月18日,WebXR Babylon的目标版本是Chrome Canary

  1. 在台式机或移动设备上安装 Chrome Canary
  2. 如果在移动设备上,请确保您具有Android 8或更高版本以及支持AR Core的设备(例如Pixel XL 2)
  3. Chrome Canary中,在网址栏中输入chrome:// flags,然后搜索webXR并启用所有与xr相关的标志

目前不支持

调试:

注意:将来可以使用 https://github.com/immersive-web/webxr-polyfill 来填充不支持webXR的浏览器

入门

创建巴比伦场景后,可以创建XR帮助器以进入/退出XR会话。

var xrHelper = await BABYLON.WebXRExperienceHelper.CreateAsync(scene)

XR支持许多不同的会话类型,例如。VR / AR /移动AR(在下面的后续部分中介绍),并非特定设备或浏览器将支持所有会话类型,因此可以通过supportsSessionAsync方法检查会话是否受支持。

var supported = await xrHelper.supportsSessionAsync({immersive: true});

如果支持会话,则可以使用帮助程序进入XR会话。 注意:大多数浏览器要求从用户交互事件(例如,单击按钮)中调用enterXR。

await xrHelper.enterXRAsync({immersive: true}, "eye-level");

这将激活会话并将场景的活动摄像机设置为XR帮助器中包含的摄像机。

exitXRAsync可用于退出XR,这会将活动摄像机设置回原来的状态。

await xrHelper.exitXRAsync();

应用程序逻辑可能取决于XR帮助程序的当前状态,因此可以使用以下命令进行访问:

xrHelper.state == WebXRState.IN_XR;

XR相机

设备每隔一帧会更新助手的XR相机。如果使用代码覆盖它的位置,那么它将仅在下一帧被覆盖,因此帮助程序将XR相机包裹在容器网格中。提供了辅助方法

将相机的全局位置定位到0,0,0

xrHelper.setPositionOfCameraUsingContainer(new Vector3(0,0,0));

将相机沿全局Y轴旋转90度

xrHelper.rotateCameraByQuaternionUsingContainer(Quaternion.FromEulerAngles(0, Math.PI/2, 0));

如果需要,可以将容器和相机作为助手的属性进行访问

xrHelper.camera;
xrHelper.container;

魔术窗口(移动AR)

可以使用以下会话参数初始化魔术窗口会话。需要新的画布才能通过相机显示移动设备的环境。WebXRManagedOutputCanvas可用于创建全屏输出画布,仅在输入XR时才将其添加到网页。

var xrOutputCanvas = new WebXRManagedOutputCanvas(xrHelper);
await xrHelper.enterXRAsync({immersive: false, environmentIntegration: true, outputContext: xrOutputCanvas.canvasContext}, "eye-level");

当XR会话启用了environmentIntegration时,可以将光线投射到该环境中以检测现实世界中的碰撞。这可用于放置虚拟对象。(进入XR后,可能需要先放弃设备以扫描环境,然后再发生碰撞)

document.onclick = async(e)=>{
    // Create ray
    var ray = xrHelper.camera.getForwardRay(Number.MAX_VALUE)

    // Fire hittest
    var point = await xrHelper.environmentPointHitTestAsync(ray)
    if(point){
        positionableObject.position.copyFrom(point)
    }
}

虚拟现实(Windows Mixed Reality,Vive,Oculus等)

可以使用以下会话参数初始化VR会话。如果需要镜像,则可以使用输出画布。

var xrOutputCanvas = new WebXRManagedOutputCanvas(xrHelper);
await xrHelper.enterXRAsync({immersive: true, outputContext: xrOutputCanvas.canvasContext}, "eye-level");

多视点

要将渲染性能提高2倍,请尝试使用Multiview它将在一次渲染过程中渲染两只眼睛

例子