layer

NOTE: This version of the documentation tracks unstable development happening on A-Frame’s master branch. If you wish to try it out, grab the unstable build. Otherwise, head to the documentation for the current 1.5.0 version

The layer component renders images, videos or cubemaps into a WebXR compositor layer on supported browsers.

The benefits of layers are:

• Performance and judder: Once the layer is submitted, the compositor is in charge of render it at a fixed refresh rate (72Hz, 90Hz… depending on device). Even if the application cannot keep up with the compositor refresh rate the layer won’t drop any frames resulting in a smoother experience.
• Visual fidelity: The images in a layer will be sampled only once by the compositor. Regular WebGL content is sampled twice: Once one rendering to the eye buffer and a second time when copied to the compositor. This results in a loss of details.
• Battery life: No double sampling results in less memory copies reducing operations and battery consumption.
• Latency: Headset pose sampling for layers takes place at the end of the frame using the most recent HMD pose. This paired with reprojection techniques reduce the effective latency.

Example

<a-scene>
  <a-assets>
    <img id="comicbook" crossOrigin="anonymous" src="/path/to/comicbook.png">
  </a-assets>
  <a-entity layer="type: quad; src: #comicbook" position="0 1.8 -1.5"></a-entity>
</a-scene>

Properties