Since this is a read-only property, you can set the antialiasing mode only when
- initially creating the XRWebGLLayer, by specifying the
- {{domxref("XRWebGLLayerInit.antialias", "antialias")}} object in the
- {{domxref("XRWebGLLayer.XRWebGLLayer", "XRWebGLLayer()")}}
- constructor's layerInit parameter.
XRWebGLLayer, by specifying the antialias
+ property in the {{domxref("XRWebGLLayer.XRWebGLLayer", "XRWebGLLayer()")}}
+ constructor's layerInit configuration object.
This information can be used when creating a new XRWebGLLayer to configure
- the {{domxref("XRWebGLLayerInit")}} property
- {{domxref("XRWebGLLayerInit.framebufferScaleFactor", "framebufferScaleFactor")}} in the
- options specified when calling the XRWebGLLayer() constructor. See the
+ the framebufferScaleFactor in the layerInit configuration object
+ specified when calling the XRWebGLLayer() constructor. See the
{{anch("Usage notes")}} and {{anch("Examples")}} for details.
If the scaling factor is 1.0, then the frame buffer pixels and the native display pixels are the same size. If the scaling factor is greater than zero, then the frame - buffer is smaller than the diplay's native dimensions, resulting in the output being + buffer is smaller than the display's native dimensions, resulting in the output being up-scaled for display to the screen after rendering into the frame buffer. If the scaling factor is less than zero, the frame buffer is larger than the native resolution of the display, resulting in the frame buffer's contents being scaled down @@ -139,9 +138,8 @@
XRWebGLLayer's getNativeFramebufferScaleFactor()
static function to get the scale factor needed to reach the native resolution, and we
then pass that into the {{domxref("XRWebGLLayer.XRWebGLLayer", "WebGLLayer()")}}
- constructor as the value of the {{domxref("XRWebGLLayerInit.framebufferScaleFactor",
- "framebufferScaleFactor")}} property in its layerInit dictionary, which is
- an {{domxref("XRWebGLLayerInit")}} object.
+ constructor as the value of the framebufferScaleFactor
+ property in its layerInit configuration object.
That gets us a new {{domxref("XRWebGLLayer")}} object representing a rendering surface
we can use for the {{domxref("XRSession")}}; we set it as the rendering surface for
diff --git a/files/en-us/web/api/xrwebgllayer/ignoredepthvalues/index.html b/files/en-us/web/api/xrwebgllayer/ignoredepthvalues/index.html
index e6347b7d7fd95e1..7e3e5860762ace3 100644
--- a/files/en-us/web/api/xrwebgllayer/ignoredepthvalues/index.html
+++ b/files/en-us/web/api/xrwebgllayer/ignoredepthvalues/index.html
@@ -30,11 +30,8 @@
position of vertices, this property is false.
The value of ignoreDepthValues can only be set when the
- {{domxref("XRWebGLLayer")}} is instantiated, by setting the corresponding value in the
- {{domxref("XRWebGLLayerInit")}} object specified as the constructor's layerInit parameter.
- As a parameter you're likely to set yourself, it is unlikely you'll need to read it
- later, but it's available if the need arises.
layerInit parameter.
layerInit {{optional_inline}}An object conforming to the {{domxref("XRWebGLLayerInit")}} dictionary, providing
- configuration options for the new XRWebGLLayer. The options available
+
An object providing configuration options for the new XRWebGLLayer. The available options
are:
alpha: The frame buffer's color buffer will be established with an alpha channel if the alpha Boolean property is true. Otherwise, the color buffer will not have an alpha channel. The default value is true.antialias: A Boolean value which is true if anti-aliasing is to be used when rendering in the context; otherwise false. The browser selects the anti-aliasing method to use; there is no support for requesting a specific mode yet. The default value is true.depth: A Boolean value which, if true, requests that the new layer have a depth buffer; otherwise, no depth layer is allocated. The default is true.framebufferScaleFactor: A floating-point value which is used to scale the image during compositing, with a value of 1.0 represents the default pixel size for the frame buffer. The static {{domxref("XRWebGLLayer")}} function {{domxref("XRWebGLLayer.getNativeFramebufferScaleFactor()")}} returns the scale that would result in a 1:1 pixel ratio, thereby ensuring that the rendering is occurring at the device's native resolution. The default is 1.0.ignoreDepthValues: A Boolean value which indicates whether or not to ignore the contents of the depth buffer while compositing the scene. The default is false.stencil: A Boolean value which, if true, requests that the new layer include a stencil buffer. Otherwise, no stencil buffer is allocated. The default is false.In this example, a new {{domxref("XRWebGLLayer")}} is created for a WebXR session,
+ xrSession.
xrSession.updateRenderState({
+ baseLayer: new XRWebGLLayer(xrSession, gl, {
+ alpha: false,
+ antialias: false,
+ depth: false,
+ framebufferScaleFactor: 0.5,
+ ignoreDepthValues: true,
+ stencil: false
+ });
+});
+
+
{{APIRef("WebXR Device API")}}{{securecontext_header}}
- -The alpha property is a Boolean
- value which, if present and set to true in the
- {{domxref("XRWebGLLayerInit")}} dictionary passed into the
- {{domxref("XRWebGLLayer.XRWebGLLayer", "XRWebGLLayer()")}} constructor, specifies that
- the new layer's color buffer is to include an {{Glossary("alpha", "alpha
- channel")}}. Otherwise, the color buffer won't have an alpha channel. The
- default is true.
let layerInit = {
- alpha: boolValue
-};
-let glLayer = new XRWebGLLayer(xrSession, gl, layerInit);
-
-let glLayer = new XRWebGLLayer(xrSession, gl, { alpha: boolValue });
-
-
-A Boolean which can be set to true to request that the new WebGL layer for
- rendering the WebXR scene is to have an alpha channel.
In this example, a new {{domxref("XRWebGLLayer")}} is created for a WebXR session,
- xrSession, without an alpha channel.
xrSession.updateRenderState({
- baseLayer: new XRWebGLLayer(xrSession, gl, {
- alpha: false
- });
-});
-
-
-{{Compat}}
- -{{securecontext_header}}{{APIRef("WebXR Device API")}}
- -The Boolean antialias property, if present and set to
- true in the {{domxref("XRWebGLLayerInit")}} object provided as the
- {{domxref("XRWebGLLayer.XRWebGLLayer", "XRWebGLLayer()")}} constructor's
- layerInit parameter, requests that the new WebGL rendering layer support
- anti-aliasing. If this property is missing or is false, anti-aliasing is
- not desired.
There is no way to request a specific anti-aliasing format or level; this decision is - left up to the {{glossary("user agent")}}.
- -let layerInit = {
- antialias: boolValue
-};
-let glLayer = new XRWebGLLayer(xrSession, gl, layerInit);
-
-let glLayer = new XRWebGLLayer(xrSession, gl, { antialias: boolValue });
-
-
-A Boolean value which can be set to true to request anti-aliasing support
- in the new WebGL rendering layer. If false, anti-aliasing is not desired.
-
The state of anti-aliasing for the context after being created can be read from the - {{domxref("XRWebGLLayer")}} property {{domxref("XRWebGLLayer.antialias", "antialias")}}. -
- -In this example, before creating a new {{domxref("XRWebGLLayer")}} to use for
- rendering, the value of a user preference from a configuration interface is obtained
- using a function called getPreferenceValue() to determine whether the user
- has enabled or disabled anti-aliasing support; this is passed into the constructor.
let options = {
- antialias: getPreferenceValue("antialiasing")
-};
-
-let glLayer = new XRWebGLLayer(xrSession, gl, options);
-if (glLayer) {
- xrSession.updateRenderState({ baseLayer: glLayer });
-}
-
-
-Offering the user features such as the ability to enable or disable things like - anti-aliasing can provide them with optiions to try when your app isn't performing as - well as they'd like. Disabling anti-aliasing may improve performance to some extent.
- -{{Compat}}
- -{{APIRef("WebXR Device API")}}{{securecontext_header}}
- -When using the {{domxref("XRWebGLLayer.XRWebGLLayer", "XRWebGLLayer()")}} constructor to create a new WebGL rendering layer for WebXR, providing as the layerInit parameter an object whose depth property is false will request that the new layer be created without a depth buffer.
let layerInit = {
- depth: false
-};
-let glLayer = new XRWebGLLayer(xrSession, gl, layerInit);
-
-let glLayer = new XRWebGLLayer(xrSession, gl, { depth: false });
-
-
-A Boolean which can be set to false to specify that the new WebGL layer should not have a depth buffer. This means that the only source for depth information is the vertex coordinates, and reduces the accuracy and quality of rendering, but may potentially affect the performance of rendering as well.
The default value is true.
This property differs from {{domxref("XRWebGLLayerInit.ignoreDepthValues", "ignoreDepthValues")}} in that a layer created with ignoreDepthValues set to true may still have a depth buffer, but will not make use of it.
You can determine whether or not the depth buffer is being used by a given WebGL rendering layer during your XR session by checking the value returned by {{domxref("XRWebGLLayer.ignoreDepthValues")}}. If this is true, then the depth buffer is either not present or is being ignored.
if (glLayer.ignoreDepthValues) {
- /* not using the depth buffer */
-}
-
-In this example, a new {{domxref("XRWebGLLayer")}} is created for a WebXR session, xrSession, without a depth buffer.
xrSession.updateRenderState({
- baseLayer: new XRWebGLLayer(xrSession, gl, {
- depth: false
- });
-});
-
-{{Compat}}
- -{{APIRef("WebXR Device API")}}{{securecontext_header}}
- -The {{domxref("XRWebGLLayerInit")}} dictionary's framebufferScaleFactor property, when specified upon instantiating a new {{domxref("XRWebGLLayer")}} using its constructor, {{domxref("XRWebGLLayer.XRWebGLLayer", "XRWebGLLayer()")}}, specifies the scaling factor to use when determining the size of the frame buffer to use when rendering the scene, relative to the default XR device display resolution.
For example, a value of 1.0 indicates that the frame buffer should be the same resolution as the actual display, while a value of 0.5 indicates that the frame buffer should be half the resolution of the display. A value of 2.0, on the other hand, creates a frame buffer whose resolution is double that of the actual display buffer.
- -There are valid use cases for all of these kinds of scaling. See {{SectionOnPage("/en-US/docs/Web/API/WebXR_Device_API/Performance", "Managing rendering quality")}} for more information.
- -You can determine the scaling factor that you would need to apply to match the default frame buffer resolution by using the {{domxref("XRWebGLLayer.getNativeFramebufferScaleFactor()")}} static function.
- -let layerInit = {
- framebufferScaleFactor: scaleFactor
-};
-let glLayer = new XRWebGLLayer(xrSession, gl, layerInit);
-
-let glLayer = new XRWebGLLayer(xrSession, gl, { framebufferScaleFactor: scaleFactor });
-
-
-A floating-point value indicating a multiplier to apply to the default frame buffer resolution in order to determine the resolution of the frame buffer for the {{domxref("XRWebGLLayer")}}.
- -In this example, a new {{domxref("XRWebGLLayer")}} is created for a WebXR session, xrSession, with a frame buffer whose resolution is half that of the default display resolution of the XR device.
xrSession.updateRenderState({
- baseLayer: new XRWebGLLayer(xrSession, gl, {
- framebufferScaleFactor: 0.5
- });
-});
-
-
-{{Compat}}
- -{{securecontext_header}}{{APIRef("WebXR Device API")}}
- -The {{domxref("XRWebGLLayerInit")}} dictionary's Boolean
- ignoreDepthValues property can be provided in the
- options passed into the {{domxref("XRWebGLLayer.XRWebGLLayer", "XRWebGLLayer()")}}
- constructor to indicate that the depth buffer, if it exists, should be ignored while
- composing the scene.
The depth buffer is typically used to assist in ordering vertices and, by extension, - polygons while compositing, to ensure that the scene is correctly composited, with - objects the correct distance away and with clipping and other distance-related - computations performed as accurately as possible. Without the depth buffer, these - computations must rely entirely on the coordinates of each pixel.
- -This property differs from {{domxref("XRWebGLLayerInit.depth", "depth")}} in that
- depth requests a WebGL layer that does not have a depth buffer at all,
- while ignoreDepthValues merely asks that the depth layer be ignored.
let layerInit = {
- ignoreDepthValues: boolValue
-};
-let glLayer = new XRWebGLLayer(xrSession, gl, layerInit);
-
-let glLayer = new XRWebGLLayer(xrSession, gl, { ignoreDepthValues: boolValue });
-
-
-A Boolean value which can be set to true to disable the use of the depth
- buffer by the WebGL rendering layer created by the
- {{domxref("XRWebGLLayer.XRWebGLLayer", "XRWebGLLayer()")}} constructor. The default
- value, false, means the depth buffer will be used, if available.
-
If ignoreDepthValues is true, the WebXR compositor will
- ignore the contents of the depth buffer, if it exists, while compositing and rendering
- the scene. If false, the depth buffer's contents are used, if one is
- present.
Using a depth buffer while compositing allows the XR compositor to help ensure the - compositing is done as accurately as possible. Each entry in the depth buffer - corresponds to the depth of the fragment whose color is at the same location in the - color buffer, and must have a value between 0.0 and 1.0, where 0.0 corresponds to the - distance specified in the {{domxref("XRSession")}} object's - {{domxref("XRSession.renderState", "renderState")}} record's - {{domxref("XRRenderState.depthNear", "depthNear")}} and 1.0 represents the distance - given by {{domxref("XRRenderState.depthFar", "depthFar")}}.
- -Ignoring depth values causes the compositor to rely solely upon the relative position
- of objects to establish depth, and may result in less effective and less comfortable 3D
- effects. The default is false (depth values are used by default).
In this example, a new {{domxref("XRWebGLLayer")}} is created for a WebXR session,
- xrSession. It's configured to ignore depth values or an alpha channel.
xrSession.updateRenderState({
- baseLayer: new XRWebGLLayer(xrSession, gl, {
- alpha: false,
- ignoredepthValues: true
- });
-});
-
-{{Compat}}
- -{{APIRef("WebXR Device API")}}
- -The WebXR Device API's XRWebGLLayerInit dictionary is used to provide configuration options when creating a new {{domxref("XRWebGLLayer")}} object with the {{domxref("XRWebGLLayer.XRWebGLLayer", "XRWebGLLayer()")}} constructor. The constructor's optional layerInit parameter takes an object which must conform to this dictionary.
alpha Boolean property is true. Otherwise, the color buffer will not have an alpha channel. The default value is true.true if anti-aliasing is to be used when rendering in the context; otherwise false. The browser selects the anti-aliasing method to use; there is no support for requesting a specific mode yet. The default value is true.true, requests that the new layer have a depth buffer; otherwise, no depth layer is allocated. The default is true.false.true, requests that the new layer include a stencil buffer. Otherwise, no stencil buffer is allocated. The default is false.Given an {{domxref("XRSession")}}, xrSession, and a WebGL rendering context, gl, this snippet sets the rendering layer for the session, specifying the ignoreDepthValues option, indicating that the depth buffer should not be used (or should not exist at all), and that the only source for distance information of any given point is its position relative to the viewer.
const layerOptions = {
- ignoreDepthValues: true
-};
-
-xrSession.updateRenderState({
- baseLayer: new XRWebGLLayer(xrSession, gl, layerOptions);
-});
-
-
-{{Compat}}
- -{{APIRef("WebXR Device API")}}{{securecontext_header}}
- -When using the {{domxref("XRWebGLLayer.XRWebGLLayer", "XRWebGLLayer()")}} constructor to create a new WebGL rendering layer for WebXR, providing as the layerInit parameter an object whose stencil property is false requests that the new layer be created without a stencil buffer.
The stencil buffer is an optional buffer which, just like the depth buffer, contains one entry for every pixel in the frame buffer. Also just like the depth buffer, the value of an enter in the stencil buffer directly affects how (or if) the corresponding pixel is drawn during rendering. You can store values into each entry in the stencil bufer, then specify an operation that determines which stencil buffer values correspond to pixels which should be drawn to the screen during each frame.
- -let layerInit = {
- stencil: false
-};
-let glLayer = new XRWebGLLayer(xrSession, gl, layerInit);
-
-let glLayer = new XRWebGLLayer(xrSession, gl, { stencil: false });
-
-
-A Boolean which can be set to false to specify that the new WebGL layer should not include a stencil buffer. The default value is true.
In this example, a new {{domxref("XRWebGLLayer")}} is created for a WebXR session, xrSession, without a stencil buffer.
xrSession.updateRenderState({
- baseLayer: new XRWebGLLayer(xrSession, gl, {
- stencil: false
- });
-});
-
-{{Compat}}
- -stencilOp(), clearStencil(), stencilFunc(), stencilMask(), stencilMaskSeparate(), stencilFuncSeparate(), stencilOpSeparate(),