These pages demonstrate how to use various aspects of the WebXR Layers API.
This sample shows how to draw a scene into a projection layer. Projection layer is used for rendering interactive/constantly changing elements that needs to be redrawn every frame, like controllers or menu systems/other UI elements.
This sample shows how to draw a scene into an quad layer. Quad layers can be used for implementing small panels that can be placed in front of the user containing text/image/video information
This sample shows how to draw a scene into an cylinder layer. Cylinder layers can be used for implementing large panels that wraps around the user to make content more immersive/readable.
This sample shows how to draw a scene into an cube layer. Cube layer is mainly used for drawing static background that only needs to be drawn once or rarely need refreshing.
This sample shows how to draw a scene into an equirect layer. Equirect layer is similar in terms of its advantage over projection. It can be used for rendering static background like cube layer.
This sample shows how to draw a scene into an equirect layer. Equirect layer is great at rendering 360 videos in addition to rendering static background.
This sample is a A/B test quality comparison of rendering the same square texture using quad layer vs drawing the texture directly into the scene.
This sample demonstrates a work-around to implement hit test on layers by placing transparent placeholders for each quad layer in the projection layer.
This sample shows how to use an equirect media layer for video playback.
This sample demonstrates a simple technique to reduce the number of state changes an application needs to make while rendering, potentially enabling better performance.