XRWebGLLayer | Web API

在此页

构造函数
特性
方法
静态方法
范例
规范
浏览器兼容性
另请参阅
相关话题

安全上下文
此特征只可用于安全上下文 (HTTPS)，在某些或所有支持浏览器 .

XRWebGLLayer interface of the WebXR Device API provides a linkage between the WebXR device (or simulated XR device, in the case of an inline session) and a WebGL context used to render the scene for display on the device. In particular, it provides access to the WebGL framebuffer and viewport to ease access to the context.

尽管 XRWebGLLayer is currently the only type of framebuffer layer supported by WebGL , it's entirely possible that future updates to the WebXR specification may allow for other layer types and corresponding image sources.

构造函数

new XRWebGLLayer(): 创建并返回新 XRWebGLLayer object for use by the specified XRSession , using a particular WebGLRenderingContext or WebGL2RenderingContext as the destination context.

特性

antialias 只读: A Boolean value indicating whether or not the WebGL context's framebuffer supports anti-aliasing. The specific type of anti-aliasing is determined by the 用户代理 .
framebuffer 只读: 返回 WebGLFramebuffer suitable for passing into the bindFrameBuffer() 方法。
framebufferWidth 只读: 返回宽度为 XRWebGLLayer 's framebuffer.
framebufferHeight 只读
ignoreDepthValues 只读: A Boolean which Indicates whether or not the WebXR compositor should make use of the contents of the layer's depth buffer while compositing the scene.

方法

getViewport(): 返回新的 XRViewport instance representing the position, width, and height to which the WebGL context's viewport must be set to contain drawing to the area of the framebuffer designated for the specified view's contents. In this way, for example, the rendering of the left eye's point of view and of the right eye's point of view are each placed into the correct parts of the framebuffer.

静态方法

getNativeFramebufferScaleFactor()

范例

Binding the layer to a WebGL context

This snippet, taken from Drawing a frame in Movement, orientation, and motion: A WebXR example , shows how the XRWebGLLayer is obtained from the XRSession object's rendering state and is then bound as the current rendering WebGL framebuffer by calling the WebGL bindFrameBuffer() 函数。

let glLayer = xrSession.renderState.baseLayer;
gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.framebuffer);

Rendering every view in a frame

Each time the GPU is ready to render the scene to the XR device, the XR runtime calls the function you specified when you called the XRSession 方法 requestAnimationFrame() to ask to render the frame.

That function receives as input an XRFrame which encapsulates the data needed to render the frame. This information includes the pose (an XRViewerPose object) that describes the position and facing direction of the viewer within the scene as well as a list of XRView objects, each representing one perspective on the scene. In current WebXR implementations, there will never be more than two entries in this list: one describing the position and viewing angle of the left eye and another doing the same for the right.

let pose = xrFrame.getViewerPose(xrReferenceSpace);
if (pose) {
  let glLayer = xrSession.renderState.baseLayer;
  gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.Framebffer);
  for (let view of pose.views) {
    let viewport = glLayer.getViewport(view);
    gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
    /* Render the view */
  }
}

规范

规范	状态	注释
WebXR 设备 API The definition of 'XRWebGLLayer' in that specification.	工作草案	初始定义。

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`XRWebGLLayer`	Chrome 79	Edge 79	Firefox No	IE No	Opera No	Safari No	WebView Android No	Chrome Android 79	Firefox Android No	Opera Android No	Safari iOS No	Samsung Internet Android 11.2
`XRWebGLLayer()` 构造函数	Chrome 79	Edge 79	Firefox No	IE No	Opera No	Safari No	WebView Android No	Chrome Android 79	Firefox Android No	Opera Android No	Safari iOS No	Samsung Internet Android 11.2
`antialias`	Chrome 79	Edge 79	Firefox No	IE No	Opera No	Safari No	WebView Android No	Chrome Android 79	Firefox Android No	Opera Android No	Safari iOS No	Samsung Internet Android 11.2
`framebuffer`	Chrome 79	Edge 79	Firefox No	IE No	Opera No	Safari No	WebView Android No	Chrome Android 79	Firefox Android No	Opera Android No	Safari iOS No	Samsung Internet Android 11.2
`framebufferHeight`	Chrome 79	Edge 79	Firefox No	IE No	Opera No	Safari No	WebView Android No	Chrome Android 79	Firefox Android No	Opera Android No	Safari iOS No	Samsung Internet Android 11.2
`framebufferWidth`	Chrome 79	Edge 79	Firefox No	IE No	Opera No	Safari No	WebView Android No	Chrome Android 79	Firefox Android No	Opera Android No	Safari iOS No	Samsung Internet Android 11.2
`getNativeFramebufferScaleFactor()`	Chrome 79	Edge 79	Firefox No	IE No	Opera No	Safari No	WebView Android No	Chrome Android 79	Firefox Android No	Opera Android No	Safari iOS No	Samsung Internet Android 11.2
`getViewport()`	Chrome 79	Edge 79	Firefox No	IE No	Opera No	Safari No	WebView Android No	Chrome Android 79	Firefox Android No	Opera Android No	Safari iOS No	Samsung Internet Android 11.2
`ignoreDepthValues`	Chrome 79	Edge 79	Firefox No	IE No	Opera No	Safari No	WebView Android No	Chrome Android 79	Firefox Android No	Opera Android No	Safari iOS No	Samsung Internet Android 11.2

在此页

构造函数

特性

方法

静态方法

范例

Binding the layer to a WebGL context

Rendering every view in a frame

规范

浏览器兼容性

图例

另请参阅

元数据

相关话题