@luma.gl/engine 9.1.9 → 9.2.0-alpha.2

package/dist/dist.dev.js

@@ -481,25 +481,7 @@ var __exports__ = (() => {
 
   // src/animation-loop/animation-loop.ts
   var statIdCounter = 0;
-  var DEFAULT_ANIMATION_LOOP_PROPS = {
-    device: null,
-    onAddHTML: () => "",
-    onInitialize: async () => {
-      return null;
-    },
-    onRender: () => {
-    },
-    onFinalize: () => {
-    },
-    onError: (error) => console.error(error),
-    // eslint-disable-line no-console
-    stats: import_core.luma.stats.get(`animation-loop-${statIdCounter++}`),
-    // view parameters
-    useDevicePixels: true,
-    autoResizeViewport: false,
-    autoResizeDrawingBuffer: false
-  };
-  var AnimationLoop = class {
+  var _AnimationLoop = class {
     device = null;
     canvas = null;
     props;
@@ -523,21 +505,16 @@ var __exports__ = (() => {
      * @param {HTMLCanvasElement} canvas - if provided, width and height will be passed to context
      */
     constructor(props) {
-      this.props = { ...DEFAULT_ANIMATION_LOOP_PROPS, ...props };
+      this.props = { ..._AnimationLoop.defaultAnimationLoopProps, ...props };
       props = this.props;
       if (!props.device) {
         throw new Error("No device provided");
       }
-      const { useDevicePixels = true } = this.props;
       this.stats = props.stats || new Stats({ id: "animation-loop-stats" });
       this.cpuTime = this.stats.get("CPU Time");
       this.gpuTime = this.stats.get("GPU Time");
       this.frameRate = this.stats.get("Frame Rate");
-      this.setProps({
-        autoResizeViewport: props.autoResizeViewport,
-        autoResizeDrawingBuffer: props.autoResizeDrawingBuffer,
-        useDevicePixels
-      });
+      this.setProps({ autoResizeViewport: props.autoResizeViewport });
       this.start = this.start.bind(this);
       this.stop = this.stop.bind(this);
       this._onMousemove = this._onMousemove.bind(this);
@@ -551,37 +528,19 @@ var __exports__ = (() => {
     delete() {
       this.destroy();
     }
-    setError(error) {
+    reportError(error) {
       this.props.onError(error);
-      this._error = Error();
-      const canvas2 = this.device?.canvasContext?.canvas;
-      if (canvas2 instanceof HTMLCanvasElement) {
-        const errorDiv = document.createElement("h1");
-        errorDiv.innerHTML = error.message;
-        errorDiv.style.position = "absolute";
-        errorDiv.style.top = "20%";
-        errorDiv.style.left = "10px";
-        errorDiv.style.color = "black";
-        errorDiv.style.backgroundColor = "red";
-        document.body.appendChild(errorDiv);
-      }
+      this._error = error;
     }
     /** Flags this animation loop as needing redraw */
     setNeedsRedraw(reason) {
       this.needsRedraw = this.needsRedraw || reason;
       return this;
     }
-    /** TODO - move these props to CanvasContext? */
     setProps(props) {
       if ("autoResizeViewport" in props) {
         this.props.autoResizeViewport = props.autoResizeViewport || false;
       }
-      if ("autoResizeDrawingBuffer" in props) {
-        this.props.autoResizeDrawingBuffer = props.autoResizeDrawingBuffer || false;
-      }
-      if ("useDevicePixels" in props) {
-        this.props.useDevicePixels = props.useDevicePixels || false;
-      }
       return this;
     }
     /** Starts a render loop if not already running */
@@ -676,7 +635,6 @@ var __exports__ = (() => {
       this._startEventHandling();
       this._initializeAnimationProps();
       this._updateAnimationProps();
-      this._resizeCanvasDrawingBuffer();
       this._resizeViewport();
     }
     _setDisplay(display) {
@@ -723,22 +681,24 @@ var __exports__ = (() => {
       this.needsRedraw = false;
     }
     _setupFrame() {
-      this._resizeCanvasDrawingBuffer();
       this._resizeViewport();
     }
     // Initialize the  object that will be passed to app callbacks
     _initializeAnimationProps() {
-      const canvas2 = this.device?.canvasContext?.canvas;
-      if (!this.device || !canvas2) {
+      const canvasContext = this.device?.getDefaultCanvasContext();
+      if (!this.device || !canvasContext) {
         throw new Error("loop");
       }
+      const canvas2 = canvasContext?.canvas;
+      const useDevicePixels = canvasContext.props.useDevicePixels;
       this.animationProps = {
         animationLoop: this,
         device: this.device,
+        canvasContext,
         canvas: canvas2,
+        // @ts-expect-error Deprecated
+        useDevicePixels,
         timeline: this.timeline,
-        // Initial values
-        useDevicePixels: this.props.useDevicePixels,
         needsRedraw: false,
         // Placeholders
         width: 1,
@@ -791,7 +751,7 @@ var __exports__ = (() => {
       if (!this.device) {
         throw new Error("No device provided");
       }
-      this.canvas = this.device.canvasContext?.canvas || null;
+      this.canvas = this.device.getDefaultCanvasContext().canvas || null;
     }
     _createInfoDiv() {
       if (this.canvas && this.props.onAddHTML) {
@@ -818,9 +778,9 @@ var __exports__ = (() => {
       if (!this.device) {
         return { width: 1, height: 1, aspect: 1 };
       }
-      const [width, height] = this.device?.canvasContext?.getPixelSize() || [1, 1];
+      const [width, height] = this.device?.getDefaultCanvasContext().getDevicePixelSize() || [1, 1];
       let aspect = 1;
-      const canvas2 = this.device?.canvasContext?.canvas;
+      const canvas2 = this.device?.getDefaultCanvasContext().canvas;
       if (canvas2 && canvas2.clientHeight) {
         aspect = canvas2.clientWidth / canvas2.clientHeight;
       } else if (width > 0 && height > 0) {
@@ -828,7 +788,7 @@ var __exports__ = (() => {
       }
       return { width, height, aspect };
     }
-    /** Default viewport setup */
+    /** @deprecated Default viewport setup */
     _resizeViewport() {
       if (this.props.autoResizeViewport && this.device.gl) {
         this.device.gl.viewport(
@@ -841,15 +801,6 @@ var __exports__ = (() => {
         );
       }
     }
-    /**
-     * Resize the render buffer of the canvas to match canvas client size
-     * Optionally multiplying with devicePixel ratio
-     */
-    _resizeCanvasDrawingBuffer() {
-      if (this.props.autoResizeDrawingBuffer) {
-        this.device?.canvasContext?.resize({ useDevicePixels: this.props.useDevicePixels });
-      }
-    }
     _beginFrameTimers() {
       this.frameRate.timeEnd();
       this.frameRate.timeStart();
@@ -874,6 +825,21 @@ var __exports__ = (() => {
       this._getAnimationProps()._mousePosition = null;
     }
   };
+  var AnimationLoop = _AnimationLoop;
+  __publicField(AnimationLoop, "defaultAnimationLoopProps", {
+    device: null,
+    onAddHTML: () => "",
+    onInitialize: async () => null,
+    onRender: () => {
+    },
+    onFinalize: () => {
+    },
+    onError: (error) => console.error(error),
+    // eslint-disable-line no-console
+    stats: import_core.luma.stats.get(`animation-loop-${statIdCounter++}`),
+    // view parameters
+    autoResizeViewport: false
+  });
 
   // src/animation-loop/make-animation-loop.ts
   var import_core2 = __toESM(require_core(), 1);
@@ -884,8 +850,14 @@ var __exports__ = (() => {
       ...props,
       device,
       async onInitialize(animationProps) {
-        renderLoop = new AnimationLoopTemplateCtor(animationProps);
-        return await renderLoop?.onInitialize(animationProps);
+        clearError(animationProps.animationLoop.device);
+        try {
+          renderLoop = new AnimationLoopTemplateCtor(animationProps);
+          return await renderLoop?.onInitialize(animationProps);
+        } catch (error) {
+          setError(animationProps.animationLoop.device, error);
+          return null;
+        }
       },
       onRender: (animationProps) => renderLoop?.onRender(animationProps),
       onFinalize: (animationProps) => renderLoop?.onFinalize(animationProps)
@@ -895,9 +867,32 @@ var __exports__ = (() => {
     };
     return animationLoop;
   }
+  function setError(device, error) {
+    const canvas2 = device?.getDefaultCanvasContext().canvas;
+    if (canvas2 instanceof HTMLCanvasElement) {
+      canvas2.style.overflow = "visible";
+      let errorDiv = document.getElementById("animation-loop-error");
+      errorDiv?.remove();
+      errorDiv = document.createElement("h1");
+      errorDiv.id = "animation-loop-error";
+      errorDiv.innerHTML = error.message;
+      errorDiv.style.position = "absolute";
+      errorDiv.style.top = "10px";
+      errorDiv.style.left = "10px";
+      errorDiv.style.color = "black";
+      errorDiv.style.backgroundColor = "red";
+      canvas2.parentElement?.appendChild(errorDiv);
+    }
+  }
+  function clearError(device) {
+    const errorDiv = document.getElementById("animation-loop-error");
+    if (errorDiv) {
+      errorDiv.remove();
+    }
+  }
 
   // src/model/model.ts
-  var import_core7 = __toESM(require_core(), 1);
+  var import_core9 = __toESM(require_core(), 1);
   var import_shadertools2 = __toESM(require_shadertools(), 1);
 
   // src/geometry/gpu-geometry.ts
@@ -1012,63 +1007,142 @@ var __exports__ = (() => {
   var _PipelineFactory = class {
     /** Get the singleton default pipeline factory for the specified device */
     static getDefaultPipelineFactory(device) {
-      device._lumaData.defaultPipelineFactory = device._lumaData.defaultPipelineFactory || new _PipelineFactory(device);
-      return device._lumaData.defaultPipelineFactory;
+      device._lumaData["defaultPipelineFactory"] = device._lumaData["defaultPipelineFactory"] || new _PipelineFactory(device);
+      return device._lumaData["defaultPipelineFactory"];
     }
     device;
+    cachingEnabled;
     destroyPolicy;
+    debug;
     _hashCounter = 0;
     _hashes = {};
     _renderPipelineCache = {};
     _computePipelineCache = {};
+    get [Symbol.toStringTag]() {
+      return "PipelineFactory";
+    }
+    toString() {
+      return `PipelineFactory(${this.device.id})`;
+    }
     constructor(device) {
       this.device = device;
-      this.destroyPolicy = device.props._factoryDestroyPolicy;
+      this.cachingEnabled = device.props._cachePipelines;
+      this.destroyPolicy = device.props._cacheDestroyPolicy;
+      this.debug = device.props.debugFactories;
     }
-    /** Return a RenderPipeline matching props. Reuses a similar pipeline if already created. */
+    /** Return a RenderPipeline matching supplied props. Reuses an equivalent pipeline if already created. */
     createRenderPipeline(props) {
+      if (!this.cachingEnabled) {
+        return this.device.createRenderPipeline(props);
+      }
       const allProps = { ...import_core4.RenderPipeline.defaultProps, ...props };
+      const cache = this._renderPipelineCache;
       const hash = this._hashRenderPipeline(allProps);
-      if (!this._renderPipelineCache[hash]) {
-        const pipeline = this.device.createRenderPipeline({
+      let pipeline = cache[hash]?.pipeline;
+      if (!pipeline) {
+        pipeline = this.device.createRenderPipeline({
           ...allProps,
-          id: allProps.id ? `${allProps.id}-cached` : void 0
+          id: allProps.id ? `${allProps.id}-cached` : uid("unnamed-cached")
         });
         pipeline.hash = hash;
-        this._renderPipelineCache[hash] = { pipeline, useCount: 0 };
+        cache[hash] = { pipeline, useCount: 1 };
+        if (this.debug) {
+          import_core4.log.warn(`${this}: ${pipeline} created, count=${cache[hash].useCount}`)();
+        }
+      } else {
+        cache[hash].useCount++;
+        if (this.debug) {
+          import_core4.log.warn(
+            `${this}: ${cache[hash].pipeline} reused, count=${cache[hash].useCount}, (id=${props.id})`
+          )();
+        }
       }
-      this._renderPipelineCache[hash].useCount++;
-      return this._renderPipelineCache[hash].pipeline;
+      return pipeline;
     }
+    /** Return a ComputePipeline matching supplied props. Reuses an equivalent pipeline if already created. */
     createComputePipeline(props) {
+      if (!this.cachingEnabled) {
+        return this.device.createComputePipeline(props);
+      }
       const allProps = { ...import_core4.ComputePipeline.defaultProps, ...props };
+      const cache = this._computePipelineCache;
       const hash = this._hashComputePipeline(allProps);
-      if (!this._computePipelineCache[hash]) {
-        const pipeline = this.device.createComputePipeline({
+      let pipeline = cache[hash]?.pipeline;
+      if (!pipeline) {
+        pipeline = this.device.createComputePipeline({
           ...allProps,
           id: allProps.id ? `${allProps.id}-cached` : void 0
         });
         pipeline.hash = hash;
-        this._computePipelineCache[hash] = { pipeline, useCount: 0 };
+        cache[hash] = { pipeline, useCount: 1 };
+        if (this.debug) {
+          import_core4.log.warn(`${this}: ${pipeline} created, count=${cache[hash].useCount}`)();
+        }
+      } else {
+        cache[hash].useCount++;
+        if (this.debug) {
+          import_core4.log.warn(
+            `${this}: ${cache[hash].pipeline} reused, count=${cache[hash].useCount}, (id=${props.id})`
+          )();
+        }
       }
-      this._computePipelineCache[hash].useCount++;
-      return this._computePipelineCache[hash].pipeline;
+      return pipeline;
     }
     release(pipeline) {
+      if (!this.cachingEnabled) {
+        pipeline.destroy();
+        return;
+      }
+      const cache = this._getCache(pipeline);
       const hash = pipeline.hash;
-      const cache = pipeline instanceof import_core4.ComputePipeline ? this._computePipelineCache : this._renderPipelineCache;
       cache[hash].useCount--;
       if (cache[hash].useCount === 0) {
-        if (this.destroyPolicy === "unused") {
-          cache[hash].pipeline.destroy();
-          delete cache[hash];
+        this._destroyPipeline(pipeline);
+        if (this.debug) {
+          import_core4.log.warn(`${this}: ${pipeline} released and destroyed`)();
         }
+      } else if (cache[hash].useCount < 0) {
+        import_core4.log.error(`${this}: ${pipeline} released, useCount < 0, resetting`)();
+        cache[hash].useCount = 0;
+      } else if (this.debug) {
+        import_core4.log.warn(`${this}: ${pipeline} released, count=${cache[hash].useCount}`)();
       }
     }
     // PRIVATE
+    /** Destroy a cached pipeline, removing it from the cache (depending on destroy policy) */
+    _destroyPipeline(pipeline) {
+      const cache = this._getCache(pipeline);
+      switch (this.destroyPolicy) {
+        case "never":
+          return false;
+        case "unused":
+          delete cache[pipeline.hash];
+          pipeline.destroy();
+          return true;
+      }
+    }
+    /** Get the appropriate cache for the type of pipeline */
+    _getCache(pipeline) {
+      let cache;
+      if (pipeline instanceof import_core4.ComputePipeline) {
+        cache = this._computePipelineCache;
+      }
+      if (pipeline instanceof import_core4.RenderPipeline) {
+        cache = this._renderPipelineCache;
+      }
+      if (!cache) {
+        throw new Error(`${this}`);
+      }
+      if (!cache[pipeline.hash]) {
+        throw new Error(`${this}: ${pipeline} matched incorrect entry`);
+      }
+      return cache;
+    }
+    /** Calculate a hash based on all the inputs for a compute pipeline */
     _hashComputePipeline(props) {
+      const { type } = this.device;
       const shaderHash = this._getHash(props.shader.source);
-      return `${shaderHash}`;
+      return `${type}/C/${shaderHash}`;
     }
     /** Calculate a hash based on all the inputs for a render pipeline */
     _hashRenderPipeline(props) {
@@ -1076,12 +1150,14 @@ var __exports__ = (() => {
       const fsHash = props.fs ? this._getHash(props.fs.source) : 0;
       const varyingHash = "-";
       const bufferLayoutHash = this._getHash(JSON.stringify(props.bufferLayout));
-      switch (this.device.type) {
+      const { type } = this.device;
+      switch (type) {
         case "webgl":
-          return `${vsHash}/${fsHash}V${varyingHash}BL${bufferLayoutHash}`;
+          return `${type}/R/${vsHash}/${fsHash}V${varyingHash}BL${bufferLayoutHash}`;
+        case "webgpu":
         default:
           const parameterHash = this._getHash(JSON.stringify(props.parameters));
-          return `${vsHash}/${fsHash}V${varyingHash}T${props.topology}P${parameterHash}BL${bufferLayoutHash}`;
+          return `${type}/R/${vsHash}/${fsHash}V${varyingHash}T${props.topology}P${parameterHash}BL${bufferLayoutHash}`;
       }
     }
     _getHash(key) {
@@ -1099,19 +1175,32 @@ var __exports__ = (() => {
   var _ShaderFactory = class {
     /** Returns the default ShaderFactory for the given {@link Device}, creating one if necessary. */
     static getDefaultShaderFactory(device) {
-      device._lumaData.defaultShaderFactory ||= new _ShaderFactory(device);
-      return device._lumaData.defaultShaderFactory;
+      device._lumaData["defaultShaderFactory"] ||= new _ShaderFactory(device);
+      return device._lumaData["defaultShaderFactory"];
     }
     device;
+    cachingEnabled;
     destroyPolicy;
+    debug;
     _cache = {};
+    get [Symbol.toStringTag]() {
+      return "ShaderFactory";
+    }
+    toString() {
+      return `${this[Symbol.toStringTag]}(${this.device.id})`;
+    }
     /** @internal */
     constructor(device) {
       this.device = device;
-      this.destroyPolicy = device.props._factoryDestroyPolicy;
+      this.cachingEnabled = device.props._cacheShaders;
+      this.destroyPolicy = device.props._cacheDestroyPolicy;
+      this.debug = true;
     }
     /** Requests a {@link Shader} from the cache, creating a new Shader only if necessary. */
     createShader(props) {
+      if (!this.cachingEnabled) {
+        return this.device.createShader(props);
+      }
       const key = this._hashShader(props);
       let cacheEntry = this._cache[key];
       if (!cacheEntry) {
@@ -1119,13 +1208,24 @@ var __exports__ = (() => {
           ...props,
           id: props.id ? `${props.id}-cached` : void 0
         });
-        this._cache[key] = cacheEntry = { shader, useCount: 0 };
+        this._cache[key] = cacheEntry = { shader, useCount: 1 };
+        if (this.debug) {
+          import_core5.log.warn(`${this}: Created new shader ${shader.id}`)();
+        }
+      } else {
+        cacheEntry.useCount++;
+        if (this.debug) {
+          import_core5.log.warn(`${this}: Reusing shader ${cacheEntry.shader.id} count=${cacheEntry.useCount}`)();
+        }
       }
-      cacheEntry.useCount++;
       return cacheEntry.shader;
     }
     /** Releases a previously-requested {@link Shader}, destroying it if no users remain. */
     release(shader) {
+      if (!this.cachingEnabled) {
+        shader.destroy();
+        return;
+      }
       const key = this._hashShader(shader);
       const cacheEntry = this._cache[key];
       if (cacheEntry) {
@@ -1134,7 +1234,14 @@ var __exports__ = (() => {
           if (this.destroyPolicy === "unused") {
             delete this._cache[key];
             cacheEntry.shader.destroy();
+            if (this.debug) {
+              import_core5.log.warn(`${this}: Releasing shader ${shader.id}, destroyed`)();
+            }
           }
+        } else if (cacheEntry.useCount < 0) {
+          throw new Error(`ShaderFactory: Shader ${shader.id} released too many times`);
+        } else if (this.debug) {
+          import_core5.log.warn(`${this}: Releasing shader ${shader.id} count=${cacheEntry.useCount}`)();
         }
       }
     }
@@ -1251,8 +1358,59 @@ var __exports__ = (() => {
     return false;
   }
 
-  // src/shader-inputs.ts
+  // src/utils/buffer-layout-helper.ts
   var import_core6 = __toESM(require_core(), 1);
+  var BufferLayoutHelper = class {
+    bufferLayouts;
+    constructor(bufferLayouts) {
+      this.bufferLayouts = bufferLayouts;
+    }
+    getBufferLayout(name) {
+      return this.bufferLayouts.find((layout) => layout.name === name) || null;
+    }
+    /** Get attribute names from a BufferLayout */
+    getAttributeNamesForBuffer(bufferLayout) {
+      return bufferLayout.attributes ? bufferLayout.attributes?.map((layout) => layout.attribute) : [bufferLayout.name];
+    }
+    mergeBufferLayouts(bufferLayouts1, bufferLayouts2) {
+      const mergedLayouts = [...bufferLayouts1];
+      for (const attribute of bufferLayouts2) {
+        const index = mergedLayouts.findIndex((attribute2) => attribute2.name === attribute.name);
+        if (index < 0) {
+          mergedLayouts.push(attribute);
+        } else {
+          mergedLayouts[index] = attribute;
+        }
+      }
+      return mergedLayouts;
+    }
+    getBufferIndex(bufferName) {
+      const bufferIndex = this.bufferLayouts.findIndex((layout) => layout.name === bufferName);
+      if (bufferIndex === -1) {
+        import_core6.log.warn(`BufferLayout: Missing buffer for "${bufferName}".`)();
+      }
+      return bufferIndex;
+    }
+  };
+
+  // src/utils/buffer-layout-order.ts
+  function sortedBufferLayoutByShaderSourceLocations(shaderLayout, bufferLayout) {
+    const shaderLayoutMap = Object.fromEntries(
+      shaderLayout.attributes.map((attr) => [attr.name, attr.location])
+    );
+    const sortedLayout = bufferLayout.slice();
+    sortedLayout.sort((a, b) => {
+      const attributeNamesA = a.attributes ? a.attributes.map((attr) => attr.attribute) : [a.name];
+      const attributeNamesB = b.attributes ? b.attributes.map((attr) => attr.attribute) : [b.name];
+      const minLocationA = Math.min(...attributeNamesA.map((name) => shaderLayoutMap[name]));
+      const minLocationB = Math.min(...attributeNamesB.map((name) => shaderLayoutMap[name]));
+      return minLocationA - minLocationB;
+    });
+    return sortedLayout;
+  }
+
+  // src/shader-inputs.ts
+  var import_core7 = __toESM(require_core(), 1);
   var import_shadertools = __toESM(require_shadertools(), 1);
 
   // ../../node_modules/@math.gl/types/dist/is-array.js
@@ -1315,14 +1473,14 @@ var __exports__ = (() => {
       for (const resolvedModule of resolvedModules) {
         modules[resolvedModule.name] = resolvedModule;
       }
-      import_core6.log.log(1, "Creating ShaderInputs with modules", Object.keys(modules))();
+      import_core7.log.log(1, "Creating ShaderInputs with modules", Object.keys(modules))();
       this.modules = modules;
       this.moduleUniforms = {};
       this.moduleBindings = {};
       for (const [name, module] of Object.entries(modules)) {
         this._addModule(module);
         if (module.name && name !== module.name && !this.options.disableWarnings) {
-          import_core6.log.warn(`Module name: ${name} vs ${module.name}`)();
+          import_core7.log.warn(`Module name: ${name} vs ${module.name}`)();
         }
       }
     }
@@ -1339,7 +1497,7 @@ var __exports__ = (() => {
         const module = this.modules[moduleName];
         if (!module) {
           if (!this.options.disableWarnings) {
-            import_core6.log.warn(`Module ${name} not found`)();
+            import_core7.log.warn(`Module ${name} not found`)();
           }
           continue;
         }
@@ -1391,6 +1549,9 @@ var __exports__ = (() => {
     }
   };
 
+  // src/async-texture/async-texture.ts
+  var import_core8 = __toESM(require_core(), 1);
+
   // src/application-utils/load-file.ts
   var pathPrefix = "";
   function setPathPrefix(prefix) {
@@ -1418,9 +1579,12 @@ var __exports__ = (() => {
   }
 
   // src/async-texture/async-texture.ts
-  var AsyncTexture = class {
+  var TextureCubeFaces = ["+X", "-X", "+Y", "-Y", "+Z", "-Z"];
+  var CubeFaces = ["+X", "-X", "+Y", "-Y", "+Z", "-Z"];
+  var _AsyncTexture = class {
     device;
     id;
+    props;
     // TODO - should we type these as possibly `null`? It will make usage harder?
     // @ts-expect-error
     texture;
@@ -1443,9 +1607,15 @@ var __exports__ = (() => {
     }
     constructor(device, props) {
       this.device = device;
-      this.id = props.id || uid("async-texture");
+      const id = uid("async-texture");
+      this.props = { ..._AsyncTexture.defaultProps, id, ...props };
+      this.id = this.props.id;
+      props = { ...props };
       if (typeof props?.data === "string" && props.dimension === "2d") {
-        props = { ...props, data: loadImageBitmap(props.data) };
+        props.data = loadImageBitmap(props.data);
+      }
+      if (props.mipmaps) {
+        props.mipLevels = "auto";
       }
       this.ready = new Promise((resolve, reject) => {
         this.resolveReady = () => {
@@ -1457,22 +1627,50 @@ var __exports__ = (() => {
       this.initAsync(props);
     }
     async initAsync(props) {
+      let resolveReady;
+      let rejectReady;
       const asyncData = props.data;
-      let data;
-      try {
-        data = await awaitAllPromises(asyncData);
-      } catch (error) {
-        this.rejectReady(error);
-      }
+      const data = await awaitAllPromises(asyncData).then(resolveReady, rejectReady);
       if (this.destroyed) {
         return;
       }
-      const syncProps = { ...props, data };
+      const size = this.props.width && this.props.height ? { width: this.props.width, height: this.props.height } : this.getTextureDataSize(data);
+      if (!size) {
+        throw new Error("Texture size could not be determined");
+      }
+      const syncProps = { ...size, ...props, data: void 0, mipLevels: 1 };
+      const maxMips = this.device.getMipLevelCount(syncProps.width, syncProps.height);
+      syncProps.mipLevels = this.props.mipLevels === "auto" ? maxMips : Math.min(maxMips, this.props.mipLevels);
       this.texture = this.device.createTexture(syncProps);
       this.sampler = this.texture.sampler;
       this.view = this.texture.view;
       this.isReady = true;
-      this.resolveReady();
+      if (props.data) {
+        switch (this.props.dimension) {
+          case "1d":
+            this._setTexture1DData(this.texture, data);
+            break;
+          case "2d":
+            this._setTexture2DData(data);
+            break;
+          case "3d":
+            this._setTexture3DData(this.texture, data);
+            break;
+          case "2d-array":
+            this._setTextureArrayData(this.texture, data);
+            break;
+          case "cube":
+            this._setTextureCubeData(this.texture, data);
+            break;
+          case "cube-array":
+            this._setTextureCubeArrayData(this.texture, data);
+            break;
+        }
+      }
+      if (this.props.mipmaps) {
+        this.generateMipmaps();
+      }
+      import_core8.log.info(1, `${this} loaded`);
     }
     destroy() {
       if (this.texture) {
@@ -1481,10 +1679,20 @@ var __exports__ = (() => {
       }
       this.destroyed = true;
     }
+    generateMipmaps() {
+      this.texture.generateMipmapsWebGL();
+    }
+    /** Set sampler or create and set new Sampler from SamplerProps */
+    setSampler(sampler = {}) {
+      this.texture.setSampler(
+        sampler instanceof import_core8.Sampler ? sampler : this.device.createSampler(sampler)
+      );
+    }
     /**
      * Textures are immutable and cannot be resized after creation,
      * but we can create a similar texture with the same parameters but a new size.
      * @note Does not copy contents of the texture
+     * @note Mipmaps may need to be regenerated after resizing / setting new data
      * @todo Abort pending promise and create a texture with the new size?
      */
     resize(size) {
@@ -1501,7 +1709,163 @@ var __exports__ = (() => {
       }
       return true;
     }
+    /** Check if texture data is a typed array */
+    isTextureLevelData(data) {
+      const typedArray = data?.data;
+      return ArrayBuffer.isView(typedArray);
+    }
+    /** Get the size of the texture described by the provided TextureData */
+    getTextureDataSize(data) {
+      if (!data) {
+        return null;
+      }
+      if (ArrayBuffer.isView(data)) {
+        return null;
+      }
+      if (Array.isArray(data)) {
+        return this.getTextureDataSize(data[0]);
+      }
+      if (this.device.isExternalImage(data)) {
+        return this.device.getExternalImageSize(data);
+      }
+      if (data && typeof data === "object" && data.constructor === Object) {
+        const textureDataArray = Object.values(data);
+        const untypedData = textureDataArray[0];
+        return { width: untypedData.width, height: untypedData.height };
+      }
+      throw new Error("texture size deduction failed");
+    }
+    /** Convert luma.gl cubemap face constants to depth index */
+    getCubeFaceDepth(face) {
+      switch (face) {
+        case "+X":
+          return 0;
+        case "-X":
+          return 1;
+        case "+Y":
+          return 2;
+        case "-Y":
+          return 3;
+        case "+Z":
+          return 4;
+        case "-Z":
+          return 5;
+        default:
+          throw new Error(face);
+      }
+    }
+    // EXPERIMENTAL
+    setTextureData(data) {
+    }
+    /** Experimental: Set multiple mip levels */
+    _setTexture1DData(texture, data) {
+      throw new Error("setTexture1DData not supported in WebGL.");
+    }
+    /** Experimental: Set multiple mip levels */
+    _setTexture2DData(lodData, depth = 0) {
+      if (!this.texture) {
+        throw new Error("Texture not initialized");
+      }
+      const lodArray = this._normalizeTextureData(lodData);
+      if (lodArray.length > 1 && this.props.mipmaps !== false) {
+        import_core8.log.warn(`Texture ${this.id} mipmap and multiple LODs.`)();
+      }
+      for (let mipLevel = 0; mipLevel < lodArray.length; mipLevel++) {
+        const imageData = lodArray[mipLevel];
+        if (this.device.isExternalImage(imageData)) {
+          this.texture.copyExternalImage({ image: imageData, depth, mipLevel, flipY: true });
+        } else {
+          this.texture.copyImageData({ data: imageData.data, mipLevel });
+        }
+      }
+    }
+    /**
+     * Experimental: Sets 3D texture data: multiple depth slices, multiple mip levels
+     * @param data
+     */
+    _setTexture3DData(texture, data) {
+      if (this.texture?.props.dimension !== "3d") {
+        throw new Error(this.id);
+      }
+      for (let depth = 0; depth < data.length; depth++) {
+        this._setTexture2DData(data[depth], depth);
+      }
+    }
+    /**
+     * Experimental: Set Cube texture data, multiple faces, multiple mip levels
+     * @todo - could support TextureCubeArray with depth
+     * @param data
+     * @param index
+     */
+    _setTextureCubeData(texture, data) {
+      if (this.texture?.props.dimension !== "cube") {
+        throw new Error(this.id);
+      }
+      for (const [face, faceData] of Object.entries(data)) {
+        const faceDepth = CubeFaces.indexOf(face);
+        this._setTexture2DData(faceData, faceDepth);
+      }
+    }
+    /**
+     * Experimental: Sets texture array data, multiple levels, multiple depth slices
+     * @param data
+     */
+    _setTextureArrayData(texture, data) {
+      if (this.texture?.props.dimension !== "2d-array") {
+        throw new Error(this.id);
+      }
+      for (let depth = 0; depth < data.length; depth++) {
+        this._setTexture2DData(data[depth], depth);
+      }
+    }
+    /**
+     * Experimental: Sets texture cube array, multiple faces, multiple levels, multiple mip levels
+     * @param data
+     */
+    _setTextureCubeArrayData(texture, data) {
+      throw new Error("setTextureCubeArrayData not supported in WebGL2.");
+    }
+    /** Experimental */
+    _setTextureCubeFaceData(texture, lodData, face, depth = 0) {
+      if (Array.isArray(lodData) && lodData.length > 1 && this.props.mipmaps !== false) {
+        import_core8.log.warn(`${this.id} has mipmap and multiple LODs.`)();
+      }
+      const faceDepth = TextureCubeFaces.indexOf(face);
+      this._setTexture2DData(lodData, faceDepth);
+    }
+    /**
+     * Normalize TextureData to an array of TextureImageData / ExternalImages
+     * @param data
+     * @param options
+     * @returns array of TextureImageData / ExternalImages
+     */
+    _normalizeTextureData(data) {
+      const options = this.texture;
+      let mipLevelArray;
+      if (ArrayBuffer.isView(data)) {
+        mipLevelArray = [
+          {
+            // ts-expect-error does data really need to be Uint8ClampedArray?
+            data,
+            width: options.width,
+            height: options.height
+            // depth: options.depth
+          }
+        ];
+      } else if (!Array.isArray(data)) {
+        mipLevelArray = [data];
+      } else {
+        mipLevelArray = data;
+      }
+      return mipLevelArray;
+    }
   };
+  var AsyncTexture = _AsyncTexture;
+  __publicField(AsyncTexture, "defaultProps", {
+    ...import_core8.Texture.defaultProps,
+    data: null,
+    mipmaps: false
+  });
   async function awaitAllPromises(x) {
     x = await x;
     if (Array.isArray(x)) {
@@ -1557,8 +1921,6 @@ var __exports__ = (() => {
     constantAttributes = {};
     /** Bindings (textures, samplers, uniform buffers) */
     bindings = {};
-    /** Sets uniforms @deprecated Use uniform buffers and setBindings() for portability*/
-    uniforms = {};
     /**
      * VertexArray
      * @note not implemented: if bufferLayout is updated, vertex array has to be rebuilt!
@@ -1576,7 +1938,6 @@ var __exports__ = (() => {
     _uniformStore;
     _attributeInfos = {};
     _gpuGeometry = null;
-    _getModuleUniforms;
     props;
     _pipelineNeedsUpdate = "newly created";
     _needsRedraw = "initializing";
@@ -1637,7 +1998,8 @@ var __exports__ = (() => {
       this.shaderFactory = props.shaderFactory || ShaderFactory.getDefaultShaderFactory(this.device);
       this.pipeline = this._updatePipeline();
       this.vertexArray = device.createVertexArray({
-        renderPipeline: this.pipeline
+        shaderLayout: this.pipeline.shaderLayout,
+        bufferLayout: this.pipeline.bufferLayout
       });
       if (this._gpuGeometry) {
         this._setGeometryAttributes(this._gpuGeometry);
@@ -1663,28 +2025,22 @@ var __exports__ = (() => {
       if (props.bindings) {
         this.setBindings(props.bindings);
       }
-      if (props.uniforms) {
-        this.setUniformsWebGL(props.uniforms);
-      }
-      if (props.moduleSettings) {
-        this.updateModuleSettingsWebGL(props.moduleSettings);
-      }
       if (props.transformFeedback) {
         this.transformFeedback = props.transformFeedback;
       }
       Object.seal(this);
     }
     destroy() {
-      if (this._destroyed)
-        return;
-      this.pipelineFactory.release(this.pipeline);
-      this.shaderFactory.release(this.pipeline.vs);
-      if (this.pipeline.fs) {
-        this.shaderFactory.release(this.pipeline.fs);
+      if (!this._destroyed) {
+        this.pipelineFactory.release(this.pipeline);
+        this.shaderFactory.release(this.pipeline.vs);
+        if (this.pipeline.fs) {
+          this.shaderFactory.release(this.pipeline.fs);
+        }
+        this._uniformStore.destroy();
+        this._gpuGeometry?.destroy();
+        this._destroyed = true;
       }
-      this._uniformStore.destroy();
-      this._gpuGeometry?.destroy();
-      this._destroyed = true;
     }
     // Draw call
     /** Query redraw status. Clears the status. */
@@ -1707,7 +2063,7 @@ var __exports__ = (() => {
     draw(renderPass) {
       const loadingBinding = this._areBindingsLoading();
       if (loadingBinding) {
-        import_core7.log.info(LOG_DRAW_PRIORITY, `>>> DRAWING ABORTED ${this.id}: ${loadingBinding} not loaded`)();
+        import_core9.log.info(LOG_DRAW_PRIORITY, `>>> DRAWING ABORTED ${this.id}: ${loadingBinding} not loaded`)();
         return false;
       }
       try {
@@ -1725,9 +2081,6 @@ var __exports__ = (() => {
         this.pipeline.setBindings(syncBindings, {
           disableWarnings: this.props.disableWarnings
         });
-        if (!isObjectEmpty(this.uniforms)) {
-          this.pipeline.setUniformsWebGL(this.uniforms);
-        }
         const { indexBuffer } = this.vertexArray;
         const indexCount = indexBuffer ? indexBuffer.byteLength / (indexBuffer.indexType === "uint32" ? 4 : 2) : void 0;
         drawSuccess = this.pipeline.draw({
@@ -1768,7 +2121,7 @@ var __exports__ = (() => {
       const gpuGeometry = geometry && makeGPUGeometry(this.device, geometry);
       if (gpuGeometry) {
         this.setTopology(gpuGeometry.topology || "triangle-list");
-        const bufferLayoutHelper = new import_core7._BufferLayoutHelper(this.bufferLayout);
+        const bufferLayoutHelper = new BufferLayoutHelper(this.bufferLayout);
         this.bufferLayout = bufferLayoutHelper.mergeBufferLayouts(
           gpuGeometry.bufferLayout,
           this.bufferLayout
@@ -1794,12 +2147,13 @@ var __exports__ = (() => {
      * @note Triggers a pipeline rebuild / pipeline cache fetch
      */
     setBufferLayout(bufferLayout) {
-      const bufferLayoutHelper = new import_core7._BufferLayoutHelper(this.bufferLayout);
+      const bufferLayoutHelper = new BufferLayoutHelper(this.bufferLayout);
       this.bufferLayout = this._gpuGeometry ? bufferLayoutHelper.mergeBufferLayouts(bufferLayout, this._gpuGeometry.bufferLayout) : bufferLayout;
       this._setPipelineNeedsUpdate("bufferLayout");
       this.pipeline = this._updatePipeline();
       this.vertexArray = this.device.createVertexArray({
-        renderPipeline: this.pipeline
+        shaderLayout: this.pipeline.shaderLayout,
+        bufferLayout: this.pipeline.bufferLayout
       });
       if (this._gpuGeometry) {
         this._setGeometryAttributes(this._gpuGeometry);
@@ -1839,7 +2193,7 @@ var __exports__ = (() => {
     /** Set the shader inputs */
     setShaderInputs(shaderInputs) {
       this.shaderInputs = shaderInputs;
-      this._uniformStore = new import_core7.UniformStore(this.shaderInputs.modules);
+      this._uniformStore = new import_core9.UniformStore(this.shaderInputs.modules);
       for (const [moduleName, module] of Object.entries(this.shaderInputs.modules)) {
         if (shaderModuleHasUniforms(module)) {
           const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
@@ -1882,21 +2236,21 @@ var __exports__ = (() => {
      */
     setAttributes(buffers, options) {
       const disableWarnings = options?.disableWarnings ?? this.props.disableWarnings;
-      if (buffers.indices) {
-        import_core7.log.warn(
+      if (buffers["indices"]) {
+        import_core9.log.warn(
           `Model:${this.id} setAttributes() - indexBuffer should be set using setIndexBuffer()`
         )();
       }
-      this.bufferLayout = (0, import_core7.sortedBufferLayoutByShaderSourceLocations)(
+      this.bufferLayout = sortedBufferLayoutByShaderSourceLocations(
         this.pipeline.shaderLayout,
         this.bufferLayout
       );
-      const bufferLayoutHelper = new import_core7._BufferLayoutHelper(this.bufferLayout);
+      const bufferLayoutHelper = new BufferLayoutHelper(this.bufferLayout);
       for (const [bufferName, buffer] of Object.entries(buffers)) {
         const bufferLayout = bufferLayoutHelper.getBufferLayout(bufferName);
         if (!bufferLayout) {
           if (!disableWarnings) {
-            import_core7.log.warn(`Model(${this.id}): Missing layout for buffer "${bufferName}".`)();
+            import_core9.log.warn(`Model(${this.id}): Missing layout for buffer "${bufferName}".`)();
           }
           continue;
         }
@@ -1911,7 +2265,7 @@ var __exports__ = (() => {
           }
         }
         if (!set && !disableWarnings) {
-          import_core7.log.warn(
+          import_core9.log.warn(
             `Model(${this.id}): Ignoring buffer "${buffer.id}" for unknown attribute "${bufferName}"`
           )();
         }
@@ -1932,44 +2286,14 @@ var __exports__ = (() => {
         if (attributeInfo) {
           this.vertexArray.setConstantWebGL(attributeInfo.location, value);
         } else if (!(options?.disableWarnings ?? this.props.disableWarnings)) {
-          import_core7.log.warn(
+          import_core9.log.warn(
             `Model "${this.id}: Ignoring constant supplied for unknown attribute "${attributeName}"`
           )();
         }
       }
       this.setNeedsRedraw("constants");
     }
-    // DEPRECATED METHODS
-    /**
-     * Sets individual uniforms
-     * @deprecated WebGL only, use uniform buffers for portability
-     * @param uniforms
-     */
-    setUniforms(uniforms) {
-      this.setUniformsWebGL(uniforms);
-    }
-    /**
-     * Sets individual uniforms
-     * @deprecated WebGL only, use uniform buffers for portability
-     * @param uniforms
-     */
-    setUniformsWebGL(uniforms) {
-      if (!isObjectEmpty(uniforms)) {
-        this.pipeline.setUniformsWebGL(uniforms);
-        Object.assign(this.uniforms, uniforms);
-      }
-      this.setNeedsRedraw("uniforms");
-    }
-    /**
-     * @deprecated Updates shader module settings (which results in uniforms being set)
-     */
-    updateModuleSettingsWebGL(props) {
-      const { bindings, uniforms } = splitUniformsAndBindings(this._getModuleUniforms(props));
-      Object.assign(this.bindings, bindings);
-      Object.assign(this.uniforms, uniforms);
-      this.setNeedsRedraw("moduleSettings");
-    }
-    // Internal methods
+    // INTERNAL METHODS
     /** Check that bindings are loaded. Returns id of first binding that is still loading. */
     _areBindingsLoading() {
       for (const binding of Object.values(this.bindings)) {
@@ -1997,16 +2321,16 @@ var __exports__ = (() => {
     _getBindingsUpdateTimestamp() {
       let timestamp = 0;
       for (const binding of Object.values(this.bindings)) {
-        if (binding instanceof import_core7.TextureView) {
+        if (binding instanceof import_core9.TextureView) {
           timestamp = Math.max(timestamp, binding.texture.updateTimestamp);
-        } else if (binding instanceof import_core7.Buffer || binding instanceof import_core7.Texture) {
+        } else if (binding instanceof import_core9.Buffer || binding instanceof import_core9.Texture) {
           timestamp = Math.max(timestamp, binding.updateTimestamp);
         } else if (binding instanceof AsyncTexture) {
           timestamp = binding.texture ? Math.max(timestamp, binding.texture.updateTimestamp) : (
             // The texture will become available in the future
             Infinity
           );
-        } else if (!(binding instanceof import_core7.Sampler)) {
+        } else if (!(binding instanceof import_core9.Sampler)) {
           timestamp = Math.max(timestamp, binding.buffer.updateTimestamp);
         }
       }
@@ -2041,7 +2365,7 @@ var __exports__ = (() => {
         let prevShaderVs = null;
         let prevShaderFs = null;
         if (this.pipeline) {
-          import_core7.log.log(
+          import_core9.log.log(
             1,
             `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`
           )();
@@ -2077,7 +2401,7 @@ var __exports__ = (() => {
           vs: vs3,
           fs: fs3
         });
-        this._attributeInfos = (0, import_core7.getAttributeInfosFromLayouts)(
+        this._attributeInfos = (0, import_core9.getAttributeInfosFromLayouts)(
           this.pipeline.shaderLayout,
           this.bufferLayout
         );
@@ -2092,27 +2416,24 @@ var __exports__ = (() => {
     _lastLogTime = 0;
     _logOpen = false;
     _logDrawCallStart() {
-      const logDrawTimeout = import_core7.log.level > 3 ? 0 : LOG_DRAW_TIMEOUT;
-      if (import_core7.log.level < 2 || Date.now() - this._lastLogTime < logDrawTimeout) {
+      const logDrawTimeout = import_core9.log.level > 3 ? 0 : LOG_DRAW_TIMEOUT;
+      if (import_core9.log.level < 2 || Date.now() - this._lastLogTime < logDrawTimeout) {
         return;
       }
       this._lastLogTime = Date.now();
       this._logOpen = true;
-      import_core7.log.group(LOG_DRAW_PRIORITY, `>>> DRAWING MODEL ${this.id}`, { collapsed: import_core7.log.level <= 2 })();
+      import_core9.log.group(LOG_DRAW_PRIORITY, `>>> DRAWING MODEL ${this.id}`, { collapsed: import_core9.log.level <= 2 })();
     }
     _logDrawCallEnd() {
       if (this._logOpen) {
         const shaderLayoutTable = getDebugTableForShaderLayout(this.pipeline.shaderLayout, this.id);
-        import_core7.log.table(LOG_DRAW_PRIORITY, shaderLayoutTable)();
+        import_core9.log.table(LOG_DRAW_PRIORITY, shaderLayoutTable)();
         const uniformTable = this.shaderInputs.getDebugTable();
-        for (const [name, value] of Object.entries(this.uniforms)) {
-          uniformTable[name] = { value };
-        }
-        import_core7.log.table(LOG_DRAW_PRIORITY, uniformTable)();
+        import_core9.log.table(LOG_DRAW_PRIORITY, uniformTable)();
         const attributeTable = this._getAttributeDebugTable();
-        import_core7.log.table(LOG_DRAW_PRIORITY, this._attributeInfos)();
-        import_core7.log.table(LOG_DRAW_PRIORITY, attributeTable)();
-        import_core7.log.groupEnd(LOG_DRAW_PRIORITY)();
+        import_core9.log.table(LOG_DRAW_PRIORITY, this._attributeInfos)();
+        import_core9.log.table(LOG_DRAW_PRIORITY, attributeTable)();
+        import_core9.log.groupEnd(LOG_DRAW_PRIORITY)();
         this._logOpen = false;
       }
     }
@@ -2141,7 +2462,7 @@ var __exports__ = (() => {
       if (this.vertexArray.indexBuffer) {
         const { indexBuffer } = this.vertexArray;
         const values = indexBuffer.indexType === "uint32" ? new Uint32Array(indexBuffer.debugData) : new Uint16Array(indexBuffer.debugData);
-        table.indices = {
+        table["indices"] = {
           name: "indices",
           type: indexBuffer.indexType,
           values: values.toString()
@@ -2151,14 +2472,14 @@ var __exports__ = (() => {
     }
     // TODO - fix typing of luma data types
     _getBufferOrConstantValues(attribute, dataType) {
-      const TypedArrayConstructor = (0, import_core7.getTypedArrayFromDataType)(dataType);
-      const typedArray = attribute instanceof import_core7.Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
+      const TypedArrayConstructor = (0, import_core9.getTypedArrayConstructor)(dataType);
+      const typedArray = attribute instanceof import_core9.Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
       return typedArray.toString();
     }
   };
   var Model = _Model;
   __publicField(Model, "defaultProps", {
-    ...import_core7.RenderPipeline.defaultProps,
+    ...import_core9.RenderPipeline.defaultProps,
     source: void 0,
     vs: null,
     fs: null,
@@ -2167,7 +2488,6 @@ var __exports__ = (() => {
     userData: {},
     defines: {},
     modules: [],
-    moduleSettings: void 0,
     geometry: null,
     indexBuffer: null,
     attributes: {},
@@ -2205,7 +2525,7 @@ var __exports__ = (() => {
   }
 
   // src/compute/buffer-transform.ts
-  var import_core8 = __toESM(require_core(), 1);
+  var import_core10 = __toESM(require_core(), 1);
   var import_shadertools3 = __toESM(require_shadertools(), 1);
   var _BufferTransform = class {
     device;
@@ -2267,7 +2587,7 @@ var __exports__ = (() => {
       if (!result) {
         throw new Error("BufferTransform#getBuffer");
       }
-      if (result instanceof import_core8.Buffer) {
+      if (result instanceof import_core10.Buffer) {
         return result.readAsync();
       }
       const { buffer, byteOffset = 0, byteLength = buffer.byteLength } = result;
@@ -2304,7 +2624,7 @@ var __exports__ = (() => {
         mipmapFilter: "nearest"
       });
       this.model = new Model(this.device, {
-        id: props.id || "texture-transform-model",
+        id: props.id || uid("texture-transform-model"),
         fs: props.fs || (0, import_shadertools4.getPassthroughFS)({
           input: props.targetTextureVarying,
           inputChannels: props.targetTextureChannels,
@@ -2333,6 +2653,7 @@ var __exports__ = (() => {
       const renderPass = this.device.beginRenderPass({ framebuffer, ...options });
       this.model.draw(renderPass);
       renderPass.end();
+      this.device.submit();
     }
     getTargetTexture() {
       const { targetTexture } = this.bindings[this.currentIndex];
@@ -2422,9 +2743,9 @@ var __exports__ = (() => {
           this.attributes[attributeName] = attribute;
         }
       }
-      if (this.indices && this.indices.isIndexed !== void 0) {
+      if (this.indices && this.indices["isIndexed"] !== void 0) {
         this.indices = Object.assign({}, this.indices);
-        delete this.indices.isIndexed;
+        delete this.indices["isIndexed"];
       }
       this.vertexCount = vertexCount || this._calculateVertexCount(this.attributes, this.indices);
     }
@@ -2550,7 +2871,7 @@ ${props.source}` };
 @group(0) @binding(1) var backgroundTextureSampler: sampler;
 
 fn billboardTexture_getTextureUV(coordinates: vec2<f32>) -> vec2<f32> {
-	let iTexSize: vec2<u32> = textureDimensions(backgroundTexture, 0) * 2;
+	let iTexSize: vec2<u32> = textureDimensions(backgroundTexture, 0);
 	let texSize: vec2<f32> = vec2<f32>(f32(iTexSize.x), f32(iTexSize.y));
 	var position: vec2<f32> = coordinates.xy / texSize;
 	return position;
@@ -2572,7 +2893,7 @@ uniform sampler2D backgroundTexture;
 out vec4 fragColor;
 
 vec2 billboardTexture_getTextureUV() {
-  ivec2 iTexSize = textureDimensions(backgroundTexture, 0) * 2;
+  ivec2 iTexSize = textureSize(backgroundTexture, 0);
   vec2 texSize = vec2(float(iTexSize.x), float(iTexSize.y));
   vec2 position = gl_FragCoord.xy / texSize;
   return position;
@@ -2592,18 +2913,20 @@ void main(void) {
         fs: BACKGROUND_FS,
         parameters: {
           depthWriteEnabled: false,
-          depthCompare: "always",
           ...props.blend ? {
             blend: true,
             blendColorOperation: "add",
             blendAlphaOperation: "add",
             blendColorSrcFactor: "one",
-            blendColorDstFactor: "one-minus-src-color",
+            blendColorDstFactor: "one-minus-src",
             blendAlphaSrcFactor: "one",
             blendAlphaDstFactor: "one-minus-src-alpha"
           } : {}
         }
       });
+      if (!props.backgroundTexture) {
+        throw new Error("BackgroundTextureModel requires a backgroundTexture prop");
+      }
       this.setTexture(props.backgroundTexture);
     }
     setTexture(backgroundTexture) {
@@ -4796,13 +5119,13 @@ void main(void) {
   };
 
   // src/scenegraph/group-node.ts
-  var import_core11 = __toESM(require_core(), 1);
+  var import_core13 = __toESM(require_core(), 1);
   var GroupNode = class extends ScenegraphNode {
     children;
     constructor(props = {}) {
       props = Array.isArray(props) ? { children: props } : props;
       const { children = [] } = props;
-      import_core11.log.assert(
+      import_core13.log.assert(
         children.every((child) => child instanceof ScenegraphNode),
         "every child must an instance of ScenegraphNode"
       );
@@ -6020,7 +6343,7 @@ void main(void) {
   var import_shadertools5 = __toESM(require_shadertools(), 1);
 
   // src/compute/swap.ts
-  var import_core13 = __toESM(require_core(), 1);
+  var import_core15 = __toESM(require_core(), 1);
   var Swap = class {
     /** The current resource - usually the source for renders or computations */
     current;
@@ -6048,14 +6371,18 @@ void main(void) {
       let colorAttachments = props.colorAttachments?.map(
         (colorAttachment) => typeof colorAttachment !== "string" ? colorAttachment : device.createTexture({
           format: colorAttachment,
-          usage: import_core13.Texture.COPY_DST | import_core13.Texture.RENDER_ATTACHMENT
+          usage: import_core15.Texture.SAMPLE | import_core15.Texture.RENDER | import_core15.Texture.COPY_SRC | import_core15.Texture.COPY_DST,
+          width: 1,
+          height: 1
         })
       );
       const current = device.createFramebuffer({ ...props, colorAttachments });
       colorAttachments = props.colorAttachments?.map(
         (colorAttachment) => typeof colorAttachment !== "string" ? colorAttachment : device.createTexture({
           format: colorAttachment,
-          usage: import_core13.Texture.COPY_DST | import_core13.Texture.RENDER_ATTACHMENT
+          usage: import_core15.Texture.TEXTURE | import_core15.Texture.COPY_SRC | import_core15.Texture.COPY_DST | import_core15.Texture.RENDER_ATTACHMENT,
+          width: 1,
+          height: 1
         })
       );
       const next = device.createFramebuffer({ ...props, colorAttachments });
@@ -6118,11 +6445,11 @@ void main(void) {
     return (
       /* wgsl */
       `// Binding 0:1 is reserved for shader passes
-@group(0) @binding(0) var<uniform> brightnessContrast : brightnessContrastUniforms;
+// @group(0) @binding(0) var<uniform> brightnessContrast : brightnessContrastUniforms;
 @group(0) @binding(1) var texture: texture_2d<f32>;
 @group(0) @binding(2) var sampler: sampler;
 
-struct FragmentInputs = {
+struct FragmentInputs {
   @location(0) fragUV: vec2f,
   @location(1) fragPosition: vec4f,
   @location(2) fragCoordinate: vec4f
@@ -6227,9 +6554,9 @@ void main() {
         {}
       );
       this.shaderInputs = props.shaderInputs || new ShaderInputs(modules);
-      const size = device.getCanvasContext().getPixelSize();
+      const size = device.getCanvasContext().getDrawingBufferSize();
       this.swapFramebuffers = new SwapFramebuffers(device, {
-        colorAttachments: ["rgba8unorm"],
+        colorAttachments: [device.preferredColorFormat],
         width: size[0],
         height: size[1]
       });
@@ -6283,7 +6610,13 @@ void main() {
       if (!outputTexture) {
         return false;
       }
-      const renderPass = this.device.beginRenderPass({ clearColor: [0, 0, 0, 1], clearDepth: 1 });
+      const framebuffer = this.device.getDefaultCanvasContext().getCurrentFramebuffer({ depthStencilAttachment: false });
+      const renderPass = this.device.beginRenderPass({
+        id: "shader-pass-renderer-to-screen",
+        framebuffer,
+        clearColor: [0, 0, 0, 1],
+        clearDepth: 1
+      });
       this.clipSpace.setBindings({ sourceTexture: outputTexture });
       this.clipSpace.draw(renderPass);
       renderPass.end();
@@ -6302,6 +6635,7 @@ void main() {
         backgroundTexture: sourceTexture
       });
       const clearTexturePass = this.device.beginRenderPass({
+        id: "shader-pass-renderer-clear-texture",
         framebuffer: this.swapFramebuffers.current,
         clearColor: [0, 0, 0, 1]
       });
@@ -6320,6 +6654,7 @@ void main() {
             // texSize: [sourceTextures.width, sourceTextures.height]
           };
           const renderPass = this.device.beginRenderPass({
+            id: "shader-pass-renderer-run-pass",
             framebuffer: this.swapFramebuffers.next,
             clearColor: [0, 0, 0, 1],
             clearDepth: 1
@@ -6368,8 +6703,7 @@ void main() {
         fs: fs3,
         modules: [shaderPass],
         parameters: {
-          depthWriteEnabled: false,
-          depthCompare: "always"
+          depthWriteEnabled: false
         }
       });
     }
@@ -6390,7 +6724,7 @@ void main() {
   };
 
   // src/compute/computation.ts
-  var import_core14 = __toESM(require_core(), 1);
+  var import_core16 = __toESM(require_core(), 1);
   var import_shadertools6 = __toESM(require_shadertools(), 1);
   var LOG_DRAW_PRIORITY2 = 2;
   var LOG_DRAW_TIMEOUT2 = 1e4;
@@ -6489,7 +6823,7 @@ void main() {
     }
     setShaderInputs(shaderInputs) {
       this.shaderInputs = shaderInputs;
-      this._uniformStore = new import_core14.UniformStore(this.shaderInputs.modules);
+      this._uniformStore = new import_core16.UniformStore(this.shaderInputs.modules);
       for (const moduleName of Object.keys(this.shaderInputs.modules)) {
         const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
         this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
@@ -6526,7 +6860,7 @@ void main() {
       if (this._pipelineNeedsUpdate) {
         let prevShader = null;
         if (this.pipeline) {
-          import_core14.log.log(
+          import_core16.log.log(
             1,
             `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`
           )();
@@ -6553,33 +6887,33 @@ void main() {
     _lastLogTime = 0;
     _logOpen = false;
     _logDrawCallStart() {
-      const logDrawTimeout = import_core14.log.level > 3 ? 0 : LOG_DRAW_TIMEOUT2;
-      if (import_core14.log.level < 2 || Date.now() - this._lastLogTime < logDrawTimeout) {
+      const logDrawTimeout = import_core16.log.level > 3 ? 0 : LOG_DRAW_TIMEOUT2;
+      if (import_core16.log.level < 2 || Date.now() - this._lastLogTime < logDrawTimeout) {
         return;
       }
       this._lastLogTime = Date.now();
       this._logOpen = true;
-      import_core14.log.group(LOG_DRAW_PRIORITY2, `>>> DRAWING MODEL ${this.id}`, { collapsed: import_core14.log.level <= 2 })();
+      import_core16.log.group(LOG_DRAW_PRIORITY2, `>>> DRAWING MODEL ${this.id}`, { collapsed: import_core16.log.level <= 2 })();
     }
     _logDrawCallEnd() {
       if (this._logOpen) {
         const uniformTable = this.shaderInputs.getDebugTable();
-        import_core14.log.table(LOG_DRAW_PRIORITY2, uniformTable)();
-        import_core14.log.groupEnd(LOG_DRAW_PRIORITY2)();
+        import_core16.log.table(LOG_DRAW_PRIORITY2, uniformTable)();
+        import_core16.log.groupEnd(LOG_DRAW_PRIORITY2)();
         this._logOpen = false;
       }
     }
     _drawCount = 0;
     // TODO - fix typing of luma data types
     _getBufferOrConstantValues(attribute, dataType) {
-      const TypedArrayConstructor = (0, import_core14.getTypedArrayFromDataType)(dataType);
-      const typedArray = attribute instanceof import_core14.Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
+      const TypedArrayConstructor = (0, import_core16.getTypedArrayConstructor)(dataType);
+      const typedArray = attribute instanceof import_core16.Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
       return typedArray.toString();
     }
   };
   var Computation = _Computation;
   __publicField(Computation, "defaultProps", {
-    ...import_core14.ComputePipeline.defaultProps,
+    ...import_core16.ComputePipeline.defaultProps,
     id: "unnamed",
     handle: void 0,
     userData: {},
@@ -6730,7 +7064,7 @@ uniform pickingUniforms {
     /** Prepare for rendering picking colors */
     beginRenderPass() {
       const framebuffer = this.getFramebuffer();
-      framebuffer.resize(this.device.getDefaultCanvasContext().getPixelSize());
+      framebuffer.resize(this.device.getDefaultCanvasContext().getDevicePixelSize());
       this.props.shaderInputs?.setProps({ picking: { isActive: true } });
       const pickingPass = this.device.beginRenderPass({
         framebuffer,
@@ -6739,7 +7073,7 @@ uniform pickingUniforms {
       });
       return pickingPass;
     }
-    getPickInfo(mousePosition) {
+    async updatePickInfo(mousePosition) {
       const framebuffer = this.getFramebuffer();
       const [pickX, pickY] = this.getPickPosition(mousePosition);
       const pixelData = this.device.readPixelsToArrayWebGL(framebuffer, {
@@ -7100,7 +7434,7 @@ vec4 picking_filterColor(vec4 color) {
     /** Prepare for rendering picking colors */
     beginRenderPass() {
       const framebuffer = this.getFramebuffer();
-      framebuffer.resize(this.device.getCanvasContext().getPixelSize());
+      framebuffer.resize(this.device.getCanvasContext().getDevicePixelSize());
       this.shaderInputs.setProps({ picking: { isActive: true } });
       const pickingPass = this.device.beginRenderPass({
         framebuffer,