layer

Note: This documentation is for the old 1.1.0 version of A-Frame. Check out the documentation for the current 1.6.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