AR
PlayCanvas lets you create Augmented Reality (AR) applications for mobile devices through the WebXR API, as well as through integrations with popular AR frameworks.
Platforms
AR capabilities are available using the Android Chrome browser. iOS Safari support for WebXR is in progress. Additionally, frameworks such as 8th Wall and Zappar allow users to experience AR content in most mobile browsers, including Safari.
The aforementioned frameworks are external, and have separate licensing, available on their respective websites.
Getting started with WebXR AR
When using PlayCanvas’ built-in AR support, the scene’s primary camera’s clear color must be transparent, as so:
To start an AR session, device support and availability should also be checked first. Then, on user interaction, such as a button click or other input, an AR session can be started:
button.element.on('click', function () {
// check if XR is supported and AR is available
if (app.xr.supported && app.xr.isAvailable(pc.XRTYPE_AR)) {
// start AR using a camera component
entity.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_VIEWER);
}
});
Once the user is done, immersive-xr mode can be exited by calling:
app.xr.end();
Augmented Reality allows blending the real world with virtual imagery, either by composing a rendered buffer over the camera feed or with special projection of a rendered buffer on see-through glasses. Usually it is provided with spatial tracking relative to the real world environment.
Suitable reference space: pc.XRSPACE_VIEWER
.
Starter Kits
PlayCanvas provides a number of ‘Starter Kit’ projects to help you and your AR experiences get up and running faster. When creating a new project, simply select from the dialogue the template that suits you best.