@luma.gl/shadertools 9.3.0-alpha.4 → 9.3.0-alpha.6

package/dist/dist.dev.js

@@ -85,6 +85,7 @@ var __exports__ = (() => {
     picking: () => picking,
     preprocess: () => preprocess,
     random: () => random,
+    skin: () => skin,
     toHalfFloat: () => toHalfFloat,
     typeToChannelCount: () => typeToChannelCount,
     typeToChannelSuffix: () => typeToChannelSuffix
@@ -234,7 +235,7 @@ var __exports__ = (() => {
         throw new Error(type);
     }
   }
-  function injectShader(source3, stage, inject, injectStandardStubs = false) {
+  function injectShader(source4, stage, inject, injectStandardStubs = false) {
     const isVertex = stage === "vertex";
     for (const key in inject) {
       const fragmentData = inject[key];
@@ -248,43 +249,43 @@ var __exports__ = (() => {
       switch (key) {
         case "vs:#decl":
           if (isVertex) {
-            source3 = source3.replace(DECLARATION_INJECT_MARKER, fragmentString);
+            source4 = source4.replace(DECLARATION_INJECT_MARKER, fragmentString);
           }
           break;
         case "vs:#main-start":
           if (isVertex) {
-            source3 = source3.replace(REGEX_START_OF_MAIN, (match) => match + fragmentString);
+            source4 = source4.replace(REGEX_START_OF_MAIN, (match) => match + fragmentString);
           }
           break;
         case "vs:#main-end":
           if (isVertex) {
-            source3 = source3.replace(REGEX_END_OF_MAIN, (match) => fragmentString + match);
+            source4 = source4.replace(REGEX_END_OF_MAIN, (match) => fragmentString + match);
           }
           break;
         case "fs:#decl":
           if (!isVertex) {
-            source3 = source3.replace(DECLARATION_INJECT_MARKER, fragmentString);
+            source4 = source4.replace(DECLARATION_INJECT_MARKER, fragmentString);
           }
           break;
         case "fs:#main-start":
           if (!isVertex) {
-            source3 = source3.replace(REGEX_START_OF_MAIN, (match) => match + fragmentString);
+            source4 = source4.replace(REGEX_START_OF_MAIN, (match) => match + fragmentString);
           }
           break;
         case "fs:#main-end":
           if (!isVertex) {
-            source3 = source3.replace(REGEX_END_OF_MAIN, (match) => fragmentString + match);
+            source4 = source4.replace(REGEX_END_OF_MAIN, (match) => fragmentString + match);
           }
           break;
         default:
-          source3 = source3.replace(key, (match) => match + fragmentString);
+          source4 = source4.replace(key, (match) => match + fragmentString);
       }
     }
-    source3 = source3.replace(DECLARATION_INJECT_MARKER, "");
+    source4 = source4.replace(DECLARATION_INJECT_MARKER, "");
     if (injectStandardStubs) {
-      source3 = source3.replace(/\}\s*$/, (match) => match + MODULE_INJECTORS[stage]);
+      source4 = source4.replace(/\}\s*$/, (match) => match + MODULE_INJECTORS[stage]);
     }
-    return source3;
+    return source4;
   }
   function combineInjects(injects) {
     const result = {};
@@ -464,18 +465,18 @@ ${inject[key]}` : inject[key];
   }
 
   // src/lib/shader-transpiler/transpile-glsl-shader.ts
-  function transpileGLSLShader(source3, stage) {
-    const sourceGLSLVersion = Number(source3.match(/^#version[ \t]+(\d+)/m)?.[1] || 100);
+  function transpileGLSLShader(source4, stage) {
+    const sourceGLSLVersion = Number(source4.match(/^#version[ \t]+(\d+)/m)?.[1] || 100);
     if (sourceGLSLVersion !== 300) {
       throw new Error("luma.gl v9 only supports GLSL 3.00 shader sources");
     }
     switch (stage) {
       case "vertex":
-        source3 = convertShader(source3, ES300_VERTEX_REPLACEMENTS);
-        return source3;
+        source4 = convertShader(source4, ES300_VERTEX_REPLACEMENTS);
+        return source4;
       case "fragment":
-        source3 = convertShader(source3, ES300_FRAGMENT_REPLACEMENTS);
-        return source3;
+        source4 = convertShader(source4, ES300_FRAGMENT_REPLACEMENTS);
+        return source4;
       default:
         throw new Error(stage);
     }
@@ -499,11 +500,11 @@ ${inject[key]}` : inject[key];
     // `varying` keyword replaced with `in`
     [makeVariableTextRegExp("varying"), "in $1"]
   ];
-  function convertShader(source3, replacements) {
+  function convertShader(source4, replacements) {
     for (const [pattern, replacement] of replacements) {
-      source3 = source3.replace(pattern, replacement);
+      source4 = source4.replace(pattern, replacement);
     }
-    return source3;
+    return source4;
   }
   function makeVariableTextRegExp(qualifier) {
     return new RegExp(`\\b${qualifier}[ \\t]+(\\w+[ \\t]+\\w+(\\[\\w+\\])?;)`, "g");
@@ -565,11 +566,11 @@ ${inject[key]}` : inject[key];
   }
 
   // src/lib/glsl-utils/get-shader-info.ts
-  function getShaderInfo(source3, defaultName) {
+  function getShaderInfo(source4, defaultName) {
     return {
-      name: getShaderName(source3, defaultName),
+      name: getShaderName(source4, defaultName),
       language: "glsl",
-      version: getShaderVersion(source3)
+      version: getShaderVersion(source4)
     };
   }
   function getShaderName(shader, defaultName = "unnamed") {
@@ -577,9 +578,9 @@ ${inject[key]}` : inject[key];
     const match = SHADER_NAME_REGEXP.exec(shader);
     return match ? match[1] : defaultName;
   }
-  function getShaderVersion(source3) {
+  function getShaderVersion(source4) {
     let version = 100;
-    const words = source3.match(/[^\s]+/g);
+    const words = source4.match(/[^\s]+/g);
     if (words && words.length >= 2 && words[0] === "#version") {
       const parsedVersion = parseInt(words[1], 10);
       if (Number.isFinite(parsedVersion)) {
@@ -615,19 +616,19 @@ ${DECLARATION_INJECT_MARKER}
     };
   }
   function assembleGLSLShaderPair(options) {
-    const { vs: vs3, fs: fs4 } = options;
+    const { vs: vs4, fs: fs5 } = options;
     const modules = getShaderModuleDependencies(options.modules || []);
     return {
       vs: assembleShaderGLSL(options.platformInfo, {
         ...options,
-        source: vs3,
+        source: vs4,
         stage: "vertex",
         modules
       }),
       fs: assembleShaderGLSL(options.platformInfo, {
         ...options,
         // @ts-expect-error
-        source: fs4,
+        source: fs5,
         stage: "fragment",
         modules
       }),
@@ -637,7 +638,7 @@ ${DECLARATION_INJECT_MARKER}
   function assembleShaderWGSL(platformInfo, options) {
     const {
       // id,
-      source: source3,
+      source: source4,
       stage,
       modules,
       // defines = {},
@@ -645,8 +646,8 @@ ${DECLARATION_INJECT_MARKER}
       inject = {},
       log: log2
     } = options;
-    assert(typeof source3 === "string", "shader source must be a string");
-    const coreSource = source3;
+    assert(typeof source4 === "string", "shader source must be a string");
+    const coreSource = source4;
     let assembledSource = "";
     const hookFunctionMap = normalizeShaderHooks(hookFunctions);
     const hookInjections = {};
@@ -701,7 +702,7 @@ ${DECLARATION_INJECT_MARKER}
   }
   function assembleShaderGLSL(platformInfo, options) {
     const {
-      source: source3,
+      source: source4,
       stage,
       language = "glsl",
       modules,
@@ -711,11 +712,11 @@ ${DECLARATION_INJECT_MARKER}
       prologue = true,
       log: log2
     } = options;
-    assert(typeof source3 === "string", "shader source must be a string");
-    const sourceVersion = language === "glsl" ? getShaderInfo(source3).version : -1;
+    assert(typeof source4 === "string", "shader source must be a string");
+    const sourceVersion = language === "glsl" ? getShaderInfo(source4).version : -1;
     const targetVersion = platformInfo.shaderLanguageVersion;
     const sourceVersionDirective = sourceVersion === 100 ? "#version 100" : "#version 300 es";
-    const sourceLines = source3.split("\n");
+    const sourceLines = source4.split("\n");
     const coreSource = sourceLines.slice(1).join("\n");
     const allDefines = {};
     modules.forEach((module) => {
@@ -837,38 +838,60 @@ ${getApplicationDefines(allDefines)}
       throw new Error("Shader module must have a name");
     }
     const moduleName = module.name.toUpperCase().replace(/[^0-9a-z]/gi, "_");
-    let source3 = `// ----- MODULE ${module.name} ---------------
+    let source4 = `// ----- MODULE ${module.name} ---------------
 
 `;
     if (stage !== "wgsl") {
-      source3 += `#define MODULE_${moduleName}
+      source4 += `#define MODULE_${moduleName}
 `;
     }
-    source3 += `${moduleSource}
+    source4 += `${moduleSource}
 `;
-    return source3;
+    return source4;
   }
 
   // src/lib/preprocessor/preprocessor.ts
   var IFDEF_REGEXP = /^\s*\#\s*ifdef\s*([a-zA-Z_]+)\s*$/;
+  var IFNDEF_REGEXP = /^\s*\#\s*ifndef\s*([a-zA-Z_]+)\s*(?:\/\/.*)?$/;
+  var ELSE_REGEXP = /^\s*\#\s*else\s*(?:\/\/.*)?$/;
   var ENDIF_REGEXP = /^\s*\#\s*endif\s*$/;
-  function preprocess(source3, options) {
-    const lines = source3.split("\n");
+  var IFDEF_WITH_COMMENT_REGEXP = /^\s*\#\s*ifdef\s*([a-zA-Z_]+)\s*(?:\/\/.*)?$/;
+  var ENDIF_WITH_COMMENT_REGEXP = /^\s*\#\s*endif\s*(?:\/\/.*)?$/;
+  function preprocess(source4, options) {
+    const lines = source4.split("\n");
     const output = [];
+    const conditionalStack = [];
     let conditional = true;
-    let currentDefine = null;
     for (const line of lines) {
-      const matchIf = line.match(IFDEF_REGEXP);
-      const matchEnd = line.match(ENDIF_REGEXP);
-      if (matchIf) {
-        currentDefine = matchIf[1];
-        conditional = Boolean(options?.defines?.[currentDefine]);
+      const matchIf = line.match(IFDEF_WITH_COMMENT_REGEXP) || line.match(IFDEF_REGEXP);
+      const matchIfNot = line.match(IFNDEF_REGEXP);
+      const matchElse = line.match(ELSE_REGEXP);
+      const matchEnd = line.match(ENDIF_WITH_COMMENT_REGEXP) || line.match(ENDIF_REGEXP);
+      if (matchIf || matchIfNot) {
+        const defineName = (matchIf || matchIfNot)?.[1];
+        const defineValue = Boolean(options?.defines?.[defineName]);
+        const branchTaken = matchIf ? defineValue : !defineValue;
+        const active = conditional && branchTaken;
+        conditionalStack.push({ parentActive: conditional, branchTaken, active });
+        conditional = active;
+      } else if (matchElse) {
+        const currentConditional = conditionalStack[conditionalStack.length - 1];
+        if (!currentConditional) {
+          throw new Error("Encountered #else without matching #ifdef or #ifndef");
+        }
+        currentConditional.active = currentConditional.parentActive && !currentConditional.branchTaken;
+        currentConditional.branchTaken = true;
+        conditional = currentConditional.active;
       } else if (matchEnd) {
-        conditional = true;
+        conditionalStack.pop();
+        conditional = conditionalStack.length ? conditionalStack[conditionalStack.length - 1].active : true;
       } else if (conditional) {
         output.push(line);
       }
     }
+    if (conditionalStack.length > 0) {
+      throw new Error("Unterminated conditional block in shader source");
+    }
     return output.join("\n");
   }
 
@@ -923,14 +946,21 @@ ${getApplicationDefines(allDefines)}
     assembleWGSLShader(props) {
       const modules = this._getModuleList(props.modules);
       const hookFunctions = this._hookFunctions;
-      const { source: source3, getUniforms: getUniforms4 } = assembleWGSLShader({
+      const { source: source4, getUniforms: getUniforms4 } = assembleWGSLShader({
         ...props,
         // @ts-expect-error
         source: props.source,
         modules,
         hookFunctions
       });
-      const preprocessedSource = props.platformInfo.shaderLanguage === "wgsl" ? preprocess(source3) : source3;
+      const defines = {
+        ...modules.reduce((accumulator, module) => {
+          Object.assign(accumulator, module.defines);
+          return accumulator;
+        }, {}),
+        ...props.defines
+      };
+      const preprocessedSource = props.platformInfo.shaderLanguage === "wgsl" ? preprocess(source4, { defines }) : source4;
       return { source: preprocessedSource, getUniforms: getUniforms4, modules };
     }
     /**
@@ -1188,12 +1218,53 @@ void main() {
   };
   globalThis.mathgl = globalThis.mathgl || { config: { ...DEFAULT_CONFIG } };
   var config = globalThis.mathgl.config;
+  function formatValue(value, { precision = config.precision } = {}) {
+    value = round(value);
+    return `${parseFloat(value.toPrecision(precision))}`;
+  }
   function isArray(value) {
     return Array.isArray(value) || ArrayBuffer.isView(value) && !(value instanceof DataView);
   }
   function clamp(value, min, max) {
     return map(value, (value2) => Math.max(min, Math.min(max, value2)));
   }
+  function equals(a, b, epsilon) {
+    const oldEpsilon = config.EPSILON;
+    if (epsilon) {
+      config.EPSILON = epsilon;
+    }
+    try {
+      if (a === b) {
+        return true;
+      }
+      if (isArray(a) && isArray(b)) {
+        if (a.length !== b.length) {
+          return false;
+        }
+        for (let i = 0; i < a.length; ++i) {
+          if (!equals(a[i], b[i])) {
+            return false;
+          }
+        }
+        return true;
+      }
+      if (a && a.equals) {
+        return a.equals(b);
+      }
+      if (b && b.equals) {
+        return b.equals(a);
+      }
+      if (typeof a === "number" && typeof b === "number") {
+        return Math.abs(a - b) <= config.EPSILON * Math.max(1, Math.abs(a), Math.abs(b));
+      }
+      return false;
+    } finally {
+      config.EPSILON = oldEpsilon;
+    }
+  }
+  function round(value) {
+    return Math.round(value / config.EPSILON) * config.EPSILON;
+  }
   function duplicateArray(array) {
     return array.clone ? array.clone() : new Array(array.length);
   }
@@ -1210,6 +1281,1620 @@ void main() {
     return func(value);
   }
 
+  // ../../node_modules/@math.gl/core/dist/classes/base/math-array.js
+  var MathArray = class extends Array {
+    // Common methods
+    /**
+     * Clone the current object
+     * @returns a new copy of this object
+     */
+    clone() {
+      return new this.constructor().copy(this);
+    }
+    fromArray(array, offset = 0) {
+      for (let i = 0; i < this.ELEMENTS; ++i) {
+        this[i] = array[i + offset];
+      }
+      return this.check();
+    }
+    toArray(targetArray = [], offset = 0) {
+      for (let i = 0; i < this.ELEMENTS; ++i) {
+        targetArray[offset + i] = this[i];
+      }
+      return targetArray;
+    }
+    toObject(targetObject) {
+      return targetObject;
+    }
+    from(arrayOrObject) {
+      return Array.isArray(arrayOrObject) ? this.copy(arrayOrObject) : (
+        // @ts-ignore
+        this.fromObject(arrayOrObject)
+      );
+    }
+    to(arrayOrObject) {
+      if (arrayOrObject === this) {
+        return this;
+      }
+      return isArray(arrayOrObject) ? this.toArray(arrayOrObject) : this.toObject(arrayOrObject);
+    }
+    toTarget(target) {
+      return target ? this.to(target) : this;
+    }
+    /** @deprecated */
+    toFloat32Array() {
+      return new Float32Array(this);
+    }
+    toString() {
+      return this.formatString(config);
+    }
+    /** Formats string according to options */
+    formatString(opts) {
+      let string = "";
+      for (let i = 0; i < this.ELEMENTS; ++i) {
+        string += (i > 0 ? ", " : "") + formatValue(this[i], opts);
+      }
+      return `${opts.printTypes ? this.constructor.name : ""}[${string}]`;
+    }
+    equals(array) {
+      if (!array || this.length !== array.length) {
+        return false;
+      }
+      for (let i = 0; i < this.ELEMENTS; ++i) {
+        if (!equals(this[i], array[i])) {
+          return false;
+        }
+      }
+      return true;
+    }
+    exactEquals(array) {
+      if (!array || this.length !== array.length) {
+        return false;
+      }
+      for (let i = 0; i < this.ELEMENTS; ++i) {
+        if (this[i] !== array[i]) {
+          return false;
+        }
+      }
+      return true;
+    }
+    // Modifiers
+    /** Negates all values in this object */
+    negate() {
+      for (let i = 0; i < this.ELEMENTS; ++i) {
+        this[i] = -this[i];
+      }
+      return this.check();
+    }
+    lerp(a, b, t) {
+      if (t === void 0) {
+        return this.lerp(this, a, b);
+      }
+      for (let i = 0; i < this.ELEMENTS; ++i) {
+        const ai = a[i];
+        const endValue = typeof b === "number" ? b : b[i];
+        this[i] = ai + t * (endValue - ai);
+      }
+      return this.check();
+    }
+    /** Minimal */
+    min(vector) {
+      for (let i = 0; i < this.ELEMENTS; ++i) {
+        this[i] = Math.min(vector[i], this[i]);
+      }
+      return this.check();
+    }
+    /** Maximal */
+    max(vector) {
+      for (let i = 0; i < this.ELEMENTS; ++i) {
+        this[i] = Math.max(vector[i], this[i]);
+      }
+      return this.check();
+    }
+    clamp(minVector, maxVector) {
+      for (let i = 0; i < this.ELEMENTS; ++i) {
+        this[i] = Math.min(Math.max(this[i], minVector[i]), maxVector[i]);
+      }
+      return this.check();
+    }
+    add(...vectors) {
+      for (const vector of vectors) {
+        for (let i = 0; i < this.ELEMENTS; ++i) {
+          this[i] += vector[i];
+        }
+      }
+      return this.check();
+    }
+    subtract(...vectors) {
+      for (const vector of vectors) {
+        for (let i = 0; i < this.ELEMENTS; ++i) {
+          this[i] -= vector[i];
+        }
+      }
+      return this.check();
+    }
+    scale(scale2) {
+      if (typeof scale2 === "number") {
+        for (let i = 0; i < this.ELEMENTS; ++i) {
+          this[i] *= scale2;
+        }
+      } else {
+        for (let i = 0; i < this.ELEMENTS && i < scale2.length; ++i) {
+          this[i] *= scale2[i];
+        }
+      }
+      return this.check();
+    }
+    /**
+     * Multiplies all elements by `scale`
+     * Note: `Matrix4.multiplyByScalar` only scales its 3x3 "minor"
+     */
+    multiplyByScalar(scalar) {
+      for (let i = 0; i < this.ELEMENTS; ++i) {
+        this[i] *= scalar;
+      }
+      return this.check();
+    }
+    // Debug checks
+    /** Throws an error if array length is incorrect or contains illegal values */
+    check() {
+      if (config.debug && !this.validate()) {
+        throw new Error(`math.gl: ${this.constructor.name} some fields set to invalid numbers'`);
+      }
+      return this;
+    }
+    /** Returns false if the array length is incorrect or contains illegal values */
+    validate() {
+      let valid = this.length === this.ELEMENTS;
+      for (let i = 0; i < this.ELEMENTS; ++i) {
+        valid = valid && Number.isFinite(this[i]);
+      }
+      return valid;
+    }
+    // three.js compatibility
+    /** @deprecated */
+    sub(a) {
+      return this.subtract(a);
+    }
+    /** @deprecated */
+    setScalar(a) {
+      for (let i = 0; i < this.ELEMENTS; ++i) {
+        this[i] = a;
+      }
+      return this.check();
+    }
+    /** @deprecated */
+    addScalar(a) {
+      for (let i = 0; i < this.ELEMENTS; ++i) {
+        this[i] += a;
+      }
+      return this.check();
+    }
+    /** @deprecated */
+    subScalar(a) {
+      return this.addScalar(-a);
+    }
+    /** @deprecated */
+    multiplyScalar(scalar) {
+      for (let i = 0; i < this.ELEMENTS; ++i) {
+        this[i] *= scalar;
+      }
+      return this.check();
+    }
+    /** @deprecated */
+    divideScalar(a) {
+      return this.multiplyByScalar(1 / a);
+    }
+    /** @deprecated */
+    clampScalar(min, max) {
+      for (let i = 0; i < this.ELEMENTS; ++i) {
+        this[i] = Math.min(Math.max(this[i], min), max);
+      }
+      return this.check();
+    }
+    /** @deprecated */
+    get elements() {
+      return this;
+    }
+  };
+
+  // ../../node_modules/@math.gl/core/dist/lib/validators.js
+  function validateVector(v, length) {
+    if (v.length !== length) {
+      return false;
+    }
+    for (let i = 0; i < v.length; ++i) {
+      if (!Number.isFinite(v[i])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  function checkNumber(value) {
+    if (!Number.isFinite(value)) {
+      throw new Error(`Invalid number ${JSON.stringify(value)}`);
+    }
+    return value;
+  }
+  function checkVector(v, length, callerName = "") {
+    if (config.debug && !validateVector(v, length)) {
+      throw new Error(`math.gl: ${callerName} some fields set to invalid numbers'`);
+    }
+    return v;
+  }
+
+  // ../../node_modules/@math.gl/core/dist/gl-matrix/common.js
+  var EPSILON = 1e-6;
+  var ARRAY_TYPE = typeof Float32Array !== "undefined" ? Float32Array : Array;
+  var degree = Math.PI / 180;
+
+  // ../../node_modules/@math.gl/core/dist/gl-matrix/vec2.js
+  function create() {
+    const out = new ARRAY_TYPE(2);
+    if (ARRAY_TYPE != Float32Array) {
+      out[0] = 0;
+      out[1] = 0;
+    }
+    return out;
+  }
+  function transformMat4(out, a, m) {
+    const x = a[0];
+    const y = a[1];
+    out[0] = m[0] * x + m[4] * y + m[12];
+    out[1] = m[1] * x + m[5] * y + m[13];
+    return out;
+  }
+  var forEach = function() {
+    const vec = create();
+    return function(a, stride, offset, count, fn, arg) {
+      let i;
+      let 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;
+    };
+  }();
+
+  // ../../node_modules/@math.gl/core/dist/lib/gl-matrix-extras.js
+  function vec2_transformMat4AsVector(out, a, m) {
+    const x = a[0];
+    const y = a[1];
+    const w = m[3] * x + m[7] * y || 1;
+    out[0] = (m[0] * x + m[4] * y) / w;
+    out[1] = (m[1] * x + m[5] * y) / w;
+    return out;
+  }
+  function vec3_transformMat4AsVector(out, a, m) {
+    const x = a[0];
+    const y = a[1];
+    const z = a[2];
+    const w = m[3] * x + m[7] * y + m[11] * z || 1;
+    out[0] = (m[0] * x + m[4] * y + m[8] * z) / w;
+    out[1] = (m[1] * x + m[5] * y + m[9] * z) / w;
+    out[2] = (m[2] * x + m[6] * y + m[10] * z) / w;
+    return out;
+  }
+
+  // ../../node_modules/@math.gl/core/dist/gl-matrix/vec3.js
+  function create2() {
+    const out = new ARRAY_TYPE(3);
+    if (ARRAY_TYPE != Float32Array) {
+      out[0] = 0;
+      out[1] = 0;
+      out[2] = 0;
+    }
+    return out;
+  }
+  function transformMat42(out, a, m) {
+    const x = a[0];
+    const y = a[1];
+    const z = a[2];
+    let w = m[3] * x + m[7] * y + m[11] * z + m[15];
+    w = w || 1;
+    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;
+    return out;
+  }
+  var forEach2 = function() {
+    const vec = create2();
+    return function(a, stride, offset, count, fn, arg) {
+      let i;
+      let 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];
+        vec[2] = a[i + 2];
+        fn(vec, vec, arg);
+        a[i] = vec[0];
+        a[i + 1] = vec[1];
+        a[i + 2] = vec[2];
+      }
+      return a;
+    };
+  }();
+
+  // ../../node_modules/@math.gl/core/dist/classes/base/matrix.js
+  var Matrix = class extends MathArray {
+    // fromObject(object) {
+    //   const array = object.elements;
+    //   return this.fromRowMajor(array);
+    // }
+    // toObject(object) {
+    //   const array = object.elements;
+    //   this.toRowMajor(array);
+    //   return object;
+    // }
+    // TODO better override formatString?
+    toString() {
+      let string = "[";
+      if (config.printRowMajor) {
+        string += "row-major:";
+        for (let row = 0; row < this.RANK; ++row) {
+          for (let col = 0; col < this.RANK; ++col) {
+            string += ` ${this[col * this.RANK + row]}`;
+          }
+        }
+      } else {
+        string += "column-major:";
+        for (let i = 0; i < this.ELEMENTS; ++i) {
+          string += ` ${this[i]}`;
+        }
+      }
+      string += "]";
+      return string;
+    }
+    getElementIndex(row, col) {
+      return col * this.RANK + row;
+    }
+    // By default assumes row major indices
+    getElement(row, col) {
+      return this[col * this.RANK + row];
+    }
+    // By default assumes row major indices
+    setElement(row, col, value) {
+      this[col * this.RANK + row] = checkNumber(value);
+      return this;
+    }
+    getColumn(columnIndex, result = new Array(this.RANK).fill(-0)) {
+      const firstIndex = columnIndex * this.RANK;
+      for (let i = 0; i < this.RANK; ++i) {
+        result[i] = this[firstIndex + i];
+      }
+      return result;
+    }
+    setColumn(columnIndex, columnVector) {
+      const firstIndex = columnIndex * this.RANK;
+      for (let i = 0; i < this.RANK; ++i) {
+        this[firstIndex + i] = columnVector[i];
+      }
+      return this;
+    }
+  };
+
+  // ../../node_modules/@math.gl/core/dist/gl-matrix/mat4.js
+  function identity(out) {
+    out[0] = 1;
+    out[1] = 0;
+    out[2] = 0;
+    out[3] = 0;
+    out[4] = 0;
+    out[5] = 1;
+    out[6] = 0;
+    out[7] = 0;
+    out[8] = 0;
+    out[9] = 0;
+    out[10] = 1;
+    out[11] = 0;
+    out[12] = 0;
+    out[13] = 0;
+    out[14] = 0;
+    out[15] = 1;
+    return out;
+  }
+  function transpose(out, a) {
+    if (out === a) {
+      const a01 = a[1];
+      const a02 = a[2];
+      const a03 = a[3];
+      const a12 = a[6];
+      const a13 = a[7];
+      const a23 = a[11];
+      out[1] = a[4];
+      out[2] = a[8];
+      out[3] = a[12];
+      out[4] = a01;
+      out[6] = a[9];
+      out[7] = a[13];
+      out[8] = a02;
+      out[9] = a12;
+      out[11] = a[14];
+      out[12] = a03;
+      out[13] = a13;
+      out[14] = a23;
+    } else {
+      out[0] = a[0];
+      out[1] = a[4];
+      out[2] = a[8];
+      out[3] = a[12];
+      out[4] = a[1];
+      out[5] = a[5];
+      out[6] = a[9];
+      out[7] = a[13];
+      out[8] = a[2];
+      out[9] = a[6];
+      out[10] = a[10];
+      out[11] = a[14];
+      out[12] = a[3];
+      out[13] = a[7];
+      out[14] = a[11];
+      out[15] = a[15];
+    }
+    return out;
+  }
+  function invert(out, a) {
+    const a00 = a[0];
+    const a01 = a[1];
+    const a02 = a[2];
+    const a03 = a[3];
+    const a10 = a[4];
+    const a11 = a[5];
+    const a12 = a[6];
+    const a13 = a[7];
+    const a20 = a[8];
+    const a21 = a[9];
+    const a22 = a[10];
+    const a23 = a[11];
+    const a30 = a[12];
+    const a31 = a[13];
+    const a32 = a[14];
+    const a33 = a[15];
+    const b00 = a00 * a11 - a01 * a10;
+    const b01 = a00 * a12 - a02 * a10;
+    const b02 = a00 * a13 - a03 * a10;
+    const b03 = a01 * a12 - a02 * a11;
+    const b04 = a01 * a13 - a03 * a11;
+    const b05 = a02 * a13 - a03 * a12;
+    const b06 = a20 * a31 - a21 * a30;
+    const b07 = a20 * a32 - a22 * a30;
+    const b08 = a20 * a33 - a23 * a30;
+    const b09 = a21 * a32 - a22 * a31;
+    const b10 = a21 * a33 - a23 * a31;
+    const b11 = a22 * a33 - a23 * a32;
+    let det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;
+    if (!det) {
+      return null;
+    }
+    det = 1 / det;
+    out[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;
+    out[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det;
+    out[2] = (a31 * b05 - a32 * b04 + a33 * b03) * det;
+    out[3] = (a22 * b04 - a21 * b05 - a23 * b03) * det;
+    out[4] = (a12 * b08 - a10 * b11 - a13 * b07) * det;
+    out[5] = (a00 * b11 - a02 * b08 + a03 * b07) * det;
+    out[6] = (a32 * b02 - a30 * b05 - a33 * b01) * det;
+    out[7] = (a20 * b05 - a22 * b02 + a23 * b01) * det;
+    out[8] = (a10 * b10 - a11 * b08 + a13 * b06) * det;
+    out[9] = (a01 * b08 - a00 * b10 - a03 * b06) * det;
+    out[10] = (a30 * b04 - a31 * b02 + a33 * b00) * det;
+    out[11] = (a21 * b02 - a20 * b04 - a23 * b00) * det;
+    out[12] = (a11 * b07 - a10 * b09 - a12 * b06) * det;
+    out[13] = (a00 * b09 - a01 * b07 + a02 * b06) * det;
+    out[14] = (a31 * b01 - a30 * b03 - a32 * b00) * det;
+    out[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
+    return out;
+  }
+  function determinant(a) {
+    const a00 = a[0];
+    const a01 = a[1];
+    const a02 = a[2];
+    const a03 = a[3];
+    const a10 = a[4];
+    const a11 = a[5];
+    const a12 = a[6];
+    const a13 = a[7];
+    const a20 = a[8];
+    const a21 = a[9];
+    const a22 = a[10];
+    const a23 = a[11];
+    const a30 = a[12];
+    const a31 = a[13];
+    const a32 = a[14];
+    const a33 = a[15];
+    const b0 = a00 * a11 - a01 * a10;
+    const b1 = a00 * a12 - a02 * a10;
+    const b2 = a01 * a12 - a02 * a11;
+    const b3 = a20 * a31 - a21 * a30;
+    const b4 = a20 * a32 - a22 * a30;
+    const b5 = a21 * a32 - a22 * a31;
+    const b6 = a00 * b5 - a01 * b4 + a02 * b3;
+    const b7 = a10 * b5 - a11 * b4 + a12 * b3;
+    const b8 = a20 * b2 - a21 * b1 + a22 * b0;
+    const b9 = a30 * b2 - a31 * b1 + a32 * b0;
+    return a13 * b6 - a03 * b7 + a33 * b8 - a23 * b9;
+  }
+  function multiply(out, a, b) {
+    const a00 = a[0];
+    const a01 = a[1];
+    const a02 = a[2];
+    const a03 = a[3];
+    const a10 = a[4];
+    const a11 = a[5];
+    const a12 = a[6];
+    const a13 = a[7];
+    const a20 = a[8];
+    const a21 = a[9];
+    const a22 = a[10];
+    const a23 = a[11];
+    const a30 = a[12];
+    const a31 = a[13];
+    const a32 = a[14];
+    const a33 = a[15];
+    let b0 = b[0];
+    let b1 = b[1];
+    let b2 = b[2];
+    let 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 translate(out, a, v) {
+    const x = v[0];
+    const y = v[1];
+    const z = v[2];
+    let a00;
+    let a01;
+    let a02;
+    let a03;
+    let a10;
+    let a11;
+    let a12;
+    let a13;
+    let a20;
+    let a21;
+    let a22;
+    let a23;
+    if (a === out) {
+      out[12] = a[0] * x + a[4] * y + a[8] * z + a[12];
+      out[13] = a[1] * x + a[5] * y + a[9] * z + a[13];
+      out[14] = a[2] * x + a[6] * y + a[10] * z + a[14];
+      out[15] = a[3] * x + a[7] * y + a[11] * z + a[15];
+    } else {
+      a00 = a[0];
+      a01 = a[1];
+      a02 = a[2];
+      a03 = a[3];
+      a10 = a[4];
+      a11 = a[5];
+      a12 = a[6];
+      a13 = a[7];
+      a20 = a[8];
+      a21 = a[9];
+      a22 = a[10];
+      a23 = a[11];
+      out[0] = a00;
+      out[1] = a01;
+      out[2] = a02;
+      out[3] = a03;
+      out[4] = a10;
+      out[5] = a11;
+      out[6] = a12;
+      out[7] = a13;
+      out[8] = a20;
+      out[9] = a21;
+      out[10] = a22;
+      out[11] = a23;
+      out[12] = a00 * x + a10 * y + a20 * z + a[12];
+      out[13] = a01 * x + a11 * y + a21 * z + a[13];
+      out[14] = a02 * x + a12 * y + a22 * z + a[14];
+      out[15] = a03 * x + a13 * y + a23 * z + a[15];
+    }
+    return out;
+  }
+  function scale(out, a, v) {
+    const x = v[0];
+    const y = v[1];
+    const z = v[2];
+    out[0] = a[0] * x;
+    out[1] = a[1] * x;
+    out[2] = a[2] * x;
+    out[3] = a[3] * x;
+    out[4] = a[4] * y;
+    out[5] = a[5] * y;
+    out[6] = a[6] * y;
+    out[7] = a[7] * y;
+    out[8] = a[8] * z;
+    out[9] = a[9] * z;
+    out[10] = a[10] * z;
+    out[11] = a[11] * z;
+    out[12] = a[12];
+    out[13] = a[13];
+    out[14] = a[14];
+    out[15] = a[15];
+    return out;
+  }
+  function rotate(out, a, rad, axis) {
+    let x = axis[0];
+    let y = axis[1];
+    let z = axis[2];
+    let len = Math.sqrt(x * x + y * y + z * z);
+    let c;
+    let s;
+    let t;
+    let a00;
+    let a01;
+    let a02;
+    let a03;
+    let a10;
+    let a11;
+    let a12;
+    let a13;
+    let a20;
+    let a21;
+    let a22;
+    let a23;
+    let b00;
+    let b01;
+    let b02;
+    let b10;
+    let b11;
+    let b12;
+    let b20;
+    let b21;
+    let b22;
+    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;
+    a00 = a[0];
+    a01 = a[1];
+    a02 = a[2];
+    a03 = a[3];
+    a10 = a[4];
+    a11 = a[5];
+    a12 = a[6];
+    a13 = a[7];
+    a20 = a[8];
+    a21 = a[9];
+    a22 = a[10];
+    a23 = a[11];
+    b00 = x * x * t + c;
+    b01 = y * x * t + z * s;
+    b02 = z * x * t - y * s;
+    b10 = x * y * t - z * s;
+    b11 = y * y * t + c;
+    b12 = z * y * t + x * s;
+    b20 = x * z * t + y * s;
+    b21 = y * z * t - x * s;
+    b22 = z * z * t + c;
+    out[0] = a00 * b00 + a10 * b01 + a20 * b02;
+    out[1] = a01 * b00 + a11 * b01 + a21 * b02;
+    out[2] = a02 * b00 + a12 * b01 + a22 * b02;
+    out[3] = a03 * b00 + a13 * b01 + a23 * b02;
+    out[4] = a00 * b10 + a10 * b11 + a20 * b12;
+    out[5] = a01 * b10 + a11 * b11 + a21 * b12;
+    out[6] = a02 * b10 + a12 * b11 + a22 * b12;
+    out[7] = a03 * b10 + a13 * b11 + a23 * b12;
+    out[8] = a00 * b20 + a10 * b21 + a20 * b22;
+    out[9] = a01 * b20 + a11 * b21 + a21 * b22;
+    out[10] = a02 * b20 + a12 * b21 + a22 * b22;
+    out[11] = a03 * b20 + a13 * b21 + a23 * b22;
+    if (a !== out) {
+      out[12] = a[12];
+      out[13] = a[13];
+      out[14] = a[14];
+      out[15] = a[15];
+    }
+    return out;
+  }
+  function rotateX(out, a, rad) {
+    const s = Math.sin(rad);
+    const c = Math.cos(rad);
+    const a10 = a[4];
+    const a11 = a[5];
+    const a12 = a[6];
+    const a13 = a[7];
+    const a20 = a[8];
+    const a21 = a[9];
+    const a22 = a[10];
+    const a23 = a[11];
+    if (a !== out) {
+      out[0] = a[0];
+      out[1] = a[1];
+      out[2] = a[2];
+      out[3] = a[3];
+      out[12] = a[12];
+      out[13] = a[13];
+      out[14] = a[14];
+      out[15] = a[15];
+    }
+    out[4] = a10 * c + a20 * s;
+    out[5] = a11 * c + a21 * s;
+    out[6] = a12 * c + a22 * s;
+    out[7] = a13 * c + a23 * s;
+    out[8] = a20 * c - a10 * s;
+    out[9] = a21 * c - a11 * s;
+    out[10] = a22 * c - a12 * s;
+    out[11] = a23 * c - a13 * s;
+    return out;
+  }
+  function rotateY(out, a, rad) {
+    const s = Math.sin(rad);
+    const c = Math.cos(rad);
+    const a00 = a[0];
+    const a01 = a[1];
+    const a02 = a[2];
+    const a03 = a[3];
+    const a20 = a[8];
+    const a21 = a[9];
+    const a22 = a[10];
+    const a23 = a[11];
+    if (a !== out) {
+      out[4] = a[4];
+      out[5] = a[5];
+      out[6] = a[6];
+      out[7] = a[7];
+      out[12] = a[12];
+      out[13] = a[13];
+      out[14] = a[14];
+      out[15] = a[15];
+    }
+    out[0] = a00 * c - a20 * s;
+    out[1] = a01 * c - a21 * s;
+    out[2] = a02 * c - a22 * s;
+    out[3] = a03 * c - a23 * s;
+    out[8] = a00 * s + a20 * c;
+    out[9] = a01 * s + a21 * c;
+    out[10] = a02 * s + a22 * c;
+    out[11] = a03 * s + a23 * c;
+    return out;
+  }
+  function rotateZ(out, a, rad) {
+    const s = Math.sin(rad);
+    const c = Math.cos(rad);
+    const a00 = a[0];
+    const a01 = a[1];
+    const a02 = a[2];
+    const a03 = a[3];
+    const a10 = a[4];
+    const a11 = a[5];
+    const a12 = a[6];
+    const a13 = a[7];
+    if (a !== out) {
+      out[8] = a[8];
+      out[9] = a[9];
+      out[10] = a[10];
+      out[11] = a[11];
+      out[12] = a[12];
+      out[13] = a[13];
+      out[14] = a[14];
+      out[15] = a[15];
+    }
+    out[0] = a00 * c + a10 * s;
+    out[1] = a01 * c + a11 * s;
+    out[2] = a02 * c + a12 * s;
+    out[3] = a03 * c + a13 * s;
+    out[4] = a10 * c - a00 * s;
+    out[5] = a11 * c - a01 * s;
+    out[6] = a12 * c - a02 * s;
+    out[7] = a13 * c - a03 * s;
+    return out;
+  }
+  function fromQuat(out, q) {
+    const x = q[0];
+    const y = q[1];
+    const z = q[2];
+    const w = q[3];
+    const x2 = x + x;
+    const y2 = y + y;
+    const z2 = z + z;
+    const xx = x * x2;
+    const yx = y * x2;
+    const yy = y * y2;
+    const zx = z * x2;
+    const zy = z * y2;
+    const zz = z * z2;
+    const wx = w * x2;
+    const wy = w * y2;
+    const 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 frustum(out, left, right, bottom, top, near, far) {
+    const rl = 1 / (right - left);
+    const tb = 1 / (top - bottom);
+    const nf = 1 / (near - far);
+    out[0] = near * 2 * rl;
+    out[1] = 0;
+    out[2] = 0;
+    out[3] = 0;
+    out[4] = 0;
+    out[5] = near * 2 * tb;
+    out[6] = 0;
+    out[7] = 0;
+    out[8] = (right + left) * rl;
+    out[9] = (top + bottom) * tb;
+    out[10] = (far + near) * nf;
+    out[11] = -1;
+    out[12] = 0;
+    out[13] = 0;
+    out[14] = far * near * 2 * nf;
+    out[15] = 0;
+    return out;
+  }
+  function perspectiveNO(out, fovy, aspect, near, far) {
+    const f = 1 / Math.tan(fovy / 2);
+    out[0] = f / aspect;
+    out[1] = 0;
+    out[2] = 0;
+    out[3] = 0;
+    out[4] = 0;
+    out[5] = f;
+    out[6] = 0;
+    out[7] = 0;
+    out[8] = 0;
+    out[9] = 0;
+    out[11] = -1;
+    out[12] = 0;
+    out[13] = 0;
+    out[15] = 0;
+    if (far != null && far !== Infinity) {
+      const 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;
+  }
+  var perspective = perspectiveNO;
+  function orthoNO(out, left, right, bottom, top, near, far) {
+    const lr = 1 / (left - right);
+    const bt = 1 / (bottom - top);
+    const nf = 1 / (near - far);
+    out[0] = -2 * lr;
+    out[1] = 0;
+    out[2] = 0;
+    out[3] = 0;
+    out[4] = 0;
+    out[5] = -2 * bt;
+    out[6] = 0;
+    out[7] = 0;
+    out[8] = 0;
+    out[9] = 0;
+    out[10] = 2 * nf;
+    out[11] = 0;
+    out[12] = (left + right) * lr;
+    out[13] = (top + bottom) * bt;
+    out[14] = (far + near) * nf;
+    out[15] = 1;
+    return out;
+  }
+  var ortho = orthoNO;
+  function lookAt(out, eye, center, up) {
+    let len;
+    let x0;
+    let x1;
+    let x2;
+    let y0;
+    let y1;
+    let y2;
+    let z0;
+    let z1;
+    let z2;
+    const eyex = eye[0];
+    const eyey = eye[1];
+    const eyez = eye[2];
+    const upx = up[0];
+    const upy = up[1];
+    const upz = up[2];
+    const centerx = center[0];
+    const centery = center[1];
+    const centerz = center[2];
+    if (Math.abs(eyex - centerx) < EPSILON && Math.abs(eyey - centery) < EPSILON && Math.abs(eyez - centerz) < EPSILON) {
+      return identity(out);
+    }
+    z0 = eyex - centerx;
+    z1 = eyey - centery;
+    z2 = eyez - centerz;
+    len = 1 / Math.sqrt(z0 * z0 + z1 * z1 + z2 * z2);
+    z0 *= len;
+    z1 *= len;
+    z2 *= len;
+    x0 = upy * z2 - upz * z1;
+    x1 = upz * z0 - upx * z2;
+    x2 = upx * z1 - upy * z0;
+    len = Math.sqrt(x0 * x0 + x1 * x1 + x2 * x2);
+    if (!len) {
+      x0 = 0;
+      x1 = 0;
+      x2 = 0;
+    } else {
+      len = 1 / len;
+      x0 *= len;
+      x1 *= len;
+      x2 *= len;
+    }
+    y0 = z1 * x2 - z2 * x1;
+    y1 = z2 * x0 - z0 * x2;
+    y2 = z0 * x1 - z1 * x0;
+    len = Math.sqrt(y0 * y0 + y1 * y1 + y2 * y2);
+    if (!len) {
+      y0 = 0;
+      y1 = 0;
+      y2 = 0;
+    } else {
+      len = 1 / len;
+      y0 *= len;
+      y1 *= len;
+      y2 *= len;
+    }
+    out[0] = x0;
+    out[1] = y0;
+    out[2] = z0;
+    out[3] = 0;
+    out[4] = x1;
+    out[5] = y1;
+    out[6] = z1;
+    out[7] = 0;
+    out[8] = x2;
+    out[9] = y2;
+    out[10] = z2;
+    out[11] = 0;
+    out[12] = -(x0 * eyex + x1 * eyey + x2 * eyez);
+    out[13] = -(y0 * eyex + y1 * eyey + y2 * eyez);
+    out[14] = -(z0 * eyex + z1 * eyey + z2 * eyez);
+    out[15] = 1;
+    return out;
+  }
+
+  // ../../node_modules/@math.gl/core/dist/gl-matrix/vec4.js
+  function create3() {
+    const out = new ARRAY_TYPE(4);
+    if (ARRAY_TYPE != Float32Array) {
+      out[0] = 0;
+      out[1] = 0;
+      out[2] = 0;
+      out[3] = 0;
+    }
+    return out;
+  }
+  function transformMat43(out, a, m) {
+    const x = a[0];
+    const y = a[1];
+    const z = a[2];
+    const 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;
+  }
+  var forEach3 = function() {
+    const vec = create3();
+    return function(a, stride, offset, count, fn, arg) {
+      let i;
+      let 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];
+        vec[2] = a[i + 2];
+        vec[3] = a[i + 3];
+        fn(vec, vec, arg);
+        a[i] = vec[0];
+        a[i + 1] = vec[1];
+        a[i + 2] = vec[2];
+        a[i + 3] = vec[3];
+      }
+      return a;
+    };
+  }();
+
+  // ../../node_modules/@math.gl/core/dist/classes/matrix4.js
+  var INDICES;
+  (function(INDICES2) {
+    INDICES2[INDICES2["COL0ROW0"] = 0] = "COL0ROW0";
+    INDICES2[INDICES2["COL0ROW1"] = 1] = "COL0ROW1";
+    INDICES2[INDICES2["COL0ROW2"] = 2] = "COL0ROW2";
+    INDICES2[INDICES2["COL0ROW3"] = 3] = "COL0ROW3";
+    INDICES2[INDICES2["COL1ROW0"] = 4] = "COL1ROW0";
+    INDICES2[INDICES2["COL1ROW1"] = 5] = "COL1ROW1";
+    INDICES2[INDICES2["COL1ROW2"] = 6] = "COL1ROW2";
+    INDICES2[INDICES2["COL1ROW3"] = 7] = "COL1ROW3";
+    INDICES2[INDICES2["COL2ROW0"] = 8] = "COL2ROW0";
+    INDICES2[INDICES2["COL2ROW1"] = 9] = "COL2ROW1";
+    INDICES2[INDICES2["COL2ROW2"] = 10] = "COL2ROW2";
+    INDICES2[INDICES2["COL2ROW3"] = 11] = "COL2ROW3";
+    INDICES2[INDICES2["COL3ROW0"] = 12] = "COL3ROW0";
+    INDICES2[INDICES2["COL3ROW1"] = 13] = "COL3ROW1";
+    INDICES2[INDICES2["COL3ROW2"] = 14] = "COL3ROW2";
+    INDICES2[INDICES2["COL3ROW3"] = 15] = "COL3ROW3";
+  })(INDICES || (INDICES = {}));
+  var DEFAULT_FOVY = 45 * Math.PI / 180;
+  var DEFAULT_ASPECT = 1;
+  var DEFAULT_NEAR = 0.1;
+  var DEFAULT_FAR = 500;
+  var IDENTITY_MATRIX = Object.freeze([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+  var Matrix4 = class extends Matrix {
+    static get IDENTITY() {
+      return getIdentityMatrix();
+    }
+    static get ZERO() {
+      return getZeroMatrix();
+    }
+    get ELEMENTS() {
+      return 16;
+    }
+    get RANK() {
+      return 4;
+    }
+    get INDICES() {
+      return INDICES;
+    }
+    constructor(array) {
+      super(-0, -0, -0, -0, -0, -0, -0, -0, -0, -0, -0, -0, -0, -0, -0, -0);
+      if (arguments.length === 1 && Array.isArray(array)) {
+        this.copy(array);
+      } else {
+        this.identity();
+      }
+    }
+    copy(array) {
+      this[0] = array[0];
+      this[1] = array[1];
+      this[2] = array[2];
+      this[3] = array[3];
+      this[4] = array[4];
+      this[5] = array[5];
+      this[6] = array[6];
+      this[7] = array[7];
+      this[8] = array[8];
+      this[9] = array[9];
+      this[10] = array[10];
+      this[11] = array[11];
+      this[12] = array[12];
+      this[13] = array[13];
+      this[14] = array[14];
+      this[15] = array[15];
+      return this.check();
+    }
+    // eslint-disable-next-line max-params
+    set(m00, m10, m20, m30, m01, m11, m21, m31, m02, m12, m22, m32, m03, m13, m23, m33) {
+      this[0] = m00;
+      this[1] = m10;
+      this[2] = m20;
+      this[3] = m30;
+      this[4] = m01;
+      this[5] = m11;
+      this[6] = m21;
+      this[7] = m31;
+      this[8] = m02;
+      this[9] = m12;
+      this[10] = m22;
+      this[11] = m32;
+      this[12] = m03;
+      this[13] = m13;
+      this[14] = m23;
+      this[15] = m33;
+      return this.check();
+    }
+    // accepts row major order, stores as column major
+    // eslint-disable-next-line max-params
+    setRowMajor(m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m32, m33) {
+      this[0] = m00;
+      this[1] = m10;
+      this[2] = m20;
+      this[3] = m30;
+      this[4] = m01;
+      this[5] = m11;
+      this[6] = m21;
+      this[7] = m31;
+      this[8] = m02;
+      this[9] = m12;
+      this[10] = m22;
+      this[11] = m32;
+      this[12] = m03;
+      this[13] = m13;
+      this[14] = m23;
+      this[15] = m33;
+      return this.check();
+    }
+    toRowMajor(result) {
+      result[0] = this[0];
+      result[1] = this[4];
+      result[2] = this[8];
+      result[3] = this[12];
+      result[4] = this[1];
+      result[5] = this[5];
+      result[6] = this[9];
+      result[7] = this[13];
+      result[8] = this[2];
+      result[9] = this[6];
+      result[10] = this[10];
+      result[11] = this[14];
+      result[12] = this[3];
+      result[13] = this[7];
+      result[14] = this[11];
+      result[15] = this[15];
+      return result;
+    }
+    // Constructors
+    /** Set to identity matrix */
+    identity() {
+      return this.copy(IDENTITY_MATRIX);
+    }
+    /**
+     *
+     * @param object
+     * @returns self
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    fromObject(object) {
+      return this.check();
+    }
+    /**
+     * Calculates a 4x4 matrix from the given quaternion
+     * @param quaternion Quaternion to create matrix from
+     * @returns self
+     */
+    fromQuaternion(quaternion) {
+      fromQuat(this, quaternion);
+      return this.check();
+    }
+    /**
+     * Generates a frustum matrix with the given bounds
+     * @param view.left - Left bound of the frustum
+     * @param view.right - Right bound of the frustum
+     * @param view.bottom - Bottom bound of the frustum
+     * @param view.top - Top bound of the frustum
+     * @param view.near - Near bound of the frustum
+     * @param view.far - Far bound of the frustum. Can be set to Infinity.
+     * @returns self
+     */
+    frustum(view) {
+      const { left, right, bottom, top, near = DEFAULT_NEAR, far = DEFAULT_FAR } = view;
+      if (far === Infinity) {
+        computeInfinitePerspectiveOffCenter(this, left, right, bottom, top, near);
+      } else {
+        frustum(this, left, right, bottom, top, near, far);
+      }
+      return this.check();
+    }
+    /**
+     * Generates a look-at matrix with the given eye position, focal point,
+     * and up axis
+     * @param view.eye - (vector) Position of the viewer
+     * @param view.center - (vector) Point the viewer is looking at
+     * @param view.up - (vector) Up axis
+     * @returns self
+     */
+    lookAt(view) {
+      const { eye, center = [0, 0, 0], up = [0, 1, 0] } = view;
+      lookAt(this, eye, center, up);
+      return this.check();
+    }
+    /**
+     * Generates a orthogonal projection matrix with the given bounds
+     * from "traditional" view space parameters
+     * @param view.left - Left bound of the frustum
+     * @param view.right number  Right bound of the frustum
+     * @param view.bottom - Bottom bound of the frustum
+     * @param view.top number  Top bound of the frustum
+     * @param view.near - Near bound of the frustum
+     * @param view.far number  Far bound of the frustum
+     * @returns self
+     */
+    ortho(view) {
+      const { left, right, bottom, top, near = DEFAULT_NEAR, far = DEFAULT_FAR } = view;
+      ortho(this, left, right, bottom, top, near, far);
+      return this.check();
+    }
+    /**
+     * Generates an orthogonal projection matrix with the same parameters
+     * as a perspective matrix (plus focalDistance)
+     * @param view.fovy Vertical field of view in radians
+     * @param view.aspect Aspect ratio. Typically viewport width / viewport height
+     * @param view.focalDistance Distance in the view frustum used for extent calculations
+     * @param view.near Near bound of the frustum
+     * @param view.far Far bound of the frustum
+     * @returns self
+     */
+    orthographic(view) {
+      const { fovy = DEFAULT_FOVY, aspect = DEFAULT_ASPECT, focalDistance = 1, near = DEFAULT_NEAR, far = DEFAULT_FAR } = view;
+      checkRadians(fovy);
+      const halfY = fovy / 2;
+      const top = focalDistance * Math.tan(halfY);
+      const right = top * aspect;
+      return this.ortho({
+        left: -right,
+        right,
+        bottom: -top,
+        top,
+        near,
+        far
+      });
+    }
+    /**
+     * Generates a perspective projection matrix with the given bounds
+     * @param view.fovy Vertical field of view in radians
+     * @param view.aspect Aspect ratio. typically viewport width/height
+     * @param view.near Near bound of the frustum
+     * @param view.far Far bound of the frustum
+     * @returns self
+     */
+    perspective(view) {
+      const { fovy = 45 * Math.PI / 180, aspect = 1, near = 0.1, far = 500 } = view;
+      checkRadians(fovy);
+      perspective(this, fovy, aspect, near, far);
+      return this.check();
+    }
+    // Accessors
+    determinant() {
+      return determinant(this);
+    }
+    /**
+     * Extracts the non-uniform scale assuming the matrix is an affine transformation.
+     * The scales are the "lengths" of the column vectors in the upper-left 3x3 matrix.
+     * @param result
+     * @returns self
+     */
+    getScale(result = [-0, -0, -0]) {
+      result[0] = Math.sqrt(this[0] * this[0] + this[1] * this[1] + this[2] * this[2]);
+      result[1] = Math.sqrt(this[4] * this[4] + this[5] * this[5] + this[6] * this[6]);
+      result[2] = Math.sqrt(this[8] * this[8] + this[9] * this[9] + this[10] * this[10]);
+      return result;
+    }
+    /**
+     * Gets the translation portion, assuming the matrix is a affine transformation matrix.
+     * @param result
+     * @returns self
+     */
+    getTranslation(result = [-0, -0, -0]) {
+      result[0] = this[12];
+      result[1] = this[13];
+      result[2] = this[14];
+      return result;
+    }
+    /**
+     * Gets upper left 3x3 pure rotation matrix (non-scaling), assume affine transformation matrix
+     * @param result
+     * @param scaleResult
+     * @returns self
+     */
+    getRotation(result, scaleResult) {
+      result = result || [-0, -0, -0, -0, -0, -0, -0, -0, -0, -0, -0, -0, -0, -0, -0, -0];
+      scaleResult = scaleResult || [-0, -0, -0];
+      const scale2 = this.getScale(scaleResult);
+      const inverseScale0 = 1 / scale2[0];
+      const inverseScale1 = 1 / scale2[1];
+      const inverseScale2 = 1 / scale2[2];
+      result[0] = this[0] * inverseScale0;
+      result[1] = this[1] * inverseScale1;
+      result[2] = this[2] * inverseScale2;
+      result[3] = 0;
+      result[4] = this[4] * inverseScale0;
+      result[5] = this[5] * inverseScale1;
+      result[6] = this[6] * inverseScale2;
+      result[7] = 0;
+      result[8] = this[8] * inverseScale0;
+      result[9] = this[9] * inverseScale1;
+      result[10] = this[10] * inverseScale2;
+      result[11] = 0;
+      result[12] = 0;
+      result[13] = 0;
+      result[14] = 0;
+      result[15] = 1;
+      return result;
+    }
+    /**
+     *
+     * @param result
+     * @param scaleResult
+     * @returns self
+     */
+    getRotationMatrix3(result, scaleResult) {
+      result = result || [-0, -0, -0, -0, -0, -0, -0, -0, -0];
+      scaleResult = scaleResult || [-0, -0, -0];
+      const scale2 = this.getScale(scaleResult);
+      const inverseScale0 = 1 / scale2[0];
+      const inverseScale1 = 1 / scale2[1];
+      const inverseScale2 = 1 / scale2[2];
+      result[0] = this[0] * inverseScale0;
+      result[1] = this[1] * inverseScale1;
+      result[2] = this[2] * inverseScale2;
+      result[3] = this[4] * inverseScale0;
+      result[4] = this[5] * inverseScale1;
+      result[5] = this[6] * inverseScale2;
+      result[6] = this[8] * inverseScale0;
+      result[7] = this[9] * inverseScale1;
+      result[8] = this[10] * inverseScale2;
+      return result;
+    }
+    // Modifiers
+    transpose() {
+      transpose(this, this);
+      return this.check();
+    }
+    invert() {
+      invert(this, this);
+      return this.check();
+    }
+    // Operations
+    multiplyLeft(a) {
+      multiply(this, a, this);
+      return this.check();
+    }
+    multiplyRight(a) {
+      multiply(this, this, a);
+      return this.check();
+    }
+    // Rotates a matrix by the given angle around the X axis
+    rotateX(radians2) {
+      rotateX(this, this, radians2);
+      return this.check();
+    }
+    // Rotates a matrix by the given angle around the Y axis.
+    rotateY(radians2) {
+      rotateY(this, this, radians2);
+      return this.check();
+    }
+    /**
+     * Rotates a matrix by the given angle around the Z axis.
+     * @param radians
+     * @returns self
+     */
+    rotateZ(radians2) {
+      rotateZ(this, this, radians2);
+      return this.check();
+    }
+    /**
+     *
+     * @param param0
+     * @returns self
+     */
+    rotateXYZ(angleXYZ) {
+      return this.rotateX(angleXYZ[0]).rotateY(angleXYZ[1]).rotateZ(angleXYZ[2]);
+    }
+    /**
+     *
+     * @param radians
+     * @param axis
+     * @returns self
+     */
+    rotateAxis(radians2, axis) {
+      rotate(this, this, radians2, axis);
+      return this.check();
+    }
+    /**
+     *
+     * @param factor
+     * @returns self
+     */
+    scale(factor) {
+      scale(this, this, Array.isArray(factor) ? factor : [factor, factor, factor]);
+      return this.check();
+    }
+    /**
+     *
+     * @param vec
+     * @returns self
+     */
+    translate(vector) {
+      translate(this, this, vector);
+      return this.check();
+    }
+    // Transforms
+    /**
+     * Transforms any 2, 3 or 4 element vector. 2 and 3 elements are treated as points
+     * @param vector
+     * @param result
+     * @returns self
+     */
+    transform(vector, result) {
+      if (vector.length === 4) {
+        result = transformMat43(result || [-0, -0, -0, -0], vector, this);
+        checkVector(result, 4);
+        return result;
+      }
+      return this.transformAsPoint(vector, result);
+    }
+    /**
+     * Transforms any 2 or 3 element array as point (w implicitly 1)
+     * @param vector
+     * @param result
+     * @returns self
+     */
+    transformAsPoint(vector, result) {
+      const { length } = vector;
+      let out;
+      switch (length) {
+        case 2:
+          out = transformMat4(result || [-0, -0], vector, this);
+          break;
+        case 3:
+          out = transformMat42(result || [-0, -0, -0], vector, this);
+          break;
+        default:
+          throw new Error("Illegal vector");
+      }
+      checkVector(out, vector.length);
+      return out;
+    }
+    /**
+     * Transforms any 2 or 3 element array as vector (w implicitly 0)
+     * @param vector
+     * @param result
+     * @returns self
+     */
+    transformAsVector(vector, result) {
+      let out;
+      switch (vector.length) {
+        case 2:
+          out = vec2_transformMat4AsVector(result || [-0, -0], vector, this);
+          break;
+        case 3:
+          out = vec3_transformMat4AsVector(result || [-0, -0, -0], vector, this);
+          break;
+        default:
+          throw new Error("Illegal vector");
+      }
+      checkVector(out, vector.length);
+      return out;
+    }
+    /** @deprecated */
+    transformPoint(vector, result) {
+      return this.transformAsPoint(vector, result);
+    }
+    /** @deprecated */
+    transformVector(vector, result) {
+      return this.transformAsPoint(vector, result);
+    }
+    /** @deprecated */
+    transformDirection(vector, result) {
+      return this.transformAsVector(vector, result);
+    }
+    // three.js math API compatibility
+    makeRotationX(radians2) {
+      return this.identity().rotateX(radians2);
+    }
+    makeTranslation(x, y, z) {
+      return this.identity().translate([x, y, z]);
+    }
+  };
+  var ZERO;
+  var IDENTITY;
+  function getZeroMatrix() {
+    if (!ZERO) {
+      ZERO = new Matrix4([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+      Object.freeze(ZERO);
+    }
+    return ZERO;
+  }
+  function getIdentityMatrix() {
+    if (!IDENTITY) {
+      IDENTITY = new Matrix4();
+      Object.freeze(IDENTITY);
+    }
+    return IDENTITY;
+  }
+  function checkRadians(possiblyDegrees) {
+    if (possiblyDegrees > Math.PI * 2) {
+      throw Error("expected radians");
+    }
+  }
+  function computeInfinitePerspectiveOffCenter(result, left, right, bottom, top, near) {
+    const column0Row0 = 2 * near / (right - left);
+    const column1Row1 = 2 * near / (top - bottom);
+    const column2Row0 = (right + left) / (right - left);
+    const column2Row1 = (top + bottom) / (top - bottom);
+    const column2Row2 = -1;
+    const column2Row3 = -1;
+    const column3Row2 = -2 * near;
+    result[0] = column0Row0;
+    result[1] = 0;
+    result[2] = 0;
+    result[3] = 0;
+    result[4] = 0;
+    result[5] = column1Row1;
+    result[6] = 0;
+    result[7] = 0;
+    result[8] = column2Row0;
+    result[9] = column2Row1;
+    result[10] = column2Row2;
+    result[11] = column2Row3;
+    result[12] = 0;
+    result[13] = 0;
+    result[14] = column3Row2;
+    result[15] = 0;
+    return result;
+  }
+
   // src/modules/math/fp16/fp16-utils.ts
   var float16Tables = null;
   var buffer = new ArrayBuffer(4);
@@ -1320,9 +3005,8 @@ void main() {
   // src/modules/math/random/random.ts
   var source = (
     /* wgsl */
-    `fn random(scale: vec3f, seed: float) -> f32 {
-  /* use the fragment position for a different seed per-pixel */
-  return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);
+    `fn random(scale: vec3f, seed: f32) -> f32 {
+  return fract(sin(dot(scale + vec3f(seed), vec3f(12.9898, 78.233, 151.7182))) * 43758.5453 + seed);
 }
 `
   );
@@ -2562,8 +4246,100 @@ vec4 picking_filterColor(vec4 color) {
     return uniforms;
   }
 
+  // src/modules/engine/skin/skin.ts
+  var SKIN_MAX_JOINTS = 20;
+  var source2 = (
+    /* wgsl */
+    `
+struct skinUniforms {
+  jointMatrix: array<mat4x4<f32>, ${SKIN_MAX_JOINTS}>,
+};
+
+@binding(19) @group(0) var<uniform> skin: skinUniforms;
+
+fn getSkinMatrix(weights: vec4f, joints: vec4u) -> mat4x4<f32> {
+  return (weights.x * skin.jointMatrix[joints.x])
+       + (weights.y * skin.jointMatrix[joints.y])
+       + (weights.z * skin.jointMatrix[joints.z])
+       + (weights.w * skin.jointMatrix[joints.w]);
+}
+`
+  );
+  var vs2 = (
+    /* glsl */
+    `
+uniform skinUniforms {
+  mat4 jointMatrix[SKIN_MAX_JOINTS];
+} skin;
+
+mat4 getSkinMatrix(vec4 weights, uvec4 joints) {
+  return (weights.x * skin.jointMatrix[joints.x])
+       + (weights.y * skin.jointMatrix[joints.y])
+       + (weights.z * skin.jointMatrix[joints.z])
+       + (weights.w * skin.jointMatrix[joints.w]);
+}
+
+`
+  );
+  var fs3 = (
+    /* glsl */
+    ``
+  );
+  var skin = {
+    props: {},
+    uniforms: {},
+    name: "skin",
+    dependencies: [],
+    source: source2,
+    vs: vs2,
+    fs: fs3,
+    defines: {
+      SKIN_MAX_JOINTS
+    },
+    getUniforms: (props = {}, prevUniforms) => {
+      const { scenegraphsFromGLTF } = props;
+      if (!scenegraphsFromGLTF?.gltf?.skins?.[0]) {
+        return { jointMatrix: [] };
+      }
+      const { inverseBindMatrices, joints, skeleton } = scenegraphsFromGLTF.gltf.skins[0];
+      const matsib = [];
+      const countib = inverseBindMatrices.value.length / 16;
+      for (let i = 0; i < countib; i++) {
+        const slice = inverseBindMatrices.value.subarray(i * 16, i * 16 + 16);
+        matsib.push(new Matrix4(Array.from(slice)));
+      }
+      const top = scenegraphsFromGLTF.gltfNodeIndexToNodeMap.get(skeleton);
+      const matrices = {};
+      top.preorderTraversal((node, { worldMatrix }) => {
+        matrices[node.id] = worldMatrix;
+      });
+      const mats = new Float32Array(SKIN_MAX_JOINTS * 16);
+      for (let i = 0; i < SKIN_MAX_JOINTS; ++i) {
+        const nodeIndex = joints[i];
+        if (nodeIndex === void 0)
+          break;
+        const worldMat = matrices[scenegraphsFromGLTF.gltfNodeIndexToNodeMap.get(nodeIndex).id];
+        const invBindMat = matsib[i];
+        const Z = new Matrix4().copy(worldMat).multiplyRight(invBindMat);
+        const off = i * 16;
+        for (let j = 0; j < 16; j++) {
+          mats[off + j] = Z[j];
+        }
+      }
+      return {
+        jointMatrix: mats
+      };
+    },
+    uniformTypes: {
+      jointMatrix: "mat4x4<f32>"
+    },
+    uniformSizes: {
+      jointMatrix: SKIN_MAX_JOINTS
+    }
+  };
+
   // src/modules/lighting/lights/lighting.ts
-  var import_core2 = __toESM(require_core(), 1);
+  var import_core3 = __toESM(require_core(), 1);
 
   // src/modules/lighting/lights/lighting-glsl.ts
   var lightingUniformsGLSL = (
@@ -2609,6 +4385,16 @@ uniform lightingUniforms {
   vec3 lightPosition2;
   vec3 lightDirection2;
   vec3 lightAttenuation2;
+
+  vec3 lightColor3;
+  vec3 lightPosition3;
+  vec3 lightDirection3;
+  vec3 lightAttenuation3;
+
+  vec3 lightColor4;
+  vec3 lightPosition4;
+  vec3 lightDirection4;
+  vec3 lightAttenuation4;
 } lighting;
 
 PointLight lighting_getPointLight(int index) {
@@ -2618,8 +4404,12 @@ PointLight lighting_getPointLight(int index) {
     case 1:
       return PointLight(lighting.lightColor1, lighting.lightPosition1, lighting.lightAttenuation1);
     case 2:
-    default:  
       return PointLight(lighting.lightColor2, lighting.lightPosition2, lighting.lightAttenuation2);
+    case 3:
+      return PointLight(lighting.lightColor3, lighting.lightPosition3, lighting.lightAttenuation3);
+    case 4:
+    default:  
+      return PointLight(lighting.lightColor4, lighting.lightPosition4, lighting.lightAttenuation4);
   }
 }
 
@@ -2630,8 +4420,12 @@ DirectionalLight lighting_getDirectionalLight(int index) {
     case 1:
       return DirectionalLight(lighting.lightColor1, lighting.lightDirection1);
     case 2:
-    default:   
       return DirectionalLight(lighting.lightColor2, lighting.lightDirection2);
+    case 3:
+      return DirectionalLight(lighting.lightColor3, lighting.lightDirection3);
+    case 4:
+    default:   
+      return DirectionalLight(lighting.lightColor4, lighting.lightDirection4);
   }
 } 
 
@@ -2649,6 +4443,8 @@ float getPointLightAttenuation(PointLight pointLight, float distance) {
   var lightingUniformsWGSL = (
     /* wgsl */
     `// #if (defined(SHADER_TYPE_FRAGMENT) && defined(LIGHTING_FRAGMENT)) || (defined(SHADER_TYPE_VERTEX) && defined(LIGHTING_VERTEX))
+const MAX_LIGHTS: i32 = 5;
+
 struct AmbientLight {
   color: vec3<f32>,
 };
@@ -2666,32 +4462,80 @@ struct DirectionalLight {
 
 struct lightingUniforms {
   enabled: i32,
-  pointLightCount: i32,
+  lightType: i32,
+
   directionalLightCount: i32,
+  pointLightCount: i32,
 
   ambientColor: vec3<f32>,
 
-  // TODO - support multiple lights by uncommenting arrays below
-  lightType: i32,
-  lightColor: vec3<f32>,
-  lightDirection: vec3<f32>,
-  lightPosition: vec3<f32>,
-  lightAttenuation: vec3<f32>,
-
-  // AmbientLight ambientLight;
-  // PointLight pointLight[MAX_LIGHTS];
-  // DirectionalLight directionalLight[MAX_LIGHTS];
+  lightColor0: vec3<f32>,
+  lightPosition0: vec3<f32>,
+  lightDirection0: vec3<f32>,
+  lightAttenuation0: vec3<f32>,
+
+  lightColor1: vec3<f32>,
+  lightPosition1: vec3<f32>,
+  lightDirection1: vec3<f32>,
+  lightAttenuation1: vec3<f32>,
+
+  lightColor2: vec3<f32>,
+  lightPosition2: vec3<f32>,
+  lightDirection2: vec3<f32>,
+  lightAttenuation2: vec3<f32>,
+
+  lightColor3: vec3<f32>,
+  lightPosition3: vec3<f32>,
+  lightDirection3: vec3<f32>,
+  lightAttenuation3: vec3<f32>,
+
+  lightColor4: vec3<f32>,
+  lightPosition4: vec3<f32>,
+  lightDirection4: vec3<f32>,
+  lightAttenuation4: vec3<f32>,
 };
 
 // Binding 0:1 is reserved for lighting (Note: could go into separate bind group as it is stable across draw calls)
 @binding(1) @group(0) var<uniform> lighting : lightingUniforms;
 
 fn lighting_getPointLight(index: i32) -> PointLight {
-  return PointLight(lighting.lightColor, lighting.lightPosition, lighting.lightAttenuation);
+  switch (index) {
+    case 0: {
+      return PointLight(lighting.lightColor0, lighting.lightPosition0, lighting.lightAttenuation0);
+    }
+    case 1: {
+      return PointLight(lighting.lightColor1, lighting.lightPosition1, lighting.lightAttenuation1);
+    }
+    case 2: {
+      return PointLight(lighting.lightColor2, lighting.lightPosition2, lighting.lightAttenuation2);
+    }
+    case 3: {
+      return PointLight(lighting.lightColor3, lighting.lightPosition3, lighting.lightAttenuation3);
+    }
+    case 4, default: {
+      return PointLight(lighting.lightColor4, lighting.lightPosition4, lighting.lightAttenuation4);
+    }
+  }
 }
 
 fn lighting_getDirectionalLight(index: i32) -> DirectionalLight {
-  return DirectionalLight(lighting.lightColor, lighting.lightDirection);
+  switch (index) {
+    case 0: {
+      return DirectionalLight(lighting.lightColor0, lighting.lightDirection0);
+    }
+    case 1: {
+      return DirectionalLight(lighting.lightColor1, lighting.lightDirection1);
+    }
+    case 2: {
+      return DirectionalLight(lighting.lightColor2, lighting.lightDirection2);
+    }
+    case 3: {
+      return DirectionalLight(lighting.lightColor3, lighting.lightDirection3);
+    }
+    case 4, default: {
+      return DirectionalLight(lighting.lightColor4, lighting.lightDirection4);
+    }
+  }
 } 
 
 fn getPointLightAttenuation(pointLight: PointLight, distance: f32) -> f32 {
@@ -2731,7 +4575,15 @@ fn getPointLightAttenuation(pointLight: PointLight, distance: f32) -> f32 {
       lightColor2: "vec3<f32>",
       lightPosition2: "vec3<f32>",
       lightDirection2: "vec3<f32>",
-      lightAttenuation2: "vec3<f32>"
+      lightAttenuation2: "vec3<f32>",
+      lightColor3: "vec3<f32>",
+      lightPosition3: "vec3<f32>",
+      lightDirection3: "vec3<f32>",
+      lightAttenuation3: "vec3<f32>",
+      lightColor4: "vec3<f32>",
+      lightPosition4: "vec3<f32>",
+      lightDirection4: "vec3<f32>",
+      lightAttenuation4: "vec3<f32>"
     },
     defaultUniforms: {
       enabled: 1,
@@ -2751,7 +4603,15 @@ fn getPointLightAttenuation(pointLight: PointLight, distance: f32) -> f32 {
       lightColor2: [1, 1, 1],
       lightPosition2: [1, 1, 2],
       lightDirection2: [1, 1, 1],
-      lightAttenuation2: [1, 0, 0]
+      lightAttenuation2: [1, 0, 0],
+      lightColor3: [1, 1, 1],
+      lightPosition3: [1, 1, 2],
+      lightDirection3: [1, 1, 1],
+      lightAttenuation3: [1, 0, 0],
+      lightColor4: [1, 1, 1],
+      lightPosition4: [1, 1, 2],
+      lightDirection4: [1, 1, 1],
+      lightAttenuation4: [1, 0, 0]
     },
     source: lightingUniformsWGSL,
     vs: lightingUniformsGLSL,
@@ -2789,26 +4649,36 @@ fn getPointLightAttenuation(pointLight: PointLight, distance: f32) -> f32 {
     const lightSourceUniforms = {};
     lightSourceUniforms.ambientColor = convertColor(ambientLight);
     let currentLight = 0;
+    let pointLightCount = 0;
+    let directionalLightCount = 0;
     for (const pointLight of pointLights) {
+      if (currentLight >= MAX_LIGHTS) {
+        break;
+      }
       lightSourceUniforms.lightType = 0 /* POINT */;
       const i = currentLight;
       lightSourceUniforms[`lightColor${i}`] = convertColor(pointLight);
       lightSourceUniforms[`lightPosition${i}`] = pointLight.position;
       lightSourceUniforms[`lightAttenuation${i}`] = pointLight.attenuation || [1, 0, 0];
       currentLight++;
+      pointLightCount++;
     }
     for (const directionalLight of directionalLights) {
+      if (currentLight >= MAX_LIGHTS) {
+        break;
+      }
       lightSourceUniforms.lightType = 1 /* DIRECTIONAL */;
       const i = currentLight;
       lightSourceUniforms[`lightColor${i}`] = convertColor(directionalLight);
       lightSourceUniforms[`lightDirection${i}`] = directionalLight.direction;
       currentLight++;
+      directionalLightCount++;
     }
-    if (currentLight > MAX_LIGHTS) {
-      import_core2.log.warn("MAX_LIGHTS exceeded")();
+    if (pointLights.length + directionalLights.length > MAX_LIGHTS) {
+      import_core3.log.warn(`MAX_LIGHTS exceeded, truncating to ${MAX_LIGHTS}`)();
     }
-    lightSourceUniforms.directionalLightCount = directionalLights.length;
-    lightSourceUniforms.pointLightCount = pointLights.length;
+    lightSourceUniforms.directionalLightCount = directionalLightCount;
+    lightSourceUniforms.pointLightCount = pointLightCount;
     return lightSourceUniforms;
   }
   function extractLightTypes(lights) {
@@ -3016,56 +4886,60 @@ fn lighting_getLightColor2(surfaceColor: vec3<f32>, cameraPosition: vec3<f32>, p
   let view_direction: vec3<f32> = normalize(cameraPosition - position_worldspace);
   lightColor = phongMaterial.ambient * surfaceColor * lighting.ambientColor;
 
-  if (lighting.lightType == 0) {
-    let pointLight: PointLight  = lighting_getPointLight(0);
+  for (var i: i32 = 0; i < lighting.pointLightCount; i++) {
+    let pointLight: PointLight = lighting_getPointLight(i);
     let light_position_worldspace: vec3<f32> = pointLight.position;
     let light_direction: vec3<f32> = normalize(light_position_worldspace - position_worldspace);
-    lightColor += lighting_getLightColor(surfaceColor, light_direction, view_direction, normal_worldspace, pointLight.color);
-  } else if (lighting.lightType == 1) {
-    var directionalLight: DirectionalLight = lighting_getDirectionalLight(0);
-    lightColor += lighting_getLightColor(surfaceColor, -directionalLight.direction, view_direction, normal_worldspace, directionalLight.color);
-  }
-  
-  return lightColor;
-  /*
-  for (int i = 0; i < MAX_LIGHTS; i++) {
-    if (i >= lighting.pointLightCount) {
-      break;
-    }
-    PointLight pointLight = lighting.pointLight[i];
-    vec3 light_position_worldspace = pointLight.position;
-    vec3 light_direction = normalize(light_position_worldspace - position_worldspace);
-    lightColor += lighting_getLightColor(surfaceColor, light_direction, view_direction, normal_worldspace, pointLight.color);
+    let light_attenuation = getPointLightAttenuation(
+      pointLight,
+      distance(light_position_worldspace, position_worldspace)
+    );
+    lightColor += lighting_getLightColor(
+      surfaceColor,
+      light_direction,
+      view_direction,
+      normal_worldspace,
+      pointLight.color / light_attenuation
+    );
   }
 
-  for (int i = 0; i < MAX_LIGHTS; i++) {
-    if (i >= lighting.directionalLightCount) {
-      break;
-    }
-    DirectionalLight directionalLight = lighting.directionalLight[i];
+  let totalLights = min(MAX_LIGHTS, lighting.pointLightCount + lighting.directionalLightCount);
+  for (var i: i32 = lighting.pointLightCount; i < totalLights; i++) {
+    let directionalLight: DirectionalLight = lighting_getDirectionalLight(i);
     lightColor += lighting_getLightColor(surfaceColor, -directionalLight.direction, view_direction, normal_worldspace, directionalLight.color);
-  }
-  */
+  }  
+  
+  return lightColor;
 }
 
 fn lighting_getSpecularLightColor(cameraPosition: vec3<f32>, position_worldspace: vec3<f32>, normal_worldspace: vec3<f32>) -> vec3<f32>{
   var lightColor = vec3<f32>(0, 0, 0);
   let surfaceColor = vec3<f32>(0, 0, 0);
 
-  if (lighting.enabled == 0) {
+  if (lighting.enabled != 0) {
     let view_direction = normalize(cameraPosition - position_worldspace);
 
-    switch (lighting.lightType) {
-      case 0, default: {
-        let pointLight: PointLight = lighting_getPointLight(0);
-        let light_position_worldspace: vec3<f32> = pointLight.position;
-        let light_direction: vec3<f32> = normalize(light_position_worldspace - position_worldspace);
-        lightColor += lighting_getLightColor(surfaceColor, light_direction, view_direction, normal_worldspace, pointLight.color);
-      }
-      case 1: {
-        let directionalLight: DirectionalLight = lighting_getDirectionalLight(0);
+    for (var i: i32 = 0; i < lighting.pointLightCount; i++) {
+      let pointLight: PointLight = lighting_getPointLight(i);
+      let light_position_worldspace: vec3<f32> = pointLight.position;
+      let light_direction: vec3<f32> = normalize(light_position_worldspace - position_worldspace);
+      let light_attenuation = getPointLightAttenuation(
+        pointLight,
+        distance(light_position_worldspace, position_worldspace)
+      );
+      lightColor += lighting_getLightColor(
+        surfaceColor,
+        light_direction,
+        view_direction,
+        normal_worldspace,
+        pointLight.color / light_attenuation
+      );
+    }
+
+    let totalLights = min(MAX_LIGHTS, lighting.pointLightCount + lighting.directionalLightCount);
+    for (var i: i32 = lighting.pointLightCount; i < totalLights; i++) {
+        let directionalLight: DirectionalLight = lighting_getDirectionalLight(i);
         lightColor += lighting_getLightColor(surfaceColor, -directionalLight.direction, view_direction, normal_worldspace, directionalLight.color);
-      }
     }
   }
   return lightColor;
@@ -3139,7 +5013,7 @@ fn lighting_getSpecularLightColor(cameraPosition: vec3<f32>, position_worldspace
   };
 
   // src/modules/lighting/pbr-material/pbr-material-glsl.ts
-  var vs2 = (
+  var vs3 = (
     /* glsl */
     `out vec3 pbr_vPosition;
 out vec2 pbr_vUV;
@@ -3176,7 +5050,7 @@ void pbr_setPositionNormalTangentUV(vec4 position, vec4 normal, vec4 tangent, ve
 }
 `
   );
-  var fs3 = (
+  var fs4 = (
     /* glsl */
     `precision highp float;
 
@@ -3640,56 +5514,60 @@ vec4 pbr_filterColor(vec4 colorUnused)
   );
 
   // src/modules/lighting/pbr-material/pbr-material-wgsl.ts
-  var source2 = (
+  var source3 = (
     /* wgsl */
     `struct PBRFragmentInputs {
   pbr_vPosition: vec3f,
   pbr_vUV: vec2f,
-  pbr_vTBN: mat3f,
+  pbr_vTBN: mat3x3f,
   pbr_vNormal: vec3f
 };
 
-var fragmentInputs: PBRFragmentInputs;
+var<private> fragmentInputs: PBRFragmentInputs;
 
 fn pbr_setPositionNormalTangentUV(position: vec4f, normal: vec4f, tangent: vec4f, uv: vec2f)
 {
   var pos: vec4f = pbrProjection.modelMatrix * position;
-  fragmentInputs.pbr_vPosition = vec3(pos.xyz) / pos.w;
+  fragmentInputs.pbr_vPosition = pos.xyz / pos.w;
+  fragmentInputs.pbr_vNormal = vec3f(0.0, 0.0, 1.0);
+  fragmentInputs.pbr_vTBN = mat3x3f(
+    vec3f(1.0, 0.0, 0.0),
+    vec3f(0.0, 1.0, 0.0),
+    vec3f(0.0, 0.0, 1.0)
+  );
+  fragmentInputs.pbr_vUV = vec2f(0.0, 0.0);
 
 #ifdef HAS_NORMALS
+  let normalW: vec3f = normalize((pbrProjection.normalMatrix * vec4f(normal.xyz, 0.0)).xyz);
+  fragmentInputs.pbr_vNormal = normalW;
 #ifdef HAS_TANGENTS
-  let normalW: vec3f = normalize(vec3(pbrProjection.normalMatrix * vec4(normal.xyz, 0.0)));
-  let tangentW: vec3f = normalize(vec3(pbrProjection.modelMatrix * vec4(tangent.xyz, 0.0)));
+  let tangentW: vec3f = normalize((pbrProjection.modelMatrix * vec4f(tangent.xyz, 0.0)).xyz);
   let bitangentW: vec3f = cross(normalW, tangentW) * tangent.w;
-  fragmentInputs.pbr_vTBN = mat3(tangentW, bitangentW, normalW);
-#else // HAS_TANGENTS != 1
-  fragmentInputs.pbr_vNormal = normalize(vec3(pbrProjection.modelMatrix * vec4(normal.xyz, 0.0)));
+  fragmentInputs.pbr_vTBN = mat3x3f(tangentW, bitangentW, normalW);
 #endif
 #endif
 
 #ifdef HAS_UV
   fragmentInputs.pbr_vUV = uv;
-#else
-  fragmentInputs.pbr_vUV = vec2(0.,0.);
 #endif
 }
 
 struct pbrMaterialUniforms {
   // Material is unlit
-  unlit: uint32,
+  unlit: u32,
 
   // Base color map
-  baseColorMapEnabled: uint32,
+  baseColorMapEnabled: u32,
   baseColorFactor: vec4f,
 
-  normalMapEnabled : uint32,
+  normalMapEnabled : u32,
   normalScale: f32,  // #ifdef HAS_NORMALMAP
 
-  emissiveMapEnabled: uint32,
+  emissiveMapEnabled: u32,
   emissiveFactor: vec3f, // #ifdef HAS_EMISSIVEMAP
 
   metallicRoughnessValues: vec2f,
-  metallicRoughnessMapEnabled: uint32,
+  metallicRoughnessMapEnabled: u32,
 
   occlusionMapEnabled: i32,
   occlusionStrength: f32, // #ifdef HAS_OCCLUSIONMAP
@@ -3704,7 +5582,7 @@ struct pbrMaterialUniforms {
   // debugging flags used for shader output of intermediate PBR variables
   // #ifdef PBR_DEBUG
   scaleDiffBaseMR: vec4f,
-  scaleFGDSpec: vec4f
+  scaleFGDSpec: vec4f,
   // #endif
 }
 
@@ -3712,24 +5590,32 @@ struct pbrMaterialUniforms {
 
 // Samplers
 #ifdef HAS_BASECOLORMAP
-uniform sampler2D pbr_baseColorSampler;
+@binding(3) @group(0) var pbr_baseColorSampler: texture_2d<f32>;
+@binding(4) @group(0) var pbr_baseColorSamplerSampler: sampler;
 #endif
 #ifdef HAS_NORMALMAP
-uniform sampler2D pbr_normalSampler;
+@binding(5) @group(0) var pbr_normalSampler: texture_2d<f32>;
+@binding(6) @group(0) var pbr_normalSamplerSampler: sampler;
 #endif
 #ifdef HAS_EMISSIVEMAP
-uniform sampler2D pbr_emissiveSampler;
+@binding(7) @group(0) var pbr_emissiveSampler: texture_2d<f32>;
+@binding(8) @group(0) var pbr_emissiveSamplerSampler: sampler;
 #endif
 #ifdef HAS_METALROUGHNESSMAP
-uniform sampler2D pbr_metallicRoughnessSampler;
+@binding(9) @group(0) var pbr_metallicRoughnessSampler: texture_2d<f32>;
+@binding(10) @group(0) var pbr_metallicRoughnessSamplerSampler: sampler;
 #endif
 #ifdef HAS_OCCLUSIONMAP
-uniform sampler2D pbr_occlusionSampler;
+@binding(11) @group(0) var pbr_occlusionSampler: texture_2d<f32>;
+@binding(12) @group(0) var pbr_occlusionSamplerSampler: sampler;
 #endif
 #ifdef USE_IBL
-uniform samplerCube pbr_diffuseEnvSampler;
-uniform samplerCube pbr_specularEnvSampler;
-uniform sampler2D pbr_brdfLUT;
+@binding(13) @group(0) var pbr_diffuseEnvSampler: texture_cube<f32>;
+@binding(14) @group(0) var pbr_diffuseEnvSamplerSampler: sampler;
+@binding(15) @group(0) var pbr_specularEnvSampler: texture_cube<f32>;
+@binding(16) @group(0) var pbr_specularEnvSamplerSampler: sampler;
+@binding(17) @group(0) var pbr_BrdfLUT: texture_2d<f32>;
+@binding(18) @group(0) var pbr_BrdfLUTSampler: sampler;
 #endif
 
 // Encapsulate the various inputs used by the various functions in the shading equation
@@ -3757,17 +5643,19 @@ const c_MinRoughness = 0.04;
 
 fn SRGBtoLINEAR(srgbIn: vec4f ) -> vec4f
 {
+  var linOut: vec3f = srgbIn.xyz;
 #ifdef MANUAL_SRGB
+  let bLess: vec3f = step(vec3f(0.04045), srgbIn.xyz);
+  linOut = mix(
+    srgbIn.xyz / vec3f(12.92),
+    pow((srgbIn.xyz + vec3f(0.055)) / vec3f(1.055), vec3f(2.4)),
+    bLess
+  );
 #ifdef SRGB_FAST_APPROXIMATION
-  var linOut: vec3f = pow(srgbIn.xyz,vec3(2.2));
-#else // SRGB_FAST_APPROXIMATION
-  var bLess: vec3f = step(vec3(0.04045),srgbIn.xyz);
-  var linOut: vec3f = mix( srgbIn.xyz/vec3(12.92), pow((srgbIn.xyz+vec3(0.055))/vec3(1.055),vec3(2.4)), bLess );
-#endif //SRGB_FAST_APPROXIMATION
-  return vec4f(linOut,srgbIn.w);;
-#else //MANUAL_SRGB
-  return srgbIn;
-#endif //MANUAL_SRGB
+  linOut = pow(srgbIn.xyz, vec3f(2.2));
+#endif
+#endif
+  return vec4f(linOut, srgbIn.w);
 }
 
 // Find the normal for this fragment, pulling either from a predefined normal map
@@ -3775,32 +5663,28 @@ fn SRGBtoLINEAR(srgbIn: vec4f ) -> vec4f
 fn getNormal() -> vec3f
 {
   // Retrieve the tangent space matrix
-#ifndef HAS_TANGENTS
-  var pos_dx: vec3f = dFdx(fragmentInputs.pbr_vPosition);
-  var pos_dy: vec3f = dFdy(fragmentInputs.pbr_vPosition);
-  var tex_dx: vec3f = dFdx(vec3(fragmentInputs.pbr_vUV, 0.0));
-  var tex_dy: vec3f = dFdy(vec3(fragmentInputs.pbr_vUV, 0.0));
-  var t: vec3f = (tex_dy.t * pos_dx - tex_dx.t * pos_dy) / (tex_dx.s * tex_dy.t - tex_dy.s * tex_dx.t);
+  let pos_dx: vec3f = dpdx(fragmentInputs.pbr_vPosition);
+  let pos_dy: vec3f = dpdy(fragmentInputs.pbr_vPosition);
+  let tex_dx: vec3f = dpdx(vec3f(fragmentInputs.pbr_vUV, 0.0));
+  let tex_dy: vec3f = dpdy(vec3f(fragmentInputs.pbr_vUV, 0.0));
+  var t: vec3f = (tex_dy.y * pos_dx - tex_dx.y * pos_dy) / (tex_dx.x * tex_dy.y - tex_dy.x * tex_dx.y);
 
-#ifdef HAS_NORMALS
-  var ng: vec3f = normalize(fragmentInputs.pbr_vNormal);
-#else
   var ng: vec3f = cross(pos_dx, pos_dy);
+#ifdef HAS_NORMALS
+  ng = normalize(fragmentInputs.pbr_vNormal);
 #endif
-
   t = normalize(t - ng * dot(ng, t));
   var b: vec3f = normalize(cross(ng, t));
-  var tbn: mat3f = mat3f(t, b, ng);
-#else // HAS_TANGENTS
-  var tbn: mat3f = fragmentInputs.pbr_vTBN;
+  var tbn: mat3x3f = mat3x3f(t, b, ng);
+#ifdef HAS_TANGENTS
+  tbn = fragmentInputs.pbr_vTBN;
 #endif
 
-#ifdef HAS_NORMALMAP
-  vec3 n = texture(pbr_normalSampler, fragmentInputs.pbr_vUV).rgb;
-  n = normalize(tbn * ((2.0 * n - 1.0) * vec3(pbrMaterial.normalScale, pbrMaterial.normalScale, 1.0)));
-#else
   // The tbn matrix is linearly interpolated, so we need to re-normalize
-  vec3 n = normalize(tbn[2].xyz);
+  var n: vec3f = normalize(tbn[2].xyz);
+#ifdef HAS_NORMALMAP
+  n = textureSample(pbr_normalSampler, pbr_normalSamplerSampler, fragmentInputs.pbr_vUV).rgb;
+  n = normalize(tbn * ((2.0 * n - 1.0) * vec3f(pbrMaterial.normalScale, pbrMaterial.normalScale, 1.0)));
 #endif
 
   return n;
@@ -3810,27 +5694,37 @@ fn getNormal() -> vec3f
 // Precomputed Environment Maps are required uniform inputs and are computed as outlined in [1].
 // See our README.md on Environment Maps [3] for additional discussion.
 #ifdef USE_IBL
-fn getIBLContribution(PBRInfo pbrInfo, vec3 n, vec3 reflection) -> vec3f
+fn getIBLContribution(pbrInfo: PBRInfo, n: vec3f, reflection: vec3f) -> vec3f
 {
-  float mipCount = 9.0; // resolution of 512x512
-  float lod = (pbrInfo.perceptualRoughness * mipCount);
+  let mipCount: f32 = 9.0; // resolution of 512x512
+  let lod: f32 = pbrInfo.perceptualRoughness * mipCount;
   // retrieve a scale and bias to F0. See [1], Figure 3
-  vec3 brdf = SRGBtoLINEAR(texture(pbr_brdfLUT,
-    vec2(pbrInfo.NdotV, 1.0 - pbrInfo.perceptualRoughness))).rgb;
-  vec3 diffuseLight = SRGBtoLINEAR(texture(pbr_diffuseEnvSampler, n)).rgb;
-
+  let brdf = SRGBtoLINEAR(
+    textureSample(
+      pbr_BrdfLUT,
+      pbr_BrdfLUTSampler,
+      vec2f(pbrInfo.NdotV, 1.0 - pbrInfo.perceptualRoughness)
+    )
+  ).rgb;
+  let diffuseLight =
+    SRGBtoLINEAR(textureSample(pbr_diffuseEnvSampler, pbr_diffuseEnvSamplerSampler, n)).rgb;
+  let specularLightDefault =
+    SRGBtoLINEAR(textureSample(pbr_specularEnvSampler, pbr_specularEnvSamplerSampler, reflection)).rgb;
+  var specularLight = specularLightDefault;
 #ifdef USE_TEX_LOD
-  vec3 specularLight = SRGBtoLINEAR(texture(pbr_specularEnvSampler, reflection, lod)).rgb;
-#else
-  vec3 specularLight = SRGBtoLINEAR(texture(pbr_specularEnvSampler, reflection)).rgb;
+  specularLight = SRGBtoLINEAR(
+    textureSampleLevel(
+      pbr_specularEnvSampler,
+      pbr_specularEnvSamplerSampler,
+      reflection,
+      lod
+    )
+  ).rgb;
 #endif
 
-  vec3 diffuse = diffuseLight * pbrInfo.diffuseColor;
-  vec3 specular = specularLight * (pbrInfo.specularColor * brdf.x + brdf.y);
-
-  // For presentation, this allows us to disable IBL terms
-  diffuse *= pbrMaterial.scaleIBLAmbient.x;
-  specular *= pbrMaterial.scaleIBLAmbient.y;
+  let diffuse = diffuseLight * pbrInfo.diffuseColor * pbrMaterial.scaleIBLAmbient.x;
+  let specular =
+    specularLight * (pbrInfo.specularColor * brdf.x + brdf.y) * pbrMaterial.scaleIBLAmbient.y;
 
   return diffuse + specular;
 }
@@ -3874,7 +5768,7 @@ fn geometricOcclusion(pbrInfo: PBRInfo) -> f32 {
 fn microfacetDistribution(pbrInfo: PBRInfo) -> f32 {
   let roughnessSq = pbrInfo.alphaRoughness * pbrInfo.alphaRoughness;
   let f = (pbrInfo.NdotH * roughnessSq - pbrInfo.NdotH) * pbrInfo.NdotH + 1.0;
-  return roughnessSq / (PI * f * f);
+  return roughnessSq / (M_PI * f * f);
 }
 
 fn PBRInfo_setAmbientLight(pbrInfo: ptr<function, PBRInfo>) {
@@ -3916,11 +5810,11 @@ fn calculateFinalColor(pbrInfo: PBRInfo, lightColor: vec3<f32>) -> vec3<f32> {
 
 fn pbr_filterColor(colorUnused: vec4<f32>) -> vec4<f32> {
   // The albedo may be defined from a base texture or a flat color
-  var baseColor: vec4<f32>;
+  var baseColor: vec4<f32> = pbrMaterial.baseColorFactor;
   #ifdef HAS_BASECOLORMAP
-  baseColor = SRGBtoLINEAR(textureSample(pbr_baseColorSampler, pbr_baseColorSampler, fragmentInputs.pbr_vUV)) * pbrMaterial.baseColorFactor;
-  #else
-  baseColor = pbrMaterial.baseColorFactor;
+  baseColor = SRGBtoLINEAR(
+    textureSample(pbr_baseColorSampler, pbr_baseColorSamplerSampler, fragmentInputs.pbr_vUV)
+  ) * pbrMaterial.baseColorFactor;
   #endif
 
   #ifdef ALPHA_CUTOFF
@@ -3931,7 +5825,7 @@ fn pbr_filterColor(colorUnused: vec4<f32>) -> vec4<f32> {
 
   var color = vec3<f32>(0.0, 0.0, 0.0);
 
-  if (pbrMaterial.unlit) {
+  if (pbrMaterial.unlit != 0u) {
     color = baseColor.rgb;
   } else {
     // Metallic and Roughness material properties are packed together
@@ -3942,7 +5836,11 @@ fn pbr_filterColor(colorUnused: vec4<f32>) -> vec4<f32> {
     #ifdef HAS_METALROUGHNESSMAP
     // Roughness is stored in the 'g' channel, metallic is stored in the 'b' channel.
     // This layout intentionally reserves the 'r' channel for (optional) occlusion map data
-    let mrSample = textureSample(pbr_metallicRoughnessSampler, pbr_metallicRoughnessSampler, fragmentInputs.pbr_vUV);
+    let mrSample = textureSample(
+      pbr_metallicRoughnessSampler,
+      pbr_metallicRoughnessSamplerSampler,
+      fragmentInputs.pbr_vUV
+    );
     perceptualRoughness = mrSample.g * perceptualRoughness;
     metallic = mrSample.b * metallic;
     #endif
@@ -4019,22 +5917,25 @@ fn pbr_filterColor(colorUnused: vec4<f32>) -> vec4<f32> {
 
     // Calculate lighting contribution from image based lighting source (IBL)
     #ifdef USE_IBL
-    if (pbrMaterial.IBLenabled) {
+    if (pbrMaterial.IBLenabled != 0) {
       color += getIBLContribution(pbrInfo, n, reflection);
     }
     #endif
 
     // Apply optional PBR terms for additional (optional) shading
     #ifdef HAS_OCCLUSIONMAP
-    if (pbrMaterial.occlusionMapEnabled) {
-      let ao = textureSample(pbr_occlusionSampler, pbr_occlusionSampler, fragmentInputs.pbr_vUV).r;
+    if (pbrMaterial.occlusionMapEnabled != 0) {
+      let ao =
+        textureSample(pbr_occlusionSampler, pbr_occlusionSamplerSampler, fragmentInputs.pbr_vUV).r;
       color = mix(color, color * ao, pbrMaterial.occlusionStrength);
     }
     #endif
 
     #ifdef HAS_EMISSIVEMAP
-    if (pbrMaterial.emissiveMapEnabled) {
-      let emissive = SRGBtoLINEAR(textureSample(pbr_emissiveSampler, pbr_emissiveSampler, fragmentInputs.pbr_vUV)).rgb * pbrMaterial.emissiveFactor;
+    if (pbrMaterial.emissiveMapEnabled != 0u) {
+      let emissive = SRGBtoLINEAR(
+        textureSample(pbr_emissiveSampler, pbr_emissiveSamplerSampler, fragmentInputs.pbr_vUV)
+      ).rgb * pbrMaterial.emissiveFactor;
       color += emissive;
     }
     #endif
@@ -4070,10 +5971,23 @@ fn pbr_filterColor(colorUnused: vec4<f32>) -> vec4<f32> {
   mat4 normalMatrix;
   vec3 camera;
 } pbrProjection;
+`
+  );
+  var wgslUniformBlock = (
+    /* wgsl */
+    `struct pbrProjectionUniforms {
+  modelViewProjectionMatrix: mat4x4<f32>,
+  modelMatrix: mat4x4<f32>,
+  normalMatrix: mat4x4<f32>,
+  camera: vec3<f32>
+};
+
+@binding(0) @group(0) var<uniform> pbrProjection: pbrProjectionUniforms;
 `
   );
   var pbrProjection = {
     name: "pbrProjection",
+    source: wgslUniformBlock,
     vs: uniformBlock,
     fs: uniformBlock,
     // TODO why is this needed?
@@ -4082,7 +5996,7 @@ fn pbr_filterColor(colorUnused: vec4<f32>) -> vec4<f32> {
       modelViewProjectionMatrix: "mat4x4<f32>",
       modelMatrix: "mat4x4<f32>",
       normalMatrix: "mat4x4<f32>",
-      camera: "vec3<i32>"
+      camera: "vec3<f32>"
     }
   };
 
@@ -4092,9 +6006,9 @@ fn pbr_filterColor(colorUnused: vec4<f32>) -> vec4<f32> {
     uniforms: {},
     name: "pbrMaterial",
     dependencies: [lighting, pbrProjection],
-    source: source2,
-    vs: vs2,
-    fs: fs3,
+    source: source3,
+    vs: vs3,
+    fs: fs4,
     defines: {
       LIGHTING_FRAGMENT: true,
       HAS_NORMALMAP: false,