Skip to main content


XR8.Babylonjs.xrCameraBehavior(config, xrConfig)


Get a behavior that can be attached to a Babylon camera like so: camera.addBehavior(XR8.Babylonjs.xrCameraBehavior())


config [Optional]Configuration parameters to pass to
xrConfig [Optional]Configuration parameters to pass to XR8.XrController

config [Optional] is an object with the following properties:

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 runPreRender and 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.

xrConfig [Optional] is an object with the following properties:

enableLighting [Optional]If true, return an estimate of lighting information.
enableWorldPoints [Optional]If true, return the map points used for tracking.
disableWorldTracking [Optional]If true, turn off SLAM tracking for efficiency.
imageTargets [Optional]List of names of the image target to detect. Can be modified at runtime. Note: All currently active image targets will be replaced with the ones specified in this list.
leftHandedAxes [Optional]If true, use left-handed coordinates.
imageTargets [Optional]If true, flip left and right in the output.


A Babylon JS behavior that connects the XR engine to the Babylon camera and starts the camera feed and tracking.


let surface, engine, scene, camera

const startScene = () => {
const canvas = document.getElementById('renderCanvas')

engine = new BABYLON.Engine(canvas, true, { stencil: true, preserveDrawingBuffer: true })
engine.enableOfflineSupport = false

scene = new BABYLON.Scene(engine)
camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 3, 0), scene)

initXrScene({ scene, camera }) // Add objects to the scene and set starting camera position.

// Connect the camera to the XR engine and show camera feed

engine.runRenderLoop(() => {

window.addEventListener('resize', () => {