XRViewerPose - 表示查看者在场景中的视点的姿势(位置和方向)
XRViewerPose
是 WebXR 设备 API 的接口,表示查看者在场景中的视点的姿势(位置和方向)。每个 XRViewerPose
可以由有多个视图来表示,例如,左眼和右眼之间的微小间隔。该视图可以代表用户的 XR 头戴式耳机的视角,也可以代表玩家使用鼠标和键盘在屏幕上移动角色的视角,还可以代表为观众捕捉场景的虚拟摄像机。
属性
除了从 XRPose
继承的属性之外, XRViewerPose
还包括以下属性:
views
只读
一个包含 XRView
对象的数组,每个对象对应场景中的每个视点,它用于向用户表示场景。典型的头戴式耳机为观看者的姿势提供两个视图,它们的 eye
属性为 left
或 right
,指示该视图代表的是哪只眼睛。总而言之,这些视图在 XR 设备上显示时可以重现 3D 效果。
使用注意
XRViewerPose
对象用于描述 WebXR 场景的查看器的状态,该状态由用户的 XR 硬件跟踪。观看者可以是用户的虚拟表示,或者可以表示可以用作构成场景上的视图的位置和方向的源的另一个设备或界面。例如,MMORPG 中的每个玩家可能都有一个 XRViewerPose
实例,以提供一种计算他们可以看到的内容的方式。如果游戏提供了一种机制来告知玩家另一个玩家是否看到了他们,或者他们看到了另一个玩家,那么此信息就变得至关重要。
总是相对于现有的 XRReferenceSpace
获得和引用 XRViewerPose
。这样可以确保使用预期的相对坐标系报告位置和方向。
要使用代表用户头部的 XRViewerPose
渲染场景,需要迭代 views
数组中的视图,然后逐个渲染。通过在 WebGL 上下文中调用 viewport()
,指定 XRView
作为输入,您可以获取渲染时要使用的视口,以便为此绘制框架视线进入绘图表面的正确部分。
另外,在多人游戏中为观众或其他玩家渲染场景时,XRViewerPose
的 transform
可以用来确定其他玩家在游戏中的位置和朝向,以便他们就可以以正确的朝向绘制在正确的位置。
由 XRFrame
表示的动画帧的观看者姿势可通过调用帧的 getViewerPose()
方法,并指定参考空间来获得应在其中计算原点位置的位置。返回的 XRViewerPose
会告诉您查看者在帧发生时的位置以及面向的方向。
实例
在此实例中(呈现 XRFrame
的代码的一部分),调用 getViewerPose()
以使用与代码用作其基本参考空间相同的参考空间来获取 XRViewerPose
。如果返回有效姿势,则通过清除后缓冲区然后渲染姿势中的每个视图来渲染帧。它们很可能是左眼和右眼的视图。
let pose = frame.getViewerPose(xrReferenceSpace);
if (pose) {
let glLayer = xrSession.renderState.baseLayer;
gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
gl.clearColor(0, 0, 0, 1);
gl.clearDepth(1);
gl.clear(gl.COLOR_BUFFER_BIT, gl.DEPTH_BUFFER_BIT);
for (let view of pose.views) {
let viewport = glLayer.getViewport(view);
gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
/* 为眼睛 view.eye 渲染场景 */
}
}
将每个 view
传递给 getViewport()
会返回 WebGL 视口,以使渲染的输出正确地放置在帧缓冲区中,以便 renderijng 到达相应的眼睛在输出设备上。
将每个 view
传递给 getViewport()
返回 WebGL 视口的应用,以使渲染的输出正确放置在帧缓冲区中以渲染到相应的眼睛在输出设备上。
将每个 view
传递给 getViewport()
会返回要应用的 WebGL 视口,以便使渲染的输出在帧缓冲区中正确定位,以便渲染到输出设备上相应的眼睛。
规范
规范 | 状态 | 备注 |
---|---|---|
WebXR Device API XRViewerPose 的定义 |
工作草案 | 初始定义。 |
桌面浏览器兼容性
特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
基础支持 | 79 | 79 | 不支持 | 不支持 | 不支持 | 不支持 |
views | 79 | 79 | 不支持 | 不支持 | 不支持 | 不支持 |
移动浏览器兼容性
特性 | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
基础支持 | 不支持 | 79 | 未知 | 不支持 | 未知 | 不支持 | 不支持 |
views | 不支持 | 79 | 未知 | 不支持 | 未知 | 不支持 | 不支持 |