Skip to main content


WebXR exposes various capabilities and new APIs through Modules, which are integrated into the PlayCanvas Engine for ease of use.

Some of the capabilities can be used either in VR or AR, and some are generic for any immersive experience.

Supported WebXR Modules

AnchorsCreate anchors in space that are reliably positioned in relation to real-world geometry.
Persistent AnchorsAllows to persist anchors between sessions.
Camera ColorProvides access to a color texture of a view.
Depth SensingProvides access to depth texture and distance querying, that can be used for virtual object occlusion with real-world geometry and reliable object placement.
DOM OverlayFor monoscopic screens, allows to overlay DOM elements over an AR view.
Hand TrackingOptical hand tracking that tracks each joint of a hand.
Hit TestingAllows to ray cast real-world geometry using a ray, to get position and rotation of the intersection point.
Image TrackingDynamic tracking of provided images, their position, and orientation.
Input SourcesVarious input source types such as controllers, hands, screen taps, gaze, and more.
Light EstimationEstimates real-world illumination by providing dominant directional light direction, color, and intensity as well as ambient light information in the form of spherical harmonics.
Mesh DetectionAccess to a representation of a real-world geometry in the form of a 3D mesh, with its position, orientation, and semantic labels. This can represent furniture, screens, rooms, and other types of static geometry.
Plane DetectionSimilar to mesh detection, that provides geometry in the form of planes, their position, orientation, vertices, and semantic labels. This can represent large flat surfaces, such as floors, walls, ceilings, windows, doors, and more.

Experimental Features

The WebXR API is constantly evolving and additional APIs get released extending the XR feature set. While the engine is constantly updated with integrations for XR APIs, some of the features might come with delay. For developers willing to experiment with new features, it is possible to enable them by passing relevant optionalFeatures flags.


Accessing internal, undocumented APIs is subject to engine changes that are not guaranteed to be backwards compatible.

Here is an example of enabling the experimental API for WebXR Layers:

app.xr.start(cameraComponent, pc.XRTYPE_VR, pc.XRSPACE_LOCAL, {
optionalFeatures: [ 'layers' ],
callback: function(err) {
if (err) {

if (app.xr.session.renderState.layers) {
// get access to WebXR Layers