XRSystem : EventTarget

The entry point for using Augmented Reality (AR) or Virtual Reality (VR) in the browser. Used to create an XRSession. Available through navigator.xr.

Spec

Instance Methods

isSessionSupported(mode : String) : Promise<Boolean>

mode must be one of 'inline', 'immersive-vr', or 'immersive-ar'.

Example:

<script>
(async () => {
  const supported = await navigator.xr.isSessionSupported('inline');
  console.log(supported);
})();
</script>

Run

Results:

requestSession(mode : String, [options : Object]) : Promise<XRSession>

options : {

requiredFeatures :	Iterator
optionalFeatures :	Iterator

}

mode must be one of 'inline', 'immersive-vr', or 'immersive-ar'.

Example:

<canvas></canvas>
<button onclick="startXR(); event.target.disabled = true">Start</button>
<script>
const startXR = async () => {
  const immersiveVRSupported = await navigator.xr.isSessionSupported('immersive-vr');
  const session = await navigator.xr.requestSession(immersiveVRSupported ? 'immersive-vr' : 'inline');
  session.onend = () => console.log('ended');

  const canvas = document.querySelector('canvas');
  const gl = canvas.getContext('webgl', { xrCompatible: true });
  const glLayer = new XRWebGLLayer(session, gl);
  session.updateRenderState({ baseLayer: glLayer });
  const referenceSpace = await session.requestReferenceSpace(immersiveVRSupported ? 'local' : 'viewer');

  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, `
    attribute vec3 vertexPosition;
    uniform mat4 viewMatrix;
    uniform mat4 projectionMatrix;

    void main() {
      gl_Position = projectionMatrix * viewMatrix * vec4(vertexPosition, 1.0);
    }`);
  gl.compileShader(vertexShader);

  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, `
    void main() {
      gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); // green
    }`);
  gl.compileShader(fragmentShader);

  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  gl.useProgram(program);

  // Create a buffer with 3 points to form a triangle (1m away from camera)
  const triangleBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, triangleBuffer);
  const vertices = [
    -0.5,  -0.5, -1,
     0.5,  -0.5, -1,
     0.0,   0.5, -1];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

  const vertexPositionLocation = gl.getAttribLocation(program, 'vertexPosition');
  gl.vertexAttribPointer(vertexPositionLocation, 3, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vertexPositionLocation);

  const projectionMatrixLocation = gl.getUniformLocation(program, 'projectionMatrix');
  const viewMatrixLocation = gl.getUniformLocation(program, 'viewMatrix');

  const drawFrame = (t, frame) => {
    const pose = frame.getViewerPose(referenceSpace);

    gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
    gl.clear(gl.COLOR_BUFFER_BIT);

    for (const view of pose.views) {
      const viewport = glLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
      gl.uniformMatrix4fv(viewMatrixLocation, false, view.transform.inverse.matrix);
      gl.uniformMatrix4fv(projectionMatrixLocation, false, view.projectionMatrix);
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
    }
    session.requestAnimationFrame(drawFrame);
  };

  session.requestAnimationFrame(drawFrame);
};
</script>

Run

Results:

Instance Events

ondevicechange / 'devicechange' event

listener(event : Event) : undefined

Example:

<script>
navigator.xr.ondevicechange = () => {
  console.log('device changed');
};
</script>

Run

Results:

home license contribute feedback toggle light/dark mode