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

package/dist/index.cjs

@@ -254,25 +254,7 @@ function cancelAnimationFramePolyfill(timerId) {
 // dist/animation-loop/animation-loop.js
 var import_stats = require("@probe.gl/stats");
 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;
@@ -296,21 +278,16 @@ var AnimationLoop = class {
    * @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 import_stats.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);
@@ -324,38 +301,19 @@ var AnimationLoop = class {
   delete() {
     this.destroy();
   }
-  setError(error) {
-    var _a, _b;
+  reportError(error) {
     this.props.onError(error);
-    this._error = Error();
-    const canvas2 = (_b = (_a = this.device) == null ? void 0 : _a.canvasContext) == null ? void 0 : _b.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 */
@@ -451,7 +409,6 @@ var AnimationLoop = class {
     this._startEventHandling();
     this._initializeAnimationProps();
     this._updateAnimationProps();
-    this._resizeCanvasDrawingBuffer();
     this._resizeViewport();
   }
   _setDisplay(display) {
@@ -499,23 +456,25 @@ var AnimationLoop = class {
     this.needsRedraw = false;
   }
   _setupFrame() {
-    this._resizeCanvasDrawingBuffer();
     this._resizeViewport();
   }
   // Initialize the  object that will be passed to app callbacks
   _initializeAnimationProps() {
-    var _a, _b;
-    const canvas2 = (_b = (_a = this.device) == null ? void 0 : _a.canvasContext) == null ? void 0 : _b.canvas;
-    if (!this.device || !canvas2) {
+    var _a;
+    const canvasContext = (_a = this.device) == null ? void 0 : _a.getDefaultCanvasContext();
+    if (!this.device || !canvasContext) {
       throw new Error("loop");
     }
+    const canvas2 = canvasContext == null ? void 0 : 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,
@@ -564,12 +523,11 @@ var AnimationLoop = class {
   }
   /** Wait for supplied device */
   async _initDevice() {
-    var _a;
     this.device = await this.props.device;
     if (!this.device) {
       throw new Error("No device provided");
     }
-    this.canvas = ((_a = this.device.canvasContext) == null ? void 0 : _a.canvas) || null;
+    this.canvas = this.device.getDefaultCanvasContext().canvas || null;
   }
   _createInfoDiv() {
     if (this.canvas && this.props.onAddHTML) {
@@ -593,13 +551,13 @@ var AnimationLoop = class {
     }
   }
   _getSizeAndAspect() {
-    var _a, _b, _c, _d;
+    var _a, _b;
     if (!this.device) {
       return { width: 1, height: 1, aspect: 1 };
     }
-    const [width, height] = ((_b = (_a = this.device) == null ? void 0 : _a.canvasContext) == null ? void 0 : _b.getPixelSize()) || [1, 1];
+    const [width, height] = ((_a = this.device) == null ? void 0 : _a.getDefaultCanvasContext().getDevicePixelSize()) || [1, 1];
     let aspect = 1;
-    const canvas2 = (_d = (_c = this.device) == null ? void 0 : _c.canvasContext) == null ? void 0 : _d.canvas;
+    const canvas2 = (_b = this.device) == null ? void 0 : _b.getDefaultCanvasContext().canvas;
     if (canvas2 && canvas2.clientHeight) {
       aspect = canvas2.clientWidth / canvas2.clientHeight;
     } else if (width > 0 && height > 0) {
@@ -607,7 +565,7 @@ var AnimationLoop = class {
     }
     return { width, height, aspect };
   }
-  /** Default viewport setup */
+  /** @deprecated Default viewport setup */
   _resizeViewport() {
     if (this.props.autoResizeViewport && this.device.gl) {
       this.device.gl.viewport(
@@ -620,16 +578,6 @@ var AnimationLoop = class {
       );
     }
   }
-  /**
-   * Resize the render buffer of the canvas to match canvas client size
-   * Optionally multiplying with devicePixel ratio
-   */
-  _resizeCanvasDrawingBuffer() {
-    var _a, _b;
-    if (this.props.autoResizeDrawingBuffer) {
-      (_b = (_a = this.device) == null ? void 0 : _a.canvasContext) == null ? void 0 : _b.resize({ useDevicePixels: this.props.useDevicePixels });
-    }
-  }
   _beginFrameTimers() {
     this.frameRate.timeEnd();
     this.frameRate.timeStart();
@@ -654,6 +602,21 @@ var AnimationLoop = class {
     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
+});
 
 // dist/animation-loop/make-animation-loop.js
 var import_core2 = require("@luma.gl/core");
@@ -664,8 +627,14 @@ function makeAnimationLoop(AnimationLoopTemplateCtor, props) {
     ...props,
     device,
     async onInitialize(animationProps) {
-      renderLoop = new AnimationLoopTemplateCtor(animationProps);
-      return await (renderLoop == null ? void 0 : renderLoop.onInitialize(animationProps));
+      clearError(animationProps.animationLoop.device);
+      try {
+        renderLoop = new AnimationLoopTemplateCtor(animationProps);
+        return await (renderLoop == null ? void 0 : renderLoop.onInitialize(animationProps));
+      } catch (error) {
+        setError(animationProps.animationLoop.device, error);
+        return null;
+      }
     },
     onRender: (animationProps) => renderLoop == null ? void 0 : renderLoop.onRender(animationProps),
     onFinalize: (animationProps) => renderLoop == null ? void 0 : renderLoop.onFinalize(animationProps)
@@ -675,9 +644,33 @@ function makeAnimationLoop(AnimationLoopTemplateCtor, props) {
   };
   return animationLoop;
 }
+function setError(device, error) {
+  var _a;
+  const canvas2 = device == null ? void 0 : device.getDefaultCanvasContext().canvas;
+  if (canvas2 instanceof HTMLCanvasElement) {
+    canvas2.style.overflow = "visible";
+    let errorDiv = document.getElementById("animation-loop-error");
+    errorDiv == null ? void 0 : 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";
+    (_a = canvas2.parentElement) == null ? void 0 : _a.appendChild(errorDiv);
+  }
+}
+function clearError(device) {
+  const errorDiv = document.getElementById("animation-loop-error");
+  if (errorDiv) {
+    errorDiv.remove();
+  }
+}
 
 // dist/model/model.js
-var import_core7 = require("@luma.gl/core");
+var import_core9 = require("@luma.gl/core");
 var import_shadertools2 = require("@luma.gl/shadertools");
 
 // dist/geometry/gpu-geometry.js
@@ -793,63 +786,140 @@ var import_core4 = require("@luma.gl/core");
 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) {
+    var _a;
+    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 = (_a = cache[hash]) == null ? void 0 : _a.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) {
+    var _a;
+    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 = (_a = cache[hash]) == null ? void 0 : _a.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) {
@@ -857,12 +927,14 @@ var _PipelineFactory = class {
     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) {
@@ -880,19 +952,32 @@ var import_core5 = require("@luma.gl/core");
 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) {
@@ -900,13 +985,24 @@ var _ShaderFactory = class {
         ...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) {
@@ -915,7 +1011,14 @@ var _ShaderFactory = class {
         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}`)();
       }
     }
   }
@@ -1026,8 +1129,58 @@ function deepEqual(a, b, depth) {
   return false;
 }
 
-// dist/shader-inputs.js
+// dist/utils/buffer-layout-helper.js
 var import_core6 = require("@luma.gl/core");
+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) {
+    var _a;
+    return bufferLayout.attributes ? (_a = bufferLayout.attributes) == null ? void 0 : _a.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;
+  }
+};
+
+// dist/utils/buffer-layout-order.js
+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;
+}
+
+// dist/shader-inputs.js
+var import_core7 = require("@luma.gl/core");
 var import_shadertools = require("@luma.gl/shadertools");
 
 // dist/model/split-uniforms-and-bindings.js
@@ -1075,14 +1228,14 @@ var ShaderInputs = class {
     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, module2] of Object.entries(modules)) {
       this._addModule(module2);
       if (module2.name && name !== module2.name && !this.options.disableWarnings) {
-        import_core6.log.warn(`Module name: ${name} vs ${module2.name}`)();
+        import_core7.log.warn(`Module name: ${name} vs ${module2.name}`)();
       }
     }
   }
@@ -1100,7 +1253,7 @@ var ShaderInputs = class {
       const module2 = this.modules[moduleName];
       if (!module2) {
         if (!this.options.disableWarnings) {
-          import_core6.log.warn(`Module ${name} not found`)();
+          import_core7.log.warn(`Module ${name} not found`)();
         }
         continue;
       }
@@ -1153,6 +1306,9 @@ var ShaderInputs = class {
   }
 };
 
+// dist/async-texture/async-texture.js
+var import_core8 = require("@luma.gl/core");
+
 // dist/application-utils/load-file.js
 var pathPrefix = "";
 function setPathPrefix(prefix) {
@@ -1180,9 +1336,12 @@ async function loadImage(url, opts) {
 }
 
 // dist/async-texture/async-texture.js
-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;
@@ -1205,9 +1364,15 @@ var AsyncTexture = class {
   }
   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 == null ? void 0 : 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 = () => {
@@ -1219,22 +1384,50 @@ var AsyncTexture = class {
     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) {
@@ -1243,10 +1436,18 @@ var AsyncTexture = class {
     }
     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) {
@@ -1263,7 +1464,166 @@ var AsyncTexture = class {
     }
     return true;
   }
+  /** Check if texture data is a typed array */
+  isTextureLevelData(data) {
+    const typedArray = data == null ? void 0 : 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) {
+    var _a;
+    if (((_a = this.texture) == null ? void 0 : _a.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) {
+    var _a;
+    if (((_a = this.texture) == null ? void 0 : _a.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) {
+    var _a;
+    if (((_a = this.texture) == null ? void 0 : _a.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)) {
@@ -1319,8 +1679,6 @@ var _Model = class {
   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!
@@ -1338,7 +1696,6 @@ var _Model = class {
   _uniformStore;
   _attributeInfos = {};
   _gpuGeometry = null;
-  _getModuleUniforms;
   props;
   _pipelineNeedsUpdate = "newly created";
   _needsRedraw = "initializing";
@@ -1398,7 +1755,8 @@ var _Model = class {
     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);
@@ -1424,12 +1782,6 @@ var _Model = class {
     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;
     }
@@ -1437,16 +1789,16 @@ var _Model = class {
   }
   destroy() {
     var _a;
-    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();
+      (_a = this._gpuGeometry) == null ? void 0 : _a.destroy();
+      this._destroyed = true;
     }
-    this._uniformStore.destroy();
-    (_a = this._gpuGeometry) == null ? void 0 : _a.destroy();
-    this._destroyed = true;
   }
   // Draw call
   /** Query redraw status. Clears the status. */
@@ -1469,7 +1821,7 @@ var _Model = class {
   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 {
@@ -1487,9 +1839,6 @@ var _Model = class {
       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({
@@ -1531,7 +1880,7 @@ var _Model = class {
     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);
       if (this.vertexArray) {
         this._setGeometryAttributes(gpuGeometry);
@@ -1554,12 +1903,13 @@ var _Model = class {
    * @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);
@@ -1599,7 +1949,7 @@ var _Model = class {
   /** 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, module2] of Object.entries(this.shaderInputs.modules)) {
       if (shaderModuleHasUniforms(module2)) {
         const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
@@ -1642,16 +1992,16 @@ var _Model = class {
    */
   setAttributes(buffers, options) {
     const disableWarnings = (options == null ? void 0 : options.disableWarnings) ?? this.props.disableWarnings;
-    if (buffers.indices) {
-      import_core7.log.warn(`Model:${this.id} setAttributes() - indexBuffer should be set using setIndexBuffer()`)();
+    if (buffers["indices"]) {
+      import_core9.log.warn(`Model:${this.id} setAttributes() - indexBuffer should be set using setIndexBuffer()`)();
     }
-    this.bufferLayout = (0, import_core7.sortedBufferLayoutByShaderSourceLocations)(this.pipeline.shaderLayout, this.bufferLayout);
-    const bufferLayoutHelper = new import_core7._BufferLayoutHelper(this.bufferLayout);
+    this.bufferLayout = sortedBufferLayoutByShaderSourceLocations(this.pipeline.shaderLayout, 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;
       }
@@ -1666,7 +2016,7 @@ var _Model = class {
         }
       }
       if (!set && !disableWarnings) {
-        import_core7.log.warn(`Model(${this.id}): Ignoring buffer "${buffer.id}" for unknown attribute "${bufferName}"`)();
+        import_core9.log.warn(`Model(${this.id}): Ignoring buffer "${buffer.id}" for unknown attribute "${bufferName}"`)();
       }
     }
     this.setNeedsRedraw("attributes");
@@ -1685,42 +2035,12 @@ var _Model = class {
       if (attributeInfo) {
         this.vertexArray.setConstantWebGL(attributeInfo.location, value);
       } else if (!((options == null ? void 0 : options.disableWarnings) ?? this.props.disableWarnings)) {
-        import_core7.log.warn(`Model "${this.id}: Ignoring constant supplied for unknown attribute "${attributeName}"`)();
+        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)) {
@@ -1748,16 +2068,16 @@ var _Model = class {
   _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);
       }
     }
@@ -1792,7 +2112,7 @@ var _Model = class {
       let prevShaderVs = null;
       let prevShaderFs = null;
       if (this.pipeline) {
-        import_core7.log.log(1, `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`)();
+        import_core9.log.log(1, `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`)();
         prevShaderVs = this.pipeline.vs;
         prevShaderFs = this.pipeline.fs;
       }
@@ -1825,7 +2145,7 @@ var _Model = class {
         vs: vs3,
         fs: fs3
       });
-      this._attributeInfos = (0, import_core7.getAttributeInfosFromLayouts)(this.pipeline.shaderLayout, this.bufferLayout);
+      this._attributeInfos = (0, import_core9.getAttributeInfosFromLayouts)(this.pipeline.shaderLayout, this.bufferLayout);
       if (prevShaderVs)
         this.shaderFactory.release(prevShaderVs);
       if (prevShaderFs)
@@ -1837,27 +2157,24 @@ var _Model = class {
   _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;
     }
   }
@@ -1886,7 +2203,7 @@ var _Model = class {
     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()
@@ -1896,14 +2213,14 @@ var _Model = class {
   }
   // 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,
@@ -1912,7 +2229,6 @@ __publicField(Model, "defaultProps", {
   userData: {},
   defines: {},
   modules: [],
-  moduleSettings: void 0,
   geometry: null,
   indexBuffer: null,
   attributes: {},
@@ -1950,7 +2266,7 @@ function isObjectEmpty(obj) {
 }
 
 // dist/compute/buffer-transform.js
-var import_core8 = require("@luma.gl/core");
+var import_core10 = require("@luma.gl/core");
 var import_shadertools3 = require("@luma.gl/shadertools");
 var _BufferTransform = class {
   device;
@@ -2013,7 +2329,7 @@ var _BufferTransform = class {
     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;
@@ -2050,7 +2366,7 @@ var TextureTransform = class {
       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,
@@ -2080,6 +2396,7 @@ var TextureTransform = class {
     const renderPass = this.device.beginRenderPass({ framebuffer, ...options });
     this.model.draw(renderPass);
     renderPass.end();
+    this.device.submit();
   }
   getTargetTexture() {
     const { targetTexture } = this.bindings[this.currentIndex];
@@ -2167,9 +2484,9 @@ var Geometry = class {
         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);
   }
@@ -2295,7 +2612,7 @@ var BACKGROUND_FS_WGSL = (
 @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;
@@ -2317,7 +2634,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;
@@ -2337,18 +2654,20 @@ var BackgroundTextureModel = class extends ClipSpace {
       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) {
@@ -2363,14 +2682,14 @@ var BackgroundTextureModel = class extends ClipSpace {
 };
 
 // dist/scenegraph/scenegraph-node.js
-var import_core9 = require("@math.gl/core");
+var import_core11 = require("@math.gl/core");
 var ScenegraphNode = class {
   id;
-  matrix = new import_core9.Matrix4();
+  matrix = new import_core11.Matrix4();
   display = true;
-  position = new import_core9.Vector3();
-  rotation = new import_core9.Vector3();
-  scale = new import_core9.Vector3(1, 1, 1);
+  position = new import_core11.Vector3();
+  rotation = new import_core11.Vector3();
+  scale = new import_core11.Vector3(1, 1, 1);
   userData = {};
   props = {};
   constructor(props = {}) {
@@ -2455,7 +2774,7 @@ var ScenegraphNode = class {
   }
   getCoordinateUniforms(viewMatrix, modelMatrix) {
     modelMatrix = modelMatrix || this.matrix;
-    const worldMatrix = new import_core9.Matrix4(viewMatrix).multiplyRight(modelMatrix);
+    const worldMatrix = new import_core11.Matrix4(viewMatrix).multiplyRight(modelMatrix);
     const worldInverse = worldMatrix.invert();
     const worldInverseTranspose = worldInverse.transpose();
     return {
@@ -2507,14 +2826,14 @@ var ScenegraphNode = class {
 };
 
 // dist/scenegraph/group-node.js
-var import_core10 = require("@math.gl/core");
-var import_core11 = require("@luma.gl/core");
+var import_core12 = require("@math.gl/core");
+var import_core13 = require("@luma.gl/core");
 var GroupNode = class extends ScenegraphNode {
   children;
   constructor(props = {}) {
     props = Array.isArray(props) ? { children: props } : props;
     const { children = [] } = props;
-    import_core11.log.assert(children.every((child) => child instanceof ScenegraphNode), "every child must an instance of ScenegraphNode");
+    import_core13.log.assert(children.every((child) => child instanceof ScenegraphNode), "every child must an instance of ScenegraphNode");
     super(props);
     this.children = children;
   }
@@ -2529,12 +2848,12 @@ var GroupNode = class extends ScenegraphNode {
         return;
       }
       const [min, max] = bounds;
-      const center = new import_core10.Vector3(min).add(max).divide([2, 2, 2]);
+      const center = new import_core12.Vector3(min).add(max).divide([2, 2, 2]);
       worldMatrix.transformAsPoint(center, center);
-      const halfSize = new import_core10.Vector3(max).subtract(min).divide([2, 2, 2]);
+      const halfSize = new import_core12.Vector3(max).subtract(min).divide([2, 2, 2]);
       worldMatrix.transformAsVector(halfSize, halfSize);
       for (let v = 0; v < 8; v++) {
-        const position = new import_core10.Vector3(v & 1 ? -1 : 1, v & 2 ? -1 : 1, v & 4 ? -1 : 1).multiply(halfSize).add(center);
+        const position = new import_core12.Vector3(v & 1 ? -1 : 1, v & 2 ? -1 : 1, v & 4 ? -1 : 1).multiply(halfSize).add(center);
         for (let i = 0; i < 3; i++) {
           result[0][i] = Math.min(result[0][i], position[i]);
           result[1][i] = Math.max(result[1][i], position[i]);
@@ -2574,8 +2893,8 @@ var GroupNode = class extends ScenegraphNode {
     this.children = [];
     return this;
   }
-  traverse(visitor, { worldMatrix = new import_core10.Matrix4() } = {}) {
-    const modelMatrix = new import_core10.Matrix4(worldMatrix).multiplyRight(this.matrix);
+  traverse(visitor, { worldMatrix = new import_core12.Matrix4() } = {}) {
+    const modelMatrix = new import_core12.Matrix4(worldMatrix).multiplyRight(this.matrix);
     for (const child of this.children) {
       if (child instanceof GroupNode) {
         child.traverse(visitor, { worldMatrix: modelMatrix });
@@ -3357,7 +3676,7 @@ var CylinderGeometry = class extends TruncatedConeGeometry {
 };
 
 // dist/geometries/ico-sphere-geometry.js
-var import_core12 = require("@math.gl/core");
+var import_core14 = require("@math.gl/core");
 var ICO_POSITIONS = [-1, 0, 0, 0, 1, 0, 0, 0, -1, 0, 0, 1, 0, -1, 0, 1, 0, 0];
 var ICO_INDICES = [3, 4, 5, 3, 5, 1, 3, 1, 0, 3, 0, 4, 4, 0, 2, 4, 2, 5, 2, 0, 1, 5, 2, 1];
 var IcoSphereGeometry = class extends Geometry {
@@ -3455,7 +3774,7 @@ function tesselateIcosaHedron(props) {
     const u3 = 1 - phi3 / PI2;
     const vec1 = [x3 - x2, y3 - y2, z3 - z2];
     const vec2 = [x1 - x2, y1 - y2, z1 - z2];
-    const normal = new import_core12.Vector3(vec1).cross(vec2).normalize();
+    const normal = new import_core14.Vector3(vec1).cross(vec2).normalize();
     let newIndex;
     if ((u1 === 0 || u2 === 0 || u3 === 0) && (u1 === 0 || u1 > 0.5) && (u2 === 0 || u2 > 0.5) && (u3 === 0 || u3 > 0.5)) {
       positions.push(positions[in1 + 0], positions[in1 + 1], positions[in1 + 2]);
@@ -3719,7 +4038,7 @@ function fract(n) {
 var import_shadertools5 = require("@luma.gl/shadertools");
 
 // dist/compute/swap.js
-var import_core13 = require("@luma.gl/core");
+var import_core15 = require("@luma.gl/core");
 var Swap = class {
   /** The current resource - usually the source for renders or computations */
   current;
@@ -3748,12 +4067,16 @@ var SwapFramebuffers = class extends Swap {
     props = { ...props };
     let colorAttachments = (_a = props.colorAttachments) == null ? void 0 : _a.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 = (_b = props.colorAttachments) == null ? void 0 : _b.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 });
     super({ current, next });
@@ -3815,11 +4138,11 @@ function getFilterShaderWGSL(func) {
   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
@@ -3921,9 +4244,9 @@ var ShaderPassRenderer = class {
     props.shaderPasses.map((shaderPass) => (0, import_shadertools5.initializeShaderModule)(shaderPass));
     const modules = props.shaderPasses.reduce((object, shaderPass) => ({ ...object, [shaderPass.name]: shaderPass }), {});
     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]
     });
@@ -3977,7 +4300,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();
@@ -3996,6 +4325,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]
     });
@@ -4014,6 +4344,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
@@ -4062,8 +4393,7 @@ var SubPassRenderer = class {
       fs: fs3,
       modules: [shaderPass],
       parameters: {
-        depthWriteEnabled: false,
-        depthCompare: "always"
+        depthWriteEnabled: false
       }
     });
   }
@@ -4084,7 +4414,7 @@ var SubPassRenderer = class {
 };
 
 // dist/compute/computation.js
-var import_core14 = require("@luma.gl/core");
+var import_core16 = require("@luma.gl/core");
 var import_shadertools6 = require("@luma.gl/shadertools");
 var import_types2 = require("@math.gl/types");
 var LOG_DRAW_PRIORITY2 = 2;
@@ -4183,7 +4513,7 @@ var _Computation = class {
   }
   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;
@@ -4220,7 +4550,7 @@ var _Computation = class {
     if (this._pipelineNeedsUpdate) {
       let prevShader = null;
       if (this.pipeline) {
-        import_core14.log.log(1, `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`)();
+        import_core16.log.log(1, `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`)();
         prevShader = this.shader;
       }
       this._pipelineNeedsUpdate = false;
@@ -4244,33 +4574,33 @@ var _Computation = class {
   _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: {},
@@ -4423,7 +4753,7 @@ var _PickingManager = class {
   beginRenderPass() {
     var _a;
     const framebuffer = this.getFramebuffer();
-    framebuffer.resize(this.device.getDefaultCanvasContext().getPixelSize());
+    framebuffer.resize(this.device.getDefaultCanvasContext().getDevicePixelSize());
     (_a = this.props.shaderInputs) == null ? void 0 : _a.setProps({ picking: { isActive: true } });
     const pickingPass = this.device.beginRenderPass({
       framebuffer,
@@ -4432,7 +4762,7 @@ var _PickingManager = class {
     });
     return pickingPass;
   }
-  getPickInfo(mousePosition) {
+  async updatePickInfo(mousePosition) {
     var _a;
     const framebuffer = this.getFramebuffer();
     const [pickX, pickY] = this.getPickPosition(mousePosition);
@@ -4795,7 +5125,7 @@ var LegacyPickingManager = class {
   /** 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,