iwer 2.0.1 → 2.1.1

package/build/iwer.js

@@ -8,19 +8,10 @@
    * Common utilities
    * @module glMatrix
    */
+
   // Configuration Constants
   var EPSILON = 0.000001;
-  var ARRAY_TYPE = typeof Float32Array !== 'undefined' ? Float32Array : Array;
-  if (!Math.hypot) Math.hypot = function () {
-    var y = 0,
-        i = arguments.length;
-
-    while (i--) {
-      y += arguments[i] * arguments[i];
-    }
-
-    return Math.sqrt(y);
-  };
+  var ARRAY_TYPE$1 = typeof Float32Array !== "undefined" ? Float32Array : Array;
 
   /**
    * 3x3 Matrix
@@ -32,11 +23,9 @@
    *
    * @returns {mat3} a new 3x3 matrix
    */
-
-  function create$4() {
-    var out = new ARRAY_TYPE(9);
-
-    if (ARRAY_TYPE != Float32Array) {
+  function create$6() {
+    var out = new ARRAY_TYPE$1(9);
+    if (ARRAY_TYPE$1 != Float32Array) {
       out[1] = 0;
       out[2] = 0;
       out[3] = 0;
@@ -44,7 +33,6 @@
       out[6] = 0;
       out[7] = 0;
     }
-
     out[0] = 1;
     out[4] = 1;
     out[8] = 1;
@@ -61,11 +49,9 @@
    *
    * @returns {mat4} a new 4x4 matrix
    */
-
-  function create$3() {
-    var out = new ARRAY_TYPE(16);
-
-    if (ARRAY_TYPE != Float32Array) {
+  function create$5() {
+    var out = new ARRAY_TYPE$1(16);
+    if (ARRAY_TYPE$1 != Float32Array) {
       out[1] = 0;
       out[2] = 0;
       out[3] = 0;
@@ -79,22 +65,21 @@
       out[13] = 0;
       out[14] = 0;
     }
-
     out[0] = 1;
     out[5] = 1;
     out[10] = 1;
     out[15] = 1;
     return out;
   }
+
   /**
    * Creates a new mat4 initialized with values from an existing matrix
    *
    * @param {ReadonlyMat4} a matrix to clone
    * @returns {mat4} a new 4x4 matrix
    */
-
   function clone(a) {
-    var out = new ARRAY_TYPE(16);
+    var out = new ARRAY_TYPE$1(16);
     out[0] = a[0];
     out[1] = a[1];
     out[2] = a[2];
@@ -113,6 +98,7 @@
     out[15] = a[15];
     return out;
   }
+
   /**
    * Copy the values from one mat4 to another
    *
@@ -120,7 +106,6 @@
    * @param {ReadonlyMat4} a the source matrix
    * @returns {mat4} out
    */
-
   function copy$3(out, a) {
     out[0] = a[0];
     out[1] = a[1];
@@ -140,13 +125,13 @@
     out[15] = a[15];
     return out;
   }
+
   /**
    * Set a mat4 to the identity matrix
    *
    * @param {mat4} out the receiving matrix
    * @returns {mat4} out
    */
-
   function identity(out) {
     out[0] = 1;
     out[1] = 0;
@@ -166,31 +151,31 @@
     out[15] = 1;
     return out;
   }
+
   /**
    * Inverts a mat4
    *
    * @param {mat4} out the receiving matrix
    * @param {ReadonlyMat4} a the source matrix
-   * @returns {mat4} out
+   * @returns {mat4 | null} out, or null if source matrix is not invertible
    */
-
   function invert(out, a) {
     var a00 = a[0],
-        a01 = a[1],
-        a02 = a[2],
-        a03 = a[3];
+      a01 = a[1],
+      a02 = a[2],
+      a03 = a[3];
     var a10 = a[4],
-        a11 = a[5],
-        a12 = a[6],
-        a13 = a[7];
+      a11 = a[5],
+      a12 = a[6],
+      a13 = a[7];
     var a20 = a[8],
-        a21 = a[9],
-        a22 = a[10],
-        a23 = a[11];
+      a21 = a[9],
+      a22 = a[10],
+      a23 = a[11];
     var a30 = a[12],
-        a31 = a[13],
-        a32 = a[14],
-        a33 = a[15];
+      a31 = a[13],
+      a32 = a[14],
+      a33 = a[15];
     var b00 = a00 * a11 - a01 * a10;
     var b01 = a00 * a12 - a02 * a10;
     var b02 = a00 * a13 - a03 * a10;
@@ -202,14 +187,13 @@
     var b08 = a20 * a33 - a23 * a30;
     var b09 = a21 * a32 - a22 * a31;
     var b10 = a21 * a33 - a23 * a31;
-    var b11 = a22 * a33 - a23 * a32; // Calculate the determinant
+    var b11 = a22 * a33 - a23 * a32;
 
+    // Calculate the determinant
     var det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;
-
     if (!det) {
       return null;
     }
-
     det = 1.0 / det;
     out[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;
     out[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det;
@@ -229,6 +213,7 @@
     out[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
     return out;
   }
+
   /**
    * Multiplies two mat4s
    *
@@ -237,29 +222,29 @@
    * @param {ReadonlyMat4} b the second operand
    * @returns {mat4} out
    */
-
-  function multiply$1(out, a, b) {
+  function multiply$2(out, a, b) {
     var a00 = a[0],
-        a01 = a[1],
-        a02 = a[2],
-        a03 = a[3];
+      a01 = a[1],
+      a02 = a[2],
+      a03 = a[3];
     var a10 = a[4],
-        a11 = a[5],
-        a12 = a[6],
-        a13 = a[7];
+      a11 = a[5],
+      a12 = a[6],
+      a13 = a[7];
     var a20 = a[8],
-        a21 = a[9],
-        a22 = a[10],
-        a23 = a[11];
+      a21 = a[9],
+      a22 = a[10],
+      a23 = a[11];
     var a30 = a[12],
-        a31 = a[13],
-        a32 = a[14],
-        a33 = a[15]; // Cache only the current line of the second matrix
+      a31 = a[13],
+      a32 = a[14],
+      a33 = a[15];
 
+    // Cache only the current line of the second matrix
     var b0 = b[0],
-        b1 = b[1],
-        b2 = b[2],
-        b3 = b[3];
+      b1 = b[1],
+      b2 = b[2],
+      b3 = b[3];
     out[0] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
     out[1] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
     out[2] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
@@ -290,6 +275,7 @@
     out[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
     return out;
   }
+
   /**
    * Creates a matrix from a vector translation
    * This is equivalent to (but much faster than):
@@ -301,7 +287,6 @@
    * @param {ReadonlyVec3} v Translation vector
    * @returns {mat4} out
    */
-
   function fromTranslation(out, v) {
     out[0] = 1;
     out[1] = 0;
@@ -321,6 +306,7 @@
     out[15] = 1;
     return out;
   }
+
   /**
    * Creates a matrix from a given angle around a given axis
    * This is equivalent to (but much faster than):
@@ -333,26 +319,24 @@
    * @param {ReadonlyVec3} axis the axis to rotate around
    * @returns {mat4} out
    */
-
   function fromRotation(out, rad, axis) {
     var x = axis[0],
-        y = axis[1],
-        z = axis[2];
-    var len = Math.hypot(x, y, z);
+      y = axis[1],
+      z = axis[2];
+    var len = Math.sqrt(x * x + y * y + z * z);
     var s, c, t;
-
     if (len < EPSILON) {
       return null;
     }
-
     len = 1 / len;
     x *= len;
     y *= len;
     z *= len;
     s = Math.sin(rad);
     c = Math.cos(rad);
-    t = 1 - c; // Perform rotation-specific matrix multiplication
+    t = 1 - c;
 
+    // Perform rotation-specific matrix multiplication
     out[0] = x * x * t + c;
     out[1] = y * x * t + z * s;
     out[2] = z * x * t - y * s;
@@ -371,28 +355,28 @@
     out[15] = 1;
     return out;
   }
+
   /**
    * Creates a matrix from a quaternion rotation and vector translation
    * This is equivalent to (but much faster than):
    *
    *     mat4.identity(dest);
-   *     mat4.translate(dest, vec);
+   *     mat4.translate(dest, dest, vec);
    *     let quatMat = mat4.create();
-   *     quat4.toMat4(quat, quatMat);
-   *     mat4.multiply(dest, quatMat);
+   *     mat4.fromQuat(quatMat, quat);
+   *     mat4.multiply(dest, dest, quatMat);
    *
    * @param {mat4} out mat4 receiving operation result
-   * @param {quat4} q Rotation quaternion
+   * @param {quat} q Rotation quaternion
    * @param {ReadonlyVec3} v Translation vector
    * @returns {mat4} out
    */
-
   function fromRotationTranslation(out, q, v) {
     // Quaternion math
     var x = q[0],
-        y = q[1],
-        z = q[2],
-        w = q[3];
+      y = q[1],
+      z = q[2],
+      w = q[3];
     var x2 = x + x;
     var y2 = y + y;
     var z2 = z + z;
@@ -423,6 +407,7 @@
     out[15] = 1;
     return out;
   }
+
   /**
    * Returns the translation vector component of a transformation
    *  matrix. If a matrix is built with fromRotationTranslation,
@@ -432,24 +417,23 @@
    * @param  {ReadonlyMat4} mat Matrix to be decomposed (input)
    * @return {vec3} out
    */
-
   function getTranslation(out, mat) {
     out[0] = mat[12];
     out[1] = mat[13];
     out[2] = mat[14];
     return out;
   }
+
   /**
    * Returns the scaling factor component of a transformation
    *  matrix. If a matrix is built with fromRotationTranslationScale
-   *  with a normalized Quaternion paramter, the returned vector will be
+   *  with a normalized Quaternion parameter, the returned vector will be
    *  the same as the scaling vector
    *  originally supplied.
    * @param  {vec3} out Vector to receive scaling factor component
    * @param  {ReadonlyMat4} mat Matrix to be decomposed (input)
    * @return {vec3} out
    */
-
   function getScaling(out, mat) {
     var m11 = mat[0];
     var m12 = mat[1];
@@ -460,11 +444,12 @@
     var m31 = mat[8];
     var m32 = mat[9];
     var m33 = mat[10];
-    out[0] = Math.hypot(m11, m12, m13);
-    out[1] = Math.hypot(m21, m22, m23);
-    out[2] = Math.hypot(m31, m32, m33);
+    out[0] = Math.sqrt(m11 * m11 + m12 * m12 + m13 * m13);
+    out[1] = Math.sqrt(m21 * m21 + m22 * m22 + m23 * m23);
+    out[2] = Math.sqrt(m31 * m31 + m32 * m32 + m33 * m33);
     return out;
   }
+
   /**
    * Returns a quaternion representing the rotational component
    *  of a transformation matrix. If a matrix is built with
@@ -474,9 +459,8 @@
    * @param {ReadonlyMat4} mat Matrix to be decomposed (input)
    * @return {quat} out
    */
-
   function getRotation(out, mat) {
-    var scaling = new ARRAY_TYPE(3);
+    var scaling = new ARRAY_TYPE$1(3);
     getScaling(scaling, mat);
     var is1 = 1 / scaling[0];
     var is2 = 1 / scaling[1];
@@ -492,7 +476,6 @@
     var sm33 = mat[10] * is3;
     var trace = sm11 + sm22 + sm33;
     var S = 0;
-
     if (trace > 0) {
       S = Math.sqrt(trace + 1.0) * 2;
       out[3] = 0.25 * S;
@@ -518,33 +501,32 @@
       out[1] = (sm23 + sm32) / S;
       out[2] = 0.25 * S;
     }
-
     return out;
   }
+
   /**
    * Creates a matrix from a quaternion rotation, vector translation and vector scale
    * This is equivalent to (but much faster than):
    *
    *     mat4.identity(dest);
-   *     mat4.translate(dest, vec);
+   *     mat4.translate(dest, dest, vec);
    *     let quatMat = mat4.create();
-   *     quat4.toMat4(quat, quatMat);
-   *     mat4.multiply(dest, quatMat);
-   *     mat4.scale(dest, scale)
+   *     mat4.fromQuat(quatMat, quat);
+   *     mat4.multiply(dest, dest, quatMat);
+   *     mat4.scale(dest, dest, scale)
    *
    * @param {mat4} out mat4 receiving operation result
-   * @param {quat4} q Rotation quaternion
+   * @param {quat} q Rotation quaternion
    * @param {ReadonlyVec3} v Translation vector
    * @param {ReadonlyVec3} s Scaling vector
    * @returns {mat4} out
    */
-
   function fromRotationTranslationScale(out, q, v, s) {
     // Quaternion math
     var x = q[0],
-        y = q[1],
-        z = q[2],
-        w = q[3];
+      y = q[1],
+      z = q[2],
+      w = q[3];
     var x2 = x + x;
     var y2 = y + y;
     var z2 = z + z;
@@ -578,6 +560,7 @@
     out[15] = 1;
     return out;
   }
+
   /**
    * Generates a perspective projection matrix with the given bounds.
    * The near/far clip planes correspond to a normalized device coordinate Z range of [-1, 1],
@@ -591,10 +574,8 @@
    * @param {number} far Far bound of the frustum, can be null or Infinity
    * @returns {mat4} out
    */
-
   function perspectiveNO(out, fovy, aspect, near, far) {
-    var f = 1.0 / Math.tan(fovy / 2),
-        nf;
+    var f = 1.0 / Math.tan(fovy / 2);
     out[0] = f / aspect;
     out[1] = 0;
     out[2] = 0;
@@ -609,23 +590,21 @@
     out[12] = 0;
     out[13] = 0;
     out[15] = 0;
-
     if (far != null && far !== Infinity) {
-      nf = 1 / (near - far);
+      var nf = 1 / (near - far);
       out[10] = (far + near) * nf;
       out[14] = 2 * far * near * nf;
     } else {
       out[10] = -1;
       out[14] = -2 * near;
     }
-
     return out;
   }
+
   /**
    * Alias for {@link mat4.perspectiveNO}
    * @function
    */
-
   var perspective = perspectiveNO;
 
   /**
@@ -638,31 +617,29 @@
    *
    * @returns {vec3} a new 3D vector
    */
-
-  function create$2() {
-    var out = new ARRAY_TYPE(3);
-
-    if (ARRAY_TYPE != Float32Array) {
+  function create$4() {
+    var out = new ARRAY_TYPE$1(3);
+    if (ARRAY_TYPE$1 != Float32Array) {
       out[0] = 0;
       out[1] = 0;
       out[2] = 0;
     }
-
     return out;
   }
+
   /**
    * Calculates the length of a vec3
    *
    * @param {ReadonlyVec3} a vector to calculate length of
    * @returns {Number} length of a
    */
-
   function length(a) {
     var x = a[0];
     var y = a[1];
     var z = a[2];
-    return Math.hypot(x, y, z);
+    return Math.sqrt(x * x + y * y + z * z);
   }
+
   /**
    * Creates a new vec3 initialized with the given values
    *
@@ -671,14 +648,14 @@
    * @param {Number} z Z component
    * @returns {vec3} a new 3D vector
    */
-
   function fromValues$2(x, y, z) {
-    var out = new ARRAY_TYPE(3);
+    var out = new ARRAY_TYPE$1(3);
     out[0] = x;
     out[1] = y;
     out[2] = z;
     return out;
   }
+
   /**
    * Copy the values from one vec3 to another
    *
@@ -686,13 +663,13 @@
    * @param {ReadonlyVec3} a the source vector
    * @returns {vec3} out
    */
-
   function copy$2(out, a) {
     out[0] = a[0];
     out[1] = a[1];
     out[2] = a[2];
     return out;
   }
+
   /**
    * Set the components of a vec3 to the given values
    *
@@ -702,13 +679,13 @@
    * @param {Number} z Z component
    * @returns {vec3} out
    */
-
   function set$2(out, x, y, z) {
     out[0] = x;
     out[1] = y;
     out[2] = z;
     return out;
   }
+
   /**
    * Adds two vec3's
    *
@@ -717,13 +694,13 @@
    * @param {ReadonlyVec3} b the second operand
    * @returns {vec3} out
    */
-
   function add(out, a, b) {
     out[0] = a[0] + b[0];
     out[1] = a[1] + b[1];
     out[2] = a[2] + b[2];
     return out;
   }
+
   /**
    * Normalize a vec3
    *
@@ -731,23 +708,21 @@
    * @param {ReadonlyVec3} a vector to normalize
    * @returns {vec3} out
    */
-
   function normalize$2(out, a) {
     var x = a[0];
     var y = a[1];
     var z = a[2];
     var len = x * x + y * y + z * z;
-
     if (len > 0) {
       //TODO: evaluate use of glm_invsqrt here?
       len = 1 / Math.sqrt(len);
     }
-
     out[0] = a[0] * len;
     out[1] = a[1] * len;
     out[2] = a[2] * len;
     return out;
   }
+
   /**
    * Calculates the dot product of two vec3's
    *
@@ -755,10 +730,10 @@
    * @param {ReadonlyVec3} b the second operand
    * @returns {Number} dot product of a and b
    */
-
   function dot(a, b) {
     return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
   }
+
   /**
    * Computes the cross product of two vec3's
    *
@@ -767,19 +742,19 @@
    * @param {ReadonlyVec3} b the second operand
    * @returns {vec3} out
    */
-
   function cross(out, a, b) {
     var ax = a[0],
-        ay = a[1],
-        az = a[2];
+      ay = a[1],
+      az = a[2];
     var bx = b[0],
-        by = b[1],
-        bz = b[2];
+      by = b[1],
+      bz = b[2];
     out[0] = ay * bz - az * by;
     out[1] = az * bx - ax * bz;
     out[2] = ax * by - ay * bx;
     return out;
   }
+
   /**
    * Performs a linear interpolation between two vec3's
    *
@@ -789,7 +764,6 @@
    * @param {Number} t interpolation amount, in the range [0-1], between the two inputs
    * @returns {vec3} out
    */
-
   function lerp(out, a, b, t) {
     var ax = a[0];
     var ay = a[1];
@@ -799,55 +773,51 @@
     out[2] = az + t * (b[2] - az);
     return out;
   }
+
   /**
    * Transforms the vec3 with a quat
    * Can also be used for dual quaternions. (Multiply it with the real part)
    *
    * @param {vec3} out the receiving vector
    * @param {ReadonlyVec3} a the vector to transform
-   * @param {ReadonlyQuat} q quaternion to transform with
+   * @param {ReadonlyQuat} q normalized quaternion to transform with
    * @returns {vec3} out
    */
-
   function transformQuat(out, a, q) {
-    // benchmarks: https://jsperf.com/quaternion-transform-vec3-implementations-fixed
+    // Fast Vector Rotation using Quaternions by Robert Eisele
+    // https://raw.org/proof/vector-rotation-using-quaternions/
+
     var qx = q[0],
-        qy = q[1],
-        qz = q[2],
-        qw = q[3];
-    var x = a[0],
-        y = a[1],
-        z = a[2]; // var qvec = [qx, qy, qz];
-    // var uv = vec3.cross([], qvec, a);
-
-    var uvx = qy * z - qz * y,
-        uvy = qz * x - qx * z,
-        uvz = qx * y - qy * x; // var uuv = vec3.cross([], qvec, uv);
-
-    var uuvx = qy * uvz - qz * uvy,
-        uuvy = qz * uvx - qx * uvz,
-        uuvz = qx * uvy - qy * uvx; // vec3.scale(uv, uv, 2 * w);
-
-    var w2 = qw * 2;
-    uvx *= w2;
-    uvy *= w2;
-    uvz *= w2; // vec3.scale(uuv, uuv, 2);
-
-    uuvx *= 2;
-    uuvy *= 2;
-    uuvz *= 2; // return vec3.add(out, a, vec3.add(out, uv, uuv));
-
-    out[0] = x + uvx + uuvx;
-    out[1] = y + uvy + uuvy;
-    out[2] = z + uvz + uuvz;
+      qy = q[1],
+      qz = q[2],
+      qw = q[3];
+    var vx = a[0],
+      vy = a[1],
+      vz = a[2];
+
+    // t = q x v
+    var tx = qy * vz - qz * vy;
+    var ty = qz * vx - qx * vz;
+    var tz = qx * vy - qy * vx;
+
+    // t = 2t
+    tx = tx + tx;
+    ty = ty + ty;
+    tz = tz + tz;
+
+    // v + w t + q x t
+    out[0] = vx + qw * tx + qy * tz - qz * ty;
+    out[1] = vy + qw * ty + qz * tx - qx * tz;
+    out[2] = vz + qw * tz + qx * ty - qy * tx;
     return out;
   }
+
   /**
    * Alias for {@link vec3.length}
    * @function
    */
-
   var len = length;
+
   /**
    * Perform some operation over an array of vec3s.
    *
@@ -860,26 +830,21 @@
    * @returns {Array} a
    * @function
    */
-
   (function () {
-    var vec = create$2();
+    var vec = create$4();
     return function (a, stride, offset, count, fn, arg) {
       var i, l;
-
       if (!stride) {
         stride = 3;
       }
-
       if (!offset) {
         offset = 0;
       }
-
       if (count) {
         l = Math.min(count * stride + offset, a.length);
       } else {
         l = a.length;
       }
-
       for (i = offset; i < l; i += stride) {
         vec[0] = a[i];
         vec[1] = a[i + 1];
@@ -889,7 +854,6 @@
         a[i + 1] = vec[1];
         a[i + 2] = vec[2];
       }
-
       return a;
     };
   })();
@@ -904,19 +868,17 @@
    *
    * @returns {vec4} a new 4D vector
    */
-
-  function create$1() {
-    var out = new ARRAY_TYPE(4);
-
-    if (ARRAY_TYPE != Float32Array) {
+  function create$3() {
+    var out = new ARRAY_TYPE$1(4);
+    if (ARRAY_TYPE$1 != Float32Array) {
       out[0] = 0;
       out[1] = 0;
       out[2] = 0;
       out[3] = 0;
     }
-
     return out;
   }
+
   /**
    * Creates a new vec4 initialized with the given values
    *
@@ -926,15 +888,15 @@
    * @param {Number} w W component
    * @returns {vec4} a new 4D vector
    */
-
   function fromValues$1(x, y, z, w) {
-    var out = new ARRAY_TYPE(4);
+    var out = new ARRAY_TYPE$1(4);
     out[0] = x;
     out[1] = y;
     out[2] = z;
     out[3] = w;
     return out;
   }
+
   /**
    * Copy the values from one vec4 to another
    *
@@ -942,7 +904,6 @@
    * @param {ReadonlyVec4} a the source vector
    * @returns {vec4} out
    */
-
   function copy$1(out, a) {
     out[0] = a[0];
     out[1] = a[1];
@@ -950,6 +911,7 @@
     out[3] = a[3];
     return out;
   }
+
   /**
    * Set the components of a vec4 to the given values
    *
@@ -960,7 +922,6 @@
    * @param {Number} w W component
    * @returns {vec4} out
    */
-
   function set$1(out, x, y, z, w) {
     out[0] = x;
     out[1] = y;
@@ -968,6 +929,7 @@
     out[3] = w;
     return out;
   }
+
   /**
    * Normalize a vec4
    *
@@ -975,24 +937,22 @@
    * @param {ReadonlyVec4} a vector to normalize
    * @returns {vec4} out
    */
-
   function normalize$1(out, a) {
     var x = a[0];
     var y = a[1];
     var z = a[2];
     var w = a[3];
     var len = x * x + y * y + z * z + w * w;
-
     if (len > 0) {
       len = 1 / Math.sqrt(len);
     }
-
     out[0] = x * len;
     out[1] = y * len;
     out[2] = z * len;
     out[3] = w * len;
     return out;
   }
+
   /**
    * Transforms the vec4 with a mat4.
    *
@@ -1001,18 +961,18 @@
    * @param {ReadonlyMat4} m matrix to transform with
    * @returns {vec4} out
    */
-
   function transformMat4(out, a, m) {
     var x = a[0],
-        y = a[1],
-        z = a[2],
-        w = a[3];
+      y = a[1],
+      z = a[2],
+      w = a[3];
     out[0] = m[0] * x + m[4] * y + m[8] * z + m[12] * w;
     out[1] = m[1] * x + m[5] * y + m[9] * z + m[13] * w;
     out[2] = m[2] * x + m[6] * y + m[10] * z + m[14] * w;
     out[3] = m[3] * x + m[7] * y + m[11] * z + m[15] * w;
     return out;
   }
+
   /**
    * Perform some operation over an array of vec4s.
    *
@@ -1025,26 +985,21 @@
    * @returns {Array} a
    * @function
    */
-
   (function () {
-    var vec = create$1();
+    var vec = create$3();
     return function (a, stride, offset, count, fn, arg) {
       var i, l;
-
       if (!stride) {
         stride = 4;
       }
-
       if (!offset) {
         offset = 0;
       }
-
       if (count) {
         l = Math.min(count * stride + offset, a.length);
       } else {
         l = a.length;
       }
-
       for (i = offset; i < l; i += stride) {
         vec[0] = a[i];
         vec[1] = a[i + 1];
@@ -1056,13 +1011,12 @@
         a[i + 2] = vec[2];
         a[i + 3] = vec[3];
       }
-
       return a;
     };
   })();
 
   /**
-   * Quaternion
+   * Quaternion in the format XYZW
    * @module quat
    */
 
@@ -1071,19 +1025,17 @@
    *
    * @returns {quat} a new quaternion
    */
-
-  function create() {
-    var out = new ARRAY_TYPE(4);
-
-    if (ARRAY_TYPE != Float32Array) {
+  function create$2() {
+    var out = new ARRAY_TYPE$1(4);
+    if (ARRAY_TYPE$1 != Float32Array) {
       out[0] = 0;
       out[1] = 0;
       out[2] = 0;
     }
-
     out[3] = 1;
     return out;
   }
+
   /**
    * Sets a quat from the given angle and rotation axis,
    * then returns it.
@@ -1093,7 +1045,6 @@
    * @param {Number} rad the angle in radians
    * @returns {quat} out
    **/
-
   function setAxisAngle(out, axis, rad) {
     rad = rad * 0.5;
     var s = Math.sin(rad);
@@ -1103,6 +1054,7 @@
     out[3] = Math.cos(rad);
     return out;
   }
+
   /**
    * Multiplies two quat's
    *
@@ -1111,22 +1063,22 @@
    * @param {ReadonlyQuat} b the second operand
    * @returns {quat} out
    */
-
-  function multiply(out, a, b) {
+  function multiply$1(out, a, b) {
     var ax = a[0],
-        ay = a[1],
-        az = a[2],
-        aw = a[3];
+      ay = a[1],
+      az = a[2],
+      aw = a[3];
     var bx = b[0],
-        by = b[1],
-        bz = b[2],
-        bw = b[3];
+      by = b[1],
+      bz = b[2],
+      bw = b[3];
     out[0] = ax * bw + aw * bx + ay * bz - az * by;
     out[1] = ay * bw + aw * by + az * bx - ax * bz;
     out[2] = az * bw + aw * bz + ax * by - ay * bx;
     out[3] = aw * bw - ax * bx - ay * by - az * bz;
     return out;
   }
+
   /**
    * Performs a spherical linear interpolation between two quat
    *
@@ -1136,31 +1088,30 @@
    * @param {Number} t interpolation amount, in the range [0-1], between the two inputs
    * @returns {quat} out
    */
-
   function slerp(out, a, b, t) {
     // benchmarks:
     //    http://jsperf.com/quaternion-slerp-implementations
     var ax = a[0],
-        ay = a[1],
-        az = a[2],
-        aw = a[3];
+      ay = a[1],
+      az = a[2],
+      aw = a[3];
     var bx = b[0],
-        by = b[1],
-        bz = b[2],
-        bw = b[3];
-    var omega, cosom, sinom, scale0, scale1; // calc cosine
-
-    cosom = ax * bx + ay * by + az * bz + aw * bw; // adjust signs (if necessary)
-
+      by = b[1],
+      bz = b[2],
+      bw = b[3];
+    var omega, cosom, sinom, scale0, scale1;
+
+    // calc cosine
+    cosom = ax * bx + ay * by + az * bz + aw * bw;
+    // adjust signs (if necessary)
     if (cosom < 0.0) {
       cosom = -cosom;
       bx = -bx;
       by = -by;
       bz = -bz;
       bw = -bw;
-    } // calculate coefficients
-
-
+    }
+    // calculate coefficients
     if (1.0 - cosom > EPSILON) {
       // standard case (slerp)
       omega = Math.acos(cosom);
@@ -1172,15 +1123,15 @@
       //  ... so we can do a linear interpolation
       scale0 = 1.0 - t;
       scale1 = t;
-    } // calculate final values
-
-
+    }
+    // calculate final values
     out[0] = scale0 * ax + scale1 * bx;
     out[1] = scale0 * ay + scale1 * by;
     out[2] = scale0 * az + scale1 * bz;
     out[3] = scale0 * aw + scale1 * bw;
     return out;
   }
+
   /**
    * Calculates the conjugate of a quat
    * If the quaternion is normalized, this function is faster than quat.inverse and produces the same result.
@@ -1189,7 +1140,6 @@
    * @param {ReadonlyQuat} a quat to calculate conjugate of
    * @returns {quat} out
    */
-
   function conjugate(out, a) {
     out[0] = -a[0];
     out[1] = -a[1];
@@ -1197,6 +1147,7 @@
     out[3] = a[3];
     return out;
   }
+
   /**
    * Creates a quaternion from the given 3x3 rotation matrix.
    *
@@ -1208,20 +1159,16 @@
    * @returns {quat} out
    * @function
    */
-
   function fromMat3(out, m) {
     // Algorithm in Ken Shoemake's article in 1987 SIGGRAPH course notes
     // article "Quaternion Calculus and Fast Animation".
     var fTrace = m[0] + m[4] + m[8];
     var fRoot;
-
     if (fTrace > 0.0) {
       // |w| > 1/2, may as well choose w > 1/2
       fRoot = Math.sqrt(fTrace + 1.0); // 2w
-
       out[3] = 0.5 * fRoot;
       fRoot = 0.5 / fRoot; // 1/(4w)
-
       out[0] = (m[5] - m[7]) * fRoot;
       out[1] = (m[6] - m[2]) * fRoot;
       out[2] = (m[1] - m[3]) * fRoot;
@@ -1239,9 +1186,9 @@
       out[j] = (m[j * 3 + i] + m[i * 3 + j]) * fRoot;
       out[k] = (m[k * 3 + i] + m[i * 3 + k]) * fRoot;
     }
-
     return out;
   }
+
   /**
    * Creates a new quat initialized with the given values
    *
@@ -1252,8 +1199,8 @@
    * @returns {quat} a new quaternion
    * @function
    */
-
   var fromValues = fromValues$1;
+
   /**
    * Copy the values from one quat to another
    *
@@ -1262,8 +1209,8 @@
    * @returns {quat} out
    * @function
    */
-
   var copy = copy$1;
+
   /**
    * Set the components of a quat to the given values
    *
@@ -1275,8 +1222,8 @@
    * @returns {quat} out
    * @function
    */
-
   var set = set$1;
+
   /**
    * Normalize a quat
    *
@@ -1285,8 +1232,8 @@
    * @returns {quat} out
    * @function
    */
-
   var normalize = normalize$1;
+
   /**
    * Sets a quaternion to represent the shortest rotation from one
    * vector to another.
@@ -1298,14 +1245,12 @@
    * @param {ReadonlyVec3} b the destination vector
    * @returns {quat} out
    */
-
   (function () {
-    var tmpvec3 = create$2();
+    var tmpvec3 = create$4();
     var xUnitVec3 = fromValues$2(1, 0, 0);
     var yUnitVec3 = fromValues$2(0, 1, 0);
     return function (out, a, b) {
       var dot$1 = dot(a, b);
-
       if (dot$1 < -0.999999) {
         cross(tmpvec3, xUnitVec3, a);
         if (len(tmpvec3) < 0.000001) cross(tmpvec3, yUnitVec3, a);
@@ -1328,6 +1273,7 @@
       }
     };
   })();
+
   /**
    * Performs a spherical linear interpolation with two control points
    *
@@ -1339,10 +1285,9 @@
    * @param {Number} t interpolation amount, in the range [0-1], between the two inputs
    * @returns {quat} out
    */
-
   (function () {
-    var temp1 = create();
-    var temp2 = create();
+    var temp1 = create$2();
+    var temp2 = create$2();
     return function (out, a, b, c, d, t) {
       slerp(temp1, a, d, t);
       slerp(temp2, b, c, t);
@@ -1350,6 +1295,7 @@
       return out;
     };
   })();
+
   /**
    * Sets the specified quaternion with values corresponding to the given
    * axes. Each axis is a vec3 and is expected to be unit length and
@@ -1360,9 +1306,8 @@
    * @param {ReadonlyVec3} up    the vector representing the local "up" direction
    * @returns {quat} out
    */
-
   (function () {
-    var matr = create$4();
+    var matr = create$6();
     return function (out, view, right, up) {
       matr[0] = right[0];
       matr[3] = right[1];
@@ -1422,14 +1367,14 @@
           super();
           this[P_SPACE] = {
               parentSpace,
-              offsetMatrix: offsetMatrix ? clone(offsetMatrix) : create$3(),
+              offsetMatrix: offsetMatrix ? clone(offsetMatrix) : create$5(),
               emulated: true,
           };
       }
   }
   class GlobalSpace extends XRSpace {
       constructor() {
-          super(undefined, create$3()); // GlobalSpace has no parent
+          super(undefined, create$5()); // GlobalSpace has no parent
       }
   }
   class XRSpaceUtils {
@@ -1441,7 +1386,7 @@
       // Update the rotation component of the offsetMatrix of a given XRSpace using a quaternion
       static updateOffsetQuaternion(space, quaternion) {
           const offsetMatrix = space[P_SPACE].offsetMatrix;
-          const translation = create$2();
+          const translation = create$4();
           getTranslation(translation, offsetMatrix);
           fromRotationTranslation(offsetMatrix, quaternion, translation);
       }
@@ -1451,11 +1396,11 @@
           copy$3(offsetMatrix, matrix);
       }
       // Calculate the global offset matrix for a given XRSpace
-      static calculateGlobalOffsetMatrix(space, globalOffset = create$3()) {
+      static calculateGlobalOffsetMatrix(space, globalOffset = create$5()) {
           const parentOffset = space[P_SPACE].parentSpace
               ? XRSpaceUtils.calculateGlobalOffsetMatrix(space[P_SPACE].parentSpace)
-              : create$3(); // Identity matrix for GlobalSpace
-          multiply$1(globalOffset, parentOffset, space[P_SPACE].offsetMatrix);
+              : create$5(); // Identity matrix for GlobalSpace
+          multiply$2(globalOffset, parentOffset, space[P_SPACE].offsetMatrix);
           return globalOffset;
       }
   }
@@ -1473,7 +1418,7 @@
   class Vector3 {
       constructor(x = 0, y = 0, z = 0) {
           this.vec3 = fromValues$2(x, y, z);
-          this.tempVec3 = create$2();
+          this.tempVec3 = create$4();
       }
       get x() {
           return this.vec3[0];
@@ -1535,7 +1480,7 @@
   class Quaternion {
       constructor(x = 0, y = 0, z = 0, w = 1) {
           this.quat = fromValues(x, y, z, w);
-          this.tempQuat = create();
+          this.tempQuat = create$2();
       }
       get x() {
           return this.quat[0];
@@ -1584,7 +1529,7 @@
       }
       multiply(q) {
           copy(this.tempQuat, this.quat);
-          multiply(this.quat, this.tempQuat, q.quat);
+          multiply$1(this.quat, this.tempQuat, q.quat);
           return this;
       }
       setFromAxisAngle(axis, angle) {
@@ -2200,38 +2145,6 @@
       }
   }
 
-  /**
-   * Copyright (c) Meta Platforms, Inc. and affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  class PolyfillDOMPointReadOnly {
-      constructor(x = 0, y = 0, z = 0, w = 1) {
-          this.x = x;
-          this.y = y;
-          this.z = z;
-          this.w = w;
-          Object.freeze(this);
-      }
-      static fromPoint(other) {
-          return new PolyfillDOMPointReadOnly(other.x, other.y, other.z, other.w);
-      }
-      matrixTransform(_matrix) {
-          // Implement matrix transformation logic here
-          // This is a placeholder implementation
-          return new PolyfillDOMPointReadOnly();
-      }
-      toJSON() {
-          // Implement toJSON logic here
-          // This is a placeholder implementation
-          return { x: this.x, y: this.y, z: this.z, w: this.w };
-      }
-  }
-  const DOMPointReadOnly$1 = typeof globalThis.DOMPointReadOnly !== 'undefined'
-      ? globalThis.DOMPointReadOnly
-      : PolyfillDOMPointReadOnly;
-
   /**
    * Copyright (c) Meta Platforms, Inc. and affiliates.
    *
@@ -2242,14 +2155,14 @@
       constructor(position, orientation) {
           // Default values
           const defaultPosition = fromValues$2(0, 0, 0);
-          const defaultOrientation = create();
+          const defaultOrientation = create$2();
           this[P_RIGID_TRANSFORM] = {
-              matrix: create$3(),
+              matrix: create$5(),
               position: position
                   ? fromValues$2(position.x, position.y, position.z)
                   : defaultPosition,
               orientation: orientation
-                  ? normalize(create(), fromValues(orientation.x, orientation.y, orientation.z, orientation.w))
+                  ? normalize(create$2(), fromValues(orientation.x, orientation.y, orientation.z, orientation.w))
                   : defaultOrientation,
               inverse: null,
           };
@@ -2263,25 +2176,25 @@
       }
       get position() {
           const pos = this[P_RIGID_TRANSFORM].position;
-          return new DOMPointReadOnly$1(pos[0], pos[1], pos[2], 1);
+          return new DOMPointReadOnly(pos[0], pos[1], pos[2], 1);
       }
       get orientation() {
           const ori = this[P_RIGID_TRANSFORM].orientation;
-          return new DOMPointReadOnly$1(ori[0], ori[1], ori[2], ori[3]);
+          return new DOMPointReadOnly(ori[0], ori[1], ori[2], ori[3]);
       }
       get inverse() {
           if (!this[P_RIGID_TRANSFORM].inverse) {
-              const invMatrix = create$3();
+              const invMatrix = create$5();
               if (!invert(invMatrix, this[P_RIGID_TRANSFORM].matrix)) {
                   throw new Error('Matrix is not invertible.');
               }
               // Decomposing the inverse matrix into position and orientation
-              let invPosition = create$2();
+              let invPosition = create$4();
               getTranslation(invPosition, invMatrix);
-              let invOrientation = create();
+              let invOrientation = create$2();
               getRotation(invOrientation, invMatrix);
               // Creating a new XRRigidTransform for the inverse
-              this[P_RIGID_TRANSFORM].inverse = new XRRigidTransform(new DOMPointReadOnly$1(invPosition[0], invPosition[1], invPosition[2], 1), new DOMPointReadOnly$1(invOrientation[0], invOrientation[1], invOrientation[2], invOrientation[3]));
+              this[P_RIGID_TRANSFORM].inverse = new XRRigidTransform(new DOMPointReadOnly(invPosition[0], invPosition[1], invPosition[2], 1), new DOMPointReadOnly(invOrientation[0], invOrientation[1], invOrientation[2], invOrientation[3]));
               // Setting the inverse of the inverse to be this transform
               this[P_RIGID_TRANSFORM].inverse[P_RIGID_TRANSFORM].inverse = this;
           }
@@ -2289,7 +2202,7 @@
       }
   }
 
-  class DOMPointReadOnly {
+  class DOMPointReadOnly$1 {
       constructor(x = 0, y = 0, z = 0, w = 1) {
           this.x = x;
           this.y = y;
@@ -2304,8 +2217,8 @@
           if (origin instanceof XRRigidTransform) {
               const transform = origin;
               const matrix = transform.matrix;
-              const originVec4 = set$1(create$1(), _origin.x, _origin.y, _origin.z, _origin.w);
-              const directionVec4 = set$1(create$1(), _direction.x, _direction.y, _direction.z, _direction.w);
+              const originVec4 = set$1(create$3(), _origin.x, _origin.y, _origin.z, _origin.w);
+              const directionVec4 = set$1(create$3(), _direction.x, _direction.y, _direction.z, _direction.w);
               transformMat4(originVec4, originVec4, matrix);
               transformMat4(directionVec4, directionVec4, matrix);
               _origin.x = originVec4[0];
@@ -2326,7 +2239,7 @@
               }
               if (direction) {
                   if ((direction.x === 0 && direction.y === 0 && direction.z === 0) ||
-                      direction.w !== 1) {
+                      direction.w !== 0) {
                       throw new DOMException('Invalid direction value to construct XRRay', 'TypeError');
                   }
                   _direction.x = direction.x;
@@ -2342,8 +2255,8 @@
           _direction.y = _direction.y / length;
           _direction.z = _direction.z / length;
           this[P_RAY] = {
-              origin: new DOMPointReadOnly(_origin.x, _origin.y, _origin.z, _origin.w),
-              direction: new DOMPointReadOnly(_direction.x, _direction.y, _direction.z, _direction.w),
+              origin: new DOMPointReadOnly$1(_origin.x, _origin.y, _origin.z, _origin.w),
+              direction: new DOMPointReadOnly$1(_direction.x, _direction.y, _direction.z, _direction.w),
               matrix: null,
           };
       }
@@ -2357,23 +2270,23 @@
           if (this[P_RAY].matrix) {
               return this[P_RAY].matrix;
           }
-          const z = set$2(create$2(), 0, 0, -1);
-          const origin = set$2(create$2(), this[P_RAY].origin.x, this[P_RAY].origin.y, this[P_RAY].origin.z);
-          const direction = set$2(create$2(), this[P_RAY].direction.x, this[P_RAY].direction.y, this[P_RAY].direction.z);
-          const axis = cross(create$2(), direction, z);
+          const z = set$2(create$4(), 0, 0, -1);
+          const origin = set$2(create$4(), this[P_RAY].origin.x, this[P_RAY].origin.y, this[P_RAY].origin.z);
+          const direction = set$2(create$4(), this[P_RAY].direction.x, this[P_RAY].direction.y, this[P_RAY].direction.z);
+          const axis = cross(create$4(), direction, z);
           const cosAngle = dot(direction, z);
-          const rotation = create$3();
+          const rotation = create$5();
           if (cosAngle > -1 && cosAngle < 1) {
               fromRotation(rotation, Math.acos(cosAngle), axis);
           }
           else if (cosAngle === -1) {
-              fromRotation(rotation, Math.acos(cosAngle), set$2(create$2(), 1, 0, 0));
+              fromRotation(rotation, Math.acos(cosAngle), set$2(create$4(), 1, 0, 0));
           }
           else {
               identity(rotation);
           }
-          const translation = fromTranslation(create$3(), origin);
-          const matrix = multiply$1(create$3(), translation, rotation);
+          const translation = fromTranslation(create$5(), origin);
+          const matrix = multiply$2(create$5(), translation, rotation);
           this[P_RAY].matrix = new Float32Array(matrix);
           return this[P_RAY].matrix;
       }
@@ -2640,14 +2553,14 @@
    * This source code is licensed under the MIT license found in the
    * LICENSE file in the root directory of this source tree.
    */
-  const spaceGlobalMatrix = create$3();
-  const baseSpaceGlobalMatrix = create$3();
-  const baseSpaceGlobalMatrixInverse = create$3();
+  const spaceGlobalMatrix = create$5();
+  const baseSpaceGlobalMatrix = create$5();
+  const baseSpaceGlobalMatrixInverse = create$5();
   const getOffsetMatrix = (offsetMatrix, space, baseSpace) => {
       XRSpaceUtils.calculateGlobalOffsetMatrix(space, spaceGlobalMatrix);
       XRSpaceUtils.calculateGlobalOffsetMatrix(baseSpace, baseSpaceGlobalMatrix);
       invert(baseSpaceGlobalMatrixInverse, baseSpaceGlobalMatrix);
-      multiply$1(offsetMatrix, baseSpaceGlobalMatrixInverse, spaceGlobalMatrix);
+      multiply$2(offsetMatrix, baseSpaceGlobalMatrixInverse, spaceGlobalMatrix);
   };
   class XRFrame {
       constructor(session, id, active, animationFrame, predictedDisplayTime) {
@@ -2657,7 +2570,7 @@
               active,
               animationFrame,
               predictedDisplayTime,
-              tempMat4: create$3(),
+              tempMat4: create$5(),
               detectedPlanes: new XRPlaneSet(),
               detectedMeshes: new XRMeshSet(),
               trackedAnchors: session[P_SESSION].frameTrackedAnchors,
@@ -2675,9 +2588,9 @@
               throw new DOMException('XRFrame access outside the callback that produced it is invalid.', 'InvalidStateError');
           }
           getOffsetMatrix(this[P_FRAME].tempMat4, space, baseSpace);
-          const position = create$2();
+          const position = create$4();
           getTranslation(position, this[P_FRAME].tempMat4);
-          const orientation = create();
+          const orientation = create$2();
           getRotation(orientation, this[P_FRAME].tempMat4);
           return new XRPose(new XRRigidTransform({ x: position[0], y: position[1], z: position[2], w: 1.0 }, {
               x: orientation[0],
@@ -2828,9 +2741,9 @@
               isSystemKeyboardSupported: false,
               ended: false,
               projectionMatrices: {
-                  [XREye.Left]: create$3(),
-                  [XREye.Right]: create$3(),
-                  [XREye.None]: create$3(),
+                  [XREye.Left]: create$5(),
+                  [XREye.Right]: create$5(),
+                  [XREye.None]: create$5(),
               },
               getProjectionMatrix: (eye) => {
                   return this[P_SESSION].projectionMatrices[eye];
@@ -3079,8 +2992,8 @@
                       const sourceSpace = hitTestSource[P_HIT_TEST].space;
                       const sourceGlobalOffset = XRSpaceUtils.calculateGlobalOffsetMatrix(sourceSpace);
                       const rayLocalOffset = hitTestSource[P_HIT_TEST].offsetRay.matrix;
-                      const rayGlobalOffset = create$3();
-                      multiply$1(rayGlobalOffset, sourceGlobalOffset, rayLocalOffset);
+                      const rayGlobalOffset = create$5();
+                      multiply$2(rayGlobalOffset, sourceGlobalOffset, rayLocalOffset);
                       const hitTestResults = [];
                       sem.computeHitTestResults(rayGlobalOffset).forEach((matrix) => {
                           const offsetSpace = new XRSpace(globalSpace, matrix);
@@ -4252,15 +4165,15 @@
       buttons: [{ id: 'pinch', type: 'analog', eventTrigger: 'select' }],
       axes: [],
   };
-  const fromPosition = create$2();
-  const fromQuaternion = create();
-  const fromScale = create$2();
-  const toPosition = create$2();
-  const toQuaternion = create();
-  const toScale = create$2();
-  const interpolatedPosition = create$2();
-  const interpolatedQuaternion = create();
-  const interpolatedScale = create$2();
+  const fromPosition = create$4();
+  const fromQuaternion = create$2();
+  const fromScale = create$4();
+  const toPosition = create$4();
+  const toQuaternion = create$2();
+  const toScale = create$4();
+  const interpolatedPosition = create$4();
+  const interpolatedQuaternion = create$2();
+  const interpolatedScale = create$4();
   const interpolateMatrix = (out, fromMatrix, toMatrix, alpha) => {
       getTranslation(fromPosition, fromMatrix);
       getRotation(fromQuaternion, fromMatrix);
@@ -4453,8 +4366,8 @@
               playing: false,
               viewerSpace,
               viewSpaces,
-              vec3: create$2(),
-              quat: create(),
+              vec3: create$4(),
+              quat: create$2(),
           };
           fromTranslation(this[P_ACTION_PLAYER].viewSpaces[XREye.Left][P_SPACE].offsetMatrix, fromValues$2(-ipd / 2, 0, 0));
           fromTranslation(this[P_ACTION_PLAYER].viewSpaces[XREye.Right][P_SPACE].offsetMatrix, fromValues$2(ipd / 2, 0, 0));
@@ -4620,7 +4533,7 @@
       }
   }
 
-  const VERSION = "2.0.1";
+  const VERSION = "2.1.1";
 
   /**
    * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -4761,39 +4674,3041 @@
   }
 
   /**
-   * Copyright (c) Meta Platforms, Inc. and affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  const DEFAULTS = {
-      ipd: 0.063,
-      fovy: Math.PI / 2,
-      headsetPosition: new Vector3(0, 1.6, 0),
-      headsetQuaternion: new Quaternion(),
-      stereoEnabled: false,
-  };
-  const Z_INDEX_SEM_CANVAS = 1;
-  const Z_INDEX_APP_CANVAS = 2;
-  const Z_INDEX_DEVUI_CANVAS = 3;
-  const Z_INDEX_DEVUI_CONTAINER = 4;
+   * @license
+   * webxr-layers-polyfill
+   * Version 1.1.0
+   * Copyright (c) 2021 Facebook, Inc. and its affiliates.
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   * 
+   * http://www.apache.org/licenses/LICENSE-2.0
+   * 
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+  */
+
   /**
-   * XRDevice is not a standard API class outlined in the WebXR Device API Specifications
-   * Instead, it serves as an user-facing interface to control the emulated XR Device
-   */
-  class XRDevice {
-      constructor(deviceConfig, deviceOptions = {}) {
-          var _a, _b, _c, _d, _e, _f;
-          this.version = VERSION;
-          const globalSpace = new GlobalSpace();
-          const viewerSpace = new XRReferenceSpace(XRReferenceSpaceType.Viewer, globalSpace);
-          const viewSpaces = {
-              [XREye.Left]: new XRSpace(viewerSpace),
-              [XREye.Right]: new XRSpace(viewerSpace),
-              [XREye.None]: new XRSpace(viewerSpace),
-          };
-          const controllerConfig = deviceConfig.controllerConfig;
-          const controllers = {};
+   * @license
+   * gl-matrix 
+   * Version 3.4.3
+   * Copyright (c) 2015-2021, Brandon Jones, Colin MacKenzie IV.
+   * 
+   * Permission is hereby granted, free of charge, to any person obtaining a copy
+   * of this software and associated documentation files (the "Software"), to deal
+   * in the Software without restriction, including without limitation the rights
+   * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+   * copies of the Software, and to permit persons to whom the Software is
+   * furnished to do so, subject to the following conditions:
+   * 
+   * The above copyright notice and this permission notice shall be included in
+   * all copies or substantial portions of the Software.
+   * 
+   * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+   * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+   * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+   * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+   * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+   * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+   * THE SOFTWARE.
+  */ 
+
+  var XRTextureType;
+  (function (XRTextureType) {
+      XRTextureType["texture"] = "texture";
+      XRTextureType["texture-array"] = "texture-array";
+  })(XRTextureType || (XRTextureType = {}));
+  var XRLayerLayout;
+  (function (XRLayerLayout) {
+      XRLayerLayout["default"] = "default";
+      XRLayerLayout["mono"] = "mono";
+      XRLayerLayout["stereo"] = "stereo";
+      XRLayerLayout["stereo-left-right"] = "stereo-left-right";
+      XRLayerLayout["stereo-top-bottom"] = "stereo-top-bottom";
+  })(XRLayerLayout || (XRLayerLayout = {}));
+
+  const isReferenceSpace = (arg) => {
+      return arg && typeof arg.getOffsetReferenceSpace === 'function';
+  };
+
+  const getGlobal = () => {
+      return typeof global !== 'undefined'
+          ? global
+          : typeof self !== 'undefined'
+              ? self
+              : typeof window !== 'undefined'
+                  ? window
+                  : {};
+  };
+
+  const getFormatsFromInternalFormat = (context, providedFormat) => {
+      switch (providedFormat) {
+          case context.RGBA8:
+          case context.RGB5_A1:
+          case context.RGBA4:
+          case context.SRGB8_ALPHA8:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGBA,
+                  type: context.UNSIGNED_BYTE,
+              };
+          case context.RGBA8_SNORM:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGBA,
+                  type: context.BYTE,
+              };
+          case context.RGB10_A2:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGBA,
+                  type: context.UNSIGNED_INT_2_10_10_10_REV,
+              };
+          case context.RGBA16F:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGBA,
+                  type: context.HALF_FLOAT,
+              };
+          case context.RGBA32F:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGBA,
+                  type: context.FLOAT,
+              };
+          case context.RGBA8UI:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGBA_INTEGER,
+                  type: context.UNSIGNED_BYTE,
+              };
+          case context.RGBA8I:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGBA_INTEGER,
+                  type: context.BYTE,
+              };
+          case context.RGBA16UI:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGBA_INTEGER,
+                  type: context.UNSIGNED_SHORT,
+              };
+          case context.RGBA16I:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGBA_INTEGER,
+                  type: context.SHORT,
+              };
+          case context.RGBA32UI:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGBA_INTEGER,
+                  type: context.UNSIGNED_INT,
+              };
+          case context.RGBA32I:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGBA_INTEGER,
+                  type: context.INT,
+              };
+          case context.RGB10_A2UI:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGBA_INTEGER,
+                  type: context.UNSIGNED_INT_2_10_10_10_REV,
+              };
+          case context.RGB8:
+          case context.RGB565:
+          case context.SRGB8:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGB,
+                  type: context.UNSIGNED_BYTE,
+              };
+          case context.RGB8_SNORM:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGB,
+                  type: context.BYTE,
+              };
+          case context.RGB16F:
+          case context.R11F_G11F_B10F:
+          case context.RGB9_E5:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGB,
+                  type: context.HALF_FLOAT,
+              };
+          case context.RGB32F:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGB,
+                  type: context.FLOAT,
+              };
+          case context.RGB8UI:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGB_INTEGER,
+                  type: context.UNSIGNED_BYTE,
+              };
+          case context.RGB8I:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGB_INTEGER,
+                  type: context.BYTE,
+              };
+          case context.RGB16UI:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGB_INTEGER,
+                  type: context.UNSIGNED_SHORT,
+              };
+          case context.RGB16I:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGB_INTEGER,
+                  type: context.SHORT,
+              };
+          case context.RGB32UI:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGB_INTEGER,
+                  type: context.UNSIGNED_INT,
+              };
+          case context.RGB32I:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.RGB_INTEGER,
+                  type: context.INT,
+              };
+          case context.DEPTH_COMPONENT16:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.DEPTH_COMPONENT,
+                  type: context.UNSIGNED_SHORT,
+              };
+          case context.DEPTH_COMPONENT24:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.DEPTH_COMPONENT,
+                  type: context.UNSIGNED_INT,
+              };
+          case context.DEPTH_COMPONENT32F:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.DEPTH_COMPONENT,
+                  type: context.FLOAT,
+              };
+          case context.DEPTH24_STENCIL8:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.DEPTH_STENCIL,
+                  type: context.UNSIGNED_INT_24_8,
+              };
+          case context.DEPTH32F_STENCIL8:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: context.DEPTH_STENCIL,
+                  type: context.FLOAT_32_UNSIGNED_INT_24_8_REV,
+              };
+          case context.DEPTH_COMPONENT:
+              return getFormatsFromInternalFormat(context, context.DEPTH_COMPONENT24);
+          case context.DEPTH_STENCIL:
+              return getFormatsFromInternalFormat(context, context.DEPTH24_STENCIL8);
+          case context.RGBA:
+          case context.RGB:
+          case context.LUMINANCE_ALPHA:
+          case context.LUMINANCE:
+          case context.ALPHA:
+              return {
+                  internalFormat: providedFormat,
+                  textureFormat: providedFormat,
+                  type: context.UNSIGNED_BYTE,
+              };
+          default:
+              throw new Error('Attempted to create polyfill with unsupported format.');
+      }
+  };
+
+  class XRCompositionLayerPolyfill {
+      constructor() {
+          this._hasRunDeferredInitialize = false;
+          this._media = null;
+      }
+      initialize(session, context) {
+          this.session = session;
+          if (context) {
+              this.context = context;
+          }
+          this.blendTextureSourceAlpha = true;
+      }
+      destroy() {
+          this._colorTextures = [];
+          this._depthStencilTextures = [];
+      }
+      addEventListener(type, listener, options) { }
+      dispatchEvent(event) {
+          return false;
+      }
+      removeEventListener(type, callback, options) { }
+      getContext() {
+          return this.context;
+      }
+      getTextureType() {
+          throw new Error('Unimplemented');
+      }
+      get colorTextures() {
+          return this._colorTextures;
+      }
+      get depthStencilTextures() {
+          return this._depthStencilTextures;
+      }
+      get colorTexturesMeta() {
+          return this._texturesMeta;
+      }
+      get media() {
+          if (!this.isMediaLayer()) {
+              console.warn('Attempted to retrieve media from a non-media layer');
+          }
+          return this._media;
+      }
+      determineLayoutAttribute(textureType, context, layout) {
+          if (!(context instanceof WebGL2RenderingContext) &&
+              textureType === XRTextureType['texture-array']) {
+              throw new TypeError();
+          }
+          if (layout === XRLayerLayout.mono) {
+              return layout;
+          }
+          if (layout === XRLayerLayout.default) {
+              if (this.session.internalViews && this.session.internalViews.length === 1) {
+                  return XRLayerLayout['mono'];
+              }
+              if (textureType === XRTextureType['texture-array']) {
+                  return layout;
+              }
+          }
+          if (layout === XRLayerLayout.default || layout === XRLayerLayout.stereo) {
+              return XRLayerLayout['stereo-left-right'];
+          }
+          return layout;
+      }
+      isMediaLayer() {
+          return this._media !== null;
+      }
+      _deferredInitialize() { }
+      initializeIfNeeded() {
+          if (!this._hasRunDeferredInitialize) {
+              this._hasRunDeferredInitialize = true;
+              this._deferredInitialize();
+          }
+      }
+      _allocateColorTexturesInternal(textureType, init) {
+          let session = this.session;
+          let views = session.internalViews;
+          if (!views || views.length === 0) {
+              console.warn("We can't allocate color textures without views");
+              return;
+          }
+          this.initializeIfNeeded();
+          if (this.layout === XRLayerLayout.mono) {
+              if (textureType === XRTextureType['texture-array']) {
+                  const newTexture = this._createNewColorTexture(init.viewPixelWidth, init.viewPixelHeight, textureType, init.colorFormat);
+                  this._texturesMeta = [newTexture];
+                  this._colorTextures = [newTexture.texture];
+                  return;
+              }
+              else {
+                  const newTexture = this._createNewColorTexture(init.viewPixelWidth, init.viewPixelHeight, textureType, init.colorFormat);
+                  this._texturesMeta = [newTexture];
+                  this._colorTextures = [newTexture.texture];
+                  return;
+              }
+          }
+          else if (this.layout === XRLayerLayout.stereo) {
+              if (textureType === XRTextureType['texture-array']) {
+                  const newTexture = this._createNewColorTexture(init.viewPixelWidth, init.viewPixelHeight, textureType, init.colorFormat, 2);
+                  this._texturesMeta = [newTexture];
+                  this._colorTextures = [newTexture.texture];
+                  return;
+              }
+              else {
+                  const texture1 = this._createNewColorTexture(init.viewPixelWidth, init.viewPixelHeight, textureType, init.colorFormat);
+                  const texture2 = this._createNewColorTexture(init.viewPixelWidth, init.viewPixelHeight, textureType, init.colorFormat);
+                  this._texturesMeta = [texture1, texture2];
+                  this._colorTextures = [texture1.texture, texture2.texture];
+                  return;
+              }
+          }
+          else if (this.layout === XRLayerLayout['stereo-left-right']) {
+              const newTexture = this._createNewColorTexture(init.viewPixelWidth * 2, init.viewPixelHeight, textureType, init.colorFormat);
+              this._texturesMeta = [newTexture];
+              this._colorTextures = [newTexture.texture];
+              return;
+          }
+          else if (this.layout === XRLayerLayout['stereo-top-bottom']) {
+              const newTexture = this._createNewColorTexture(init.viewPixelWidth, init.viewPixelHeight * 2, textureType, init.colorFormat);
+              this._texturesMeta = [newTexture];
+              this._colorTextures = [newTexture.texture];
+              return;
+          }
+      }
+      _allocateDepthStencilTexturesInternal(textureType, init) {
+          if (!init.depthFormat) {
+              this._depthStencilTextures = [];
+              return;
+          }
+          if (this._getSupportedDepthFormats().indexOf(init.depthFormat) < 0) {
+              throw new Error('Depth format provided is not supported in non-projection layers.');
+          }
+          if (init.mipLevels < 1) {
+              throw new Error('Invalid miplevel. Miplevel needs to be >= 1');
+          }
+          if (this.layout === XRLayerLayout.mono) {
+              if (textureType === XRTextureType['texture-array']) {
+                  const newTexture = this._createNewDepthStencilTexture(init.viewPixelWidth, init.viewPixelHeight, textureType, init.depthFormat);
+                  this._depthStencilTextures = [newTexture.texture];
+                  return;
+              }
+              else {
+                  const newTexture = this._createNewColorTexture(init.viewPixelWidth, init.viewPixelHeight, textureType, init.depthFormat);
+                  this._depthStencilTextures = [newTexture.texture];
+                  return;
+              }
+          }
+          else if (this.layout === XRLayerLayout.stereo) {
+              if (textureType === XRTextureType['texture-array']) {
+                  const newTexture = this._createNewDepthStencilTexture(init.viewPixelWidth, init.viewPixelHeight, textureType, init.depthFormat, 2);
+                  this._depthStencilTextures = [newTexture.texture];
+                  return;
+              }
+              else {
+                  const texture1 = this._createNewDepthStencilTexture(init.viewPixelWidth, init.viewPixelHeight, textureType, init.depthFormat);
+                  const texture2 = this._createNewDepthStencilTexture(init.viewPixelWidth, init.viewPixelHeight, textureType, init.depthFormat);
+                  this._depthStencilTextures = [texture1.texture, texture2.texture];
+                  return;
+              }
+          }
+          else if (this.layout === XRLayerLayout['stereo-left-right']) {
+              const newTexture = this._createNewDepthStencilTexture(init.viewPixelWidth * 2, init.viewPixelHeight, textureType, init.depthFormat);
+              this._depthStencilTextures = [newTexture.texture];
+              return;
+          }
+          else if (this.layout === XRLayerLayout['stereo-top-bottom']) {
+              const newTexture = this._createNewDepthStencilTexture(init.viewPixelWidth, init.viewPixelHeight * 2, textureType, init.depthFormat);
+              this._depthStencilTextures = [newTexture.texture];
+              return;
+          }
+      }
+      _createNewColorTexture(width, height, textureType, colorFormat, layers = 1) {
+          return this._createGenericPolyfillTexture(textureType, width, height, colorFormat, 0, layers);
+      }
+      _createNewDepthStencilTexture(width, height, textureType, depthFormat, layers = 1) {
+          return this._createGenericPolyfillTexture(textureType, width, height, depthFormat, 0, layers);
+      }
+      _createGenericPolyfillTexture(textureType, width, height, textureFormat, mipmapLevel = 0, numLayers = 1) {
+          if (textureType === XRTextureType['texture-array'] && numLayers <= 1) {
+              console.warn('creating a texture array with a single layer...');
+          }
+          if (textureType === XRTextureType['texture-array'] &&
+              this.context instanceof WebGLRenderingContext) {
+              throw new Error('WebGL 1 does not support texture array');
+          }
+          let texture = this.context.createTexture();
+          let textureMeta = {
+              width,
+              height,
+              layers: numLayers,
+              type: textureType,
+              textureFormat: textureFormat,
+              texture,
+          };
+          let internalFormat = textureFormat;
+          let texImageType = this.context.UNSIGNED_BYTE;
+          if (this.context instanceof WebGL2RenderingContext) {
+              const expectedFormats = getFormatsFromInternalFormat(this.context, textureFormat);
+              internalFormat = expectedFormats.internalFormat;
+              textureFormat = expectedFormats.textureFormat;
+              texImageType = expectedFormats.type;
+          }
+          else {
+              if (textureFormat === this.context.DEPTH_COMPONENT) {
+                  texImageType = this.context.UNSIGNED_INT;
+              }
+              if (textureFormat === this.context.DEPTH_STENCIL) {
+                  texImageType = this.context.UNSIGNED_INT_24_8_WEBGL;
+              }
+          }
+          if (textureType === XRTextureType['texture-array'] &&
+              this.context instanceof WebGL2RenderingContext) {
+              console.warn('texture-array layers are supported...questionably in the polyfill at the moment. Use at your own risk.');
+              const existingTextureBinding = this.context.getParameter(this.context.TEXTURE_BINDING_2D_ARRAY);
+              this.context.bindTexture(this.context.TEXTURE_2D_ARRAY, texture);
+              if (this._getSupportedDepthFormats().indexOf(textureFormat) >= 0) {
+                  this.context.texStorage3D(this.context.TEXTURE_2D_ARRAY, 1, internalFormat, width, height, numLayers);
+              }
+              else {
+                  this.context.texImage3D(this.context.TEXTURE_2D_ARRAY, 0, internalFormat, width, height, numLayers, 0, textureFormat, texImageType, null);
+              }
+              this.context.bindTexture(this.context.TEXTURE_2D_ARRAY, existingTextureBinding);
+          }
+          else {
+              const existingTextureBinding = this.context.getParameter(this.context.TEXTURE_BINDING_2D);
+              this.context.bindTexture(this.context.TEXTURE_2D, texture);
+              this.context.texImage2D(this.context.TEXTURE_2D, 0, internalFormat, width, height, 0, textureFormat, texImageType, null);
+              this.context.bindTexture(this.context.TEXTURE_2D, existingTextureBinding);
+          }
+          return textureMeta;
+      }
+      _getSupportedDepthFormats() {
+          const supportedDepthFormats = [];
+          if (this.context instanceof WebGLRenderingContext) {
+              if (!this.context.getExtension('WEBGL_depth_texture')) {
+                  return supportedDepthFormats;
+              }
+          }
+          supportedDepthFormats.push(this.context.DEPTH_COMPONENT, this.context.DEPTH_STENCIL);
+          if (this.context instanceof WebGL2RenderingContext) {
+              supportedDepthFormats.push(this.context.DEPTH_COMPONENT24, this.context.DEPTH24_STENCIL8);
+          }
+          return supportedDepthFormats;
+      }
+  }
+
+  const defaultCylinderLayerInit = {
+      colorFormat: 0x1908,
+      mipLevels: 1,
+      layout: XRLayerLayout.mono,
+      isStatic: false,
+      space: null,
+      viewPixelHeight: 0,
+      viewPixelWidth: 0,
+      textureType: XRTextureType.texture,
+      radius: 2.0,
+      centralAngle: 0.78539,
+      aspectRatio: 2.0,
+  };
+  const defaultMediaCylinderLayerInit = {
+      layout: XRLayerLayout.mono,
+      invertStereo: false,
+      space: null,
+      radius: 2.0,
+      centralAngle: 0.78539,
+  };
+  class XRCylinderLayer extends XRCompositionLayerPolyfill {
+      constructor(init, media) {
+          super();
+          this._media = media !== null && media !== void 0 ? media : null;
+          if (this.isMediaLayer()) {
+              this.init = Object.assign(Object.assign({}, defaultMediaCylinderLayerInit), init);
+          }
+          else {
+              this.init = Object.assign(Object.assign({}, defaultCylinderLayerInit), init);
+          }
+          this.radius = this.init.radius;
+          this.centralAngle = this.init.centralAngle;
+          this.aspectRatio = this.init.aspectRatio;
+          this.space = this.init.space;
+          this.layout = this.init.layout;
+          const _global = getGlobal();
+          if (this.init.transform) {
+              this.transform = new _global.XRRigidTransform(init.transform.position, init.transform.orientation);
+          }
+          else {
+              this.transform = new _global.XRRigidTransform({
+                  x: 0,
+                  y: 0,
+                  z: 0,
+                  w: 1,
+              });
+          }
+          if (!this.isMediaLayer()) {
+              this.isStatic = init.isStatic;
+          }
+      }
+      getTextureType() {
+          if (this.isMediaLayer()) {
+              return XRTextureType.texture;
+          }
+          return this.init.textureType;
+      }
+      _deferredInitialize() {
+          let layout = this.determineLayoutAttribute(this.init.textureType, this.context, this.init.layout);
+          this.layout = layout;
+          this.needsRedraw = true;
+      }
+      get colorTextures() {
+          if (this.isMediaLayer()) {
+              throw new Error('Media layers do not have associated textures');
+          }
+          if (!this._colorTextures || !this._colorTextures.length) {
+              this._allocateColorTexturesInternal(this.getTextureType(), this.init);
+          }
+          return this._colorTextures;
+      }
+      get depthStencilTextures() {
+          if (this.isMediaLayer()) {
+              throw new Error('Media layers do not have associated textures');
+          }
+          if (!this._depthStencilTextures || !this._depthStencilTextures.length) {
+              this._allocateDepthStencilTexturesInternal(this.getTextureType(), this.init);
+          }
+          return this._depthStencilTextures;
+      }
+      get colorTexturesMeta() {
+          if (this.isMediaLayer()) {
+              throw new Error('Media layers do not have associated textures');
+          }
+          if (!this._colorTextures || !this._colorTextures.length) {
+              this._allocateColorTexturesInternal(this.getTextureType(), this.init);
+          }
+          return this._texturesMeta;
+      }
+      get width() {
+          const circumference = 2 * this.radius * Math.PI;
+          const percentage = this.centralAngle / (2 * Math.PI);
+          return circumference * percentage;
+      }
+      get height() {
+          return this.width / this.aspectRatio;
+      }
+  }
+
+  const defaultEquirectLayerInit = {
+      colorFormat: 0x1908,
+      mipLevels: 1,
+      layout: XRLayerLayout.mono,
+      isStatic: false,
+      space: null,
+      viewPixelHeight: 0,
+      viewPixelWidth: 0,
+      textureType: XRTextureType.texture,
+      radius: 0,
+      centralHorizontalAngle: 6.28318,
+      upperVerticalAngle: 1.570795,
+      lowerVerticalAngle: -1.570795,
+  };
+  const defaultMediaEquirectLayerInit = {
+      space: null,
+      layout: XRLayerLayout.mono,
+      invertStereo: false,
+      radius: 0,
+      centralHorizontalAngle: 6.28318,
+      upperVerticalAngle: 1.570795,
+      lowerVerticalAngle: -1.570795,
+  };
+  class XREquirectLayer extends XRCompositionLayerPolyfill {
+      constructor(init, media) {
+          super();
+          this._media = media !== null && media !== void 0 ? media : null;
+          if (this.isMediaLayer()) {
+              this.init = Object.assign(Object.assign({}, defaultMediaEquirectLayerInit), init);
+          }
+          else {
+              this.init = Object.assign(Object.assign({}, defaultEquirectLayerInit), init);
+          }
+          if (!isReferenceSpace(this.init.space)) {
+              throw new TypeError("Equirect layer's space needs to be an XRReferenceSpace");
+          }
+          this.radius = this.init.radius;
+          this.centralHorizontalAngle = this.init.centralHorizontalAngle;
+          this.upperVerticalAngle = this.init.upperVerticalAngle;
+          this.lowerVerticalAngle = this.init.lowerVerticalAngle;
+          this.space = this.init.space;
+          this.layout = this.init.layout;
+          const _global = getGlobal();
+          if (init.transform) {
+              this.transform = new _global.XRRigidTransform(init.transform.position, init.transform.orientation);
+          }
+          else {
+              this.transform = new _global.XRRigidTransform({
+                  x: 0,
+                  y: 0,
+                  z: 0,
+                  w: 1,
+              });
+          }
+          if (!this.isMediaLayer()) {
+              this.isStatic = init.isStatic;
+          }
+      }
+      getTextureType() {
+          if (this.isMediaLayer()) {
+              return XRTextureType.texture;
+          }
+          return this.init.textureType;
+      }
+      _deferredInitialize() {
+          let layout = this.determineLayoutAttribute(this.init.textureType, this.context, this.init.layout);
+          this.layout = layout;
+          this.needsRedraw = true;
+      }
+      get colorTextures() {
+          if (this.isMediaLayer()) {
+              throw new Error('Media layers do not have associated textures');
+          }
+          if (!this._colorTextures || !this._colorTextures.length) {
+              this._allocateColorTexturesInternal(this.getTextureType(), this.init);
+          }
+          return this._colorTextures;
+      }
+      get depthStencilTextures() {
+          if (this.isMediaLayer()) {
+              throw new Error('Media layers do not have associated textures');
+          }
+          if (!this._depthStencilTextures || !this._depthStencilTextures.length) {
+              this._allocateDepthStencilTexturesInternal(this.getTextureType(), this.init);
+          }
+          return this._depthStencilTextures;
+      }
+      get colorTexturesMeta() {
+          if (this.isMediaLayer()) {
+              throw new Error('Media layers do not have associated textures');
+          }
+          if (!this._colorTextures || !this._colorTextures.length) {
+              this._allocateColorTexturesInternal(this.getTextureType(), this.init);
+          }
+          return this._texturesMeta;
+      }
+  }
+
+  const defaultQuadLayerInit = {
+      colorFormat: 0x1908,
+      mipLevels: 1,
+      layout: XRLayerLayout.mono,
+      isStatic: false,
+      space: null,
+      viewPixelHeight: 0,
+      viewPixelWidth: 0,
+      textureType: XRTextureType.texture,
+      width: 1.0,
+      height: 1.0,
+  };
+  const defaultMediaQuadLayerInit = {
+      space: null,
+      layout: XRLayerLayout.mono,
+      invertStereo: false,
+  };
+  class XRQuadLayer extends XRCompositionLayerPolyfill {
+      constructor(init, media) {
+          super();
+          this._media = media !== null && media !== void 0 ? media : null;
+          if (this.isMediaLayer()) {
+              this.init = Object.assign(Object.assign({}, defaultMediaQuadLayerInit), init);
+          }
+          else {
+              this.init = Object.assign(Object.assign({}, defaultQuadLayerInit), init);
+          }
+          this.width = this.init.width;
+          this.height = this.init.height;
+          this.space = this.init.space;
+          this.layout = this.init.layout;
+          const _global = getGlobal();
+          if (this.init.transform) {
+              this.transform = new _global.XRRigidTransform(init.transform.position, init.transform.orientation);
+          }
+          else {
+              this.transform = new _global.XRRigidTransform({
+                  x: 0,
+                  y: 0,
+                  z: 0,
+                  w: 1,
+              });
+          }
+          if (!this.isMediaLayer()) {
+              this.isStatic = init.isStatic;
+          }
+      }
+      getTextureType() {
+          if (this.isMediaLayer()) {
+              return XRTextureType.texture;
+          }
+          return this.init.textureType;
+      }
+      _deferredInitialize() {
+          let layout = this.determineLayoutAttribute(this.init.textureType, this.context, this.init.layout);
+          this.layout = layout;
+          this.needsRedraw = true;
+      }
+      get colorTextures() {
+          if (this.isMediaLayer()) {
+              throw new Error('Media layers do not have associated textures');
+          }
+          if (!this._colorTextures || !this._colorTextures.length) {
+              this._allocateColorTexturesInternal(this.getTextureType(), this.init);
+          }
+          return this._colorTextures;
+      }
+      get depthStencilTextures() {
+          if (this.isMediaLayer()) {
+              throw new Error('Media layers do not have associated textures');
+          }
+          if (!this._depthStencilTextures || !this._depthStencilTextures.length) {
+              this._allocateDepthStencilTexturesInternal(this.getTextureType(), this.init);
+          }
+          return this._depthStencilTextures;
+      }
+      get colorTexturesMeta() {
+          if (this.isMediaLayer()) {
+              throw new Error('Media layers do not have associated textures');
+          }
+          if (!this._colorTextures || !this._colorTextures.length) {
+              this._allocateColorTexturesInternal(this.getTextureType(), this.init);
+          }
+          return this._texturesMeta;
+      }
+  }
+
+  class XRMediaBindingPolyfill {
+      constructor(session) {
+          this.session = session;
+          if (this.session.ended) {
+              throw new Error('Session has ended');
+          }
+      }
+      createQuadLayer(video, init) {
+          if (this.session.ended) {
+              throw new Error('Session has ended');
+          }
+          if (init.layout === XRLayerLayout.default) {
+              throw new TypeError('Media Quad layer cannot be created with layout of default');
+          }
+          let aspectRatio = this.calculateAspectRatio(video, init.layout);
+          if (init.width === undefined && init.height === undefined) {
+              init.width = 1;
+          }
+          if (init.height === undefined) {
+              init.height = init.width / aspectRatio;
+          }
+          if (init.width === undefined) {
+              init.width = init.height / aspectRatio;
+          }
+          let layer = new XRQuadLayer(init, video);
+          layer.needsRedraw = false;
+          layer.initialize(this.session);
+          return layer;
+      }
+      createCylinderLayer(video, init) {
+          if (this.session.ended) {
+              throw new Error('Session has ended');
+          }
+          if (init.layout === XRLayerLayout.default) {
+              throw new TypeError('Media Cylinder layer cannot be created with layout of default');
+          }
+          let aspectRatio = this.calculateAspectRatio(video, init.layout);
+          if (init.aspectRatio === undefined) {
+              init.aspectRatio = aspectRatio;
+          }
+          let layer = new XRCylinderLayer(init, video);
+          layer.needsRedraw = false;
+          layer.initialize(this.session);
+          return layer;
+      }
+      createEquirectLayer(video, init) {
+          if (this.session.ended) {
+              throw new Error('Session has ended');
+          }
+          if (init.layout === XRLayerLayout.default) {
+              throw new TypeError('Media Equirect layer cannot be created with layout of default');
+          }
+          if (!isReferenceSpace(init.space)) {
+              throw new Error("Media Equirect layer's space must be of type XRReferenceSpace");
+          }
+          let layer = new XREquirectLayer(init, video);
+          layer.needsRedraw = false;
+          layer.initialize(this.session);
+          return layer;
+      }
+      calculateAspectRatio(video, layout) {
+          let width = video.videoWidth;
+          let height = video.videoHeight;
+          if (layout === XRLayerLayout['stereo-left-right']) {
+              width /= 2;
+          }
+          if (layout === XRLayerLayout['stereo-top-bottom']) {
+              height /= 2;
+          }
+          return width / height;
+      }
+  }
+
+  const defaultXRProjectionLayerInit = {
+      textureType: XRTextureType.texture,
+      colorFormat: 0x1908,
+      depthFormat: 0x1902,
+      scaleFactor: 1.0,
+  };
+  class XRProjectionLayer extends XRCompositionLayerPolyfill {
+      constructor(init = defaultXRProjectionLayerInit) {
+          super();
+          this.init = Object.assign(Object.assign({}, defaultXRProjectionLayerInit), init);
+      }
+      initialize(session, context) {
+          super.initialize(session, context);
+          this.initializeIfNeeded();
+          let baseLayer = session.getBaseLayer();
+          this.textureWidth = baseLayer.framebufferWidth * this.init.scaleFactor;
+          this.textureHeight = baseLayer.framebufferHeight * this.init.scaleFactor;
+      }
+      _allocateProjectionColorTextures() {
+          let array = [];
+          let polyFillArray = [];
+          const createTextureArray = () => {
+              array = [];
+              for (let tex of polyFillArray) {
+                  array.push(tex.texture);
+              }
+          };
+          let session = this.session;
+          let views = session.internalViews;
+          if (!views || views.length === 0) {
+              console.warn("We can't allocate color textures without views");
+              return;
+          }
+          let baseLayer = session.getBaseLayer();
+          let numViews = views.length;
+          let width = baseLayer.framebufferWidth * this.init.scaleFactor / views.length;
+          let height = baseLayer.framebufferHeight * this.init.scaleFactor;
+          if (this.layout === XRLayerLayout.mono || this.layout === XRLayerLayout.default) {
+              if (this.init.textureType === XRTextureType['texture-array']) {
+                  let texture = this._createNewColorTexture(width, height, XRTextureType['texture-array'], this.init.colorFormat, numViews);
+                  polyFillArray = [texture];
+              }
+              else {
+                  for (let view of views) {
+                      let texture = this._createNewColorTexture(width, height, XRTextureType.texture, this.init.colorFormat);
+                      polyFillArray.push(texture);
+                  }
+              }
+              createTextureArray();
+              this._colorTexturesMeta = polyFillArray;
+              this._colorTextures = array;
+              return;
+          }
+          if (this.layout === XRLayerLayout['stereo-left-right']) {
+              let texture = this._createNewColorTexture(width * numViews, height, this.init.textureType, this.init.colorFormat);
+              polyFillArray = [texture];
+          }
+          else if (this.layout === XRLayerLayout['stereo-top-bottom']) {
+              let texture = this._createNewColorTexture(width, height * numViews, this.init.textureType, this.init.colorFormat);
+              polyFillArray = [texture];
+          }
+          createTextureArray();
+          this._colorTexturesMeta = polyFillArray;
+          this._colorTextures = array;
+          return;
+      }
+      _allocateProjectionDepthStencilTextures() {
+          let session = this.session;
+          let views = session.internalViews;
+          if (!views || views.length === 0) {
+              return;
+          }
+          if (this.init.depthFormat === 0) {
+              this._depthStencilTextures = [];
+              return;
+          }
+          if (this.context instanceof WebGLRenderingContext) {
+              let depthExtension = this.context.getExtension('WEBGL_depth_texture');
+              if (!depthExtension) {
+                  this._depthStencilTextures = [];
+                  return;
+              }
+          }
+          let array = [];
+          let polyFillArray = [];
+          const createTextureArray = () => {
+              array = [];
+              for (let tex of polyFillArray) {
+                  array.push(tex.texture);
+              }
+          };
+          this.initializeIfNeeded();
+          let baseLayer = session.getBaseLayer();
+          let numViews = views.length;
+          let width = baseLayer.framebufferWidth * this.init.scaleFactor / views.length;
+          let height = baseLayer.framebufferHeight * this.init.scaleFactor;
+          if (this.layout === XRLayerLayout.mono || this.layout === XRLayerLayout.default) {
+              if (this.init.textureType === XRTextureType['texture-array']) {
+                  let texture = this._createNewDepthStencilTexture(width, height, this.init.textureType, this.init.depthFormat, numViews);
+                  polyFillArray = [texture];
+              }
+              else {
+                  for (let view of views) {
+                      let texture = this._createNewDepthStencilTexture(width, height, this.init.textureType, this.init.depthFormat);
+                      polyFillArray.push(texture);
+                  }
+              }
+              createTextureArray();
+              this._depthStencilTextures = array;
+              return;
+          }
+          if (this.layout === XRLayerLayout['stereo-left-right']) {
+              let texture = this._createNewDepthStencilTexture(width * numViews, height, this.init.textureType, this.init.depthFormat);
+              polyFillArray = [texture];
+          }
+          else if (this.layout === XRLayerLayout['stereo-top-bottom']) {
+              let texture = this._createNewDepthStencilTexture(width, height * numViews, this.init.textureType, this.init.depthFormat);
+              polyFillArray = [texture];
+          }
+          createTextureArray();
+          this._depthStencilTextures = array;
+          return;
+      }
+      get colorTextures() {
+          if (!this._colorTextures || !this._colorTextures.length) {
+              this._allocateProjectionColorTextures();
+          }
+          return this._colorTextures;
+      }
+      get depthStencilTextures() {
+          if (this._depthStencilTextures === undefined) {
+              this._allocateProjectionDepthStencilTextures();
+          }
+          return this._depthStencilTextures || [];
+      }
+      get colorTexturesMeta() {
+          if (!this._colorTextures || !this._colorTextures.length) {
+              this._allocateProjectionColorTextures();
+          }
+          return this._colorTexturesMeta;
+      }
+      getTextureType() {
+          return this.init.textureType;
+      }
+      _deferredInitialize() {
+          this.isStatic = false;
+          this.ignoreDepthValues = false;
+          this.fixedFoveation = 0;
+          let layout = this.determineLayoutAttribute(this.init.textureType, this.context, XRLayerLayout.default);
+          this.layout = layout;
+          this.needsRedraw = true;
+          let maxScaleFactor = this.determineMaximumScaleFactor();
+          let scaleFactor = Math.min(this.init.scaleFactor, maxScaleFactor);
+          this.init.scaleFactor = scaleFactor;
+      }
+      determineMaximumScaleFactor() {
+          let baseLayer = this.session.getBaseLayer(this.context);
+          let largestWidth = baseLayer.framebufferWidth;
+          let largestHeight = baseLayer.framebufferHeight;
+          if (this.layout === XRLayerLayout['stereo-left-right']) {
+              largestWidth *= 2;
+          }
+          if (this.layout === XRLayerLayout['stereo-top-bottom']) {
+              largestHeight *= 2;
+          }
+          let largestViewDimension = Math.max(largestWidth, largestHeight);
+          let largestTextureDimension = this.context.getParameter(this.context.MAX_TEXTURE_SIZE);
+          return largestTextureDimension / largestViewDimension;
+      }
+  }
+
+  const initializeViewport = (viewport, texture, layout, offset, numViews) => {
+      let x = 0;
+      let y = 0;
+      let width = texture.width;
+      let height = texture.height;
+      if (layout === XRLayerLayout['stereo-left-right']) {
+          x = (texture.width * offset) / numViews;
+          width = texture.width / numViews;
+      }
+      else if (layout === XRLayerLayout['stereo-top-bottom']) {
+          y = (texture.height * offset) / numViews;
+          height = texture.height / numViews;
+      }
+      viewport.x = x;
+      viewport.y = y;
+      viewport.width = width;
+      viewport.height = height;
+  };
+
+  const compileShader = (gl, shaderSource, shaderType) => {
+      var shader = gl.createShader(shaderType);
+      gl.shaderSource(shader, shaderSource);
+      gl.compileShader(shader);
+      var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+      if (!success) {
+          throw 'could not compile shader:' + gl.getShaderInfoLog(shader);
+      }
+      return shader;
+  };
+  const createProgram = (gl, vertexShader, fragmentShader) => {
+      const program = gl.createProgram();
+      const compiledVS = compileShader(gl, vertexShader, gl.VERTEX_SHADER);
+      const compiledFS = compileShader(gl, fragmentShader, gl.FRAGMENT_SHADER);
+      gl.attachShader(program, compiledVS);
+      gl.attachShader(program, compiledFS);
+      gl.deleteShader(compiledVS);
+      gl.deleteShader(compiledFS);
+      gl.linkProgram(program);
+      var success = gl.getProgramParameter(program, gl.LINK_STATUS);
+      if (!success) {
+          throw 'program failed to link:' + gl.getProgramInfoLog(program);
+      }
+      return program;
+  };
+  const setRectangle = (gl, x, y, width, height) => {
+      var x1 = x;
+      var x2 = x + width;
+      var y1 = y;
+      var y2 = y + height;
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([x1, y1, x2, y1, x1, y2, x1, y2, x2, y1, x2, y2]), gl.DYNAMIC_DRAW);
+  };
+  const applyVAOExtension = (gl) => {
+      if (gl instanceof WebGL2RenderingContext) {
+          return gl;
+      }
+      const ext = gl.getExtension('OES_vertex_array_object');
+      if (!ext) {
+          throw new Error('Cannot use VAOs.');
+      }
+      return {
+          VERTEX_ARRAY_BINDING: ext.VERTEX_ARRAY_BINDING_OES,
+          bindVertexArray: ext.bindVertexArrayOES.bind(ext),
+          createVertexArray: ext.createVertexArrayOES.bind(ext),
+          deleteVertexArray: ext.deleteVertexArrayOES.bind(ext),
+          isVertexArray: ext.isVertexArrayOES.bind(ext),
+      };
+  };
+
+  const glsl = (x) => x;
+  const vertexShader = glsl `
+attribute vec2 a_position;
+attribute vec2 a_texCoord;
+
+varying vec2 v_texCoord;
+
+void main() {
+   // convert the rectangle from pixels to 0.0 to 1.0
+   vec2 zeroToOne = a_position;
+
+   // convert from 0->1 to 0->2
+   vec2 zeroToTwo = zeroToOne * 2.0;
+
+   // convert from 0->2 to -1->+1 (clipspace)
+   vec2 clipSpace = zeroToTwo - 1.0;
+
+   gl_Position = vec4(clipSpace * vec2(1, 1), 0, 1);
+
+   // pass the texCoord to the fragment shader
+   // The GPU will interpolate this value between points.
+   v_texCoord = a_texCoord;
+}
+`;
+  const fragmentShader = glsl `
+precision mediump float;
+
+// our texture
+uniform sampler2D u_image;
+
+// the texCoords passed in from the vertex shader.
+varying vec2 v_texCoord;
+
+void main() {
+   	vec4 tex = texture2D(u_image, v_texCoord);
+	gl_FragColor = vec4(tex.rgb, tex.a);
+}
+`;
+  class ProjectionRenderer {
+      constructor(layer, context) {
+          this.gl = context;
+          this.layer = layer;
+          this.program = createProgram(this.gl, vertexShader, fragmentShader);
+          this.programInfo = {
+              attribLocations: {
+                  a_position: this.gl.getAttribLocation(this.program, 'a_position'),
+                  a_texCoord: this.gl.getAttribLocation(this.program, 'a_texCoord'),
+              },
+          };
+          this._createVAOs();
+      }
+      render(session) {
+          let gl = this.gl;
+          let baseLayer = session.getBaseLayer();
+          gl.viewport(0, 0, baseLayer.framebufferWidth, baseLayer.framebufferHeight);
+          const textureType = this.layer.getTextureType();
+          const existingTextureBinding = gl.getParameter(gl.TEXTURE_BINDING_2D);
+          const existingActiveTexture = gl.getParameter(gl.ACTIVE_TEXTURE);
+          if (textureType === XRTextureType.texture) {
+              gl.activeTexture(gl.TEXTURE0);
+              gl.bindTexture(gl.TEXTURE_2D, this.layer.colorTextures[0]);
+              gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+              gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+              gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+              gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+          }
+          else {
+              throw new Error(`Created a texture projection renderer instead of a texture-array projection renderer for a texture-array layer.
+This is probably an error with the polyfill itself; please file an issue on Github if you run into this.`);
+          }
+          for (let view of session.internalViews) {
+              let viewport = baseLayer.getViewport(view);
+              gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
+              if (this._shouldUseStereoTexturePoints()) {
+                  this._renderInternalStereo(view);
+              }
+              else {
+                  this._renderInternal();
+              }
+          }
+          gl.activeTexture(existingActiveTexture);
+          gl.bindTexture(gl.TEXTURE_2D, existingTextureBinding);
+      }
+      _renderInternal() {
+          let gl = this.gl;
+          const existingProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+          gl.useProgram(this.program);
+          this.vaoGl.bindVertexArray(this.vao);
+          var primitiveType = gl.TRIANGLES;
+          var offset = 0;
+          var count = 6;
+          gl.drawArrays(primitiveType, offset, count);
+          this.vaoGl.bindVertexArray(null);
+          gl.useProgram(existingProgram);
+      }
+      _renderInternalStereo(view) {
+          if (view.eye === 'none') {
+              return this._renderInternal();
+          }
+          let gl = this.gl;
+          this.vaoGl.bindVertexArray(this.vao);
+          const existingProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+          gl.useProgram(this.program);
+          this._setStereoTextureBuffer(view.eye === 'right' ? 1 : 0);
+          var primitiveType = gl.TRIANGLES;
+          var offset = 0;
+          var count = 6;
+          gl.drawArrays(primitiveType, offset, count);
+          this.vaoGl.bindVertexArray(null);
+          gl.useProgram(existingProgram);
+      }
+      _createVAOs() {
+          this._createTextureUVs();
+          let gl = this.gl;
+          this.vaoGl = applyVAOExtension(gl);
+          let positionBuffer = gl.createBuffer();
+          this.vao = this.vaoGl.createVertexArray();
+          this.vaoGl.bindVertexArray(this.vao);
+          gl.enableVertexAttribArray(this.programInfo.attribLocations.a_position);
+          gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+          setRectangle(gl, 0, 0, 1.0, 1.0);
+          let size = 2;
+          let type = gl.FLOAT;
+          let normalize = false;
+          let stride = 0;
+          let offset = 0;
+          gl.vertexAttribPointer(this.programInfo.attribLocations.a_position, size, type, normalize, stride, offset);
+          this.texcoordBuffer = gl.createBuffer();
+          gl.enableVertexAttribArray(this.programInfo.attribLocations.a_texCoord);
+          gl.bindBuffer(gl.ARRAY_BUFFER, this.texcoordBuffer);
+          gl.bufferData(gl.ARRAY_BUFFER, this.texturePoints, gl.DYNAMIC_DRAW);
+          gl.vertexAttribPointer(this.programInfo.attribLocations.a_texCoord, size, type, normalize, stride, offset);
+          this.vaoGl.bindVertexArray(null);
+          gl.bindBuffer(gl.ARRAY_BUFFER, null);
+      }
+      _setStereoTextureBuffer(index) {
+          let gl = this.gl;
+          gl.enableVertexAttribArray(this.programInfo.attribLocations.a_texCoord);
+          gl.bindBuffer(gl.ARRAY_BUFFER, this.texcoordBuffer);
+          gl.bufferData(gl.ARRAY_BUFFER, this.stereoTexturePoints[index], gl.STATIC_DRAW);
+          var size = 2;
+          var type = gl.FLOAT;
+          var normalize = false;
+          var stride = 0;
+          var offset = 0;
+          gl.vertexAttribPointer(this.programInfo.attribLocations.a_texCoord, size, type, normalize, stride, offset);
+          gl.bindBuffer(gl.ARRAY_BUFFER, null);
+      }
+      _createTextureUVs() {
+          this.texturePoints = new Float32Array([
+              0.0,
+              0.0,
+              1.0,
+              0.0,
+              0.0,
+              1.0,
+              0.0,
+              1.0,
+              1.0,
+              0.0,
+              1.0,
+              1.0,
+          ]);
+          const viewport = {
+              x: 0,
+              y: 0,
+              width: 1,
+              height: 1,
+          };
+          if (this._shouldUseStereoTexturePoints()) {
+              this.stereoTexturePoints = [];
+              initializeViewport(viewport, this.layer.colorTexturesMeta[0], this.layer.layout, 0, 2);
+              this.stereoTexturePoints[0] = this._offsetTextureUVsByRect(this.layer.colorTexturesMeta[0], this.texturePoints, viewport);
+              initializeViewport(viewport, this.layer.colorTexturesMeta[0], this.layer.layout, 1, 2);
+              this.stereoTexturePoints[1] = this._offsetTextureUVsByRect(this.layer.colorTexturesMeta[0], this.texturePoints, viewport);
+          }
+      }
+      _offsetTextureUVsByRect(texture, inArray, textureRect) {
+          textureRect = textureRect !== null && textureRect !== void 0 ? textureRect : {
+              x: 0,
+              y: 0,
+              width: texture.width,
+              height: texture.height,
+          };
+          const uX = textureRect.x / texture.width;
+          const vY = textureRect.y / texture.height;
+          const uW = textureRect.width / texture.width;
+          const vH = textureRect.height / texture.height;
+          const outArray = [];
+          for (let i = 0; i < inArray.length; i += 2) {
+              let u = inArray[i];
+              let v = inArray[i + 1];
+              let newU = u * uW + uX;
+              let newV = v * vH + vY;
+              outArray[i] = newU;
+              outArray[i + 1] = newV;
+          }
+          return new Float32Array(outArray);
+      }
+      _shouldUseStereoTexturePoints() {
+          return (this.layer.layout === XRLayerLayout['stereo-left-right'] ||
+              this.layer.layout === XRLayerLayout['stereo-top-bottom']);
+      }
+  }
+  const texArrayVertexShader = glsl `#version 300 es
+
+in vec2 a_position;
+in vec2 a_texCoord;
+
+out vec2 v_texCoord;
+
+void main() {
+	// convert the rectangle from pixels to 0.0 to 1.0
+	vec2 zeroToOne = a_position;
+
+	// convert from 0->1 to 0->2
+	vec2 zeroToTwo = zeroToOne * 2.0;
+
+	// convert from 0->2 to -1->+1 (clipspace)
+	vec2 clipSpace = zeroToTwo - 1.0;
+
+	gl_Position = vec4(clipSpace * vec2(1, 1), 0, 1);
+
+	// pass the texCoord to the fragment shader
+	// The GPU will interpolate this value between points.
+	v_texCoord = a_texCoord;
+}
+`;
+  const texArrayFragmentShader = glsl `#version 300 es
+precision mediump float;
+precision mediump int;
+precision mediump sampler2DArray;
+
+uniform sampler2DArray u_image;
+uniform int u_layer;
+
+in vec2 v_texCoord;
+
+out vec4 fragColor;
+
+void main() {
+	vec4 tex = texture(u_image, vec3(v_texCoord.x, v_texCoord.y, u_layer));
+ 	fragColor = vec4(tex.rgb, tex.a);
+}
+
+`;
+  class ProjectionTextureArrayRenderer extends ProjectionRenderer {
+      constructor(layer, context) {
+          super(layer, context);
+          this.program = createProgram(this.gl, texArrayVertexShader, texArrayFragmentShader);
+          this._createVAOs();
+          this.u_layerInfo = this.gl.getUniformLocation(this.program, 'u_layer');
+      }
+      render(session) {
+          let gl = this.gl;
+          let textureType = this.layer.getTextureType();
+          if (textureType === XRTextureType.texture) {
+              throw new Error('Using texture array projection renderer on a layer without texture array.');
+          }
+          let baseLayer = session.getBaseLayer();
+          const existingTextureBinding = gl.getParameter(gl.TEXTURE_BINDING_2D_ARRAY);
+          gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.layer.colorTextures[0]);
+          gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          for (let view of session.internalViews) {
+              let index = session.getViewIndex(view);
+              let viewport = baseLayer.getViewport(view);
+              gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
+              this._renderInternal(index);
+          }
+          gl.bindTexture(gl.TEXTURE_2D_ARRAY, existingTextureBinding);
+      }
+      _renderInternal(layer = 0) {
+          let gl = this.gl;
+          const existingProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+          gl.useProgram(this.program);
+          gl.bindVertexArray(this.vao);
+          gl.uniform1i(this.u_layerInfo, layer);
+          var primitiveType = gl.TRIANGLES;
+          var offset = 0;
+          var count = 6;
+          gl.drawArrays(primitiveType, offset, count);
+          gl.bindVertexArray(null);
+          gl.useProgram(existingProgram);
+      }
+  }
+  const createProjectionRenderer = (layer, context) => {
+      if (layer.getTextureType() === XRTextureType['texture-array']) {
+          if (context instanceof WebGL2RenderingContext) {
+              return new ProjectionTextureArrayRenderer(layer, context);
+          }
+      }
+      return new ProjectionRenderer(layer, context);
+  };
+
+  var ARRAY_TYPE = typeof Float32Array !== 'undefined' ? Float32Array : Array;
+  if (!Math.hypot) Math.hypot = function () {
+    var y = 0,
+        i = arguments.length;
+    while (i--) {
+      y += arguments[i] * arguments[i];
+    }
+    return Math.sqrt(y);
+  };
+
+  function create() {
+    var out = new ARRAY_TYPE(16);
+    if (ARRAY_TYPE != Float32Array) {
+      out[1] = 0;
+      out[2] = 0;
+      out[3] = 0;
+      out[4] = 0;
+      out[6] = 0;
+      out[7] = 0;
+      out[8] = 0;
+      out[9] = 0;
+      out[11] = 0;
+      out[12] = 0;
+      out[13] = 0;
+      out[14] = 0;
+    }
+    out[0] = 1;
+    out[5] = 1;
+    out[10] = 1;
+    out[15] = 1;
+    return out;
+  }
+  function multiply(out, a, b) {
+    var a00 = a[0],
+        a01 = a[1],
+        a02 = a[2],
+        a03 = a[3];
+    var a10 = a[4],
+        a11 = a[5],
+        a12 = a[6],
+        a13 = a[7];
+    var a20 = a[8],
+        a21 = a[9],
+        a22 = a[10],
+        a23 = a[11];
+    var a30 = a[12],
+        a31 = a[13],
+        a32 = a[14],
+        a33 = a[15];
+    var b0 = b[0],
+        b1 = b[1],
+        b2 = b[2],
+        b3 = b[3];
+    out[0] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
+    out[1] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
+    out[2] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
+    out[3] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
+    b0 = b[4];
+    b1 = b[5];
+    b2 = b[6];
+    b3 = b[7];
+    out[4] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
+    out[5] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
+    out[6] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
+    out[7] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
+    b0 = b[8];
+    b1 = b[9];
+    b2 = b[10];
+    b3 = b[11];
+    out[8] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
+    out[9] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
+    out[10] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
+    out[11] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
+    b0 = b[12];
+    b1 = b[13];
+    b2 = b[14];
+    b3 = b[15];
+    out[12] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
+    out[13] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
+    out[14] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
+    out[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
+    return out;
+  }
+  function fromQuat(out, q) {
+    var x = q[0],
+        y = q[1],
+        z = q[2],
+        w = q[3];
+    var x2 = x + x;
+    var y2 = y + y;
+    var z2 = z + z;
+    var xx = x * x2;
+    var yx = y * x2;
+    var yy = y * y2;
+    var zx = z * x2;
+    var zy = z * y2;
+    var zz = z * z2;
+    var wx = w * x2;
+    var wy = w * y2;
+    var wz = w * z2;
+    out[0] = 1 - yy - zz;
+    out[1] = yx + wz;
+    out[2] = zx - wy;
+    out[3] = 0;
+    out[4] = yx - wz;
+    out[5] = 1 - xx - zz;
+    out[6] = zy + wx;
+    out[7] = 0;
+    out[8] = zx + wy;
+    out[9] = zy - wx;
+    out[10] = 1 - xx - yy;
+    out[11] = 0;
+    out[12] = 0;
+    out[13] = 0;
+    out[14] = 0;
+    out[15] = 1;
+    return out;
+  }
+
+  function create$1() {
+    var out = new ARRAY_TYPE(2);
+    if (ARRAY_TYPE != Float32Array) {
+      out[0] = 0;
+      out[1] = 0;
+    }
+    return out;
+  }
+  (function () {
+    var vec = create$1();
+    return function (a, stride, offset, count, fn, arg) {
+      var i, l;
+      if (!stride) {
+        stride = 2;
+      }
+      if (!offset) {
+        offset = 0;
+      }
+      if (count) {
+        l = Math.min(count * stride + offset, a.length);
+      } else {
+        l = a.length;
+      }
+      for (i = offset; i < l; i += stride) {
+        vec[0] = a[i];
+        vec[1] = a[i + 1];
+        fn(vec, vec, arg);
+        a[i] = vec[0];
+        a[i + 1] = vec[1];
+      }
+      return a;
+    };
+  })();
+
+  const glsl$1 = (x) => x;
+  const vertexShader$1 = glsl$1 `
+attribute vec4 a_position;
+attribute vec2 a_texCoord;
+
+uniform mat4 u_matrix;
+uniform mat4 u_projectionMatrix;
+
+varying vec2 v_texCoord;
+
+void main() {
+  // Multiply the position by the matrix.
+  gl_Position = u_projectionMatrix * u_matrix * a_position;
+
+   // pass the texCoord to the fragment shader
+   // The GPU will interpolate this value between points.
+   v_texCoord = a_texCoord;
+}
+`;
+  const fragmentShader$1 = glsl$1 `
+precision mediump float;
+
+// our texture
+uniform sampler2D u_image;
+
+// the texCoords passed in from the vertex shader.
+varying vec2 v_texCoord;
+
+void main() {
+   	vec4 tex = texture2D(u_image, v_texCoord);
+	gl_FragColor = vec4(tex.rgb, tex.a);
+	// gl_FragColor = vec4(1.0, 0, 0, 1.0);
+}
+`;
+  const texArrayVertexShader$1 = glsl$1 `#version 300 es
+
+in vec4 a_position;
+in vec2 a_texCoord;
+
+uniform mat4 u_matrix;
+uniform mat4 u_projectionMatrix;
+
+out vec2 v_texCoord;
+
+void main() {
+	// Multiply the position by the matrix.
+    gl_Position = u_projectionMatrix * u_matrix * a_position;
+
+	// pass the texCoord to the fragment shader
+	// The GPU will interpolate this value between points.
+	v_texCoord = a_texCoord;
+}
+`;
+  const texArrayFragmentShader$1 = glsl$1 `#version 300 es
+precision mediump float;
+precision mediump int;
+precision mediump sampler2DArray;
+
+uniform sampler2DArray u_image;
+uniform int u_layer;
+
+in vec2 v_texCoord;
+
+out vec4 fragColor;
+
+void main() {
+	vec4 tex = texture(u_image, vec3(v_texCoord.x, v_texCoord.y, u_layer));
+ 	fragColor = vec4(tex.rgb, tex.a);
+}
+
+`;
+  class CompositionLayerRenderer {
+      constructor(layer, context) {
+          this.usesTextureArrayShaders = false;
+          this.savedVaoState = { vao: null, arrayBuffer: null };
+          this.hasMipmap = false;
+          this.gl = context;
+          this.layer = layer;
+          let gl = this.gl;
+          this.transformMatrix = create();
+          if (context instanceof WebGL2RenderingContext &&
+              this.layer.getTextureType() === XRTextureType['texture-array']) {
+              this.usesTextureArrayShaders = true;
+          }
+          if (this.usesTextureArrayShaders) {
+              this.program = createProgram(gl, texArrayVertexShader$1, texArrayFragmentShader$1);
+          }
+          else {
+              this.program = createProgram(gl, vertexShader$1, fragmentShader$1);
+          }
+          this.programInfo = {
+              attribLocations: {
+                  a_position: gl.getAttribLocation(this.program, 'a_position'),
+                  a_texCoord: gl.getAttribLocation(this.program, 'a_texCoord'),
+              },
+              uniformLocations: {
+                  u_matrix: gl.getUniformLocation(this.program, 'u_matrix'),
+                  u_projectionMatrix: gl.getUniformLocation(this.program, 'u_projectionMatrix'),
+              },
+          };
+          if (this.usesTextureArrayShaders) {
+              this.programInfo.uniformLocations.u_layer = gl.getUniformLocation(this.program, 'u_layer');
+          }
+      }
+      saveVaoState() {
+          this.savedVaoState.vao = this.gl.getParameter(this.vaoGl.VERTEX_ARRAY_BINDING);
+          this.savedVaoState.arrayBuffer = this.gl.getParameter(this.gl.ARRAY_BUFFER_BINDING);
+      }
+      restoreVaoState() {
+          this.vaoGl.bindVertexArray(this.savedVaoState.vao);
+          this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.savedVaoState.arrayBuffer);
+          this.savedVaoState.vao = this.savedVaoState.arrayBuffer = null;
+      }
+      initialize() {
+          let gl = this.gl;
+          if (this.layer.isMediaLayer()) {
+              this.mediaTexture = gl.createTexture();
+              this.mediaTexturePolyfill = {
+                  texture: this.mediaTexture,
+                  textureFormat: gl.RGBA,
+                  width: this.layer.media.videoWidth,
+                  height: this.layer.media.videoHeight,
+                  type: XRTextureType.texture,
+              };
+              const existingTextureBinding = gl.getParameter(gl.TEXTURE_BINDING_2D);
+              gl.bindTexture(gl.TEXTURE_2D, this.mediaTexture);
+              gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.layer.media.videoWidth, this.layer.media.videoHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+              gl.bindTexture(gl.TEXTURE_2D, existingTextureBinding);
+          }
+          this._createVAOs();
+      }
+      render(session, frame) {
+          this.saveVaoState();
+          let gl = this.gl;
+          let baseLayer = session.getBaseLayer();
+          let basePose = frame.getViewerPose(session.getReferenceSpace());
+          const existingActiveTexture = gl.getParameter(gl.ACTIVE_TEXTURE);
+          for (let view of basePose.views) {
+              let viewport = baseLayer.getViewport(view);
+              gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
+              gl.activeTexture(gl.TEXTURE0);
+              if (this.usesTextureArrayShaders) {
+                  if (gl instanceof WebGLRenderingContext) {
+                      throw new Error('This should never happen; texture-arrays only supported on WebGL2.');
+                  }
+                  if (this.layer.isMediaLayer()) {
+                      throw new Error('This should never happen. Media layers should never be created with texture-array');
+                  }
+                  const existingTextureBinding = gl.getParameter(gl.TEXTURE_BINDING_2D_ARRAY);
+                  gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.layer.colorTextures[0]);
+                  if (this.layer.isStatic) {
+                      if (this.layer.needsRedraw === true) {
+                          gl.generateMipmap(gl.TEXTURE_2D_ARRAY);
+                      }
+                      this.hasMipmap = true;
+                  }
+                  else {
+                      this.hasMipmap = this.layer.mipLevels > 0;
+                  }
+                  gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, this.hasMipmap ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR);
+                  gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, this.hasMipmap ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR);
+                  let layer = 0;
+                  if (this.layer.layout === XRLayerLayout.stereo) {
+                      switch (view.eye) {
+                          case 'right':
+                              layer = 1;
+                              break;
+                      }
+                  }
+                  if (this._shouldUseStereoTexturePoints()) {
+                      this._renderInternalStereo(session, frame, view, layer);
+                  }
+                  else {
+                      this._renderInternal(session, frame, view, layer);
+                  }
+                  gl.activeTexture(existingActiveTexture);
+                  gl.bindTexture(gl.TEXTURE_2D_ARRAY, existingTextureBinding);
+              }
+              else {
+                  const existingTextureBinding = gl.getParameter(gl.TEXTURE_BINDING_2D);
+                  if (this.layer.isMediaLayer()) {
+                      gl.bindTexture(gl.TEXTURE_2D, this.mediaTexture);
+                      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+                      gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.layer.media.videoWidth, this.layer.media.videoHeight, gl.RGBA, gl.UNSIGNED_BYTE, this.layer.media);
+                  }
+                  else if (this.layer.layout === XRLayerLayout.stereo) {
+                      switch (view.eye) {
+                          case 'right':
+                              gl.bindTexture(gl.TEXTURE_2D, this.layer.colorTextures[1]);
+                              break;
+                          default:
+                              gl.bindTexture(gl.TEXTURE_2D, this.layer.colorTextures[0]);
+                      }
+                  }
+                  else {
+                      gl.bindTexture(gl.TEXTURE_2D, this.layer.colorTextures[0]);
+                  }
+                  if (this.layer.isStatic) {
+                      if (this.layer.needsRedraw === true) {
+                          gl.generateMipmap(gl.TEXTURE_2D);
+                      }
+                      this.hasMipmap = true;
+                  }
+                  else {
+                      this.hasMipmap = this.layer.mipLevels > 0;
+                  }
+                  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+                  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+                  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this.hasMipmap ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR);
+                  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.hasMipmap ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR);
+                  if (this._shouldUseStereoTexturePoints()) {
+                      this._renderInternalStereo(session, frame, view);
+                  }
+                  else {
+                      this._renderInternal(session, frame, view);
+                  }
+                  gl.activeTexture(existingActiveTexture);
+                  gl.bindTexture(gl.TEXTURE_2D, existingTextureBinding);
+              }
+          }
+          this.restoreVaoState();
+      }
+      createPositionPoints() {
+          return new Float32Array([]);
+      }
+      createTextureUVs() {
+          return new Float32Array([]);
+      }
+      _offsetTextureUVsByRect(texture, inArray, textureRect) {
+          textureRect = textureRect !== null && textureRect !== void 0 ? textureRect : {
+              x: 0,
+              y: 0,
+              width: texture.width,
+              height: texture.height,
+          };
+          const uX = textureRect.x / texture.width;
+          const vY = textureRect.y / texture.height;
+          const uW = textureRect.width / texture.width;
+          const vH = textureRect.height / texture.height;
+          const outArray = [];
+          for (let i = 0; i < inArray.length; i += 2) {
+              let u = inArray[i];
+              let v = inArray[i + 1];
+              let newU = u * uW + uX;
+              let newV = v * vH + vY;
+              outArray[i] = newU;
+              outArray[i + 1] = newV;
+          }
+          return new Float32Array(outArray);
+      }
+      _shouldUseStereoTexturePoints() {
+          return (this.layer.layout === XRLayerLayout['stereo-left-right'] ||
+              this.layer.layout === XRLayerLayout['stereo-top-bottom']);
+      }
+      _setStereoTextureBuffer(index) {
+          let gl = this.gl;
+          gl.enableVertexAttribArray(this.programInfo.attribLocations.a_texCoord);
+          gl.bindBuffer(gl.ARRAY_BUFFER, this.texcoordBuffer);
+          gl.bufferData(gl.ARRAY_BUFFER, this.stereoTexturePoints[index], gl.STATIC_DRAW);
+          var size = 2;
+          var type = gl.FLOAT;
+          var normalize = false;
+          var stride = 0;
+          var offset = 0;
+          gl.vertexAttribPointer(this.programInfo.attribLocations.a_texCoord, size, type, normalize, stride, offset);
+          gl.bindBuffer(gl.ARRAY_BUFFER, null);
+      }
+      _recalculateVertices() {
+          this.positionPoints = this.createPositionPoints();
+          this.texturePoints = this.createTextureUVs();
+          const viewport = {
+              x: 0,
+              y: 0,
+              width: 1,
+              height: 1,
+          };
+          if (this._shouldUseStereoTexturePoints()) {
+              this.stereoTexturePoints = [];
+              if (this.layer.isMediaLayer()) {
+                  initializeViewport(viewport, this.mediaTexturePolyfill, this.layer.layout, 0, 2);
+                  this.stereoTexturePoints[0] = this._offsetTextureUVsByRect(this.mediaTexturePolyfill, this.texturePoints, viewport);
+                  initializeViewport(viewport, this.mediaTexturePolyfill, this.layer.layout, 1, 2);
+                  this.stereoTexturePoints[1] = this._offsetTextureUVsByRect(this.mediaTexturePolyfill, this.texturePoints, viewport);
+                  if (this.layer.layout === XRLayerLayout['stereo-top-bottom']) {
+                      [this.stereoTexturePoints[0], this.stereoTexturePoints[1]] = [
+                          this.stereoTexturePoints[1],
+                          this.stereoTexturePoints[0],
+                      ];
+                  }
+                  return;
+              }
+              initializeViewport(viewport, this.layer.colorTexturesMeta[0], this.layer.layout, 0, 2);
+              this.stereoTexturePoints[0] = this._offsetTextureUVsByRect(this.layer.colorTexturesMeta[0], this.texturePoints, viewport);
+              initializeViewport(viewport, this.layer.colorTexturesMeta[0], this.layer.layout, 1, 2);
+              this.stereoTexturePoints[1] = this._offsetTextureUVsByRect(this.layer.colorTexturesMeta[0], this.texturePoints, viewport);
+              if (this.layer.layout === XRLayerLayout['stereo-top-bottom']) {
+                  [this.stereoTexturePoints[0], this.stereoTexturePoints[1]] = [
+                      this.stereoTexturePoints[1],
+                      this.stereoTexturePoints[0],
+                  ];
+              }
+          }
+      }
+      _createVAOs() {
+          this._recalculateVertices();
+          let gl = this.gl;
+          this.vaoGl = applyVAOExtension(gl);
+          this.saveVaoState();
+          let positionBuffer = gl.createBuffer();
+          this.vao = this.vaoGl.createVertexArray();
+          this.vaoGl.bindVertexArray(this.vao);
+          gl.enableVertexAttribArray(this.programInfo.attribLocations.a_position);
+          gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+          const positions = this.positionPoints;
+          gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+          var size = 3;
+          var type = gl.FLOAT;
+          var normalize = false;
+          var stride = 0;
+          var offset = 0;
+          gl.vertexAttribPointer(this.programInfo.attribLocations.a_position, size, type, normalize, stride, offset);
+          gl.enableVertexAttribArray(this.programInfo.attribLocations.a_texCoord);
+          this.texcoordBuffer = gl.createBuffer();
+          gl.bindBuffer(gl.ARRAY_BUFFER, this.texcoordBuffer);
+          gl.bufferData(gl.ARRAY_BUFFER, this.texturePoints, gl.STATIC_DRAW);
+          var size = 2;
+          var type = gl.FLOAT;
+          var normalize = false;
+          var stride = 0;
+          var offset = 0;
+          gl.vertexAttribPointer(this.programInfo.attribLocations.a_texCoord, size, type, normalize, stride, offset);
+          this.restoreVaoState();
+      }
+      _renderInternal(session, frame, view, layer) {
+          let gl = this.gl;
+          const existingProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+          gl.useProgram(this.program);
+          this.vaoGl.bindVertexArray(this.vao);
+          if (this.usesTextureArrayShaders) {
+              gl.uniform1i(this.programInfo.uniformLocations.u_layer, layer);
+          }
+          this._setTransformMatrix(session, frame, view);
+          gl.uniformMatrix4fv(this.programInfo.uniformLocations.u_matrix, false, this.transformMatrix);
+          gl.uniformMatrix4fv(this.programInfo.uniformLocations.u_projectionMatrix, false, view.projectionMatrix);
+          var primitiveType = gl.TRIANGLES;
+          var offset = 0;
+          var count = this.positionPoints.length / 3;
+          gl.drawArrays(primitiveType, offset, count);
+          this.vaoGl.bindVertexArray(null);
+          gl.useProgram(existingProgram);
+      }
+      _renderInternalStereo(session, frame, view, layer) {
+          if (view.eye === 'none') {
+              return this._renderInternal(session, frame, view);
+          }
+          let gl = this.gl;
+          this.vaoGl.bindVertexArray(this.vao);
+          const existingProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+          gl.useProgram(this.program);
+          this._setStereoTextureBuffer(view.eye === 'right' ? 1 : 0);
+          if (this.usesTextureArrayShaders) {
+              gl.uniform1i(this.programInfo.uniformLocations.u_layer, layer);
+          }
+          this._setTransformMatrix(session, frame, view);
+          gl.uniformMatrix4fv(this.programInfo.uniformLocations.u_matrix, false, this.transformMatrix);
+          gl.uniformMatrix4fv(this.programInfo.uniformLocations.u_projectionMatrix, false, view.projectionMatrix);
+          var primitiveType = gl.TRIANGLES;
+          var offset = 0;
+          var count = this.positionPoints.length / 3;
+          gl.drawArrays(primitiveType, offset, count);
+          this.vaoGl.bindVertexArray(null);
+          gl.useProgram(existingProgram);
+      }
+      _setTransformMatrix(session, frame, view) {
+          let objPose = frame.getPose(this.layer.space, session.getReferenceSpace());
+          multiply(this.transformMatrix, objPose.transform.matrix, this.layer.transform.matrix);
+          multiply(this.transformMatrix, view.transform.inverse.matrix, this.transformMatrix);
+      }
+  }
+
+  class QuadRenderer extends CompositionLayerRenderer {
+      constructor(layer, context) {
+          super(layer, context);
+          this.initialize();
+      }
+      createPositionPoints() {
+          const width = this.layer.width;
+          const height = this.layer.height;
+          const z = 0;
+          const positions = [
+              -width,
+              -height,
+              z,
+              width,
+              -height,
+              z,
+              -width,
+              height,
+              z,
+              -width,
+              height,
+              z,
+              width,
+              -height,
+              z,
+              width,
+              height,
+              z,
+          ];
+          return new Float32Array(positions);
+      }
+      createTextureUVs() {
+          return new Float32Array([0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0]);
+      }
+  }
+
+  class CylinderRenderer extends CompositionLayerRenderer {
+      constructor(layer, context) {
+          super(layer, context);
+          this.segments = 16;
+          this.initialize();
+      }
+      createPositionPoints() {
+          const positions = [];
+          const angle = this.layer.centralAngle;
+          const height = this.layer.height;
+          const radius = this.layer.radius;
+          const radiansPerSegment = angle / this.segments;
+          const theta = Math.PI / 2 - angle / 2;
+          const unitCirclePositions = [];
+          const firstUnitPoint = create$1();
+          firstUnitPoint[0] = radius * Math.cos(theta);
+          firstUnitPoint[1] = -radius * Math.sin(theta);
+          unitCirclePositions.push(firstUnitPoint);
+          for (let i = 0; i < this.segments; i++) {
+              const nextPoint = create$1();
+              nextPoint[0] = radius * Math.cos(theta + radiansPerSegment * (i + 1));
+              nextPoint[1] = -radius * Math.sin(theta + radiansPerSegment * (i + 1));
+              unitCirclePositions.push(nextPoint);
+          }
+          unitCirclePositions.reverse();
+          for (let i = 0; i < this.segments; i++) {
+              const u = unitCirclePositions[i];
+              const v = unitCirclePositions[i + 1];
+              positions.push(u[0], -height / 2, u[1]);
+              positions.push(v[0], -height / 2, v[1]);
+              positions.push(u[0], height / 2, u[1]);
+              positions.push(u[0], height / 2, u[1]);
+              positions.push(v[0], -height / 2, v[1]);
+              positions.push(v[0], height / 2, v[1]);
+          }
+          return new Float32Array(positions);
+      }
+      createTextureUVs() {
+          let textureUVs = [];
+          const texturePercent = 1.0 / this.segments;
+          for (let i = 0; i < this.segments; i++) {
+              let leftX = texturePercent * i;
+              let rightX = texturePercent * (i + 1);
+              textureUVs.push(leftX, 0);
+              textureUVs.push(rightX, 0);
+              textureUVs.push(leftX, 1);
+              textureUVs.push(leftX, 1);
+              textureUVs.push(rightX, 0);
+              textureUVs.push(rightX, 1);
+          }
+          return new Float32Array(textureUVs);
+      }
+  }
+
+  class EquirectRenderer extends CompositionLayerRenderer {
+      constructor(layer, context) {
+          super(layer, context);
+          this.segmentsPerAxis = 40;
+          this.initialize();
+      }
+      createPositionPoints() {
+          const positions = [];
+          let radius = this.layer.radius;
+          if (radius === 0) {
+              radius = 25;
+          }
+          if (radius > 25) {
+              radius = 25;
+          }
+          const horizAngle = this.layer.centralHorizontalAngle;
+          const phi1 = this.layer.upperVerticalAngle + Math.PI / 2;
+          const phi2 = this.layer.lowerVerticalAngle + Math.PI / 2;
+          const startPhi = phi1;
+          const endPhi = phi2;
+          const startTheta = Math.PI / 2 - horizAngle / 2;
+          const endTheta = startTheta + horizAngle;
+          const phiRange = endPhi - startPhi;
+          const thetaRange = endTheta - startTheta;
+          const basePoints = [];
+          for (let y = 0; y <= this.segmentsPerAxis; y++) {
+              for (let x = 0; x <= this.segmentsPerAxis; x++) {
+                  const u = x / this.segmentsPerAxis;
+                  const v = y / this.segmentsPerAxis;
+                  let r = radius;
+                  let theta = endTheta - thetaRange * u;
+                  let phi = phiRange * v + startPhi;
+                  const ux = Math.cos(theta) * Math.sin(phi);
+                  const uy = Math.cos(phi);
+                  const uz = -Math.sin(theta) * Math.sin(phi);
+                  basePoints.push([r * ux, r * uy, r * uz]);
+              }
+          }
+          const numVertsAround = this.segmentsPerAxis + 1;
+          for (let x = 0; x < this.segmentsPerAxis; x++) {
+              for (let y = 0; y < this.segmentsPerAxis; y++) {
+                  positions.push(...basePoints[y * numVertsAround + x]);
+                  positions.push(...basePoints[y * numVertsAround + x + 1]);
+                  positions.push(...basePoints[(y + 1) * numVertsAround + x]);
+                  positions.push(...basePoints[(y + 1) * numVertsAround + x]);
+                  positions.push(...basePoints[y * numVertsAround + x + 1]);
+                  positions.push(...basePoints[(y + 1) * numVertsAround + x + 1]);
+              }
+          }
+          return new Float32Array(positions);
+      }
+      createTextureUVs() {
+          const triUVs = [];
+          const baseUVs = [];
+          for (let y = 0; y <= this.segmentsPerAxis; y++) {
+              for (let x = 0; x <= this.segmentsPerAxis; x++) {
+                  const u = x / this.segmentsPerAxis;
+                  const v = y / this.segmentsPerAxis;
+                  baseUVs.push([u, v]);
+              }
+          }
+          const numVertsAround = this.segmentsPerAxis + 1;
+          for (let x = 0; x < this.segmentsPerAxis; x++) {
+              for (let y = 0; y < this.segmentsPerAxis; y++) {
+                  triUVs.push(...baseUVs[y * numVertsAround + x]);
+                  triUVs.push(...baseUVs[y * numVertsAround + x + 1]);
+                  triUVs.push(...baseUVs[(y + 1) * numVertsAround + x]);
+                  triUVs.push(...baseUVs[(y + 1) * numVertsAround + x]);
+                  triUVs.push(...baseUVs[y * numVertsAround + x + 1]);
+                  triUVs.push(...baseUVs[(y + 1) * numVertsAround + x + 1]);
+              }
+          }
+          return new Float32Array(triUVs);
+      }
+  }
+
+  const defaultCubeLayerInit = {
+      colorFormat: 0x1908,
+      mipLevels: 1,
+      layout: XRLayerLayout.mono,
+      isStatic: false,
+      space: null,
+      viewPixelHeight: 0,
+      viewPixelWidth: 0,
+  };
+  class XRCubeLayer extends XRCompositionLayerPolyfill {
+      constructor(init = defaultCubeLayerInit) {
+          super();
+          if (!isReferenceSpace(init.space)) {
+              throw new TypeError("XRCubeLayer's space needs to be an XRReferenceSpace");
+          }
+          this.init = Object.assign(Object.assign({}, defaultCubeLayerInit), init);
+          this.space = this.init.space;
+          this.isStatic = this.init.isStatic;
+          if (this.init.orientation) {
+              this.orientation = DOMPointReadOnly.fromPoint(this.init.orientation);
+          }
+          else {
+              this.orientation = new DOMPointReadOnly();
+          }
+          switch (this.init.layout) {
+              case XRLayerLayout.default:
+              case XRLayerLayout['stereo-left-right']:
+              case XRLayerLayout['stereo-top-bottom']:
+                  throw new TypeError('Invalid layout format for XRCubeLayer');
+          }
+          this.layout = this.init.layout;
+          this.needsRedraw = true;
+      }
+      initialize(session, context) {
+          super.initialize(session, context);
+          this._allocateColorTexturesInternal();
+          this._allocateDepthStencilTexturesInternal();
+      }
+      _allocateColorTexturesInternal() {
+          this._colorTextures = [];
+          this._texturesMeta = [];
+          if (this.layout === XRLayerLayout.mono) {
+              const colorTexture = this._createCubeColorTexture();
+              this._texturesMeta.push(colorTexture);
+              this._colorTextures.push(colorTexture.texture);
+              return;
+          }
+          else {
+              const texture1 = this._createCubeColorTexture();
+              const texture2 = this._createCubeColorTexture();
+              this._texturesMeta.push(texture1, texture2);
+              this._colorTextures.push(texture1.texture, texture2.texture);
+              return;
+          }
+      }
+      _allocateDepthStencilTexturesInternal() {
+          this._depthStencilTextures = [];
+          if (!this.init.depthFormat) {
+              return;
+          }
+          if (this.context instanceof WebGLRenderingContext) {
+              let depthExtension = this.context.getExtension('WEBGL_depth_texture');
+              if (!depthExtension) {
+                  throw new TypeError('Depth textures not supported in the current context');
+              }
+          }
+          if (this.layout === XRLayerLayout.mono) {
+              const depthTexture = this._createCubeDepthTexture();
+              this._depthStencilTextures.push(depthTexture.texture);
+              return;
+          }
+          else {
+              const texture1 = this._createCubeDepthTexture();
+              const texture2 = this._createCubeDepthTexture();
+              this._depthStencilTextures.push(texture1.texture, texture2.texture);
+              return;
+          }
+      }
+      _createCubeColorTexture() {
+          let texture = this.context.createTexture();
+          let textureMeta = {
+              width: this.init.viewPixelWidth,
+              height: this.init.viewPixelHeight,
+              layers: 1,
+              type: XRTextureType.texture,
+              textureFormat: this.init.colorFormat,
+              texture,
+          };
+          const existingTextureBinding = this.context.getParameter(this.context.TEXTURE_BINDING_CUBE_MAP);
+          this.context.bindTexture(this.context.TEXTURE_CUBE_MAP, texture);
+          for (let i = 0; i < 6; i++) {
+              this.context.texImage2D(this.context.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, textureMeta.textureFormat, textureMeta.width, textureMeta.height, 0, textureMeta.textureFormat, this.context.UNSIGNED_BYTE, null);
+          }
+          this.context.bindTexture(this.context.TEXTURE_CUBE_MAP, existingTextureBinding);
+          return textureMeta;
+      }
+      _createCubeDepthTexture() {
+          let texture = this.context.createTexture();
+          let textureMeta = {
+              width: this.init.viewPixelWidth,
+              height: this.init.viewPixelHeight,
+              layers: 1,
+              type: XRTextureType.texture,
+              textureFormat: this.init.depthFormat,
+              texture,
+          };
+          const existingTextureBinding = this.context.getParameter(this.context.TEXTURE_BINDING_CUBE_MAP);
+          this.context.bindTexture(this.context.TEXTURE_CUBE_MAP, texture);
+          let internalFormat = this.init.depthFormat;
+          if (this.context instanceof WebGL2RenderingContext) {
+              if (internalFormat === this.context.DEPTH_COMPONENT) {
+                  internalFormat = this.context.DEPTH_COMPONENT24;
+              }
+              if (internalFormat === this.context.DEPTH_STENCIL) {
+                  internalFormat = this.context.DEPTH24_STENCIL8;
+              }
+          }
+          for (let i = 0; i < 6; i++) {
+              this.context.texImage2D(this.context.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, internalFormat, textureMeta.width, textureMeta.height, 0, textureMeta.textureFormat, this.context.UNSIGNED_INT, null);
+          }
+          this.context.bindTexture(this.context.TEXTURE_CUBE_MAP, existingTextureBinding);
+          return textureMeta;
+      }
+      getTextureType() {
+          return XRTextureType.texture;
+      }
+  }
+
+  const glsl$2 = (x) => x;
+  const vertexShader$2 = glsl$2 `
+attribute vec4 a_position;
+uniform mat4 u_projectionMatrix;
+uniform mat4 u_matrix;
+varying vec3 v_normal;
+
+void main() {
+   gl_Position = u_projectionMatrix * u_matrix * a_position;
+
+   v_normal = normalize(a_position.xyz);
+}
+`;
+  const fragmentShader$2 = glsl$2 `
+precision mediump float;
+
+varying vec3 v_normal;
+
+uniform samplerCube u_texture;
+
+void main() {
+   gl_FragColor = textureCube(u_texture, normalize(v_normal));
+}
+`;
+  class CubeRenderer {
+      constructor(layer, gl) {
+          this.savedVaoState = { vao: null, arrayBuffer: null };
+          this.hasMipmap = false;
+          this.layer = layer;
+          this.gl = gl;
+          this.transformMatrix = create();
+          this.program = createProgram(gl, vertexShader$2, fragmentShader$2);
+          this.programInfo = {
+              attribLocations: {
+                  a_position: gl.getAttribLocation(this.program, 'a_position'),
+              },
+              uniformLocations: {
+                  u_matrix: gl.getUniformLocation(this.program, 'u_matrix'),
+                  u_texture: gl.getUniformLocation(this.program, 'u_texture'),
+                  u_projectionMatrix: gl.getUniformLocation(this.program, 'u_projectionMatrix'),
+              },
+          };
+          this._createVAOs();
+      }
+      saveVaoState() {
+          this.savedVaoState.vao = this.gl.getParameter(this.vaoGl.VERTEX_ARRAY_BINDING);
+          this.savedVaoState.arrayBuffer = this.gl.getParameter(this.gl.ARRAY_BUFFER_BINDING);
+      }
+      restoreVaoState() {
+          this.vaoGl.bindVertexArray(this.savedVaoState.vao);
+          this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.savedVaoState.arrayBuffer);
+          this.savedVaoState.vao = this.savedVaoState.arrayBuffer = null;
+      }
+      render(session, frame) {
+          this.saveVaoState();
+          let gl = this.gl;
+          let baseLayer = session.getBaseLayer();
+          let basePose = frame.getViewerPose(session.getReferenceSpace());
+          const existingActiveTexture = gl.getParameter(gl.ACTIVE_TEXTURE);
+          for (let view of basePose.views) {
+              let viewport = baseLayer.getViewport(view);
+              gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
+              gl.activeTexture(gl.TEXTURE0);
+              const existingTextureBinding = gl.getParameter(gl.TEXTURE_BINDING_CUBE_MAP);
+              if (this.layer.layout === XRLayerLayout.stereo) {
+                  const index = view.eye === 'right' ? 1 : 0;
+                  gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.layer.colorTextures[index]);
+              }
+              else {
+                  gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.layer.colorTextures[0]);
+              }
+              if (this.layer.isStatic) {
+                  if (this.layer.needsRedraw === true) {
+                      gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
+                  }
+                  this.hasMipmap = true;
+              }
+              else {
+                  this.hasMipmap = this.layer.mipLevels > 0;
+              }
+              gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, this.hasMipmap ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR);
+              gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, this.hasMipmap ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR);
+              this._renderInternal(this.layer.orientation, view);
+              gl.activeTexture(existingActiveTexture);
+              gl.bindTexture(gl.TEXTURE_CUBE_MAP, existingTextureBinding);
+          }
+          this.restoreVaoState();
+      }
+      createPositionPoints() {
+          const w = 0.5;
+          const positions = [
+              -w, -w, -w,
+              -w, w, -w,
+              w, -w, -w,
+              -w, w, -w,
+              w, w, -w,
+              w, -w, -w,
+              -w, -w, w,
+              w, -w, w,
+              -w, w, w,
+              -w, w, w,
+              w, -w, w,
+              w, w, w,
+              -w, w, -w,
+              -w, w, w,
+              w, w, -w,
+              -w, w, w,
+              w, w, w,
+              w, w, -w,
+              -w, -w, -w,
+              w, -w, -w,
+              -w, -w, w,
+              -w, -w, w,
+              w, -w, -w,
+              w, -w, w,
+              -w, -w, -w,
+              -w, -w, w,
+              -w, w, -w,
+              -w, -w, w,
+              -w, w, w,
+              -w, w, -w,
+              w, -w, -w,
+              w, w, -w,
+              w, -w, w,
+              w, -w, w,
+              w, w, -w,
+              w, w, w,
+          ];
+          return new Float32Array(positions);
+      }
+      _renderInternal(orientation, view) {
+          let gl = this.gl;
+          const existingProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+          gl.useProgram(this.program);
+          this.vaoGl.bindVertexArray(this.vao);
+          fromQuat(this.transformMatrix, [
+              orientation.x,
+              orientation.y,
+              orientation.z,
+              orientation.w,
+          ]);
+          if (!this._poseOrientationMatrix) {
+              this._poseOrientationMatrix = create();
+          }
+          fromQuat(this._poseOrientationMatrix, [
+              view.transform.inverse.orientation.x,
+              view.transform.inverse.orientation.y,
+              view.transform.inverse.orientation.z,
+              view.transform.inverse.orientation.w,
+          ]);
+          multiply(this.transformMatrix, this.transformMatrix, this._poseOrientationMatrix);
+          gl.uniformMatrix4fv(this.programInfo.uniformLocations.u_matrix, false, this.transformMatrix);
+          gl.uniformMatrix4fv(this.programInfo.uniformLocations.u_projectionMatrix, false, view.projectionMatrix);
+          gl.uniform1i(this.programInfo.uniformLocations.u_texture, 0);
+          var primitiveType = gl.TRIANGLES;
+          var offset = 0;
+          var count = this.positionPoints.length / 3;
+          gl.drawArrays(primitiveType, offset, count);
+          this.vaoGl.bindVertexArray(null);
+          gl.useProgram(existingProgram);
+      }
+      _recalculateVertices() {
+          this.positionPoints = this.createPositionPoints();
+      }
+      _createVAOs() {
+          this._recalculateVertices();
+          let gl = this.gl;
+          this.vaoGl = applyVAOExtension(gl);
+          this.saveVaoState();
+          let positionBuffer = gl.createBuffer();
+          this.vao = this.vaoGl.createVertexArray();
+          this.vaoGl.bindVertexArray(this.vao);
+          gl.enableVertexAttribArray(this.programInfo.attribLocations.a_position);
+          gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+          const positions = this.positionPoints;
+          gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+          var size = 3;
+          var type = gl.FLOAT;
+          var normalize = false;
+          var stride = 0;
+          var offset = 0;
+          gl.vertexAttribPointer(this.programInfo.attribLocations.a_position, size, type, normalize, stride, offset);
+          this.restoreVaoState();
+      }
+  }
+
+  class XRSessionWithLayer {
+      constructor() {
+          this.mode = 'inline';
+          this.layers = [];
+          this.views = [];
+          this.initializedViews = false;
+          this.isPolyfillActive = false;
+          this.taskQueue = [];
+      }
+      requestAnimationFrame(animationFrameCallback) {
+          if (!this.injectedFrameCallback) {
+              this.injectedFrameCallback = (time, frame) => {
+                  let gl = this.context;
+                  if (!this.initializedViews && this.referenceSpace) {
+                      let pose = frame.getViewerPose(this.referenceSpace);
+                      if (pose) {
+                          this.views = pose.views;
+                          this.initializedViews = true;
+                      }
+                  }
+                  if (this.isPolyfillActive && this.initializedViews) {
+                      if (!this.tempFramebuffer) {
+                          this.tempFramebuffer = gl.createFramebuffer();
+                      }
+                      gl.bindFramebuffer(gl.FRAMEBUFFER, this.tempFramebuffer);
+                      const existingClearColor = gl.getParameter(gl.COLOR_CLEAR_VALUE);
+                      const existingFrameBuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+                      gl.clearColor(0, 0, 0, 0);
+                      for (let layer of this.layers) {
+                          if (!(layer instanceof XRProjectionLayer)) {
+                              continue;
+                          }
+                          for (let i = 0; i < layer.colorTextures.length; i++) {
+                              let textureType = layer.colorTexturesMeta[i].type;
+                              if (textureType === XRTextureType['texture-array']) ;
+                              else {
+                                  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, layer.colorTextures[i], 0);
+                                  if (layer.depthStencilTextures && i < layer.depthStencilTextures.length) {
+                                      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, layer.depthStencilTextures[i], 0);
+                                  }
+                                  else {
+                                      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, null, 0);
+                                  }
+                                  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+                              }
+                          }
+                      }
+                      gl.bindFramebuffer(gl.FRAMEBUFFER, existingFrameBuffer);
+                      gl.clearColor(existingClearColor[0], existingClearColor[1], existingClearColor[2], existingClearColor[3]);
+                  }
+                  animationFrameCallback(time, frame);
+                  if (this.isPolyfillActive && this.initializedViews) {
+                      let prevBlend = gl.isEnabled(gl.BLEND);
+                      let prevDepthTest = gl.isEnabled(gl.DEPTH_TEST);
+                      let prevCullFace = gl.isEnabled(gl.CULL_FACE);
+                      const existingFrameBuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+                      const existingClearColor = gl.getParameter(gl.COLOR_CLEAR_VALUE);
+                      gl.bindFramebuffer(gl.FRAMEBUFFER, this.getBaseLayer().framebuffer);
+                      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+                      gl.clearColor(existingClearColor[0], existingClearColor[1], existingClearColor[2], existingClearColor[3]);
+                      gl.enable(gl.BLEND);
+                      gl.disable(gl.DEPTH_TEST);
+                      gl.disable(gl.CULL_FACE);
+                      let prevBlendSrcRGB = gl.getParameter(gl.BLEND_SRC_RGB);
+                      let prevBlendSrcAlpha = gl.getParameter(gl.BLEND_SRC_ALPHA);
+                      let prevBlendDestRGB = gl.getParameter(gl.BLEND_DST_RGB);
+                      let prevBlendDestAlpha = gl.getParameter(gl.BLEND_DST_ALPHA);
+                      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+                      for (let layer of this.layers) {
+                          if (!this.renderers) {
+                              this.renderers = new WeakMap();
+                          }
+                          if (layer instanceof XRProjectionLayer) {
+                              if (!this.renderers.has(layer)) {
+                                  this.renderers.set(layer, createProjectionRenderer(layer, this.context));
+                              }
+                              const renderer = this.renderers.get(layer);
+                              renderer.render(this);
+                          }
+                          else if (layer instanceof XRQuadLayer) {
+                              if (!this.renderers.has(layer)) {
+                                  this.renderers.set(layer, new QuadRenderer(layer, this.context));
+                              }
+                              const renderer = this.renderers.get(layer);
+                              renderer.render(this, frame);
+                          }
+                          else if (layer instanceof XRCylinderLayer) {
+                              if (!this.renderers.has(layer)) {
+                                  this.renderers.set(layer, new CylinderRenderer(layer, this.context));
+                              }
+                              const renderer = this.renderers.get(layer);
+                              renderer.render(this, frame);
+                          }
+                          else if (layer instanceof XREquirectLayer) {
+                              if (!this.renderers.has(layer)) {
+                                  this.renderers.set(layer, new EquirectRenderer(layer, this.context));
+                              }
+                              const renderer = this.renderers.get(layer);
+                              renderer.render(this, frame);
+                          }
+                          else if (layer instanceof XRCubeLayer) {
+                              if (!this.renderers.has(layer)) {
+                                  this.renderers.set(layer, new CubeRenderer(layer, this.context));
+                              }
+                              const renderer = this.renderers.get(layer);
+                              renderer.render(this, frame);
+                          }
+                          else {
+                              const webglLayer = layer;
+                              if (webglLayer.framebuffer === null) {
+                                  continue;
+                              }
+                              if (gl instanceof WebGL2RenderingContext) {
+                                  gl.bindFramebuffer(gl.READ_FRAMEBUFFER, webglLayer.framebuffer);
+                                  gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.getBaseLayer().framebuffer);
+                                  gl.blitFramebuffer(0, 0, webglLayer.framebufferWidth, webglLayer.framebufferHeight, 0, 0, this.getBaseLayer().framebufferWidth, this.getBaseLayer().framebufferHeight, gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT, gl.LINEAR);
+                              }
+                              else {
+                                  console.warn('GL blitFramebuffer is not supported on WebGL1, so XRWebGLLayers may not show up properly when polyfilled.');
+                              }
+                          }
+                      }
+                      if (!prevBlend) {
+                          gl.disable(gl.BLEND);
+                      }
+                      if (prevDepthTest) {
+                          gl.enable(gl.DEPTH_TEST);
+                      }
+                      if (prevCullFace) {
+                          gl.enable(gl.CULL_FACE);
+                      }
+                      gl.blendFuncSeparate(prevBlendSrcRGB, prevBlendDestRGB, prevBlendSrcAlpha, prevBlendDestAlpha);
+                      gl.bindFramebuffer(gl.FRAMEBUFFER, existingFrameBuffer);
+                      while (this.taskQueue.length > 0) {
+                          const task = this.taskQueue.shift();
+                          task();
+                      }
+                  }
+              };
+          }
+          this._requestAnimationFrame(this.injectedFrameCallback);
+      }
+      updateRenderState(XRRenderStateInit) {
+          this.existingBaseLayer = XRRenderStateInit.baseLayer;
+          if (XRRenderStateInit.layers) {
+              this.layers = XRRenderStateInit.layers;
+          }
+          if (!this.activeRenderState) {
+              this.createActiveRenderState();
+          }
+          this.activeRenderState = Object.assign(Object.assign({}, this.activeRenderState), XRRenderStateInit);
+          if (!XRRenderStateInit.layers) {
+              this._updateRenderState(XRRenderStateInit);
+              return;
+          }
+          let layerRenderStateInit = Object.assign({}, XRRenderStateInit);
+          delete layerRenderStateInit.layers;
+          let context = undefined;
+          for (let layer of this.layers) {
+              if (layer instanceof XRCompositionLayerPolyfill) {
+                  context = layer.getContext();
+                  break;
+              }
+          }
+          if (!context && !this.context) {
+              console.log('No existing context! Have the session make one');
+              const canvas = document.createElement('canvas');
+              context = canvas.getContext('webgl2', { xrCompatible: true });
+              if (!context) {
+                  context = canvas.getContext('webgl', { xrCompatible: true });
+              }
+              if (!context) {
+                  throw new Error('No webGL support detected.');
+              }
+              document.body.appendChild(context.canvas);
+              function onResize() {
+                  context.canvas.width = context.canvas.clientWidth * window.devicePixelRatio;
+                  context.canvas.height = context.canvas.clientHeight * window.devicePixelRatio;
+              }
+              window.addEventListener('resize', onResize);
+              onResize();
+          }
+          this.createInternalLayer(context);
+          this.isPolyfillActive = true;
+          this._updateRenderState(Object.assign(Object.assign({}, layerRenderStateInit), { baseLayer: this.internalLayer }));
+      }
+      initializeSession(mode) {
+          this.mode = mode;
+          this
+              .requestReferenceSpace('local')
+              .then((refSpace) => {
+              this.referenceSpace = refSpace;
+          })
+              .catch((e) => {
+          });
+          this.requestReferenceSpace('viewer').then((viewerSpace) => {
+              this.viewerSpace = viewerSpace;
+          });
+      }
+      getBaseLayer(context) {
+          if (!this.internalLayer && !this.existingBaseLayer && context) {
+              this.createInternalLayer(context);
+          }
+          return this.internalLayer || this.existingBaseLayer;
+      }
+      getReferenceSpace() {
+          return !this.referenceSpace ? this.viewerSpace : this.referenceSpace;
+      }
+      getViewerSpace() {
+          return this.viewerSpace;
+      }
+      queueTask(task) {
+          this.taskQueue.push(task);
+      }
+      get renderState() {
+          if (!this.activeRenderState) {
+              this.createActiveRenderState();
+          }
+          return this.activeRenderState;
+      }
+      get internalViews() {
+          return this.views;
+      }
+      getViewIndex(view) {
+          for (let i = 0; i < this.views.length; i++) {
+              let testView = this.views[i];
+              if (view.eye === testView.eye &&
+                  view.recommendedViewportScale === testView.recommendedViewportScale) {
+                  return i;
+              }
+          }
+          return -1;
+      }
+      createInternalLayer(context) {
+          if (!context && this.internalLayer) {
+              return this.internalLayer;
+          }
+          if (context === this.context && this.internalLayer) {
+              return this.internalLayer;
+          }
+          const _global = getGlobal();
+          this.internalLayer = new _global.XRWebGLLayer(this, context);
+          this.setContext(context);
+          return this.internalLayer;
+      }
+      setContext(context) {
+          this.context = context;
+          this.tempFramebuffer = context.createFramebuffer();
+          this.renderers = new WeakMap();
+      }
+      createActiveRenderState() {
+          const _global = getGlobal();
+          let prototypeNames = Object.getOwnPropertyNames(_global.XRRenderState.prototype);
+          const renderStateClone = {};
+          for (let item of prototypeNames) {
+              renderStateClone[item] = this._renderState[item];
+          }
+          renderStateClone.layers = [];
+          this.activeRenderState = renderStateClone;
+      }
+  }
+
+  class XRWebGLSubImagePolyfill {
+      constructor() {
+          this.viewport = {
+              x: 0,
+              y: 0,
+              width: 0,
+              height: 0,
+          };
+      }
+  }
+
+  class XRWebGLBindingPolyfill {
+      constructor(session, context) {
+          this.session = session;
+          this.context = context;
+          this.subImageCache = new SubImageCache();
+      }
+      createProjectionLayer(init = defaultXRProjectionLayerInit) {
+          const layer = new XRProjectionLayer(init);
+          if (this.session.ended) {
+              throw new Error('Session has ended');
+          }
+          if (this.context.isContextLost()) {
+              throw new Error('context is lost');
+          }
+          layer.initialize(this.session, this.context);
+          return layer;
+      }
+      createQuadLayer(init = defaultQuadLayerInit) {
+          if (this.session.ended) {
+              throw new Error('Session has ended');
+          }
+          if (this.context.isContextLost()) {
+              throw new Error('context is lost');
+          }
+          if (init.layout === XRLayerLayout.default) {
+              throw new TypeError('Trying to create a quad layer with default layout');
+          }
+          const layer = new XRQuadLayer(init);
+          layer.initialize(this.session, this.context);
+          return layer;
+      }
+      createCylinderLayer(init = defaultCylinderLayerInit) {
+          if (this.session.ended) {
+              throw new Error('Session has ended');
+          }
+          if (this.context.isContextLost()) {
+              throw new Error('context is lost');
+          }
+          if (init.layout === XRLayerLayout.default) {
+              throw new TypeError('Cylinder Layer cannot have a default layout');
+          }
+          const layer = new XRCylinderLayer(init);
+          layer.initialize(this.session, this.context);
+          return layer;
+      }
+      createEquirectLayer(init = defaultEquirectLayerInit) {
+          if (this.session.ended) {
+              throw new Error('Session has ended');
+          }
+          if (this.context.isContextLost()) {
+              throw new Error('context is lost');
+          }
+          if (init.layout === XRLayerLayout.default) {
+              throw new TypeError('Equirect Layer cannot have a default layout');
+          }
+          if (!isReferenceSpace(init.space)) {
+              throw new TypeError('Equirect layer requires an XRReferenceSpace');
+          }
+          let layer = new XREquirectLayer(init);
+          layer.initialize(this.session, this.context);
+          return layer;
+      }
+      createCubeLayer(init) {
+          if (this.session.ended) {
+              throw new Error('Session has ended');
+          }
+          if (this.context.isContextLost()) {
+              throw new Error('context is lost');
+          }
+          if (!(this.context instanceof WebGL2RenderingContext)) {
+              throw new Error('XRCubeLayer only work on WebGL2');
+          }
+          if (!isReferenceSpace(init.space)) {
+              throw new TypeError('XRCubeLayer requires a space of type XRReferenceSpace');
+          }
+          let layer = new XRCubeLayer(init);
+          layer.initialize(this.session, this.context);
+          return layer;
+      }
+      getSubImage(layer, frame, eye = 'none') {
+          if (layer.isStatic && (layer.needsRedraw === false)) {
+              throw new Error('Invalid state for subimage creation');
+          }
+          let existingSubImage = this.subImageCache.tryGetCachedSubImage(this.context, layer, eye);
+          if (existingSubImage) {
+              return existingSubImage;
+          }
+          let subimage = new XRWebGLSubImagePolyfill();
+          if (layer instanceof XRProjectionLayer) {
+              throw new TypeError();
+          }
+          if (layer.layout === XRLayerLayout.default) {
+              throw new TypeError();
+          }
+          if (!this.validateStateofSubImageCreation(layer, frame)) {
+              throw new Error('Invalid state for subimage creation');
+          }
+          let index = 0;
+          if (layer.layout === XRLayerLayout.stereo) {
+              if (eye === 'none') {
+                  throw new TypeError();
+              }
+              if (eye === 'right') {
+                  index = 1;
+              }
+          }
+          if (layer.getTextureType() === XRTextureType['texture-array']) {
+              subimage.imageIndex = index;
+          }
+          else {
+              subimage.imageIndex = 0;
+          }
+          let _textureIndex = 0;
+          if (layer.getTextureType() === XRTextureType.texture) {
+              subimage.colorTexture = layer.colorTextures[index];
+              _textureIndex = index;
+          }
+          else {
+              subimage.colorTexture = layer.colorTextures[0];
+              _textureIndex = 0;
+          }
+          if (!layer.depthStencilTextures || !layer.depthStencilTextures.length) {
+              subimage.depthStencilTexture = null;
+          }
+          else if (layer.getTextureType() === XRTextureType.texture) {
+              subimage.depthStencilTexture = layer.depthStencilTextures[index];
+          }
+          else {
+              subimage.depthStencilTexture = layer.depthStencilTextures[0];
+          }
+          const layerMeta = layer.colorTexturesMeta[_textureIndex];
+          subimage.textureWidth = layerMeta.width;
+          subimage.textureHeight = layerMeta.height;
+          let viewsPerTexture = 1;
+          if (layer.layout === XRLayerLayout['stereo-left-right'] ||
+              layer.layout === XRLayerLayout['stereo-top-bottom']) {
+              viewsPerTexture = 2;
+          }
+          initializeViewport(subimage.viewport, layerMeta, layer.layout, index, viewsPerTexture);
+          this.session.queueTask(() => {
+              layer.needsRedraw = false;
+          });
+          this.subImageCache.cacheSubImage(subimage, this.context, layer, eye);
+          return subimage;
+      }
+      getViewSubImage(layer, view) {
+          let existingSubImage = this.subImageCache.tryGetCachedViewSubImage(this.context, layer, view);
+          if (existingSubImage) {
+              return existingSubImage;
+          }
+          let subimage = new XRWebGLSubImagePolyfill();
+          let session = this.session;
+          if (!session.internalViews || !session.internalViews.length) {
+              console.warn('Tried to get view sub image before we have any views');
+              return subimage;
+          }
+          let index = session.getViewIndex(view);
+          let _textureIndex = 0;
+          if (layer.getTextureType() === XRTextureType['texture-array']) {
+              subimage.imageIndex = index;
+          }
+          else {
+              subimage.imageIndex = 0;
+          }
+          if (layer.layout === XRLayerLayout.default &&
+              layer.getTextureType() === XRTextureType.texture) {
+              subimage.colorTexture = layer.colorTextures[index];
+              _textureIndex = index;
+          }
+          else {
+              subimage.colorTexture = layer.colorTextures[0];
+              _textureIndex = 0;
+          }
+          if (layer.depthStencilTextures.length === 0) {
+              subimage.depthStencilTexture = null;
+          }
+          else if (layer.layout === XRLayerLayout.default &&
+              layer.getTextureType() === XRTextureType.texture) {
+              subimage.depthStencilTexture = layer.depthStencilTextures[index];
+          }
+          else {
+              subimage.depthStencilTexture = layer.depthStencilTextures[0];
+          }
+          subimage.textureWidth = layer.colorTexturesMeta[_textureIndex].width;
+          subimage.textureHeight = layer.colorTexturesMeta[_textureIndex].height;
+          initializeViewport(subimage.viewport, layer.colorTexturesMeta[_textureIndex], layer.layout, index, session.internalViews.length);
+          layer.needsRedraw = false;
+          this.subImageCache.cacheViewSubImage(subimage, this.context, layer, view);
+          return subimage;
+      }
+      validateStateofSubImageCreation(layer, frame) {
+          if (frame.session !== layer.session) {
+              return false;
+          }
+          if (this.session !== layer.session) {
+              return false;
+          }
+          if (this.context !== layer.context) {
+              return false;
+          }
+          if (!layer.colorTextures || !layer.colorTextures.length) {
+              return false;
+          }
+          if (layer.isStatic && layer.needsRedraw === false) {
+              return false;
+          }
+          return true;
+      }
+  }
+  class SubImageCache {
+      constructor() {
+          this.cache = new Map();
+          this.viewCache = new Map();
+      }
+      cacheSubImage(subimage, context, layer, eye) {
+          let eyeMap = new Map();
+          eyeMap.set(eye, subimage);
+          let layerMap = new Map();
+          layerMap.set(layer, eyeMap);
+          this.cache.set(context, layerMap);
+      }
+      tryGetCachedSubImage(context, layer, eye) {
+          var _a, _b;
+          return (_b = (_a = this.cache.get(context)) === null || _a === void 0 ? void 0 : _a.get(layer)) === null || _b === void 0 ? void 0 : _b.get(eye);
+      }
+      cacheViewSubImage(subimage, context, layer, view) {
+          let viewMap = new Map();
+          viewMap.set(view, subimage);
+          let layerMap = new Map();
+          layerMap.set(layer, viewMap);
+          this.viewCache.set(context, layerMap);
+      }
+      tryGetCachedViewSubImage(context, layer, view) {
+          var _a, _b;
+          return (_b = (_a = this.viewCache.get(context)) === null || _a === void 0 ? void 0 : _a.get(layer)) === null || _b === void 0 ? void 0 : _b.get(view);
+      }
+  }
+
+  const isLayersNativelySupported = (global) => {
+      if (!global.navigator.xr) {
+          return false;
+      }
+      if (global.XRMediaBinding && global.XRWebGLBinding) {
+          return true;
+      }
+      return false;
+  };
+
+  class WebXRLayersPolyfill {
+      constructor() {
+          this.injected = false;
+          const _global = getGlobal();
+          this._injectPolyfill(_global);
+      }
+      _injectPolyfill(global) {
+          if (!('xr' in global.navigator)) {
+              throw new Error('WebXR Layers polyfill requires WebXR support.');
+          }
+          if (this.injected === true) {
+              console.warn('Polyfill has already been injected...');
+          }
+          if (isLayersNativelySupported(global)) {
+              return;
+          }
+          this._polyfillRequiredLayersFeature(global);
+          this._polyfillXRSession(global);
+          global.XRWebGLBinding = XRWebGLBindingPolyfill;
+          global.XRMediaBinding = XRMediaBindingPolyfill;
+          this.injected = true;
+          console.log('Injected Layers Polyfill');
+      }
+      _polyfillXRSession(global) {
+          global.XRSession.prototype._updateRenderState = global.XRSession.prototype.updateRenderState;
+          global.XRSession.prototype._requestAnimationFrame =
+              global.XRSession.prototype.requestAnimationFrame;
+          let renderStateGetter = Object.getOwnPropertyDescriptor(global.XRSession.prototype, 'renderState');
+          Object.defineProperty(global.XRSession.prototype, '_renderState', renderStateGetter);
+          let polyfillRenderStateGetter = Object.getOwnPropertyDescriptor(XRSessionWithLayer.prototype, 'renderState');
+          Object.defineProperty(global.XRSession.prototype, 'renderState', polyfillRenderStateGetter);
+          let prototypeNames = Object.getOwnPropertyNames(XRSessionWithLayer.prototype);
+          for (let item of prototypeNames) {
+              let propertyDescriptor = Object.getOwnPropertyDescriptor(XRSessionWithLayer.prototype, item);
+              Object.defineProperty(global.XRSession.prototype, item, propertyDescriptor);
+          }
+      }
+      _polyfillRequiredLayersFeature(global) {
+          const existingRequestSession = global.navigator.xr.requestSession;
+          Object.defineProperty(global.navigator.xr, 'requestSessionInternal', { writable: true });
+          global.navigator.xr.requestSessionInternal = existingRequestSession;
+          const newRequestSession = (sessionMode, sessionInit) => {
+              const modifiedSessionPromise = (mode, init) => {
+                  return global.navigator.xr.requestSessionInternal(mode, init).then((session) => {
+                      Object.assign(session, new XRSessionWithLayer());
+                      let polyfilledSession = session;
+                      polyfilledSession.initializeSession(sessionMode);
+                      return Promise.resolve(polyfilledSession);
+                  });
+              };
+              if (sessionMode !== 'immersive-vr') {
+                  return modifiedSessionPromise(sessionMode, sessionInit);
+              }
+              if (!sessionInit) {
+                  return modifiedSessionPromise(sessionMode, sessionInit);
+              }
+              if (sessionInit.requiredFeatures && sessionInit.requiredFeatures.indexOf('layers') > -1) {
+                  const sessionInitClone = Object.assign({}, sessionInit);
+                  const reqFeatures = [...sessionInit.requiredFeatures];
+                  const layersIndex = reqFeatures.indexOf('layers');
+                  reqFeatures.splice(layersIndex, 1);
+                  sessionInitClone.requiredFeatures = reqFeatures;
+                  return modifiedSessionPromise(sessionMode, sessionInitClone);
+              }
+              return modifiedSessionPromise(sessionMode, sessionInit);
+          };
+          Object.defineProperty(global.navigator.xr, 'requestSession', { writable: true });
+          global.navigator.xr.requestSession = newRequestSession;
+      }
+  }
+
+  /**
+   * Copyright (c) Meta Platforms, Inc. and affiliates.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+  const DEFAULTS = {
+      ipd: 0.063,
+      fovy: Math.PI / 2,
+      headsetPosition: new Vector3(0, 1.6, 0),
+      headsetQuaternion: new Quaternion(),
+      stereoEnabled: false,
+  };
+  const Z_INDEX_SEM_CANVAS = 1;
+  const Z_INDEX_APP_CANVAS = 2;
+  const Z_INDEX_DEVUI_CANVAS = 3;
+  const Z_INDEX_DEVUI_CONTAINER = 4;
+  /**
+   * XRDevice is not a standard API class outlined in the WebXR Device API Specifications
+   * Instead, it serves as an user-facing interface to control the emulated XR Device
+   */
+  class XRDevice {
+      constructor(deviceConfig, deviceOptions = {}) {
+          var _a, _b, _c, _d, _e, _f;
+          this.version = VERSION;
+          const globalSpace = new GlobalSpace();
+          const viewerSpace = new XRReferenceSpace(XRReferenceSpaceType.Viewer, globalSpace);
+          const viewSpaces = {
+              [XREye.Left]: new XRSpace(viewerSpace),
+              [XREye.Right]: new XRSpace(viewerSpace),
+              [XREye.None]: new XRSpace(viewerSpace),
+          };
+          const controllerConfig = deviceConfig.controllerConfig;
+          const controllers = {};
           if (controllerConfig) {
               Object.values(XRHandedness).forEach((handedness) => {
                   if (controllerConfig.layout[handedness]) {
@@ -4839,7 +7754,7 @@
               visibilityState: 'visible',
               pendingVisibilityState: null,
               xrSystem: null,
-              matrix: create$3(),
+              matrix: create$5(),
               globalSpace,
               viewerSpace,
               viewSpaces,
@@ -4961,7 +7876,10 @@
           };
           this[P_DEVICE].updateViews();
       }
-      installRuntime(globalObject = globalThis) {
+      installRuntime(options) {
+          var _a;
+          const globalObject = (_a = options === null || options === void 0 ? void 0 : options.globalObject) !== null && _a !== void 0 ? _a : globalThis;
+          const polyfillLayers = options === null || options === void 0 ? void 0 : options.polyfillLayers;
           Object.defineProperty(WebGL2RenderingContext.prototype, 'makeXRCompatible', {
               value: function () {
                   return new Promise((resolve, _reject) => {
@@ -5003,6 +7921,13 @@
           globalObject['XRInputSourceEvent'] = XRInputSourceEvent;
           globalObject['XRInputSourcesChangeEvent'] = XRInputSourcesChangeEvent;
           globalObject['XRReferenceSpaceEvent'] = XRReferenceSpaceEvent;
+          if (polyfillLayers) {
+              new WebXRLayersPolyfill();
+          }
+          else {
+              globalObject['XRMediaBinding'] = undefined;
+              globalObject['XRWebGLBinding'] = undefined;
+          }
       }
       installDevUI(devUIConstructor) {
           this[P_DEVICE].devui = new devUIConstructor(this);
@@ -5123,11 +8048,16 @@
           return this[P_DEVICE].name;
       }
       grantOfferedSession() {
-          var _a;
-          const pSystem = (_a = this[P_DEVICE].xrSystem) === null || _a === void 0 ? void 0 : _a[P_SYSTEM];
+          const xrSystem = this[P_DEVICE].xrSystem;
+          const pSystem = xrSystem === null || xrSystem === void 0 ? void 0 : xrSystem[P_SYSTEM];
           if (pSystem && pSystem.offeredSessionConfig) {
-              pSystem.grantSession(pSystem.offeredSessionConfig);
+              const { resolve, reject, mode, options } = pSystem.offeredSessionConfig;
+              // Clear the offered session config first
               pSystem.offeredSessionConfig = undefined;
+              // Use the same requestSession flow to ensure identical behavior
+              xrSystem.requestSession(mode, options)
+                  .then(resolve)
+                  .catch(reject);
           }
       }
       recenter() {
@@ -5446,7 +8376,7 @@
    */
   const compress = (arr) => {
       const out = [];
-      arr.forEach((num) => {
+      Array.from(arr).forEach((num) => {
           out.push(parseFloat(num.toFixed(3)));
       });
       return out;
@@ -5469,8 +8399,8 @@
           const viewerMatrix = (_a = frame.getViewerPose(this[P_ACTION_RECORDER].refSpace)) === null || _a === void 0 ? void 0 : _a.transform.matrix;
           if (!viewerMatrix)
               return;
-          const position = getTranslation(create$2(), viewerMatrix);
-          const quaternion = getRotation(create(), viewerMatrix);
+          const position = getTranslation(create$4(), viewerMatrix);
+          const quaternion = getRotation(create$2(), viewerMatrix);
           const actionFrame = {
               timeStamp,
               position,
@@ -5504,8 +8434,8 @@
               const schema = this[P_ACTION_RECORDER].schemaMap.get(index);
               const targetRayMatrix = (_a = frame.getPose(inputSource.targetRaySpace, this[P_ACTION_RECORDER].refSpace)) === null || _a === void 0 ? void 0 : _a.transform.matrix;
               if (targetRayMatrix) {
-                  const targetRayPosition = getTranslation(create$2(), targetRayMatrix);
-                  const targetRayQuaternion = getRotation(create(), targetRayMatrix);
+                  const targetRayPosition = getTranslation(create$4(), targetRayMatrix);
+                  const targetRayQuaternion = getRotation(create$2(), targetRayMatrix);
                   const inputFrame = {
                       index,
                       targetRayTransform: {
@@ -5516,8 +8446,8 @@
                   if (schema.hasGrip) {
                       const gripMatrix = (_b = frame.getPose(inputSource.gripSpace, this[P_ACTION_RECORDER].refSpace)) === null || _b === void 0 ? void 0 : _b.transform.matrix;
                       if (gripMatrix) {
-                          const position = getTranslation(create$2(), gripMatrix);
-                          const quaternion = getRotation(create(), gripMatrix);
+                          const position = getTranslation(create$4(), gripMatrix);
+                          const quaternion = getRotation(create$2(), gripMatrix);
                           inputFrame.gripTransform = {
                               position,
                               quaternion,
@@ -5536,8 +8466,8 @@
                           for (let offset = 0; offset < 25; offset++) {
                               const jointMatrix = this[P_ACTION_RECORDER].jointTransforms.slice(offset * 16, (offset + 1) * 16);
                               const radius = this[P_ACTION_RECORDER].jointRadii[offset];
-                              const position = getTranslation(create$2(), jointMatrix);
-                              const quaternion = getRotation(create(), jointMatrix);
+                              const position = getTranslation(create$4(), jointMatrix);
+                              const quaternion = getRotation(create$2(), jointMatrix);
                               const jointName = jointSpaces[offset].jointName;
                               hand[jointName] = { position, quaternion, radius };
                           }