Skip to main content


onStart: ({ canvas, GLctx, computeCtx, isWebgl2, orientation, videoWidth, videoHeight, canvasWidth, canvasHeight, config })


onStart() is called when XR starts.


canvasThe canvas that backs GPU processing and user display.
GLctxThe drawing canvas's WebGLRenderingContext or WebGL2RenderingContext.
computeCtxThe compute canvas's WebGLRenderingContext or WebGL2RenderingContext.
isWebgl2True if GLctx is a WebGL2RenderingContext.
orientationThe rotation of the UI from portrait, in degrees (-90, 0, 90, 180).
videoWidthThe height of the camera feed, in pixels.
videoHeightThe height of the camera feed, in pixels.
canvasWidthThe width of the GLctx canvas, in pixels.
canvasHeightThe height of the GLctx canvas, in pixels.
configThe configuration parameters that were passed to


name: 'mycamerapipelinemodule',
onStart: ({canvasWidth, canvasHeight}) => {
// Get the three.js scene. This was created by XR8.Threejs.pipelineModule().onStart(). The
// reason we can access it here now is because 'mycamerapipelinemodule' was installed after
// XR8.Threejs.pipelineModule().
const {scene, camera} = XR8.Threejs.xrScene()

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

// Sync the xr controller's 6DoF position and camera paremeters with our scene.
origin: camera.position,
facing: camera.quaternion,