What are these?
These samples have been created to give developers a set of simple, fun, readable apps that demonstrate various aspects of using the WebXR API. They are designed to focus on API use rather than the details of how the WebGL rendering is done.
Who are they for?
The samples will be most useful as a reference for developers that want to use the WebXR API directly in their own project or add XR functionality to their libraries. They are also handy for testing the functionality of WebXR implementations.
If you are using a graphics framework in your project you should check its documentation first, as they may already have WebXR support built in! In that case, you should refer to the library documentation for details on how to use XR features.
How are they formatted?
The samples are provided as web pages with heavily commented JavaScript code. Each page covers a single, targeted topic relating to API use. Code that has already been well commented in a previous sample will typically not be commented in subsequent samples in order to make it easier to focus on the newly introduced concepts, so if you see an uncommented code block that you don't understand check the previous samples and you will probably find the explanation that you're looking for.
What's the deal with WebGL?
Today the primary way of drawing XR content is via the WebGL API. WebGL provides an efficient way of rendering 3D graphics in the browser, which is great for XR applications that require high performance.
Unfortunately WebGL is fairly verbose and can be hard to follow for developers who aren't already familiar with it. Because of this, these samples generally avoid spending much time on the details of how the WebGL rendering is done. Otherwise they would quickly turn into WebGL tutorials with a little bit of XR on the side. Instead the focus is on how to get the necessary values from the WebXR API to feed into WebGL to ensure that the rendering is done correctly.
To Framework or not to Framework?
Most usage of WebGL today happens via frameworks that significantly simplify the creation of 3D scenes compared to using raw WebGL. Some of the more popular examples are three.js, babylon.js, and PlayCanvas. There's also frameworks that are specifically designed to create XR content on the web, such as A-Frame and ReactXR. These are all fantastic libraries with their own strengths and focuses, and in general it's recommended that you find tools that suit your needs and rely on them rather than trying to build your own rendering systems from scratch.
However, most frameworks will also hide away the details of interacting with the WebXR API. That's generally great for users, but not terribly useful when the entire point of your code is to demonstrate how to use the API! At the same time, we don't want the WebXR logic to be obscured by hundreds of lines of WebGL calls. As a result, these samples make use of their own minimalistic rendering library that is specifically designed to highlight use of the WebXR API and de-emphasize the WebGL rendering logic. It is not recommended that you use this library in your own projects, as you will almost certainly be better served by one of the more popular, better established frameworks.