如何

使用WebVR相机


介绍

由于v2.5 Babylon.js使用WebVRFreeCamera支持WebVR。

在Babylon v3.0中,我们完全支持最新版本的Microsoft Edge,Chromium和Firefox 支持的WebVR 1.1规范(https://w3c.github.io/webvr/)。

WebVR相机是Babylon与Windows Mixed Reality,HTC Vive,Oculus Rift,Google Daydream和Samsung GearVR交互的简单界面。

Babylon.js还支持VR设备的控制器 - Windows混合现实控制器,HTC Vive的控制器,Oculus touch,GearVR控制器和Daydream控制器 - 使用游戏手柄扩展。更多细节如下

要快速开始创建WebVR场景,可以使用WebVR Experience Helper类自动设置WebVR摄像机并启用其他功能,例如开箱即用的远程传送。

浏览器支持

WebVR

在Microsoft Edge,Chromium和Firefox的特定版本中启用了WebVR 1.1。要获得不断更新的状态,请访问https://webvr.rocks/访问WebVR 。我们支持任何实现WebVR 1.1的浏览器。

WebVR控制器

WebVR控制器在支持WebVR游戏手柄扩展的浏览器中提供 - https://w3c.github.io/gamepad/extensions.html。在Chromium中,您必须在chrome:// flags中启用此API才能使其正常工作。请务必访问https://mozvr.com/以获取完整的安装说明。

WebVRFreeCamera类

入门

WebVRFreeCamera的初始化与标准免费摄像头相同:

var camera = new BABYLON.WebVRFreeCamera("camera1", new BABYLON.Vector3(0, 0, 0), scene);

这将初始化一个新的WebVR摄像头,并将在引擎中启用WebVR。

就像任何其他相机一样,为了让相机在用户输入和交互中正常工作,我们需要将相机(和VR设备)连接到画布和场景。为此,我们使用与免费相机相同的方法:

camera.attachControl(canvas, true);

大多数浏览器仅支持在用户交互期间将VR设备附加到场景(例如,鼠标单击)。为了使其正常工作,一个简单的解决方案是:

scene.onPointerDown = function () {
    scene.onPointerDown = undefined
    camera.attachControl(canvas, true);
}

它的作用是在用户单击画布后附加控件,并禁用onPointerDown回调。

这可以通过HTML或Canvas2D按钮完成,并使用vanilla javascript事件监听器。允许任何有意的用户交互。鼠标移动事件不会触发它,所以不要费心去尝试。一个简单的例子是:

// after creating a button with vrButton as ID:

let button = document.getElementById('vrButton');

function attachWebVR() {
    camera.attachControl(canvas, true);
    window.removeEventListener('click', attachWebVR, false);
}

button.addEventListener('click', attachWebVR, false );

不要忘记删除事件监听器,否则任何单击按钮都会触发附加功能。它不会再次附加,但它浪费了函数调用而不需要。

您现在应该能够在WebVR设备中看到您的场景。如果没有,请进行故障排除!

额外的WebVR转换(姿势数据)

WebVR相机是一款扩展的FreeCamera。除了标准FreeCamera的所有功能外,WebVR摄像机还有2个主要扩展 - 额外位置和额外旋转,这是连接到浏览器的VR设备广播的姿势数据。这意味着相机实际上有两个转换 - 一个由您控制,另一个由设备控制。它们被累积 - 添加位置和旋转相乘 - 以便结合开发人员的输入和VR设备的姿势数据。

要明白你的头脑和身体。在不移动身体的情况下,您的头部可以向各个方向移动,并向各个方向旋转。WebVR设备是你的头脑。你的身体是我们都知道和喜爱的常规位置和旋转。如果旋转身体,头部会随之旋转。但是如果你移动头部,身体会保持在相同的位置。

这正是您应该看到WebVR额外转换的方式 - 您的头部位置由VR设备设置(并且不会受到干扰)。你的身体(或世界上的位置)完全由你控制。

这允许您使用与基于FreeCamera和WebVR摄像头的游戏相同的代码。唯一的区别是用户可以使用VR设备而不是鼠标在本地旋转相机。

这也允许WebVR由控制FreeCamera的相同输入设备控制 - 键盘,鼠标(带旋转异常),XBOX控制器等。

重置设备的旋转

设备的“前”位置由设备本身设置(它是在设备设置期间设置的,与WebVR的关系不大)。但是,开发人员可以通过一个简单的函数调用来更改“前”旋转:

camera.resetToCurrentRotation().

这会将当前的Y轴(仅Y轴方向!!)设置为用户当前的前旋转角度。

低级乐趣

  • 如果要直接使用vrDevice,可以使用camera._vrDevice相机中的公共隐藏成员公开它。
  • 如果要使用原始姿势数据(右手数据!),则在处公开它camera.rawPose。rawPose具有以下界面(物理爱好者的梦想!):
export interface DevicePose {
    readonly position?: Float32Array;
    readonly linearVelocity?: Float32Array;
    readonly linearAcceleration?: Float32Array;

    readonly orientation?: Float32Array;
    readonly angularVelocity?: Float32Array;
    readonly angularAcceleration?: Float32Array;
}

注意:原始姿势值不会根据webVRCamera的旋转或位置进行修改。要引用巴比伦空间中修改后的位置和旋转,请使用devicePosition和deviceRotationQuaternion字段。

webVRCamera.devicePosition
webVRCamera.deviceRotationQuaternion
webVRCamera.leftController.devicePosition
webVRCamera.leftController.deviceRotationQuaternion

Gamepad Extensions支持(WebVR控制器)

当前可用的每个VR设备(Windows Mixed Reality,Oculus Rift,Vive,Daydream和GearVR)都具有补充其用法的控制器。使用游戏手柄扩展支持Windows Mixed Reality控制器,Vive控制器,Oculus触摸控制器,Daydream控制器和GearVR控制器。

初始化控制器

在WebVRFreeCamera初始化期间,它将尝试连接控制器并检测到它们(如果找到)。如果找到,则控制器将位于camera.controllers数组的长度为2或0的阵列中(GearVR和Daydream仅支持1个控制器)。如果连接了控制器但未检测到控制器,您也可以尝试camera.initControllers()在以后的时间手动呼叫。

要在找到控制器时触发回调,可以使用可选的camera.onControllersAttached回调:

onControllersAttached = function(controllers) {
    console.log(controllers.length === 2); // outputs true;
}

使用摄像机初始化控制器还将把它们连接到摄像机,如果用户移动了控制器,则可以将其与WebVR摄像机一起移动。

使用控制器

有一些高级实现会自动分配给WebVR控制器:

WindowsMotionController 适用于Windows Mixed Reality控制器。

OculusTouchController 对于Oculus Touch。

ViveController 用于Vive控制器。

GearVRController 适用于Samsung Gear VR控制器。

DaydreamController 适用于Google Daydream控制器。

每个扩展WebVRController类,扩展类PoseEnabledController。

简而言之-每个控制器都分配有相同的功能集,唯一的不同是按钮映射。可以使用检索设备的类型,该设备controller.controllerType具有以下值:

export enum PoseEnabledControllerType {
    VIVE,
    OCULUS,
    WINDOWS,
    GEAR_VR,
    DAYDREAM,
    GENERIC
}

必要时将扩展此枚举。

控制器按钮映射

控制器按钮具有以下数据集:

interface ExtendedGamepadButton extends GamepadButton {
    readonly pressed: boolean;
    readonly touched: boolean;
    readonly value: number;
}

当这些值中的任何一个被更改时,这些值将被发送给任何特定按钮的观察者。

控制器还具有轴数据,可以将其与x-box控制器的摇杆值进行比较。它们由2D向量(具有x和y值)组成。棒值(SHOULD BE)在-1,-1和1,-1之间,默认值为0,0。

  • 并非每个控制器的所有按钮都支持所有3个值,但是将始终提供所有3个值。例如,Vive的触发器不支持“ touched”,该值始终为false,但在按下时将发送值数据(按下次数的百分比从0到1)。
  • 拥有一个值并不自动意味着“ pressed”已设置为true。例如,当值超过0.15(按下15%)时,oculus控制器只会将触发器的“按下”设置为true。
  • 控制器具有分配给他们的“手”,它是一个字符串,“左”或“右”。可以在controller.hand上找到。

抽象映射

如果您希望为所有VR设备开发一种抽象解决方案而不关注特定设备,则所有WebVR控制器上都存在以下可观察到的现象:

  1. onTriggerStateChangedObservable是可观察到的主要触发因素
  2. onMainButtonStateChangedObservable 主按钮可观察
  3. onSecondaryButtonStateChangedObservable - 你明白了...
  4. onPadStateChangedObservable - 可观察的操纵杆按钮(不是操纵杆值)
  5. onPadValuesChangedObservable - 棒值可观察到的变化

要使用它们中的任何一个,只需注册一个具有所需可观察值的新功能。例如,要监视触发器并观察打击垫值的变化,请执行以下操作:

controller.onPadValuesChangedObservable.add(function (stateObject) {
    console.log(stateObject); // {x: 0.1, y: -0.3}
});
controller.onTriggerStateChangedObservable.add(function (stateObject) {
    let value = stateObject.value;
    console.log(value);
});

Windows Mixed Reality Controller映射

Windows Mixed Reality控制器支持:

  1. 指点杆轴-轴值。映射到onPadValuesChangedObservable.
  2. 拇指按-按下。映射到onPadStateChangedObservable.
  3. 触摸板轴-轴值。映射到 onTouchpadValuesChangedObservable and onTrackpadValuesChangedObservable (aliases).
  4. 触摸板按下-按下并触摸。映射到onTouchpadButtonStateChangedObservable and onTrackpadChangedObservable (aliases).
  5. 触发器-按和值。映射到onTriggerStateChangedObservable
  6. 把按钮-按下。映射到 onMainButtonStateChangedObservable and onGripButtonStateChangedObservable (aliases)
  7. 菜单按钮-按下。映射到onSecondaryButtonStateChangedObservable and onMenuButtonStateChangedObservable (aliases).

Vive控制器映射

Vive支持:

  1. 触摸板-按下,触摸和轴值。映射到 onPadStateChangedObservable
  2. 触发器-按和值。映射到onTriggerStateChangedObservable
  3. 左右按钮(!)-触摸,按下。映射到onMainButtonStateChangedObservable, onRightButtonStateChangedObservable and onLeftButtonStateChangedObservable (aliases to the same observable object!);
  4. 菜单按钮-触摸,按下。映射到onSecondaryButtonStateChangedObservable and onMenuButtonStateChangedObservable (aliases).

Oculus触摸映射

oculus touch支持6种不同的按钮:

  1. 图钉-触摸,按下,值=按下(0,1)。映射到onPadStateChangedObservable。
  2. 索引触发-触摸(?),按(仅当值> 0.1时)。映射到onTriggerStateChangedObservable。
  3. 次要触发器(相同)。映射到onSecondaryTriggerStateChangedObservable。
  4. A(右)X(左)-触摸,按下=值。映射到onMainButtonStateChangedObservable,onAButtonStateChangedObservable在右侧和onXButtonStateChangedObservable左侧。
  5. B / Y-触摸,按下=值。映射到onSecondaryButtonStateChangedObservable,onBButtonStateChangedObservable在右侧和onYButtonStateChangedObservable左侧。
  6. 拇指休息。映射到onThumbRestChangedObservable。

Gear VR控制器映射

Gear VR控制器支持:

  1. 触控板-按下,触摸和轴值。映射到onPadValuesChangedObservable和onTrackpadChangedObservable
  2. 触发器-按和值。映射到onTriggerStateChangedObservable

Google Daydream Controller映射

Google Daydream控制器支持:

  1. 触摸板-按下,触摸和轴值。映射到onPadValuesChangedObservable和onTriggerStateChangedObservable

注意:Daydream控制器的主页和应用程序按钮未在WebVR中映射。

附加到网格

我们决定让您将控制器连接到网格,而不是强迫您使用控制器网格(这将阻止您为多种类型的设备实现单个应用程序)。这将使控制器成为网格的“父级”(但不使用育儿系统!因为控制器不是节点)。控制器的动作(旋转和位置更改)将直接反映到网格。

要将控制器附加到网格:

controller.attachToMesh(mesh);

注意,这将为网格创建一个新的四元数。

低级乐趣

不带WebVR摄像机的控制器

也可以在不使用WebVR摄像机的情况下初始化控制器,这意味着-您可以使用它们来控制常规的WebGL游戏或3D应用程序。

为此,只需初始化Gamepads类:


new BABYLON.Gamepads((gp) => {
    if (gp.type === BABYLON.Gamepad.POSE_ENABLED) {
        // Do something with the controller!
    }
});

请注意,该位置将相对于与那些控制器相关的初始VR设备。

姿势数据

就像WebVR摄像机一样,控制器导出其(右手!)原始姿势数据。数据每帧更新一次controller.rawPose。

一些注意事项

  • WebVR摄像机同时支持左手系统和右手系统。
  • 使用Oculus Rift时,请注意Oculus控制器(这个小)
  • T要进一步了解WebVR,请尝试https://mozvr.com/ .

例子

请享用!

故障排除

  • 我的WebVR摄像机无法正常工作!

    似乎是一个非常常见的问题-初始化了WebVRFreeCamera类,但是您看不到设备中的任何东西。

    1. 检查控制台-您是否看到任何错误?您的浏览器不支持WebVR吗?
    2. 在您的控制台中键入navigator.getVRDevices().then((vrs) => {console.log(vrs.length)})。如果输入0或错误,则表明设备未正确连接。
    3. 如果使用oculus rift-是否在oculus rift设置中启用了“未知来源”?
    4. 尝试按照https://mozvr.com/ 的说明进行操作。相机在那里工作吗?
  • 相机的旋转正在改变,但我的显示屏上看不到任何东西

    当您未将控件附加到VR设备时,将发生此错误。

    1. 确保在用户交互回调中调用了附加控件。在未经用户同意的情况下,Chrome不允许广播到VR设备。
  • 未检测到我的(Vive)控制器!救命!!!!

    啊,我知道这个问题。

    1. 尝试按下vive控制器的左右按钮或oculus touch的pad按钮。这应该打开它们并使它们可见。
    2. 确保打给你camera.initControllers()!
    3. 打开控制台,搜索错误。
    4. 键入navigator.getGamepads()您的控制台。列表是否为空?列表中有控制器吗?什么控制器?
    5. 确保您的浏览器中启用了游戏手柄扩展!检查 https://mozvr.com/ 以获取安装说明。
  • Gear VR或Daydream控制器模型未显示

    这是3个DoF设备(无位置)。尚未确定模型的位置,但是您具有来自控制器方向和功能触发按钮的光线。