mdn · teoli2003 · Jul 21, 2021 · Jul 21, 2021
@@ -9044,6 +9044,13 @@
 /en-US/docs/Web/API/XRTargetRayMode	/en-US/docs/Web/API/XRInputSource/targetRayMode
 /en-US/docs/Web/API/XRTargetRayModoe	/en-US/docs/Web/API/XRInputSource/targetRayMode
 /en-US/docs/Web/API/XRVisibilityState	/en-US/docs/Web/API/XRSession/visibilityState
+/en-US/docs/Web/API/XRWebGLLayerInit	/en-US/docs/Web/API/XRWebGLLayer/XRWebGLLayer
+/en-US/docs/Web/API/XRWebGLLayerInit/alpha	/en-US/docs/Web/API/XRWebGLLayer/XRWebGLLayer
+/en-US/docs/Web/API/XRWebGLLayerInit/antialias	/en-US/docs/Web/API/XRWebGLLayer/XRWebGLLayer
+/en-US/docs/Web/API/XRWebGLLayerInit/depth	/en-US/docs/Web/API/XRWebGLLayer/XRWebGLLayer
+/en-US/docs/Web/API/XRWebGLLayerInit/framebufferscalefactor	/en-US/docs/Web/API/XRWebGLLayer/XRWebGLLayer
+/en-US/docs/Web/API/XRWebGLLayerInit/ignoredepthvalues	/en-US/docs/Web/API/XRWebGLLayer/XRWebGLLayer
+/en-US/docs/Web/API/XRWebGLLayerInit/stencil	/en-US/docs/Web/API/XRWebGLLayer/XRWebGLLayer
 /en-US/docs/Web/API/console.assert	/en-US/docs/Web/API/console/assert
 /en-US/docs/Web/API/console.dir	/en-US/docs/Web/API/console/dir
 /en-US/docs/Web/API/console.error	/en-US/docs/Web/API/console/error

@@ -95037,48 +95037,6 @@
       "Sheppy"
     ]
   },
-  "Web/API/XRWebGLLayerInit": {
-    "modified": "2020-10-15T22:25:30.391Z",
-    "contributors": [
-      "Sheppy"
-    ]
-  },
-  "Web/API/XRWebGLLayerInit/alpha": {
-    "modified": "2020-10-15T22:25:34.957Z",
-    "contributors": [
-      "Sheppy"
-    ]
-  },
-  "Web/API/XRWebGLLayerInit/antialias": {
-    "modified": "2020-10-15T22:25:35.189Z",
-    "contributors": [
-      "Sheppy"
-    ]
-  },
-  "Web/API/XRWebGLLayerInit/depth": {
-    "modified": "2020-10-15T22:25:33.463Z",
-    "contributors": [
-      "Sheppy"
-    ]
-  },
-  "Web/API/XRWebGLLayerInit/framebufferScaleFactor": {
-    "modified": "2020-10-15T22:25:35.259Z",
-    "contributors": [
-      "Sheppy"
-    ]
-  },
-  "Web/API/XRWebGLLayerInit/ignoreDepthValues": {
-    "modified": "2020-10-15T22:25:35.737Z",
-    "contributors": [
-      "Sheppy"
-    ]
-  },
-  "Web/API/XRWebGLLayerInit/stencil": {
-    "modified": "2020-10-15T22:25:34.539Z",
-    "contributors": [
-      "Sheppy"
-    ]
-  },
   "Web/API/XSLTProcessor": {
     "modified": "2020-10-15T21:43:51.327Z",
     "contributors": [

@@ -53,10 +53,9 @@ <h3 id="Value">Value</h3>
 <h2 id="Usage_notes">Usage notes</h2>
 
 <p>Since this is a read-only property, you can set the antialiasing mode only when
-  initially creating the <code>XRWebGLLayer</code>, by specifying the
-  {{domxref("XRWebGLLayerInit.antialias", "antialias")}} object in the
-  {{domxref("XRWebGLLayer.XRWebGLLayer", "XRWebGLLayer()")}}
-  constructor's <code>layerInit</code> parameter.</p>
+  initially creating the <code>XRWebGLLayer</code>, by specifying the <code>antialias</code>
+  property in the {{domxref("XRWebGLLayer.XRWebGLLayer", "XRWebGLLayer()")}}
+  constructor's <code>layerInit</code> configuration object.</p>
 
 <h2 id="Examples">Examples</h2>
 

@@ -34,14 +34,13 @@
     device's frame buffer.</span></p>
 
 <p>This information can be used when creating a new <code>XRWebGLLayer</code> to configure
-  the {{domxref("XRWebGLLayerInit")}} property
-  {{domxref("XRWebGLLayerInit.framebufferScaleFactor", "framebufferScaleFactor")}} in the
-  options specified when calling the <code>XRWebGLLayer()</code> constructor. See the
+  the <code>framebufferScaleFactor</code> in the <code>layerInit</code> configuration object
+  specified when calling the <code>XRWebGLLayer()</code> constructor. See the
   {{anch("Usage notes")}} and {{anch("Examples")}} for details.</p>
 
 <p>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 <em>larger</em> than the native
   resolution of the display, resulting in the frame buffer's contents being scaled down
@@ -139,9 +138,8 @@ <h2 id="Examples">Examples</h2>
   calling <code>XRWebGLLayer</code>'s <code>getNativeFramebufferScaleFactor()</code>
   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 <code>layerInit</code> dictionary, which is
-  an {{domxref("XRWebGLLayerInit")}} object.</p>
+  constructor as the value of the <code>framebufferScaleFactor</code>
+  property in its <code>layerInit</code> configuration object.</p>
 
 <p>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

@@ -30,11 +30,8 @@
     position of vertices, this property is <code>false</code>.</span></p>
 
 <p>The value of <code>ignoreDepthValues</code> can only be set when the
-  {{domxref("XRWebGLLayer")}} is instantiated, by setting the corresponding value in the
-  {{domxref("XRWebGLLayerInit")}} object specified as the <a
-    href="/en-US/docs/Web/API/XRWebGLLayer/XRWebGLLayer">constructor's</a> <code>layerInit</code> 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.</p>
+  {{domxref("XRWebGLLayer")}} is instantiated, by setting the corresponding value in the <a
+    href="/en-US/docs/Web/API/XRWebGLLayer/XRWebGLLayer">constructor's</a> <code>layerInit</code> parameter.</p>
 
 <h2 id="Syntax">Syntax</h2>
 

@@ -46,10 +46,16 @@ <h3 id="Parameters">Parameters</h3>
     WebXR session.</dd>
   <dt><code>layerInit</code> {{optional_inline}}</dt>
   <dd>
-    <p>An object conforming to the {{domxref("XRWebGLLayerInit")}} dictionary, providing
-      configuration options for the new <code>XRWebGLLayer</code>. The options available
+    <p>An object providing configuration options for the new <code>XRWebGLLayer</code>. The available options
       are:</p>
-    {{page("/en-US/docs/Web/API/XRWebGLLayerInit", "Properties")}}
+    <ul>
+      <li><code>alpha</code>: The frame buffer's color buffer will be established with an alpha channel if the <code>alpha</code> Boolean property is <code>true</code>. Otherwise, the color buffer will not have an alpha channel. The default value is <code>true</code>.</li>
+      <li><code>antialias</code>: A Boolean value which is <code>true</code> if anti-aliasing is to be used when rendering in the context; otherwise <code>false</code>. The browser selects the anti-aliasing method to use; there is no support for requesting a specific mode yet.  The default value is <code>true</code>.</li>
+      <li><code>depth</code>: A Boolean value which, if <code>true</code>, requests that the new layer have a depth buffer; otherwise, no depth layer is allocated. The default is <code>true</code>.</li>
+      <li><code>framebufferScaleFactor</code>: 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.</li>
+      <li><code>ignoreDepthValues</code>: A Boolean value which indicates whether or not to ignore the contents of the depth buffer while compositing the scene. The default is <code>false</code>.</li>
+      <li><code>stencil</code>: A Boolean value which, if <code>true</code>, requests that the new layer include a stencil buffer. Otherwise, no stencil buffer is allocated. The default is <code>false</code>.</li>
+    </ul>
   </dd>
 </dl>
 
@@ -83,6 +89,23 @@ <h3 id="Exceptions">Exceptions</h3>
     be allocated.</dd>
 </dl>
 
+<h2 id="Example">Example</h2>
+
+<p>In this example, a new {{domxref("XRWebGLLayer")}} is created for a WebXR session,
+  <code>xrSession</code>.</p>
+
+<pre class="brush: js">xrSession.updateRenderState({
+  baseLayer: new XRWebGLLayer(xrSession, gl, {
+     alpha: false,
+     antialias: false,
+     depth: false,
+     framebufferScaleFactor: 0.5,
+     ignoreDepthValues: true,
+     stencil: false
+  });
+});
+</pre>
+
 <h2 id="Specifications">Specifications</h2>
 
 {{Specifications}}