XRWebGLBinding.createQuadLayer()
The createQuadLayer()
method of the XRWebGLBinding
interface returns an XRQuadLayer
object which is a layer that takes up a flat rectangular space in the virtual environment.
Syntax
createQuadLayer(init)
Parameters
init
-
An object to configure the
XRQuadLayer
. It must have thespace
,viewPixelHeight
, andviewPixelWidth
properties.init
has the following properties:colorFormat
: Optional. AGLenum
defining the data type of the color texture data. Possible values:gl.RGB
gl.RGBA
EXT_sRGB
extension enabled:ext.SRGB_EXT
ext.SRGB_ALPHA_EXT
WebGL2RenderingContext
contexts:gl.RGBA8
gl.RGB8
gl.SRGB8
gl.RGB8_ALPHA8
WEBGL_compressed_texture_etc
extension enabled:ext.COMPRESSED_RGB8_ETC2
ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2
ext.COMPRESSED_RGBA8_ETC2_EAC
ext.COMPRESSED_SRGB8_ETC2
ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2
ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC
WEBGL_compressed_texture_astc
extension enabled:- All of the formats the extension supports.
gl.RGBA
.-
depthFormat
: Optional. AGLenum
defining the data type of the depth texture data or0
indicating that the layer should not provide a depth texture (in that caseXRProjectionLayer.ignoreDepthValues
will betrue
). Possible values withinWebGLRenderingContext
contexts with theWEBGL_depth_texture
extension enabled, or withinWebGL2RenderingContext
contexts (no extension required):gl.DEPTH_COMPONENT
gl.DEPTH_STENCIL
WebGL2RenderingContext
contexts:gl.DEPTH_COMPONENT24
gl.DEPTH24_STENCIL24
gl.DEPTH_COMPONENT
. height
: Optional. A number specifying the height of the layer in meters. The default value is1.0
.isStatic
: Optional. A boolean that, if true, indicates you can only draw to this layer whenneedsRedraw
istrue
. The default value isfalse
.layout
: Optional. A string indicating the layout of the layer. Possible values:default
: The layer accommodates all views of the session.mono
: A singleXRSubImage
is allocated and presented to both eyes.stereo
: The user agent decides how it allocates theXRSubImage
(one or two) and the layout (top/bottom or left/right).stereo-left-right
: A singleXRSubImage
is allocated. Left eye gets the left area of the texture, right eye the right.stereo-top-bottom
: A singleXRSubImage
is allocated. Left eye gets the top area of the texture, right eye the bottom.
mono
.mipLevels
: Optional. A number specifying desired number of mip levels. The default value is1
.space
: Required. AnXRSpace
object defining the layer's spatial relationship with the user's physical environment.textureType
: Optional. A string defining the type of texture the layer will have. Possible values:texture
: The textures ofXRWebGLSubImage
will be of typegl.TEXTURE_2D
.texture-array
: the textures ofXRWebGLSubImage
will be of typegl.TEXTURE_2D_ARRAY
(WebGL 2 contexts only).
texture
.transform
: Optional. AnXRRigidTransform
object defining the offset and orientation relative tospace
.viewPixelHeight
: Required. A number specifying the pixel height of the layer view.viewPixelWidth
: Required. A number specifying the pixel width of the layer view.width
: Optional. A number specifying the width of the layer in meters. The default value is1.0
.
Return value
An XRQuadLayer
object.
Examples
Creating an XRQuadLayer
Configure the quad layer using the properties listed above in a call to createQuadLayer()
. To present layers to the XR device, add them to the layers
render state using XRSession.updateRenderState()
.
function onXRSessionStarted(xrSession) {
const glCanvas = document.createElement("canvas");
const gl = glCanvas.getContext("webgl2", { xrCompatible: true });
const xrGlBinding = new XRWebGLBinding(xrSession, gl);
const quadLayer = xrGlBinding.createQuadLayer({
space: xrReferenceSpace,
viewPixelHeight: 512,
viewPixelWidth: 512,
transform: new XRRigidTransform({z: -2});
});
xrSession.updateRenderState({
layers: [quadLayer]
});
}
Specifications
No specification found
No specification data found for api.XRWebGLBinding.createQuadLayer
.
Check for problems with this page or contribute a missing spec_url
to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.
Browser compatibility
No compatibility data found for api.XRWebGLBinding.createQuadLayer
.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.