Skip to main content {pcCamera, pcApp}, [extraModules], config )


Adds specified Pipeline Modules and then opens the camera.


pcCamerapc.CameraComponentThe PlayCanvas scene camera to drive with AR.
pcApppc.ApplicationThe PlayCanvas app, typically
extraModules [Optional][Object]An optional array of extra pipeline modules to install.
config{canvas, webgl2, ownRunLoop, cameraConfig, glContextConfig, allowedDevices, layers}Configuration parameters to pass to as well as PlayCanvas specific configuration, e.g. layers.

config is an object with the following properties:

canvasHTMLCanvasElementThe HTML Canvas that the camera feed will be drawn to. Typically this is document.getElementById('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.
layers [Optional][][]Specify the list of layers to draw using GlTextureRenderer. The key is the name of the layer in 8th Wall, and the value is a list of PlayCanvas layer names which we should render to a texture and mask using the 8th Wall layer. Example value: {"sky": ["FirstSkyLayer", "SecondSkyLayer"]}.




var layerscontroller = pc.createScript('layerscontroller')

layerscontroller.prototype.initialize = function() {
// 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'),
layers: {"sky": ["Sky"]}
}{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.
XR8.LayersController.pipelineModule(), // Adds support for Sky Effects.