Secure contextThis feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The WebXR Device API's XRViewport
interface provides properties used to describe the size and position of the current viewport within the XRWebGLLayer
being used to render the 3D scene.
Properties
height
Read only- The height, in pixels, of the viewport.
width
Read only- The width, in pixels, of the viewport.
x
Read only- The offset from the origin of the destination graphics surface (typically a
XRWebGLLayer
) to the left edge of the viewport, in pixels. y
Read only- The offset from the origin of the viewport to the bottom edge of the viewport; WebGL's coordinate system places (0, 0) at the bottom left corner of the surface.
Usage notes
Currently, the only type of surface available is the XRWebGLLayer
. The precise orientation of the coordinate system may vary with other surface types, but in WebGL, the origin (0, 0) is located at the bottom-left corner of the surface. Thus the values specified in an XRViewport
define a rectangle whose bottom-left corner is at (x
, y
) and which extends width
pixels toward the left and height
pixels upward.
These values may be passed directly into the WebGLRenderingContext.viewport()
method:
let xrViewport = xrWebGLLayer.getViewport(xrView);
gl.viewport(xrViewport.x, xrViewport.y, xrViewport.width, xrViewport.height);
Example
This example sets up an animation frame callback using requestAnimationFrame()
. After initial setup, it iterates over each of the views within the viewer's pose, configuring the viewport as dictated by the XRWebGLLayer
.
xrSession.requestAnimationFrame((time, xrFrame) => {
let viewerPose = xrFrame.getViewerPose(xrReferenceSpace);
gl.bindFramebuffer(xrWebGLLayer.framebuffer);
for (xrView of viewerPose.views) {
let xrViewport = xrWebGLLayer.getViewport(xrView);
gl.viewport(xrViewport.x, xrViewport.y, xrViewport.width, xrViewport.height);
// Now we can use WebGL to draw into a viewport matching
// the viewer's needs
}
});
Specifications
Specification | Status | Comment |
---|---|---|
WebXR Device APIThe definition of 'XRViewport' in that specification. | Working Draft | Initial definition. |
Browser compatibility
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
XRViewport
|
Chrome
Full support 79 |
Edge
Full support 79 |
Firefox
No support No |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
Full support 79 |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
Full support 11.2 |
height
|
Chrome
Full support 79 |
Edge
Full support 79 |
Firefox
No support No |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
Full support 79 |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
Full support 11.2 |
width
|
Chrome
Full support 79 |
Edge
Full support 79 |
Firefox
No support No |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
Full support 79 |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
Full support 11.2 |
x
|
Chrome
Full support 79 |
Edge
Full support 79 |
Firefox
No support No |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
Full support 79 |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
Full support 11.2 |
y
|
Chrome
Full support 79 |
Edge
Full support 79 |
Firefox
No support No |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
Full support 79 |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
Full support 11.2 |
Legend
- Full support
- Full support
- No support
- No support
XRViewport by Mozilla Contributors is licensed under CC-BY-SA 2.5.