Limited availability
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The getSubImage()
method of the XRWebGLBinding
interface returns a XRWebGLSubImage
object representing the WebGL texture to render.
getSubImage(layer, frame)
getSubImage(layer, frame, eye)
Parameters
layer
The XRCompositionLayer
to use for rendering (can be all types of XRCompositionLayer
objects except XRProjectionLayer
, see XRWebGLBinding.getViewSubImage()
for rendering projection layers).
frame
The XRFrame
frame to use for rendering.
eye
Optional
An optional XRView.eye
indicating which view's eye to use for rendering. Possible values:
left
The XRView
represents the point-of-view of the viewer's left eye.
right
The view represents the viewer's right eye.
none
The view describes a monoscopic view, or the view otherwise doesn't represent a particular eye's point-of-view. Defaults to none
.
A XRWebGLSubImage
object.
A TypeError
is thrown,
layer
is not in the session's layer
array.layer
is a XRProjectionLayer
.layout
property is default
.layout
property is stereo
and eye
is none
.XRQuadLayer
The following example renders an XRQuadLayer
.
const xrGlBinding = new XRWebGLBinding(xrSession, gl);
const quadLayer = xrGlBinding.createQuadLayer({
space: xrReferenceSpace,
viewPixelWidth: 512,
viewPixelHeight: 512,
});
// Position 2 meters away from the origin with a width and height of 1.5 meters
quadLayer.transform = new XRRigidTransform({ z: -2 });
quadLayer.width = 1.5;
quadLayer.height = 1.5;
const framebuffer = gl.createFramebuffer();
xrSession.updateRenderState({ layers: [quadLayer] });
xrSession.requestAnimationFrame(onXRFrame);
function onXRFrame(time, xrFrame) {
xrSession.requestAnimationFrame(onXRFrame);
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
let subImage = xrGlBinding.getSubImage(quadLayer, xrFrame);
gl.framebufferTexture2D(
gl.FRAMEBUFFER,
gl.COLOR_ATTACHMENT0,
subImage.colorTexture,
0,
);
let viewport = subImage.viewport;
gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
// Render content for the quad layer
}
Specifications Browser compatibility See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4