Skip to main content

XR8.PlayCanvas.runXr() (deprecated)

XR8.PlayCanvas.runXr( {pcCamera, pcApp}, [extraModules], config )


Opens the camera and starts running XR World Tracking and/or Image Targets in a PlayCanvas scene.


pcCameraThe PlayCanvas scene camera to drive with AR.
pcAppThe PlayCanvas app, typically
extraModules [Optional]An optional array of extra pipeline modules to install.
configConfiguration parameters to pass to

config is an object with the following properties:

canvasHTMLCanvasElementThe HTML Canvas that the camera feed will be drawn to. Typically this is 'application-canvas'.
webgl2 [Optional]BooleanfalseIf true, use WebGL2 if available, otherwise fallback to WebGL1. If false, always use WebGL1.
ownRunLoop [Optional]BooleanfalseIf true, XR should use it's own run loop. If false, you will provide your own run loop and be responsible for calling XR8.runPreRender() and XR8.runPostRender() yourself [Advanced Users only]
cameraConfig: {direction} [Optional]Object{direction:}Desired camera to use. Supported values for direction are or
glContextConfig [Optional]WebGLContextAttributesnullThe attributes to configure the WebGL canvas context.
allowedDevices [Optional]XR8.XrConfig.device()XR8.XrConfig.device().MOBILESpecify the class of devices that the pipeline should run on. If the current device is not in that class, running will fail prior prior to opening the camera. If allowedDevices is XR8.XrConfig.device().ANY, always open the camera. Note that world tracking can only be used with XR8.XrConfig.device().MOBILE.




var xrcontroller = pc.createScript('xrcontroller')

// Optionally, world tracking can be disabled to increase efficiency when tracking image targets.
xrcontroller.attributes.add('disableWorldTracking', {type: 'Boolean'})

xrcontroller.prototype.initialize = function() {
const disableWorldTracking = this.disableWorldTracking

// After XR has fully loaded, open the camera feed and start displaying AR.
const runOnLoad = ({pcCamera, pcApp}, extramodules) => () => {
// Pass in your canvas name. Typically this is 'application-canvas'.
const config = {canvas: document.getElementById('application-canvas') }
XR8.PlayCanvas.runXr({pcCamera, pcApp}, extraModules, config)

// Find the camera in the PlayCanvas scene, and tie it to the motion of the user's phone in the
// world.
const pcCamera = XRExtras.PlayCanvas.findOneCamera(this.entity)

// While XR is still loading, show some helpful things.
// Almost There: Detects whether the user's environment can support web ar, and if it doesn't,
// shows hints for how to view the experience.
// Loading: shows prompts for camera permission and hides the scene until it's ready for display.
// Runtime Error: If something unexpected goes wrong, display an error screen.
XRExtras.Loading.showLoading({onxrloaded: runOnLoad({pcCamera, pcApp:}, [
// Optional modules that developers may wish to customize or theme.
XRExtras.AlmostThere.pipelineModule(), // Detects unsupported browsers and gives hints.
XRExtras.Loading.pipelineModule(), // Manages the loading screen on startup.
XRExtras.RuntimeError.pipelineModule(), // Shows an error image on runtime error.