XRWebGLBinding: createCubeLayer() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The createCubeLayer()
method of the XRWebGLBinding
interface returns an XRCubeLayer
object, which is a layer that renders directly from a cubemap, and projects it onto the inside faces of a cube.
Syntax
createCubeLayer(init)
Parameters
init
-
An object to configure the
XRCubeLayer
. It must have thespace
,viewPixelHeight
, andviewPixelWidth
properties.init
has the following properties:colorFormat
Optional-
A
GLenum
defining the data type of the color texture data. Possible values:gl.RGB
gl.RGBA
(Default) Additionally, for contexts with theEXT_sRGB
extension enabled:ext.SRGB_EXT
ext.SRGB_ALPHA_EXT
Additionally, forWebGL2RenderingContext
contexts:gl.RGBA8
gl.RGB8
gl.SRGB8
gl.RGB8_ALPHA8
Additionally, for contexts with theWEBGL_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
Additionally, for contexts with theWEBGL_compressed_texture_astc
extension enabled:- All of the formats the extension supports.
depthFormat
Optional-
A
GLenum
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 forWebGLRenderingContext
contexts with theWEBGL_depth_texture
extension enabled, or forWebGL2RenderingContext
contexts (no extension required):gl.DEPTH_COMPONENT
(Default)gl.DEPTH_STENCIL
Additionally, forWebGL2RenderingContext
contexts:gl.DEPTH_COMPONENT24
gl.DEPTH24_STENCIL24
isStatic
Optional-
A boolean that, if true, indicates you can only draw to this layer when
needsRedraw
istrue
. The default value isfalse
. layout
-
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. The left eye gets the left area of the texture, the right eye the right.stereo-top-bottom
: A singleXRSubImage
is allocated. The left eye gets the top area of the texture, the right eye the bottom. The default value ismono
.
mipLevels
Optional-
A number specifying the desired number of mip levels. The default value is
1
. orientation
Optional-
A
DOMPointReadOnly
specifying the orientation relative to thespace
property. space
Required-
An
XRSpace
object defining the layer's spatial relationship with the user's physical environment. viewPixelHeight
Required-
A number specifying the pixel height of the layer view.
viewPixelWidth
Required-
A number specifying the pixel width of the layer view.
Return value
An XRCubeLayer
object.
Examples
Creating an XRCubeLayer
Configure the cube layer using the properties listed above in a call to createCubeLayer()
. 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 cubeLayer = xrGlBinding.createCubeLayer({
space: xrReferenceSpace,
viewPixelHeight: 512,
viewPixelWidth: 512,
});
xrSession.updateRenderState({
layers: [cubeLayer],
});
}
Specifications
Specification |
---|
WebXR Layers API Level 1 # dom-xrwebglbinding-createcubelayer |
Browser compatibility
BCD tables only load in the browser