XRMediaBinding: createEquirectLayer() 方法
XRMediaBinding
接口的 createEquirectLayer()
方法返回一个 XREquirectLayer
对象,该对象是一个将等距柱状编码数据映射到球体内部的图层。
语法
createEquirectLayer(video, options)
参数
video
-
要显示的
HTMLVideoElement
。 options
-
用于配置
XREquirectLayer
的对象。该对象可以具有以下属性,并且space
是必需的。centralHorizontalAngle
可选-
一个数字,表示球体的中心水平角度(以弧度为单位)。默认值:
6.28318
(2π)。 invertStereo
可选-
一个布尔值,指定视频中每个视图的自然位置是否应被反转。默认为
false
。 layout
可选-
一个字符串,指示视频的布局。可能的值:
default
-
该图层支持会话的所有视图。
mono
-
分配一个
XRSubImage
对象,并将其呈现给双眼。 stereo
-
用户代理决定如何分配
XRSubImage
(一个或两个)和布局(顶部/底部或左/右)。建议为stereo
布局使用texture-array
纹理类型。 stereo-left-right
-
分配单个
XRSubImage
。左眼获取纹理的左侧区域,右眼获取右侧区域。此布局旨在最大限度地减少对已为立体声(例如立体声视频或图像)的内容的绘图调用。 stereo-top-bottom
-
分配单个
XRSubImage
。左眼获取纹理的顶部区域,右眼获取底部区域。此布局旨在最大限度地减少对已为立体声(例如立体声视频或图像)的内容的绘图调用。默认值为mono
。
lowerVerticalAngle
可选-
一个数字,表示球体的较低垂直角度(以弧度为单位)。默认值:
-1.570795
(-π/2)。 radius
可选-
一个数字,表示球体的半径。默认值
0.0
。 space
必需-
一个
XRSpace
对象,定义了图层与用户物理环境的空间关系。 transform
可选-
一个
XRRigidTransform
对象,定义了相对于space
的偏移和方向。 upperVerticalAngle
可选-
一个数字,表示球体的较高垂直角度(以弧度为单位)。默认值:
1.570795
(π/2)。
返回值
一个 XREquirectLayer
对象。
示例
创建一个 XREquirectLayer
来显示视频
创建一个 XRMediaBinding
并使用传递给 createEquirectLayer()
的 HTMLVideoElement
。使用上面列出的选项配置四边形图层,并通过将其添加到 XRSession.updateRenderState()
的 layers
渲染状态中,将图层呈现给 XR 设备。
function onXRSessionStarted(xrSession) {
const xrMediaBinding = new XRMediaBinding(xrSession);
const video = document.createElement("video");
video.src = "just-fascination.mp4";
const videoLayer = xrMediaBinding.createEquirectLayer(video, {
space: xrReferenceSpace,
});
xrSession.updateRenderState({
layers: [videoLayer],
});
}
规范
规范 |
---|
WebXR Layers API Level 1 # dom-xrmediabinding-createequirectlayer |
浏览器兼容性
加载中…