XRWebGLBinding: createCylinderLayer() 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 createCylinderLayer()
method of the XRWebGLBinding
interface returns an XRCylinderLayer
object, which is a layer that takes up a curved rectangular space in the virtual environment.
Syntax
createCylinderLayer(init)
Parameters
init
-
An object to configure the
XRCylinderLayer
. It must have thespace
,viewPixelHeight
, andviewPixelWidth
properties.init
has the following properties:aspectRatio
Optional-
A number indicating the ratio of the visible cylinder section. It is the ratio of the width of the visible section of the cylinder divided by its height. The width is calculated by multiplying the
radius
with thecentralAngle
. The default value is2.0
. centralAngle
Optional-
A number indicating the angle in radians of the visible section of the cylinder. Default value:
0.78539
(π / 4). colorFormat
Optional-
A
GLenum
defining the data type of the color texture data. Possible values:gl.RGB
-
gl.RGBA
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. The default value isgl.RGBA
.
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 withinWebGLRenderingContext
contexts with theWEBGL_depth_texture
extension enabled, or withinWebGL2RenderingContext
contexts (no extension required):gl.DEPTH_COMPONENT
-
gl.DEPTH_STENCIL
Additionally, forWebGL2RenderingContext
contexts: gl.DEPTH_COMPONENT24
-
gl.DEPTH24_STENCIL24
The default value isgl.DEPTH_COMPONENT
.
isStatic
Optional-
A boolean that, if true, indicates you can only draw to this layer when
needsRedraw
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 single
XRSubImage
is allocated and presented to both eyes. stereo
-
The user agent decides how it allocates the
XRSubImage
(one or two) and the layout (top/bottom or left/right). stereo-left-right
-
A single
XRSubImage
is allocated. Left eye gets the left area of the texture, right eye the right. stereo-top-bottom
-
A single
XRSubImage
is allocated. Left eye gets the top area of the texture, right eye the bottom. The default value ismono
.
mipLevels
Optional-
A number specifying desired number of mip levels. The default value is
1
. radius
Optional-
A number indicating the radius of the cylinder. Default value:
2.0
. space
Required-
An
XRSpace
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). The default value istexture
.
transform
Optional-
An
XRRigidTransform
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.
Return value
An XRCylinderLayer
object.
Examples
Creating an XRCylinderLayer
Configure the cylinder layer using the properties listed above in a call to createCylinderLayer()
. 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 cylinderLayer = xrGlBinding.createCylinderLayer({
space: xrReferenceSpace,
viewPixelWidth: 1200,
viewPixelHeight: 600,
centralAngle: (60 * Math.PI) / 180,
aspectRatio: 2,
radius: 2,
transform: new XRRigidTransform(/* … */),
});
xrSession.updateRenderState({
layers: [cylinderLayer],
});
}
Specifications
Specification |
---|
WebXR Layers API Level 1 # dom-xrwebglbinding-createcylinderlayer |
Browser compatibility
BCD tables only load in the browser