iwer 2.0.1 → 2.1.1

package/build/iwer.module.js

@@ -2,19 +2,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
@@ -26,11 +17,9 @@ if (!Math.hypot) Math.hypot = function () {
  *
  * @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;
@@ -38,7 +27,6 @@ function create$4() {
     out[6] = 0;
     out[7] = 0;
   }
-
   out[0] = 1;
   out[4] = 1;
   out[8] = 1;
@@ -55,11 +43,9 @@ function create$4() {
  *
  * @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;
@@ -73,22 +59,21 @@ function create$3() {
     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];
@@ -107,6 +92,7 @@ function clone(a) {
   out[15] = a[15];
   return out;
 }
+
 /**
  * Copy the values from one mat4 to another
  *
@@ -114,7 +100,6 @@ function clone(a) {
  * @param {ReadonlyMat4} a the source matrix
  * @returns {mat4} out
  */
-
 function copy$3(out, a) {
   out[0] = a[0];
   out[1] = a[1];
@@ -134,13 +119,13 @@ function copy$3(out, a) {
   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;
@@ -160,31 +145,31 @@ function identity(out) {
   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;
@@ -196,14 +181,13 @@ function invert(out, a) {
   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;
@@ -223,6 +207,7 @@ function invert(out, a) {
   out[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
   return out;
 }
+
 /**
  * Multiplies two mat4s
  *
@@ -231,29 +216,29 @@ function invert(out, a) {
  * @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;
@@ -284,6 +269,7 @@ function multiply$1(out, a, b) {
   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):
@@ -295,7 +281,6 @@ function multiply$1(out, a, b) {
  * @param {ReadonlyVec3} v Translation vector
  * @returns {mat4} out
  */
-
 function fromTranslation(out, v) {
   out[0] = 1;
   out[1] = 0;
@@ -315,6 +300,7 @@ function fromTranslation(out, v) {
   out[15] = 1;
   return out;
 }
+
 /**
  * Creates a matrix from a given angle around a given axis
  * This is equivalent to (but much faster than):
@@ -327,26 +313,24 @@ function fromTranslation(out, v) {
  * @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;
@@ -365,28 +349,28 @@ function fromRotation(out, rad, axis) {
   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;
@@ -417,6 +401,7 @@ function fromRotationTranslation(out, q, v) {
   out[15] = 1;
   return out;
 }
+
 /**
  * Returns the translation vector component of a transformation
  *  matrix. If a matrix is built with fromRotationTranslation,
@@ -426,24 +411,23 @@ function fromRotationTranslation(out, q, v) {
  * @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];
@@ -454,11 +438,12 @@ function getScaling(out, mat) {
   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
@@ -468,9 +453,8 @@ function getScaling(out, mat) {
  * @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];
@@ -486,7 +470,6 @@ function getRotation(out, mat) {
   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;
@@ -512,33 +495,32 @@ function getRotation(out, mat) {
     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;
@@ -572,6 +554,7 @@ function fromRotationTranslationScale(out, q, v, s) {
   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],
@@ -585,10 +568,8 @@ function fromRotationTranslationScale(out, q, v, s) {
  * @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;
@@ -603,23 +584,21 @@ function perspectiveNO(out, fovy, aspect, near, far) {
   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;
 
 /**
@@ -632,31 +611,29 @@ var perspective = perspectiveNO;
  *
  * @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
  *
@@ -665,14 +642,14 @@ function length(a) {
  * @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
  *
@@ -680,13 +657,13 @@ function fromValues$2(x, y, z) {
  * @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
  *
@@ -696,13 +673,13 @@ function copy$2(out, a) {
  * @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
  *
@@ -711,13 +688,13 @@ function set$2(out, x, y, z) {
  * @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
  *
@@ -725,23 +702,21 @@ function add(out, a, b) {
  * @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
  *
@@ -749,10 +724,10 @@ function normalize$2(out, a) {
  * @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
  *
@@ -761,19 +736,19 @@ function dot(a, b) {
  * @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
  *
@@ -783,7 +758,6 @@ function cross(out, a, b) {
  * @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];
@@ -793,55 +767,51 @@ function lerp(out, a, b, t) {
   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.
  *
@@ -854,26 +824,21 @@ var len = length;
  * @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];
@@ -883,7 +848,6 @@ var len = length;
       a[i + 1] = vec[1];
       a[i + 2] = vec[2];
     }
-
     return a;
   };
 })();
@@ -898,19 +862,17 @@ var len = length;
  *
  * @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
  *
@@ -920,15 +882,15 @@ function create$1() {
  * @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
  *
@@ -936,7 +898,6 @@ function fromValues$1(x, y, z, w) {
  * @param {ReadonlyVec4} a the source vector
  * @returns {vec4} out
  */
-
 function copy$1(out, a) {
   out[0] = a[0];
   out[1] = a[1];
@@ -944,6 +905,7 @@ function copy$1(out, a) {
   out[3] = a[3];
   return out;
 }
+
 /**
  * Set the components of a vec4 to the given values
  *
@@ -954,7 +916,6 @@ function copy$1(out, a) {
  * @param {Number} w W component
  * @returns {vec4} out
  */
-
 function set$1(out, x, y, z, w) {
   out[0] = x;
   out[1] = y;
@@ -962,6 +923,7 @@ function set$1(out, x, y, z, w) {
   out[3] = w;
   return out;
 }
+
 /**
  * Normalize a vec4
  *
@@ -969,24 +931,22 @@ function set$1(out, x, y, z, w) {
  * @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.
  *
@@ -995,18 +955,18 @@ function normalize$1(out, a) {
  * @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.
  *
@@ -1019,26 +979,21 @@ function transformMat4(out, a, m) {
  * @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];
@@ -1050,13 +1005,12 @@ function transformMat4(out, a, m) {
       a[i + 2] = vec[2];
       a[i + 3] = vec[3];
     }
-
     return a;
   };
 })();
 
 /**
- * Quaternion
+ * Quaternion in the format XYZW
  * @module quat
  */
 
@@ -1065,19 +1019,17 @@ function transformMat4(out, a, m) {
  *
  * @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.
@@ -1087,7 +1039,6 @@ function create() {
  * @param {Number} rad the angle in radians
  * @returns {quat} out
  **/
-
 function setAxisAngle(out, axis, rad) {
   rad = rad * 0.5;
   var s = Math.sin(rad);
@@ -1097,6 +1048,7 @@ function setAxisAngle(out, axis, rad) {
   out[3] = Math.cos(rad);
   return out;
 }
+
 /**
  * Multiplies two quat's
  *
@@ -1105,22 +1057,22 @@ function setAxisAngle(out, axis, rad) {
  * @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
  *
@@ -1130,31 +1082,30 @@ function multiply(out, a, b) {
  * @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);
@@ -1166,15 +1117,15 @@ function slerp(out, a, b, t) {
     //  ... 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.
@@ -1183,7 +1134,6 @@ function slerp(out, a, b, t) {
  * @param {ReadonlyQuat} a quat to calculate conjugate of
  * @returns {quat} out
  */
-
 function conjugate(out, a) {
   out[0] = -a[0];
   out[1] = -a[1];
@@ -1191,6 +1141,7 @@ function conjugate(out, a) {
   out[3] = a[3];
   return out;
 }
+
 /**
  * Creates a quaternion from the given 3x3 rotation matrix.
  *
@@ -1202,20 +1153,16 @@ function conjugate(out, a) {
  * @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;
@@ -1233,9 +1180,9 @@ function fromMat3(out, m) {
     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
  *
@@ -1246,8 +1193,8 @@ function fromMat3(out, m) {
  * @returns {quat} a new quaternion
  * @function
  */
-
 var fromValues = fromValues$1;
+
 /**
  * Copy the values from one quat to another
  *
@@ -1256,8 +1203,8 @@ var fromValues = fromValues$1;
  * @returns {quat} out
  * @function
  */
-
 var copy = copy$1;
+
 /**
  * Set the components of a quat to the given values
  *
@@ -1269,8 +1216,8 @@ var copy = copy$1;
  * @returns {quat} out
  * @function
  */
-
 var set = set$1;
+
 /**
  * Normalize a quat
  *
@@ -1279,8 +1226,8 @@ var set = set$1;
  * @returns {quat} out
  * @function
  */
-
 var normalize = normalize$1;
+
 /**
  * Sets a quaternion to represent the shortest rotation from one
  * vector to another.
@@ -1292,14 +1239,12 @@ var normalize = normalize$1;
  * @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);
@@ -1322,6 +1267,7 @@ var normalize = normalize$1;
     }
   };
 })();
+
 /**
  * Performs a spherical linear interpolation with two control points
  *
@@ -1333,10 +1279,9 @@ var normalize = normalize$1;
  * @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);
@@ -1344,6 +1289,7 @@ var normalize = normalize$1;
     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
@@ -1354,9 +1300,8 @@ var normalize = normalize$1;
  * @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];
@@ -1416,14 +1361,14 @@ class XRSpace extends EventTarget {
         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 {
@@ -1435,7 +1380,7 @@ class XRSpaceUtils {
     // 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);
     }
@@ -1445,11 +1390,11 @@ class XRSpaceUtils {
         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;
     }
 }
@@ -1467,7 +1412,7 @@ class XRSpaceUtils {
 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];
@@ -1529,7 +1474,7 @@ class Vector3 {
 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];
@@ -1578,7 +1523,7 @@ class Quaternion {
     }
     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) {
@@ -2194,38 +2139,6 @@ class XRAnchorUtils {
     }
 }
 
-/**
- * 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.
  *
@@ -2236,14 +2149,14 @@ class XRRigidTransform {
     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,
         };
@@ -2257,25 +2170,25 @@ class XRRigidTransform {
     }
     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;
         }
@@ -2283,7 +2196,7 @@ class XRRigidTransform {
     }
 }
 
-class DOMPointReadOnly {
+class DOMPointReadOnly$1 {
     constructor(x = 0, y = 0, z = 0, w = 1) {
         this.x = x;
         this.y = y;
@@ -2298,8 +2211,8 @@ class XRRay {
         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];
@@ -2320,7 +2233,7 @@ class XRRay {
             }
             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;
@@ -2336,8 +2249,8 @@ class XRRay {
         _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,
         };
     }
@@ -2351,23 +2264,23 @@ class XRRay {
         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;
     }
@@ -2634,14 +2547,14 @@ class XRViewerPose extends XRPose {
  * 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) {
@@ -2651,7 +2564,7 @@ class XRFrame {
             active,
             animationFrame,
             predictedDisplayTime,
-            tempMat4: create$3(),
+            tempMat4: create$5(),
             detectedPlanes: new XRPlaneSet(),
             detectedMeshes: new XRMeshSet(),
             trackedAnchors: session[P_SESSION].frameTrackedAnchors,
@@ -2669,9 +2582,9 @@ class XRFrame {
             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],
@@ -2822,9 +2735,9 @@ class XRSession extends EventTarget {
             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];
@@ -3073,8 +2986,8 @@ class XRSession extends EventTarget {
                     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);
@@ -4246,15 +4159,15 @@ const XRHandGamepadConfig = {
     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);
@@ -4447,8 +4360,8 @@ class ActionPlayer {
             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));
@@ -4614,7 +4527,7 @@ class ActionPlayer {
     }
 }
 
-const VERSION = "2.0.1";
+const VERSION = "2.1.1";
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -4755,39 +4668,3041 @@ class XRViewport {
 }
 
 /**
- * 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]) {
@@ -4833,7 +7748,7 @@ class XRDevice {
             visibilityState: 'visible',
             pendingVisibilityState: null,
             xrSystem: null,
-            matrix: create$3(),
+            matrix: create$5(),
             globalSpace,
             viewerSpace,
             viewSpaces,
@@ -4955,7 +7870,10 @@ class XRDevice {
         };
         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) => {
@@ -4997,6 +7915,13 @@ class XRDevice {
         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);
@@ -5117,11 +8042,16 @@ class XRDevice {
         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() {
@@ -5440,7 +8370,7 @@ const metaQuest3 = {
  */
 const compress = (arr) => {
     const out = [];
-    arr.forEach((num) => {
+    Array.from(arr).forEach((num) => {
         out.push(parseFloat(num.toFixed(3)));
     });
     return out;
@@ -5463,8 +8393,8 @@ class ActionRecorder {
         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,
@@ -5498,8 +8428,8 @@ class ActionRecorder {
             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: {
@@ -5510,8 +8440,8 @@ class ActionRecorder {
                 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,
@@ -5530,8 +8460,8 @@ class ActionRecorder {
                         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 };
                         }