@luma.gl/engine 9.2.6 → 9.3.0-alpha.10

package/dist/index.cjs

@@ -35,22 +35,26 @@ __export(dist_exports, {
   ConeGeometry: () => ConeGeometry,
   CubeGeometry: () => CubeGeometry,
   CylinderGeometry: () => CylinderGeometry,
+  DirectionalLightModel: () => DirectionalLightModel,
+  DynamicTexture: () => DynamicTexture,
   GPUGeometry: () => GPUGeometry,
   Geometry: () => Geometry,
   GroupNode: () => GroupNode,
   IcoSphereGeometry: () => IcoSphereGeometry,
   KeyFrames: () => KeyFrames,
   LegacyPickingManager: () => LegacyPickingManager,
+  Material: () => Material,
+  MaterialFactory: () => MaterialFactory,
   Model: () => Model,
   ModelNode: () => ModelNode,
   PickingManager: () => PickingManager,
-  PipelineFactory: () => PipelineFactory,
   PlaneGeometry: () => PlaneGeometry,
+  PointLightModel: () => PointLightModel,
   ScenegraphNode: () => ScenegraphNode,
-  ShaderFactory: () => ShaderFactory,
   ShaderInputs: () => ShaderInputs,
   ShaderPassRenderer: () => ShaderPassRenderer,
   SphereGeometry: () => SphereGeometry,
+  SpotLightModel: () => SpotLightModel,
   Swap: () => Swap,
   SwapBuffers: () => SwapBuffers,
   SwapFramebuffers: () => SwapFramebuffers,
@@ -58,14 +62,19 @@ __export(dist_exports, {
   Timeline: () => Timeline,
   TruncatedConeGeometry: () => TruncatedConeGeometry,
   cancelAnimationFramePolyfill: () => cancelAnimationFramePolyfill,
-  colorPicking: () => picking2,
-  indexPicking: () => picking,
+  colorPicking: () => picking,
+  indexPicking: () => picking2,
+  legacyColorPicking: () => legacyColorPicking,
   loadImage: () => loadImage,
   loadImageBitmap: () => loadImageBitmap,
   makeAnimationLoop: () => makeAnimationLoop,
   makeRandomGenerator: () => makeRandomGenerator,
+  picking: () => picking3,
   requestAnimationFramePolyfill: () => requestAnimationFramePolyfill,
-  setPathPrefix: () => setPathPrefix
+  resolvePickingBackend: () => resolvePickingBackend,
+  resolvePickingMode: () => resolvePickingMode,
+  setPathPrefix: () => setPathPrefix,
+  supportsIndexPicking: () => supportsIndexPicking
 });
 module.exports = __toCommonJS(dist_exports);
 
@@ -245,15 +254,25 @@ var import_core = require("@luma.gl/core");
 
 // dist/animation-loop/request-animation-frame.js
 function requestAnimationFramePolyfill(callback) {
-  return typeof window !== "undefined" && window.requestAnimationFrame ? window.requestAnimationFrame(callback) : setTimeout(callback, 1e3 / 60);
+  const browserRequestAnimationFrame = typeof window !== "undefined" ? window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame : null;
+  if (browserRequestAnimationFrame) {
+    return browserRequestAnimationFrame.call(window, callback);
+  }
+  return setTimeout(() => callback(typeof performance !== "undefined" ? performance.now() : Date.now()), 1e3 / 60);
 }
 function cancelAnimationFramePolyfill(timerId) {
-  return typeof window !== "undefined" && window.cancelAnimationFrame ? window.cancelAnimationFrame(timerId) : clearTimeout(timerId);
+  const browserCancelAnimationFrame = typeof window !== "undefined" ? window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame : null;
+  if (browserCancelAnimationFrame) {
+    browserCancelAnimationFrame.call(window, timerId);
+    return;
+  }
+  clearTimeout(timerId);
 }
 
 // dist/animation-loop/animation-loop.js
 var import_stats = require("@probe.gl/stats");
 var statIdCounter = 0;
+var ANIMATION_LOOP_STATS = "Animation Loop";
 var _AnimationLoop = class {
   device = null;
   canvas = null;
@@ -261,11 +280,12 @@ var _AnimationLoop = class {
   animationProps = null;
   timeline = null;
   stats;
+  sharedStats;
   cpuTime;
   gpuTime;
   frameRate;
   display;
-  needsRedraw = "initialized";
+  _needsRedraw = "initialized";
   _initialized = false;
   _running = false;
   _animationFrameId = null;
@@ -273,7 +293,7 @@ var _AnimationLoop = class {
   _resolveNextFrame = null;
   _cpuStartTime = 0;
   _error = null;
-  // _gpuTimeQuery: Query | null = null;
+  _lastFrameTime = 0;
   /*
    * @param {HTMLCanvasElement} canvas - if provided, width and height will be passed to context
    */
@@ -283,10 +303,12 @@ var _AnimationLoop = class {
     if (!props.device) {
       throw new Error("No device provided");
     }
-    this.stats = props.stats || new import_stats.Stats({ id: "animation-loop-stats" });
+    this.stats = props.stats || new import_stats.Stats({ id: `animation-loop-${statIdCounter++}` });
+    this.sharedStats = import_core.luma.stats.get(ANIMATION_LOOP_STATS);
+    this.frameRate = this.stats.get("Frame Rate");
+    this.frameRate.setSampleSize(1);
     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 });
     this.start = this.start.bind(this);
     this.stop = this.stop.bind(this);
@@ -294,8 +316,10 @@ var _AnimationLoop = class {
     this._onMouseleave = this._onMouseleave.bind(this);
   }
   destroy() {
+    var _a;
     this.stop();
     this._setDisplay(null);
+    (_a = this.device) == null ? void 0 : _a._disableDebugGPUTime();
   }
   /** @deprecated Use .destroy() */
   delete() {
@@ -307,9 +331,15 @@ var _AnimationLoop = class {
   }
   /** Flags this animation loop as needing redraw */
   setNeedsRedraw(reason) {
-    this.needsRedraw = this.needsRedraw || reason;
+    this._needsRedraw = this._needsRedraw || reason;
     return this;
   }
+  /** Query redraw status. Clears the flag. */
+  needsRedraw() {
+    const reason = this._needsRedraw;
+    this._needsRedraw = false;
+    return reason;
+  }
   setProps(props) {
     if ("autoResizeViewport" in props) {
       this.props.autoResizeViewport = props.autoResizeViewport || false;
@@ -328,6 +358,9 @@ var _AnimationLoop = class {
         this._initialized = true;
         await this._initDevice();
         this._initialize();
+        if (!this._running) {
+          return null;
+        }
         await this.props.onInitialize(this._getAnimationProps());
       }
       if (!this._running) {
@@ -354,16 +387,17 @@ var _AnimationLoop = class {
       this._nextFramePromise = null;
       this._resolveNextFrame = null;
       this._running = false;
+      this._lastFrameTime = 0;
     }
     return this;
   }
   /** Explicitly draw a frame */
-  redraw() {
+  redraw(time) {
     var _a;
     if (((_a = this.device) == null ? void 0 : _a.isLost) || this._error) {
       return this;
     }
-    this._beginFrameTimers();
+    this._beginFrameTimers(time);
     this._setupFrame();
     this._updateAnimationProps();
     this._renderFrame(this._getAnimationProps());
@@ -406,10 +440,12 @@ var _AnimationLoop = class {
   }
   // PRIVATE METHODS
   _initialize() {
+    var _a;
     this._startEventHandling();
     this._initializeAnimationProps();
     this._updateAnimationProps();
     this._resizeViewport();
+    (_a = this.device) == null ? void 0 : _a._enableDebugGPUTime();
   }
   _setDisplay(display) {
     if (this.display) {
@@ -434,11 +470,11 @@ var _AnimationLoop = class {
     cancelAnimationFramePolyfill(this._animationFrameId);
     this._animationFrameId = null;
   }
-  _animationFrame() {
+  _animationFrame(time) {
     if (!this._running) {
       return;
     }
-    this.redraw();
+    this.redraw(time);
     this._requestAnimationFrame();
   }
   // Called on each frame, can be overridden to call onRender multiple times
@@ -453,7 +489,7 @@ var _AnimationLoop = class {
     (_a = this.device) == null ? void 0 : _a.submit();
   }
   _clearNeedsRedraw() {
-    this.needsRedraw = false;
+    this._needsRedraw = false;
   }
   _setupFrame() {
     this._resizeViewport();
@@ -512,7 +548,7 @@ var _AnimationLoop = class {
     this.animationProps.width = width;
     this.animationProps.height = height;
     this.animationProps.aspect = aspect;
-    this.animationProps.needsRedraw = this.needsRedraw;
+    this.animationProps.needsRedraw = this._needsRedraw;
     this.animationProps.engineTime = Date.now() - this.animationProps.startTime;
     if (this.timeline) {
       this.timeline.update(this.animationProps.engineTime);
@@ -551,18 +587,11 @@ var _AnimationLoop = class {
     }
   }
   _getSizeAndAspect() {
-    var _a, _b;
     if (!this.device) {
       return { width: 1, height: 1, aspect: 1 };
     }
-    const [width, height] = ((_a = this.device) == null ? void 0 : _a.getDefaultCanvasContext().getDevicePixelSize()) || [1, 1];
-    let aspect = 1;
-    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) {
-      aspect = width / height;
-    }
+    const [width, height] = this.device.getDefaultCanvasContext().getDrawingBufferSize();
+    const aspect = width > 0 && height > 0 ? width / height : 1;
     return { width, height, aspect };
   }
   /** @deprecated Default viewport setup */
@@ -578,13 +607,63 @@ var _AnimationLoop = class {
       );
     }
   }
-  _beginFrameTimers() {
-    this.frameRate.timeEnd();
-    this.frameRate.timeStart();
+  _beginFrameTimers(time) {
+    var _a;
+    const now = time ?? (typeof performance !== "undefined" ? performance.now() : Date.now());
+    if (this._lastFrameTime) {
+      const frameTime = now - this._lastFrameTime;
+      if (frameTime > 0) {
+        this.frameRate.addTime(frameTime);
+      }
+    }
+    this._lastFrameTime = now;
+    if ((_a = this.device) == null ? void 0 : _a._isDebugGPUTimeEnabled()) {
+      this._consumeEncodedGpuTime();
+    }
     this.cpuTime.timeStart();
   }
   _endFrameTimers() {
+    var _a;
+    if ((_a = this.device) == null ? void 0 : _a._isDebugGPUTimeEnabled()) {
+      this._consumeEncodedGpuTime();
+    }
     this.cpuTime.timeEnd();
+    this._updateSharedStats();
+  }
+  _consumeEncodedGpuTime() {
+    if (!this.device) {
+      return;
+    }
+    const gpuTimeMs = this.device.commandEncoder._gpuTimeMs;
+    if (gpuTimeMs !== void 0) {
+      this.gpuTime.addTime(gpuTimeMs);
+      this.device.commandEncoder._gpuTimeMs = void 0;
+    }
+  }
+  _updateSharedStats() {
+    if (this.stats === this.sharedStats) {
+      return;
+    }
+    for (const name of Object.keys(this.sharedStats.stats)) {
+      if (!this.stats.stats[name]) {
+        delete this.sharedStats.stats[name];
+      }
+    }
+    this.stats.forEach((sourceStat) => {
+      const targetStat = this.sharedStats.get(sourceStat.name, sourceStat.type);
+      targetStat.sampleSize = sourceStat.sampleSize;
+      targetStat.time = sourceStat.time;
+      targetStat.count = sourceStat.count;
+      targetStat.samples = sourceStat.samples;
+      targetStat.lastTiming = sourceStat.lastTiming;
+      targetStat.lastSampleTime = sourceStat.lastSampleTime;
+      targetStat.lastSampleCount = sourceStat.lastSampleCount;
+      targetStat._count = sourceStat._count;
+      targetStat._time = sourceStat._time;
+      targetStat._samples = sourceStat._samples;
+      targetStat._startTime = sourceStat._startTime;
+      targetStat._timerPending = sourceStat._timerPending;
+    });
   }
   // Event handling
   _startEventHandling() {
@@ -613,7 +692,7 @@ __publicField(AnimationLoop, "defaultAnimationLoopProps", {
   },
   onError: (error) => console.error(error),
   // eslint-disable-line no-console
-  stats: import_core.luma.stats.get(`animation-loop-${statIdCounter++}`),
+  stats: void 0,
   // view parameters
   autoResizeViewport: false
 });
@@ -646,7 +725,10 @@ function makeAnimationLoop(AnimationLoopTemplateCtor, props) {
 }
 function setError(device, error) {
   var _a;
-  const canvas2 = device == null ? void 0 : device.getDefaultCanvasContext().canvas;
+  if (!device) {
+    return;
+  }
+  const canvas2 = device.getDefaultCanvasContext().canvas;
   if (canvas2 instanceof HTMLCanvasElement) {
     canvas2.style.overflow = "visible";
     let errorDiv = document.getElementById("animation-loop-error");
@@ -663,6 +745,9 @@ function setError(device, error) {
   }
 }
 function clearError(device) {
+  if (!device) {
+    return;
+  }
   const errorDiv = document.getElementById("animation-loop-error");
   if (errorDiv) {
     errorDiv.remove();
@@ -670,7 +755,7 @@ function clearError(device) {
 }
 
 // dist/model/model.js
-var import_core9 = require("@luma.gl/core");
+var import_core8 = require("@luma.gl/core");
 var import_shadertools2 = require("@luma.gl/shadertools");
 
 // dist/geometry/gpu-geometry.js
@@ -774,262 +859,19 @@ function getAttributeBuffersFromGeometry(device, geometry) {
         id: `${attributeName}-buffer`
       });
       const { value, size, normalized } = attribute;
-      bufferLayout.push({ name, format: (0, import_core3.getVertexFormatFromAttribute)(value, size, normalized) });
+      if (size === void 0) {
+        throw new Error(`Attribute ${attributeName} is missing a size`);
+      }
+      bufferLayout.push({
+        name,
+        format: import_core3.vertexFormatDecoder.getVertexFormatFromAttribute(value, size, normalized)
+      });
     }
   }
   const vertexCount = geometry._calculateVertexCount(geometry.attributes, geometry.indices);
   return { attributes, bufferLayout, vertexCount };
 }
 
-// dist/factories/pipeline-factory.js
-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;
-  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.cachingEnabled = device.props._cachePipelines;
-    this.destroyPolicy = device.props._cacheDestroyPolicy;
-    this.debug = device.props.debugFactories;
-  }
-  /** 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);
-    let pipeline = (_a = cache[hash]) == null ? void 0 : _a.pipeline;
-    if (!pipeline) {
-      pipeline = this.device.createRenderPipeline({
-        ...allProps,
-        id: allProps.id ? `${allProps.id}-cached` : uid("unnamed-cached")
-      });
-      pipeline.hash = hash;
-      cache[hash] = { pipeline, useCount: 1 };
-      if (this.debug) {
-        import_core4.log.log(3, `${this}: ${pipeline} created, count=${cache[hash].useCount}`)();
-      }
-    } else {
-      cache[hash].useCount++;
-      if (this.debug) {
-        import_core4.log.log(3, `${this}: ${cache[hash].pipeline} reused, count=${cache[hash].useCount}, (id=${props.id})`)();
-      }
-    }
-    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);
-    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;
-      cache[hash] = { pipeline, useCount: 1 };
-      if (this.debug) {
-        import_core4.log.log(3, `${this}: ${pipeline} created, count=${cache[hash].useCount}`)();
-      }
-    } else {
-      cache[hash].useCount++;
-      if (this.debug) {
-        import_core4.log.log(3, `${this}: ${cache[hash].pipeline} reused, count=${cache[hash].useCount}, (id=${props.id})`)();
-      }
-    }
-    return pipeline;
-  }
-  release(pipeline) {
-    if (!this.cachingEnabled) {
-      pipeline.destroy();
-      return;
-    }
-    const cache = this._getCache(pipeline);
-    const hash = pipeline.hash;
-    cache[hash].useCount--;
-    if (cache[hash].useCount === 0) {
-      this._destroyPipeline(pipeline);
-      if (this.debug) {
-        import_core4.log.log(3, `${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.log(3, `${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 `${type}/C/${shaderHash}`;
-  }
-  /** Calculate a hash based on all the inputs for a render pipeline */
-  _hashRenderPipeline(props) {
-    const vsHash = props.vs ? this._getHash(props.vs.source) : 0;
-    const fsHash = props.fs ? this._getHash(props.fs.source) : 0;
-    const varyingHash = "-";
-    const bufferLayoutHash = this._getHash(JSON.stringify(props.bufferLayout));
-    const { type } = this.device;
-    switch (type) {
-      case "webgl":
-        return `${type}/R/${vsHash}/${fsHash}V${varyingHash}BL${bufferLayoutHash}`;
-      case "webgpu":
-      default:
-        const parameterHash = this._getHash(JSON.stringify(props.parameters));
-        return `${type}/R/${vsHash}/${fsHash}V${varyingHash}T${props.topology}P${parameterHash}BL${bufferLayoutHash}`;
-    }
-  }
-  _getHash(key) {
-    if (this._hashes[key] === void 0) {
-      this._hashes[key] = this._hashCounter++;
-    }
-    return this._hashes[key];
-  }
-};
-var PipelineFactory = _PipelineFactory;
-__publicField(PipelineFactory, "defaultProps", { ...import_core4.RenderPipeline.defaultProps });
-
-// dist/factories/shader-factory.js
-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;
-  cachingEnabled;
-  destroyPolicy;
-  debug;
-  _cache = {};
-  get [Symbol.toStringTag]() {
-    return "ShaderFactory";
-  }
-  toString() {
-    return `${this[Symbol.toStringTag]}(${this.device.id})`;
-  }
-  /** @internal */
-  constructor(device) {
-    this.device = device;
-    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) {
-      const shader = this.device.createShader({
-        ...props,
-        id: props.id ? `${props.id}-cached` : void 0
-      });
-      this._cache[key] = cacheEntry = { shader, useCount: 1 };
-      if (this.debug) {
-        import_core5.log.log(3, `${this}: Created new shader ${shader.id}`)();
-      }
-    } else {
-      cacheEntry.useCount++;
-      if (this.debug) {
-        import_core5.log.log(3, `${this}: Reusing shader ${cacheEntry.shader.id} count=${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) {
-      cacheEntry.useCount--;
-      if (cacheEntry.useCount === 0) {
-        if (this.destroyPolicy === "unused") {
-          delete this._cache[key];
-          cacheEntry.shader.destroy();
-          if (this.debug) {
-            import_core5.log.log(3, `${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.log(3, `${this}: Releasing shader ${shader.id} count=${cacheEntry.useCount}`)();
-      }
-    }
-  }
-  // PRIVATE
-  _hashShader(value) {
-    return `${value.stage}:${value.source}`;
-  }
-};
-var ShaderFactory = _ShaderFactory;
-__publicField(ShaderFactory, "defaultProps", { ...import_core5.Shader.defaultProps });
-
 // dist/debug/debug-shader-layout.js
 function getDebugTableForShaderLayout(layout, name) {
   var _a;
@@ -1130,7 +972,7 @@ function deepEqual(a, b, depth) {
 }
 
 // dist/utils/buffer-layout-helper.js
-var import_core6 = require("@luma.gl/core");
+var import_core4 = require("@luma.gl/core");
 var BufferLayoutHelper = class {
   bufferLayouts;
   constructor(bufferLayouts) {
@@ -1159,28 +1001,82 @@ var BufferLayoutHelper = class {
   getBufferIndex(bufferName) {
     const bufferIndex = this.bufferLayouts.findIndex((layout) => layout.name === bufferName);
     if (bufferIndex === -1) {
-      import_core6.log.warn(`BufferLayout: Missing buffer for "${bufferName}".`)();
+      import_core4.log.warn(`BufferLayout: Missing buffer for "${bufferName}".`)();
     }
     return bufferIndex;
   }
 };
 
 // dist/utils/buffer-layout-order.js
+function getMinLocation(attributeNames, shaderLayoutMap) {
+  let minLocation = Infinity;
+  for (const name of attributeNames) {
+    const location = shaderLayoutMap[name];
+    if (location !== void 0) {
+      minLocation = Math.min(minLocation, location);
+    }
+  }
+  return minLocation;
+}
 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]));
+    const minLocationA = getMinLocation(attributeNamesA, shaderLayoutMap);
+    const minLocationB = getMinLocation(attributeNamesB, shaderLayoutMap);
     return minLocationA - minLocationB;
   });
   return sortedLayout;
 }
 
+// dist/utils/shader-module-utils.js
+function mergeShaderModuleBindingsIntoLayout(shaderLayout, modules) {
+  if (!shaderLayout || !modules.some((module2) => {
+    var _a;
+    return (_a = module2.bindingLayout) == null ? void 0 : _a.length;
+  })) {
+    return shaderLayout;
+  }
+  const mergedLayout = {
+    ...shaderLayout,
+    bindings: shaderLayout.bindings.map((binding) => ({ ...binding }))
+  };
+  if ("attributes" in (shaderLayout || {})) {
+    mergedLayout.attributes = (shaderLayout == null ? void 0 : shaderLayout.attributes) || [];
+  }
+  for (const module2 of modules) {
+    for (const bindingLayout of module2.bindingLayout || []) {
+      for (const relatedBindingName of getRelatedBindingNames(bindingLayout.name)) {
+        const binding = mergedLayout.bindings.find((candidate) => candidate.name === relatedBindingName);
+        if ((binding == null ? void 0 : binding.group) === 0) {
+          binding.group = bindingLayout.group;
+        }
+      }
+    }
+  }
+  return mergedLayout;
+}
+function shaderModuleHasUniforms(module2) {
+  return Boolean(module2.uniformTypes && !isObjectEmpty(module2.uniformTypes));
+}
+function getRelatedBindingNames(bindingName) {
+  const bindingNames = /* @__PURE__ */ new Set([bindingName, `${bindingName}Uniforms`]);
+  if (!bindingName.endsWith("Uniforms")) {
+    bindingNames.add(`${bindingName}Sampler`);
+  }
+  return [...bindingNames];
+}
+function isObjectEmpty(obj) {
+  for (const key in obj) {
+    return false;
+  }
+  return true;
+}
+
 // dist/shader-inputs.js
-var import_core7 = require("@luma.gl/core");
+var import_core5 = require("@luma.gl/core");
 var import_shadertools = require("@luma.gl/shadertools");
 
 // dist/model/split-uniforms-and-bindings.js
@@ -1188,11 +1084,11 @@ var import_types = require("@math.gl/types");
 function isUniformValue(value) {
   return (0, import_types.isNumericArray)(value) || typeof value === "number" || typeof value === "boolean";
 }
-function splitUniformsAndBindings(uniforms) {
+function splitUniformsAndBindings(uniforms, uniformTypes2 = {}) {
   const result = { bindings: {}, uniforms: {} };
   Object.keys(uniforms).forEach((name) => {
     const uniform = uniforms[name];
-    if (isUniformValue(uniform)) {
+    if (Object.prototype.hasOwnProperty.call(uniformTypes2, name) || isUniformValue(uniform)) {
       result.uniforms[name] = uniform;
     } else {
       result.bindings[name] = uniform;
@@ -1224,18 +1120,21 @@ var ShaderInputs = class {
    */
   constructor(modules, options) {
     Object.assign(this.options, options);
-    const resolvedModules = (0, import_shadertools.getShaderModuleDependencies)(Object.values(modules).filter((module2) => module2.dependencies));
+    const resolvedModules = (0, import_shadertools.getShaderModuleDependencies)(Object.values(modules).filter(isShaderInputsModuleWithDependencies));
     for (const resolvedModule of resolvedModules) {
       modules[resolvedModule.name] = resolvedModule;
     }
-    import_core7.log.log(1, "Creating ShaderInputs with modules", Object.keys(modules))();
+    import_core5.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)) {
+      if (!module2) {
+        continue;
+      }
       this._addModule(module2);
       if (module2.name && name !== module2.name && !this.options.disableWarnings) {
-        import_core7.log.warn(`Module name: ${name} vs ${module2.name}`)();
+        import_core5.log.warn(`Module name: ${name} vs ${module2.name}`)();
       }
     }
   }
@@ -1253,15 +1152,15 @@ var ShaderInputs = class {
       const module2 = this.modules[moduleName];
       if (!module2) {
         if (!this.options.disableWarnings) {
-          import_core7.log.warn(`Module ${name} not found`)();
+          import_core5.log.warn(`Module ${name} not found`)();
         }
         continue;
       }
       const oldUniforms = this.moduleUniforms[moduleName];
       const oldBindings = this.moduleBindings[moduleName];
       const uniformsAndBindings = ((_a = module2.getUniforms) == null ? void 0 : _a.call(module2, moduleProps, oldUniforms)) || moduleProps;
-      const { uniforms, bindings } = splitUniformsAndBindings(uniformsAndBindings);
-      this.moduleUniforms[moduleName] = { ...oldUniforms, ...uniforms };
+      const { uniforms, bindings } = splitUniformsAndBindings(uniformsAndBindings, module2.uniformTypes);
+      this.moduleUniforms[moduleName] = mergeModuleUniforms(oldUniforms, uniforms, module2.uniformTypes);
       this.moduleBindings[moduleName] = { ...oldBindings, ...bindings };
     }
   }
@@ -1301,54 +1200,260 @@ var ShaderInputs = class {
   }
   _addModule(module2) {
     const moduleName = module2.name;
-    this.moduleUniforms[moduleName] = module2.defaultUniforms || {};
+    this.moduleUniforms[moduleName] = mergeModuleUniforms({}, module2.defaultUniforms || {}, module2.uniformTypes);
     this.moduleBindings[moduleName] = {};
   }
 };
+function mergeModuleUniforms(currentUniforms = {}, nextUniforms = {}, uniformTypes2 = {}) {
+  const mergedUniforms = { ...currentUniforms };
+  for (const [key, value] of Object.entries(nextUniforms)) {
+    if (value === void 0) {
+      continue;
+    }
+    mergedUniforms[key] = mergeModuleUniformValue(currentUniforms[key], value, uniformTypes2[key]);
+  }
+  return mergedUniforms;
+}
+function mergeModuleUniformValue(currentValue, nextValue, uniformType) {
+  if (!uniformType || typeof uniformType === "string") {
+    return cloneModuleUniformValue(nextValue);
+  }
+  if (Array.isArray(uniformType)) {
+    if (isPackedUniformArrayValue(nextValue) || !Array.isArray(nextValue)) {
+      return cloneModuleUniformValue(nextValue);
+    }
+    const currentArray = Array.isArray(currentValue) && !isPackedUniformArrayValue(currentValue) ? [...currentValue] : [];
+    const mergedArray = currentArray.slice();
+    for (let index = 0; index < nextValue.length; index++) {
+      const elementValue = nextValue[index];
+      if (elementValue === void 0) {
+        continue;
+      }
+      mergedArray[index] = mergeModuleUniformValue(currentArray[index], elementValue, uniformType[0]);
+    }
+    return mergedArray;
+  }
+  if (!isPlainUniformObject(nextValue)) {
+    return cloneModuleUniformValue(nextValue);
+  }
+  const uniformStruct = uniformType;
+  const currentObject = isPlainUniformObject(currentValue) ? currentValue : {};
+  const mergedObject = { ...currentObject };
+  for (const [key, value] of Object.entries(nextValue)) {
+    if (value === void 0) {
+      continue;
+    }
+    mergedObject[key] = mergeModuleUniformValue(currentObject[key], value, uniformStruct[key]);
+  }
+  return mergedObject;
+}
+function cloneModuleUniformValue(value) {
+  if (ArrayBuffer.isView(value)) {
+    return Array.prototype.slice.call(value);
+  }
+  if (Array.isArray(value)) {
+    if (isPackedUniformArrayValue(value)) {
+      return value.slice();
+    }
+    const compositeArray = value;
+    return compositeArray.map((element) => element === void 0 ? void 0 : cloneModuleUniformValue(element));
+  }
+  if (isPlainUniformObject(value)) {
+    return Object.fromEntries(Object.entries(value).map(([key, nestedValue]) => [
+      key,
+      nestedValue === void 0 ? void 0 : cloneModuleUniformValue(nestedValue)
+    ]));
+  }
+  return value;
+}
+function isPackedUniformArrayValue(value) {
+  return ArrayBuffer.isView(value) || Array.isArray(value) && (value.length === 0 || typeof value[0] === "number");
+}
+function isPlainUniformObject(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value) && !ArrayBuffer.isView(value);
+}
+function isShaderInputsModuleWithDependencies(module2) {
+  return Boolean(module2 == null ? void 0 : module2.dependencies);
+}
 
-// dist/async-texture/async-texture.js
-var import_core8 = require("@luma.gl/core");
+// dist/dynamic-texture/dynamic-texture.js
+var import_core7 = require("@luma.gl/core");
 
-// dist/application-utils/load-file.js
-var pathPrefix = "";
-function setPathPrefix(prefix) {
-  pathPrefix = prefix;
+// dist/dynamic-texture/texture-data.js
+var import_core6 = require("@luma.gl/core");
+var TEXTURE_CUBE_FACE_MAP = { "+X": 0, "-X": 1, "+Y": 2, "-Y": 3, "+Z": 4, "-Z": 5 };
+function getFirstMipLevel(layer) {
+  if (!layer)
+    return null;
+  return Array.isArray(layer) ? layer[0] ?? null : layer;
 }
-async function loadImageBitmap(url, opts) {
-  const image = new Image();
-  image.crossOrigin = (opts == null ? void 0 : opts.crossOrigin) || "anonymous";
-  image.src = url.startsWith("http") ? url : pathPrefix + url;
-  await image.decode();
-  return opts ? await createImageBitmap(image, opts) : await createImageBitmap(image);
+function getTextureSizeFromData(props) {
+  const { dimension, data } = props;
+  if (!data) {
+    return null;
+  }
+  switch (dimension) {
+    case "1d": {
+      const mipLevel = getFirstMipLevel(data);
+      if (!mipLevel)
+        return null;
+      const { width } = getTextureMipLevelSize(mipLevel);
+      return { width, height: 1 };
+    }
+    case "2d": {
+      const mipLevel = getFirstMipLevel(data);
+      return mipLevel ? getTextureMipLevelSize(mipLevel) : null;
+    }
+    case "3d":
+    case "2d-array": {
+      if (!Array.isArray(data) || data.length === 0)
+        return null;
+      const mipLevel = getFirstMipLevel(data[0]);
+      return mipLevel ? getTextureMipLevelSize(mipLevel) : null;
+    }
+    case "cube": {
+      const face = Object.keys(data)[0] ?? null;
+      if (!face)
+        return null;
+      const faceData = data[face];
+      const mipLevel = getFirstMipLevel(faceData);
+      return mipLevel ? getTextureMipLevelSize(mipLevel) : null;
+    }
+    case "cube-array": {
+      if (!Array.isArray(data) || data.length === 0)
+        return null;
+      const firstCube = data[0];
+      const face = Object.keys(firstCube)[0] ?? null;
+      if (!face)
+        return null;
+      const mipLevel = getFirstMipLevel(firstCube[face]);
+      return mipLevel ? getTextureMipLevelSize(mipLevel) : null;
+    }
+    default:
+      return null;
+  }
 }
-async function loadImage(url, opts) {
-  return await new Promise((resolve, reject) => {
-    try {
-      const image = new Image();
-      image.onload = () => resolve(image);
-      image.onerror = () => reject(new Error(`Could not load image ${url}.`));
-      image.crossOrigin = (opts == null ? void 0 : opts.crossOrigin) || "anonymous";
-      image.src = url.startsWith("http") ? url : pathPrefix + url;
-    } catch (error) {
-      reject(error);
+function getTextureMipLevelSize(data) {
+  if ((0, import_core6.isExternalImage)(data)) {
+    return (0, import_core6.getExternalImageSize)(data);
+  }
+  if (typeof data === "object" && "width" in data && "height" in data) {
+    return { width: data.width, height: data.height };
+  }
+  throw new Error("Unsupported mip-level data");
+}
+function isTextureImageData(data) {
+  return typeof data === "object" && data !== null && "data" in data && "width" in data && "height" in data;
+}
+function isTypedArrayMipLevelData(data) {
+  return ArrayBuffer.isView(data);
+}
+function resolveTextureImageFormat(data) {
+  const { textureFormat, format } = data;
+  if (textureFormat && format && textureFormat !== format) {
+    throw new Error(`Conflicting texture formats "${textureFormat}" and "${format}" provided for the same mip level`);
+  }
+  return textureFormat ?? format;
+}
+function getCubeFaceIndex(face) {
+  const idx = TEXTURE_CUBE_FACE_MAP[face];
+  if (idx === void 0)
+    throw new Error(`Invalid cube face: ${face}`);
+  return idx;
+}
+function getCubeArrayFaceIndex(cubeIndex, face) {
+  return 6 * cubeIndex + getCubeFaceIndex(face);
+}
+function getTexture1DSubresources(data) {
+  throw new Error("setTexture1DData not supported in WebGL.");
+}
+function _normalizeTexture2DData(data) {
+  return Array.isArray(data) ? data : [data];
+}
+function getTexture2DSubresources(slice, lodData, baseLevelSize, textureFormat) {
+  const lodArray = _normalizeTexture2DData(lodData);
+  const z = slice;
+  const subresources = [];
+  for (let mipLevel = 0; mipLevel < lodArray.length; mipLevel++) {
+    const imageData = lodArray[mipLevel];
+    if ((0, import_core6.isExternalImage)(imageData)) {
+      subresources.push({
+        type: "external-image",
+        image: imageData,
+        z,
+        mipLevel
+      });
+    } else if (isTextureImageData(imageData)) {
+      subresources.push({
+        type: "texture-data",
+        data: imageData,
+        textureFormat: resolveTextureImageFormat(imageData),
+        z,
+        mipLevel
+      });
+    } else if (isTypedArrayMipLevelData(imageData) && baseLevelSize) {
+      subresources.push({
+        type: "texture-data",
+        data: {
+          data: imageData,
+          width: Math.max(1, baseLevelSize.width >> mipLevel),
+          height: Math.max(1, baseLevelSize.height >> mipLevel),
+          ...textureFormat ? { format: textureFormat } : {}
+        },
+        textureFormat,
+        z,
+        mipLevel
+      });
+    } else {
+      throw new Error("Unsupported 2D mip-level payload");
+    }
+  }
+  return subresources;
+}
+function getTexture3DSubresources(data) {
+  const subresources = [];
+  for (let depth = 0; depth < data.length; depth++) {
+    subresources.push(...getTexture2DSubresources(depth, data[depth]));
+  }
+  return subresources;
+}
+function getTextureArraySubresources(data) {
+  const subresources = [];
+  for (let layer = 0; layer < data.length; layer++) {
+    subresources.push(...getTexture2DSubresources(layer, data[layer]));
+  }
+  return subresources;
+}
+function getTextureCubeSubresources(data) {
+  const subresources = [];
+  for (const [face, faceData] of Object.entries(data)) {
+    const faceDepth = getCubeFaceIndex(face);
+    subresources.push(...getTexture2DSubresources(faceDepth, faceData));
+  }
+  return subresources;
+}
+function getTextureCubeArraySubresources(data) {
+  const subresources = [];
+  data.forEach((cubeData, cubeIndex) => {
+    for (const [face, faceData] of Object.entries(cubeData)) {
+      const faceDepth = getCubeArrayFaceIndex(cubeIndex, face);
+      subresources.push(...getTexture2DSubresources(faceDepth, faceData));
     }
   });
+  return subresources;
 }
 
-// dist/async-texture/async-texture.js
-var TextureCubeFaces = ["+X", "-X", "+Y", "-Y", "+Z", "-Z"];
-var CubeFaces = ["+X", "-X", "+Y", "-Y", "+Z", "-Z"];
-var _AsyncTexture = class {
+// dist/dynamic-texture/dynamic-texture.js
+var _DynamicTexture = class {
   device;
   id;
+  /** Props with defaults resolved (except `data` which is processed separately) */
   props;
-  // TODO - should we type these as possibly `null`? It will make usage harder?
-  // @ts-expect-error
-  texture;
-  // @ts-expect-error
-  sampler;
-  // @ts-expect-error
-  view;
+  /** Created resources */
+  _texture = null;
+  _sampler = null;
+  _view = null;
+  /** Ready when GPU texture has been created and data (if any) uploaded */
   ready;
   isReady = false;
   destroyed = false;
@@ -1356,272 +1461,437 @@ var _AsyncTexture = class {
   };
   rejectReady = () => {
   };
+  get texture() {
+    if (!this._texture)
+      throw new Error("Texture not initialized yet");
+    return this._texture;
+  }
+  get sampler() {
+    if (!this._sampler)
+      throw new Error("Sampler not initialized yet");
+    return this._sampler;
+  }
+  get view() {
+    if (!this._view)
+      throw new Error("View not initialized yet");
+    return this._view;
+  }
   get [Symbol.toStringTag]() {
-    return "AsyncTexture";
+    return "DynamicTexture";
   }
   toString() {
-    return `AsyncTexture:"${this.id}"(${this.isReady ? "ready" : "loading"})`;
+    return `DynamicTexture:"${this.id}":${this.texture.width}x${this.texture.height}px:(${this.isReady ? "ready" : "loading..."})`;
   }
   constructor(device, props) {
     this.device = device;
-    const id = uid("async-texture");
-    this.props = { ..._AsyncTexture.defaultProps, id, ...props };
+    const id = uid("dynamic-texture");
+    const originalPropsWithAsyncData = props;
+    this.props = { ..._DynamicTexture.defaultProps, id, ...props, data: null };
     this.id = this.props.id;
-    props = { ...props };
-    if (typeof (props == null ? void 0 : props.data) === "string" && props.dimension === "2d") {
-      props.data = loadImageBitmap(props.data);
-    }
-    if (props.mipmaps) {
-      props.mipLevels = "auto";
-    }
     this.ready = new Promise((resolve, reject) => {
-      this.resolveReady = () => {
-        this.isReady = true;
-        resolve();
-      };
+      this.resolveReady = resolve;
       this.rejectReady = reject;
     });
-    this.initAsync(props);
+    this.initAsync(originalPropsWithAsyncData);
   }
-  async initAsync(props) {
-    const asyncData = props.data;
-    const data = await awaitAllPromises(asyncData).then(void 0, this.rejectReady);
-    if (this.destroyed) {
-      return;
-    }
-    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;
-    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;
+  /** @note Fire and forget; caller can await `ready` */
+  async initAsync(originalPropsWithAsyncData) {
+    try {
+      const propsWithSyncData = await this._loadAllData(originalPropsWithAsyncData);
+      this._checkNotDestroyed();
+      const subresources = propsWithSyncData.data ? getTextureSubresources({
+        ...propsWithSyncData,
+        width: originalPropsWithAsyncData.width,
+        height: originalPropsWithAsyncData.height,
+        format: originalPropsWithAsyncData.format
+      }) : [];
+      const userProvidedFormat = "format" in originalPropsWithAsyncData && originalPropsWithAsyncData.format !== void 0;
+      const userProvidedUsage = "usage" in originalPropsWithAsyncData && originalPropsWithAsyncData.usage !== void 0;
+      const deduceSize = () => {
+        if (this.props.width && this.props.height) {
+          return { width: this.props.width, height: this.props.height };
+        }
+        const size2 = getTextureSizeFromData(propsWithSyncData);
+        if (size2) {
+          return size2;
+        }
+        return { width: this.props.width || 1, height: this.props.height || 1 };
+      };
+      const size = deduceSize();
+      if (!size || size.width <= 0 || size.height <= 0) {
+        throw new Error(`${this} size could not be determined or was zero`);
       }
+      const textureData = analyzeTextureSubresources(this.device, subresources, size, {
+        format: userProvidedFormat ? originalPropsWithAsyncData.format : void 0
+      });
+      const resolvedFormat = textureData.format ?? this.props.format;
+      const baseTextureProps = {
+        ...this.props,
+        ...size,
+        format: resolvedFormat,
+        mipLevels: 1,
+        // temporary; updated below
+        data: void 0
+      };
+      if (this.device.isTextureFormatCompressed(resolvedFormat) && !userProvidedUsage) {
+        baseTextureProps.usage = import_core7.Texture.SAMPLE | import_core7.Texture.COPY_DST;
+      }
+      const shouldGenerateMipmaps = this.props.mipmaps && !textureData.hasExplicitMipChain && !this.device.isTextureFormatCompressed(resolvedFormat);
+      if (this.device.type === "webgpu" && shouldGenerateMipmaps) {
+        const requiredUsage = this.props.dimension === "3d" ? import_core7.Texture.SAMPLE | import_core7.Texture.STORAGE | import_core7.Texture.COPY_DST | import_core7.Texture.COPY_SRC : import_core7.Texture.SAMPLE | import_core7.Texture.RENDER | import_core7.Texture.COPY_DST | import_core7.Texture.COPY_SRC;
+        baseTextureProps.usage |= requiredUsage;
+      }
+      const maxMips = this.device.getMipLevelCount(baseTextureProps.width, baseTextureProps.height);
+      const desired = textureData.hasExplicitMipChain ? textureData.mipLevels : this.props.mipLevels === "auto" ? maxMips : Math.max(1, Math.min(maxMips, this.props.mipLevels ?? 1));
+      const finalTextureProps = { ...baseTextureProps, mipLevels: desired };
+      this._texture = this.device.createTexture(finalTextureProps);
+      this._sampler = this.texture.sampler;
+      this._view = this.texture.view;
+      if (textureData.subresources.length) {
+        this._setTextureSubresources(textureData.subresources);
+      }
+      if (this.props.mipmaps && !textureData.hasExplicitMipChain && !shouldGenerateMipmaps) {
+        import_core7.log.warn(`${this} skipping auto-generated mipmaps for compressed texture format`)();
+      }
+      if (shouldGenerateMipmaps) {
+        this.generateMipmaps();
+      }
+      this.isReady = true;
+      this.resolveReady(this.texture);
+      import_core7.log.info(0, `${this} created`)();
+    } catch (e) {
+      const err = e instanceof Error ? e : new Error(String(e));
+      this.rejectReady(err);
     }
-    if (this.props.mipmaps) {
-      this.generateMipmaps();
-    }
-    import_core8.log.info(1, `${this} loaded`);
-    this.resolveReady();
   }
   destroy() {
-    if (this.texture) {
-      this.texture.destroy();
-      this.texture = null;
+    if (this._texture) {
+      this._texture.destroy();
+      this._texture = null;
+      this._sampler = null;
+      this._view = null;
     }
     this.destroyed = true;
   }
   generateMipmaps() {
-    this.texture.generateMipmapsWebGL();
+    if (this.device.type === "webgl") {
+      this.texture.generateMipmapsWebGL();
+    } else if (this.device.type === "webgpu") {
+      this.device.generateMipmapsWebGPU(this.texture);
+    } else {
+      import_core7.log.warn(`${this} mipmaps not supported on ${this.device.type}`);
+    }
   }
-  /** Set sampler or create and set new Sampler from SamplerProps */
+  /** Set sampler or create one from props */
   setSampler(sampler = {}) {
-    this.texture.setSampler(sampler instanceof import_core8.Sampler ? sampler : this.device.createSampler(sampler));
+    this._checkReady();
+    const s = sampler instanceof import_core7.Sampler ? sampler : this.device.createSampler(sampler);
+    this.texture.setSampler(s);
+    this._sampler = s;
   }
   /**
-   * 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?
+   * Copies texture contents into a GPU buffer and waits until the copy is complete.
+   * The caller owns the returned buffer and must destroy it when finished.
    */
-  resize(size) {
+  async readBuffer(options = {}) {
+    if (!this.isReady) {
+      await this.ready;
+    }
+    const width = options.width ?? this.texture.width;
+    const height = options.height ?? this.texture.height;
+    const depthOrArrayLayers = options.depthOrArrayLayers ?? this.texture.depth;
+    const layout = this.texture.computeMemoryLayout({ width, height, depthOrArrayLayers });
+    const buffer = this.device.createBuffer({
+      byteLength: layout.byteLength,
+      usage: import_core7.Buffer.COPY_DST | import_core7.Buffer.MAP_READ
+    });
+    this.texture.readBuffer({
+      ...options,
+      width,
+      height,
+      depthOrArrayLayers
+    }, buffer);
+    const fence = this.device.createFence();
+    await fence.signaled;
+    fence.destroy();
+    return buffer;
+  }
+  /** Reads texture contents back to CPU memory. */
+  async readAsync(options = {}) {
     if (!this.isReady) {
-      throw new Error("Cannot resize texture before it is ready");
+      await this.ready;
     }
+    const width = options.width ?? this.texture.width;
+    const height = options.height ?? this.texture.height;
+    const depthOrArrayLayers = options.depthOrArrayLayers ?? this.texture.depth;
+    const layout = this.texture.computeMemoryLayout({ width, height, depthOrArrayLayers });
+    const buffer = await this.readBuffer(options);
+    const data = await buffer.readAsync(0, layout.byteLength);
+    buffer.destroy();
+    return data.buffer;
+  }
+  /**
+   * Resize by cloning the underlying immutable texture.
+   * Does not copy contents; caller may need to re-upload and/or regenerate mips.
+   */
+  resize(size) {
+    this._checkReady();
     if (size.width === this.texture.width && size.height === this.texture.height) {
       return false;
     }
-    if (this.texture) {
-      const texture = this.texture;
-      this.texture = texture.clone(size);
-      texture.destroy();
-    }
+    const prev = this.texture;
+    this._texture = prev.clone(size);
+    this._sampler = this.texture.sampler;
+    this._view = this.texture.view;
+    prev.destroy();
+    import_core7.log.info(`${this} resized`);
     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 });
+  /** Convert cube face label to texture slice index. Index can be used with `setTexture2DData()`. */
+  getCubeFaceIndex(face) {
+    const index = TEXTURE_CUBE_FACE_MAP[face];
+    if (index === void 0)
+      throw new Error(`Invalid cube face: ${face}`);
+    return index;
+  }
+  /** Convert cube face label to texture slice index. Index can be used with `setTexture2DData()`. */
+  getCubeArrayFaceIndex(cubeIndex, face) {
+    return 6 * cubeIndex + this.getCubeFaceIndex(face);
+  }
+  /** @note experimental: Set multiple mip levels (1D) */
+  setTexture1DData(data) {
+    this._checkReady();
+    if (this.texture.props.dimension !== "1d") {
+      throw new Error(`${this} is not 1d`);
+    }
+    const subresources = getTexture1DSubresources(data);
+    this._setTextureSubresources(subresources);
+  }
+  /** @note experimental: Set multiple mip levels (2D), optionally at `z`, slice (depth/array level) index */
+  setTexture2DData(lodData, z = 0) {
+    this._checkReady();
+    if (this.texture.props.dimension !== "2d") {
+      throw new Error(`${this} is not 2d`);
+    }
+    const subresources = getTexture2DSubresources(z, lodData);
+    this._setTextureSubresources(subresources);
+  }
+  /** 3D: multiple depth slices, each may carry multiple mip levels */
+  setTexture3DData(data) {
+    if (this.texture.props.dimension !== "3d") {
+      throw new Error(`${this} is not 3d`);
+    }
+    const subresources = getTexture3DSubresources(data);
+    this._setTextureSubresources(subresources);
+  }
+  /** 2D array: multiple layers, each may carry multiple mip levels */
+  setTextureArrayData(data) {
+    if (this.texture.props.dimension !== "2d-array") {
+      throw new Error(`${this} is not 2d-array`);
+    }
+    const subresources = getTextureArraySubresources(data);
+    this._setTextureSubresources(subresources);
+  }
+  /** Cube: 6 faces, each may carry multiple mip levels */
+  setTextureCubeData(data) {
+    if (this.texture.props.dimension !== "cube") {
+      throw new Error(`${this} is not cube`);
+    }
+    const subresources = getTextureCubeSubresources(data);
+    this._setTextureSubresources(subresources);
+  }
+  /** Cube array: multiple cubes (faces×layers), each face may carry multiple mips */
+  setTextureCubeArrayData(data) {
+    if (this.texture.props.dimension !== "cube-array") {
+      throw new Error(`${this} is not cube-array`);
+    }
+    const subresources = getTextureCubeArraySubresources(data);
+    this._setTextureSubresources(subresources);
+  }
+  /** Sets multiple mip levels on different `z` slices (depth/array index) */
+  _setTextureSubresources(subresources) {
+    for (const subresource of subresources) {
+      const { z, mipLevel } = subresource;
+      switch (subresource.type) {
+        case "external-image":
+          const { image, flipY } = subresource;
+          this.texture.copyExternalImage({ image, z, mipLevel, flipY });
+          break;
+        case "texture-data":
+          const { data, textureFormat } = subresource;
+          if (textureFormat && textureFormat !== this.texture.format) {
+            throw new Error(`${this} mip level ${mipLevel} uses format "${textureFormat}" but texture format is "${this.texture.format}"`);
+          }
+          this.texture.writeData(data.data, {
+            x: 0,
+            y: 0,
+            z,
+            width: data.width,
+            height: data.height,
+            depthOrArrayLayers: 1,
+            mipLevel
+          });
+          break;
+        default:
+          throw new Error("Unsupported 2D mip-level payload");
       }
     }
   }
-  /**
-   * 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);
-    }
+  // ------------------ helpers ------------------
+  /** Recursively resolve all promises in data structures */
+  async _loadAllData(props) {
+    const syncData = await awaitAllPromises(props.data);
+    const dimension = props.dimension ?? "2d";
+    return { dimension, data: syncData ?? null };
   }
-  /**
-   * 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);
+  _checkNotDestroyed() {
+    if (this.destroyed) {
+      import_core7.log.warn(`${this} already destroyed`);
     }
   }
-  /**
-   * 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);
+  _checkReady() {
+    if (!this.isReady) {
+      import_core7.log.warn(`${this} Cannot perform this operation before ready`);
     }
   }
-  /**
-   * 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.");
+};
+var DynamicTexture = _DynamicTexture;
+__publicField(DynamicTexture, "defaultProps", {
+  ...import_core7.Texture.defaultProps,
+  dimension: "2d",
+  data: null,
+  mipmaps: false
+});
+function getTextureSubresources(props) {
+  if (!props.data) {
+    return [];
+  }
+  const baseLevelSize = props.width && props.height ? { width: props.width, height: props.height } : void 0;
+  const textureFormat = "format" in props ? props.format : void 0;
+  switch (props.dimension) {
+    case "1d":
+      return getTexture1DSubresources(props.data);
+    case "2d":
+      return getTexture2DSubresources(0, props.data, baseLevelSize, textureFormat);
+    case "3d":
+      return getTexture3DSubresources(props.data);
+    case "2d-array":
+      return getTextureArraySubresources(props.data);
+    case "cube":
+      return getTextureCubeSubresources(props.data);
+    case "cube-array":
+      return getTextureCubeArraySubresources(props.data);
+    default:
+      throw new Error(`Unhandled dimension ${props.dimension}`);
   }
-  /** 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);
+}
+function analyzeTextureSubresources(device, subresources, size, options) {
+  if (subresources.length === 0) {
+    return {
+      subresources,
+      mipLevels: 1,
+      format: options.format,
+      hasExplicitMipChain: false
+    };
   }
-  /**
-   * 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
+  const groupedSubresources = /* @__PURE__ */ new Map();
+  for (const subresource of subresources) {
+    const group = groupedSubresources.get(subresource.z) ?? [];
+    group.push(subresource);
+    groupedSubresources.set(subresource.z, group);
+  }
+  const hasExplicitMipChain = subresources.some((subresource) => subresource.mipLevel > 0);
+  let resolvedFormat = options.format;
+  let resolvedMipLevels = Number.POSITIVE_INFINITY;
+  const validSubresources = [];
+  for (const [z, sliceSubresources] of groupedSubresources) {
+    const sortedSubresources = [...sliceSubresources].sort((left, right) => left.mipLevel - right.mipLevel);
+    const baseLevel = sortedSubresources[0];
+    if (!baseLevel || baseLevel.mipLevel !== 0) {
+      throw new Error(`DynamicTexture: slice ${z} is missing mip level 0`);
+    }
+    const baseSize = getTextureSubresourceSize(device, baseLevel);
+    if (baseSize.width !== size.width || baseSize.height !== size.height) {
+      throw new Error(`DynamicTexture: slice ${z} base level dimensions ${baseSize.width}x${baseSize.height} do not match expected ${size.width}x${size.height}`);
+    }
+    const baseFormat = getTextureSubresourceFormat(baseLevel);
+    if (baseFormat) {
+      if (resolvedFormat && resolvedFormat !== baseFormat) {
+        throw new Error(`DynamicTexture: slice ${z} base level format "${baseFormat}" does not match texture format "${resolvedFormat}"`);
+      }
+      resolvedFormat = baseFormat;
+    }
+    const mipLevelLimit = resolvedFormat && device.isTextureFormatCompressed(resolvedFormat) ? (
+      // Block-compressed formats cannot have mips smaller than a single compression block.
+      getMaxCompressedMipLevels(device, baseSize.width, baseSize.height, resolvedFormat)
+    ) : device.getMipLevelCount(baseSize.width, baseSize.height);
+    let validMipLevelsForSlice = 0;
+    for (let expectedMipLevel = 0; expectedMipLevel < sortedSubresources.length; expectedMipLevel++) {
+      const subresource = sortedSubresources[expectedMipLevel];
+      if (!subresource || subresource.mipLevel !== expectedMipLevel) {
+        break;
+      }
+      if (expectedMipLevel >= mipLevelLimit) {
+        break;
+      }
+      const subresourceSize = getTextureSubresourceSize(device, subresource);
+      const expectedWidth = Math.max(1, baseSize.width >> expectedMipLevel);
+      const expectedHeight = Math.max(1, baseSize.height >> expectedMipLevel);
+      if (subresourceSize.width !== expectedWidth || subresourceSize.height !== expectedHeight) {
+        break;
+      }
+      const subresourceFormat = getTextureSubresourceFormat(subresource);
+      if (subresourceFormat) {
+        if (!resolvedFormat) {
+          resolvedFormat = subresourceFormat;
         }
-      ];
-    } else if (!Array.isArray(data)) {
-      mipLevelArray = [data];
-    } else {
-      mipLevelArray = data;
+        if (subresourceFormat !== resolvedFormat) {
+          break;
+        }
+      }
+      validMipLevelsForSlice++;
+      validSubresources.push(subresource);
     }
-    return mipLevelArray;
+    resolvedMipLevels = Math.min(resolvedMipLevels, validMipLevelsForSlice);
   }
-};
-var AsyncTexture = _AsyncTexture;
-__publicField(AsyncTexture, "defaultProps", {
-  ...import_core8.Texture.defaultProps,
-  data: null,
-  mipmaps: false
-});
+  const mipLevels = Number.isFinite(resolvedMipLevels) ? Math.max(1, resolvedMipLevels) : 1;
+  return {
+    // Keep every slice trimmed to the same mip count so the texture shape stays internally consistent.
+    subresources: validSubresources.filter((subresource) => subresource.mipLevel < mipLevels),
+    mipLevels,
+    format: resolvedFormat,
+    hasExplicitMipChain
+  };
+}
+function getTextureSubresourceFormat(subresource) {
+  if (subresource.type !== "texture-data") {
+    return void 0;
+  }
+  return subresource.textureFormat ?? resolveTextureImageFormat(subresource.data);
+}
+function getTextureSubresourceSize(device, subresource) {
+  switch (subresource.type) {
+    case "external-image":
+      return device.getExternalImageSize(subresource.image);
+    case "texture-data":
+      return { width: subresource.data.width, height: subresource.data.height };
+    default:
+      throw new Error("Unsupported texture subresource");
+  }
+}
+function getMaxCompressedMipLevels(device, baseWidth, baseHeight, format) {
+  const { blockWidth = 1, blockHeight = 1 } = device.getTextureFormatInfo(format);
+  let mipLevels = 1;
+  for (let mipLevel = 1; ; mipLevel++) {
+    const width = Math.max(1, baseWidth >> mipLevel);
+    const height = Math.max(1, baseHeight >> mipLevel);
+    if (width < blockWidth || height < blockHeight) {
+      break;
+    }
+    mipLevels++;
+  }
+  return mipLevels;
+}
 async function awaitAllPromises(x) {
   x = await x;
   if (Array.isArray(x)) {
@@ -1629,7 +1899,7 @@ async function awaitAllPromises(x) {
   }
   if (x && typeof x === "object" && x.constructor === Object) {
     const object = x;
-    const values = await Promise.all(Object.values(object));
+    const values = await Promise.all(Object.values(object).map(awaitAllPromises));
     const keys = Object.keys(object);
     const resolvedObject = {};
     for (let i = 0; i < keys.length; i++) {
@@ -1644,16 +1914,24 @@ async function awaitAllPromises(x) {
 var LOG_DRAW_PRIORITY = 2;
 var LOG_DRAW_TIMEOUT = 1e4;
 var _Model = class {
+  /** Device that created this model */
   device;
+  /** Application provided identifier */
   id;
+  /** WGSL shader source when using unified shader */
   // @ts-expect-error assigned in function called from constructor
   source;
+  /** GLSL vertex shader source */
   // @ts-expect-error assigned in function called from constructor
   vs;
+  /** GLSL fragment shader source */
   // @ts-expect-error assigned in function called from constructor
   fs;
+  /** Factory used to create render pipelines */
   pipelineFactory;
+  /** Factory used to create shaders */
   shaderFactory;
+  /** User-supplied per-model data */
   userData = {};
   // Fixed properties (change can trigger pipeline rebuild)
   /** The render pipeline GPU parameters, depth testing etc */
@@ -1690,6 +1968,7 @@ var _Model = class {
   /** ShaderInputs instance */
   // @ts-expect-error Assigned in function called by constructor
   shaderInputs;
+  material = null;
   // @ts-expect-error Assigned in function called by constructor
   _uniformStore;
   _attributeInfos = {};
@@ -1700,6 +1979,7 @@ var _Model = class {
   _destroyed = false;
   /** "Time" of last draw. Monotonically increasing timestamp */
   _lastDrawTimestamp = -1;
+  _bindingTable = [];
   get [Symbol.toStringTag]() {
     return "Model";
   }
@@ -1707,12 +1987,13 @@ var _Model = class {
     return `Model(${this.id})`;
   }
   constructor(device, props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     this.props = { ..._Model.defaultProps, ...props };
     props = this.props;
     this.id = props.id || uid("model");
     this.device = device;
     Object.assign(this.userData, props.userData);
+    this.material = props.material || null;
     const moduleMap = Object.fromEntries(((_a = this.props.modules) == null ? void 0 : _a.map((module2) => [module2.name, module2])) || []);
     const shaderInputs = props.shaderInputs || new ShaderInputs(moduleMap, { disableWarnings: this.props.disableWarnings });
     this.setShaderInputs(shaderInputs);
@@ -1721,16 +2002,19 @@ var _Model = class {
       // @ts-ignore shaderInputs is assigned in setShaderInputs above.
       (((_b = this.props.modules) == null ? void 0 : _b.length) > 0 ? this.props.modules : (_c = this.shaderInputs) == null ? void 0 : _c.getModules()) || []
     );
+    this.props.shaderLayout = mergeShaderModuleBindingsIntoLayout(this.props.shaderLayout, modules) || null;
     const isWebGPU = this.device.type === "webgpu";
     if (isWebGPU && this.props.source) {
-      const { source: source3, getUniforms: getUniforms2 } = this.props.shaderAssembler.assembleWGSLShader({
+      const { source: source3, getUniforms: getUniforms2, bindingTable } = this.props.shaderAssembler.assembleWGSLShader({
         platformInfo,
         ...this.props,
         modules
       });
       this.source = source3;
       this._getModuleUniforms = getUniforms2;
-      this.props.shaderLayout ||= (0, import_shadertools2.getShaderLayoutFromWGSL)(this.source);
+      this._bindingTable = bindingTable;
+      const inferredShaderLayout = (_d = device.getShaderLayout) == null ? void 0 : _d.call(device, this.source);
+      this.props.shaderLayout = mergeShaderModuleBindingsIntoLayout(this.props.shaderLayout || inferredShaderLayout || null, modules) || null;
     } else {
       const { vs: vs3, fs: fs3, getUniforms: getUniforms2 } = this.props.shaderAssembler.assembleGLSLShaderPair({
         platformInfo,
@@ -1740,6 +2024,7 @@ var _Model = class {
       this.vs = vs3;
       this.fs = fs3;
       this._getModuleUniforms = getUniforms2;
+      this._bindingTable = [];
     }
     this.vertexCount = this.props.vertexCount;
     this.instanceCount = this.props.instanceCount;
@@ -1749,8 +2034,8 @@ var _Model = class {
     if (props.geometry) {
       this.setGeometry(props.geometry);
     }
-    this.pipelineFactory = props.pipelineFactory || PipelineFactory.getDefaultPipelineFactory(this.device);
-    this.shaderFactory = props.shaderFactory || ShaderFactory.getDefaultShaderFactory(this.device);
+    this.pipelineFactory = props.pipelineFactory || import_core8.PipelineFactory.getDefaultPipelineFactory(this.device);
+    this.shaderFactory = props.shaderFactory || import_core8.ShaderFactory.getDefaultShaderFactory(this.device);
     this.pipeline = this._updatePipeline();
     this.vertexArray = device.createVertexArray({
       shaderLayout: this.pipeline.shaderLayout,
@@ -1783,14 +2068,13 @@ var _Model = class {
     if (props.transformFeedback) {
       this.transformFeedback = props.transformFeedback;
     }
-    Object.seal(this);
   }
   destroy() {
     var _a;
     if (!this._destroyed) {
       this.pipelineFactory.release(this.pipeline);
       this.shaderFactory.release(this.pipeline.vs);
-      if (this.pipeline.fs) {
+      if (this.pipeline.fs && this.pipeline.fs !== this.pipeline.vs) {
         this.shaderFactory.release(this.pipeline.fs);
       }
       this._uniformStore.destroy();
@@ -1812,14 +2096,24 @@ var _Model = class {
   setNeedsRedraw(reason) {
     this._needsRedraw ||= reason;
   }
+  /** Returns WGSL binding debug rows for the assembled shader. Returns an empty array for GLSL models. */
+  getBindingDebugTable() {
+    return this._bindingTable;
+  }
+  /** Update uniforms and pipeline state prior to drawing. */
   predraw() {
     this.updateShaderInputs();
     this.pipeline = this._updatePipeline();
   }
+  /**
+   * Issue one draw call.
+   * @param renderPass - render pass to draw into
+   * @returns `true` if the draw call was executed, `false` if resources were not ready.
+   */
   draw(renderPass) {
     const loadingBinding = this._areBindingsLoading();
     if (loadingBinding) {
-      import_core9.log.info(LOG_DRAW_PRIORITY, `>>> DRAWING ABORTED ${this.id}: ${loadingBinding} not loaded`)();
+      import_core8.log.info(LOG_DRAW_PRIORITY, `>>> DRAWING ABORTED ${this.id}: ${loadingBinding} not loaded`)();
       return false;
     }
     try {
@@ -1834,9 +2128,7 @@ var _Model = class {
       this._logDrawCallStart();
       this.pipeline = this._updatePipeline();
       const syncBindings = this._getBindings();
-      this.pipeline.setBindings(syncBindings, {
-        disableWarnings: this.props.disableWarnings
-      });
+      const syncBindGroups = this._getBindGroups();
       const { indexBuffer } = this.vertexArray;
       const indexCount = indexBuffer ? indexBuffer.byteLength / (indexBuffer.indexType === "uint32" ? 4 : 2) : void 0;
       drawSuccess = this.pipeline.draw({
@@ -1847,6 +2139,13 @@ var _Model = class {
         instanceCount: this.instanceCount,
         indexCount,
         transformFeedback: this.transformFeedback || void 0,
+        // Pipelines may be shared across models when caching is enabled, so bindings
+        // and WebGL uniforms must be supplied on every draw instead of being stored
+        // on the pipeline instance.
+        bindings: syncBindings,
+        bindGroups: syncBindGroups,
+        _bindGroupCacheKeys: this._getBindGroupCacheKeys(),
+        uniforms: this.props.uniforms,
         // WebGL shares underlying cached pipelines even for models that have different parameters and topology,
         // so we must provide our unique parameters to each draw
         // (In WebGPU most parameters are encoded in the pipeline and cannot be changed per draw call)
@@ -1946,20 +2245,25 @@ var _Model = class {
   }
   /** Set the shader inputs */
   setShaderInputs(shaderInputs) {
+    var _a;
     this.shaderInputs = shaderInputs;
-    this._uniformStore = new import_core9.UniformStore(this.shaderInputs.modules);
+    this._uniformStore = new import_core8.UniformStore(this.device, this.shaderInputs.modules);
     for (const [moduleName, module2] of Object.entries(this.shaderInputs.modules)) {
-      if (shaderModuleHasUniforms(module2)) {
-        const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
+      if (shaderModuleHasUniforms(module2) && !((_a = this.material) == null ? void 0 : _a.ownsModule(moduleName))) {
+        const uniformBuffer = this._uniformStore.getManagedUniformBuffer(moduleName);
         this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
       }
     }
     this.setNeedsRedraw("shaderInputs");
   }
+  setMaterial(material) {
+    this.material = material;
+    this.setNeedsRedraw("material");
+  }
   /** Update uniform buffers from the model's shader inputs */
   updateShaderInputs() {
     this._uniformStore.setUniforms(this.shaderInputs.getUniformValues());
-    this.setBindings(this.shaderInputs.getBindingValues());
+    this.setBindings(this._getNonMaterialBindings(this.shaderInputs.getBindingValues()));
     this.setNeedsRedraw("shaderInputs");
   }
   /**
@@ -1991,7 +2295,7 @@ var _Model = class {
   setAttributes(buffers, options) {
     const disableWarnings = (options == null ? void 0 : options.disableWarnings) ?? this.props.disableWarnings;
     if (buffers["indices"]) {
-      import_core9.log.warn(`Model:${this.id} setAttributes() - indexBuffer should be set using setIndexBuffer()`)();
+      import_core8.log.warn(`Model:${this.id} setAttributes() - indexBuffer should be set using setIndexBuffer()`)();
     }
     this.bufferLayout = sortedBufferLayoutByShaderSourceLocations(this.pipeline.shaderLayout, this.bufferLayout);
     const bufferLayoutHelper = new BufferLayoutHelper(this.bufferLayout);
@@ -1999,7 +2303,7 @@ var _Model = class {
       const bufferLayout = bufferLayoutHelper.getBufferLayout(bufferName);
       if (!bufferLayout) {
         if (!disableWarnings) {
-          import_core9.log.warn(`Model(${this.id}): Missing layout for buffer "${bufferName}".`)();
+          import_core8.log.warn(`Model(${this.id}): Missing layout for buffer "${bufferName}".`)();
         }
         continue;
       }
@@ -2014,7 +2318,7 @@ var _Model = class {
         }
       }
       if (!set && !disableWarnings) {
-        import_core9.log.warn(`Model(${this.id}): Ignoring buffer "${buffer.id}" for unknown attribute "${bufferName}"`)();
+        import_core8.log.warn(`Model(${this.id}): Ignoring buffer "${buffer.id}" for unknown attribute "${bufferName}"`)();
       }
     }
     this.setNeedsRedraw("attributes");
@@ -2033,7 +2337,7 @@ var _Model = class {
       if (attributeInfo) {
         this.vertexArray.setConstantWebGL(attributeInfo.location, value);
       } else if (!((options == null ? void 0 : options.disableWarnings) ?? this.props.disableWarnings)) {
-        import_core9.log.warn(`Model "${this.id}: Ignoring constant supplied for unknown attribute "${attributeName}"`)();
+        import_core8.log.warn(`Model "${this.id}: Ignoring constant supplied for unknown attribute "${attributeName}"`)();
       }
     }
     this.setNeedsRedraw("constants");
@@ -2041,8 +2345,14 @@ var _Model = class {
   // INTERNAL METHODS
   /** Check that bindings are loaded. Returns id of first binding that is still loading. */
   _areBindingsLoading() {
+    var _a;
     for (const binding of Object.values(this.bindings)) {
-      if (binding instanceof AsyncTexture && !binding.isReady) {
+      if (binding instanceof DynamicTexture && !binding.isReady) {
+        return binding.id;
+      }
+    }
+    for (const binding of Object.values(((_a = this.material) == null ? void 0 : _a.bindings) || {})) {
+      if (binding instanceof DynamicTexture && !binding.isReady) {
         return binding.id;
       }
     }
@@ -2052,7 +2362,7 @@ var _Model = class {
   _getBindings() {
     const validBindings = {};
     for (const [name, binding] of Object.entries(this.bindings)) {
-      if (binding instanceof AsyncTexture) {
+      if (binding instanceof DynamicTexture) {
         if (binding.isReady) {
           validBindings[name] = binding.texture;
         }
@@ -2062,24 +2372,46 @@ var _Model = class {
     }
     return validBindings;
   }
+  _getBindGroups() {
+    var _a;
+    const shaderLayout = ((_a = this.pipeline) == null ? void 0 : _a.shaderLayout) || this.props.shaderLayout || { bindings: [] };
+    const bindGroups = shaderLayout.bindings.length ? (0, import_core8.normalizeBindingsByGroup)(shaderLayout, this._getBindings()) : { 0: this._getBindings() };
+    if (!this.material) {
+      return bindGroups;
+    }
+    for (const [groupKey, groupBindings] of Object.entries(this.material.getBindingsByGroup())) {
+      const group = Number(groupKey);
+      bindGroups[group] = {
+        ...bindGroups[group] || {},
+        ...groupBindings
+      };
+    }
+    return bindGroups;
+  }
+  _getBindGroupCacheKeys() {
+    var _a;
+    const bindGroupCacheKey = (_a = this.material) == null ? void 0 : _a.getBindGroupCacheKey(3);
+    return bindGroupCacheKey ? { 3: bindGroupCacheKey } : {};
+  }
   /** Get the timestamp of the latest updated bound GPU memory resource (buffer/texture). */
   _getBindingsUpdateTimestamp() {
+    var _a;
     let timestamp = 0;
     for (const binding of Object.values(this.bindings)) {
-      if (binding instanceof import_core9.TextureView) {
+      if (binding instanceof import_core8.TextureView) {
         timestamp = Math.max(timestamp, binding.texture.updateTimestamp);
-      } else if (binding instanceof import_core9.Buffer || binding instanceof import_core9.Texture) {
+      } else if (binding instanceof import_core8.Buffer || binding instanceof import_core8.Texture) {
         timestamp = Math.max(timestamp, binding.updateTimestamp);
-      } else if (binding instanceof AsyncTexture) {
+      } else if (binding instanceof DynamicTexture) {
         timestamp = binding.texture ? Math.max(timestamp, binding.texture.updateTimestamp) : (
           // The texture will become available in the future
           Infinity
         );
-      } else if (!(binding instanceof import_core9.Sampler)) {
+      } else if (!(binding instanceof import_core8.Sampler)) {
         timestamp = Math.max(timestamp, binding.buffer.updateTimestamp);
       }
     }
-    return timestamp;
+    return Math.max(timestamp, ((_a = this.material) == null ? void 0 : _a.getBindingsUpdateTimestamp()) || 0);
   }
   /**
    * Updates the optional geometry attributes
@@ -2110,7 +2442,7 @@ var _Model = class {
       let prevShaderVs = null;
       let prevShaderFs = null;
       if (this.pipeline) {
-        import_core9.log.log(1, `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`)();
+        import_core8.log.log(1, `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`)();
         prevShaderVs = this.pipeline.vs;
         prevShaderFs = this.pipeline.fs;
       }
@@ -2134,20 +2466,20 @@ var _Model = class {
       }
       this.pipeline = this.pipelineFactory.createRenderPipeline({
         ...this.props,
+        bindings: void 0,
         bufferLayout: this.bufferLayout,
         topology: this.topology,
         parameters: this.parameters,
-        // TODO - why set bindings here when we reset them every frame?
-        // Should we expose a BindGroup abstraction?
-        bindings: this._getBindings(),
+        bindGroups: this._getBindGroups(),
         vs: vs3,
         fs: fs3
       });
-      this._attributeInfos = (0, import_core9.getAttributeInfosFromLayouts)(this.pipeline.shaderLayout, this.bufferLayout);
+      this._attributeInfos = (0, import_core8.getAttributeInfosFromLayouts)(this.pipeline.shaderLayout, this.bufferLayout);
       if (prevShaderVs)
         this.shaderFactory.release(prevShaderVs);
-      if (prevShaderFs)
+      if (prevShaderFs && prevShaderFs !== prevShaderVs) {
         this.shaderFactory.release(prevShaderFs);
+      }
     }
     return this.pipeline;
   }
@@ -2155,24 +2487,24 @@ var _Model = class {
   _lastLogTime = 0;
   _logOpen = false;
   _logDrawCallStart() {
-    const logDrawTimeout = import_core9.log.level > 3 ? 0 : LOG_DRAW_TIMEOUT;
-    if (import_core9.log.level < 2 || Date.now() - this._lastLogTime < logDrawTimeout) {
+    const logDrawTimeout = import_core8.log.level > 3 ? 0 : LOG_DRAW_TIMEOUT;
+    if (import_core8.log.level < 2 || Date.now() - this._lastLogTime < logDrawTimeout) {
       return;
     }
     this._lastLogTime = Date.now();
     this._logOpen = true;
-    import_core9.log.group(LOG_DRAW_PRIORITY, `>>> DRAWING MODEL ${this.id}`, { collapsed: import_core9.log.level <= 2 })();
+    import_core8.log.group(LOG_DRAW_PRIORITY, `>>> DRAWING MODEL ${this.id}`, { collapsed: import_core8.log.level <= 2 })();
   }
   _logDrawCallEnd() {
     if (this._logOpen) {
       const shaderLayoutTable = getDebugTableForShaderLayout(this.pipeline.shaderLayout, this.id);
-      import_core9.log.table(LOG_DRAW_PRIORITY, shaderLayoutTable)();
+      import_core8.log.table(LOG_DRAW_PRIORITY, shaderLayoutTable)();
       const uniformTable = this.shaderInputs.getDebugTable();
-      import_core9.log.table(LOG_DRAW_PRIORITY, uniformTable)();
+      import_core8.log.table(LOG_DRAW_PRIORITY, uniformTable)();
       const attributeTable = this._getAttributeDebugTable();
-      import_core9.log.table(LOG_DRAW_PRIORITY, this._attributeInfos)();
-      import_core9.log.table(LOG_DRAW_PRIORITY, attributeTable)();
-      import_core9.log.groupEnd(LOG_DRAW_PRIORITY)();
+      import_core8.log.table(LOG_DRAW_PRIORITY, this._attributeInfos)();
+      import_core8.log.table(LOG_DRAW_PRIORITY, attributeTable)();
+      import_core8.log.groupEnd(LOG_DRAW_PRIORITY)();
       this._logOpen = false;
     }
   }
@@ -2211,14 +2543,26 @@ var _Model = class {
   }
   // TODO - fix typing of luma data types
   _getBufferOrConstantValues(attribute, dataType) {
-    const TypedArrayConstructor = (0, import_core9.getTypedArrayConstructor)(dataType);
-    const typedArray = attribute instanceof import_core9.Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
+    const TypedArrayConstructor = import_core8.dataTypeDecoder.getTypedArrayConstructor(dataType);
+    const typedArray = attribute instanceof import_core8.Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
     return typedArray.toString();
   }
+  _getNonMaterialBindings(bindings) {
+    if (!this.material) {
+      return bindings;
+    }
+    const filteredBindings = {};
+    for (const [name, binding] of Object.entries(bindings)) {
+      if (!this.material.ownsBinding(name)) {
+        filteredBindings[name] = binding;
+      }
+    }
+    return filteredBindings;
+  }
 };
 var Model = _Model;
 __publicField(Model, "defaultProps", {
-  ...import_core9.RenderPipeline.defaultProps,
+  ...import_core8.RenderPipeline.defaultProps,
   source: void 0,
   vs: null,
   fs: null,
@@ -2231,11 +2575,14 @@ __publicField(Model, "defaultProps", {
   indexBuffer: null,
   attributes: {},
   constantAttributes: {},
+  bindings: {},
+  uniforms: {},
   varyings: [],
   isInstanced: void 0,
   instanceCount: 0,
   vertexCount: 0,
   shaderInputs: void 0,
+  material: void 0,
   pipelineFactory: void 0,
   shaderFactory: void 0,
   transformFeedback: void 0,
@@ -2243,9 +2590,6 @@ __publicField(Model, "defaultProps", {
   debugShaders: void 0,
   disableWarnings: void 0
 });
-function shaderModuleHasUniforms(module2) {
-  return Boolean(module2.uniformTypes && !isObjectEmpty(module2.uniformTypes));
-}
 function getPlatformInfo(device) {
   return {
     type: device.type,
@@ -2256,13 +2600,234 @@ function getPlatformInfo(device) {
     features: device.features
   };
 }
-function isObjectEmpty(obj) {
-  for (const key in obj) {
-    return false;
+
+// dist/material/material.js
+var import_core9 = require("@luma.gl/core");
+
+// dist/material/material-factory.js
+var MATERIAL_BIND_GROUP = 3;
+var MaterialFactory = class {
+  /** Device that creates materials for this schema. */
+  device;
+  /** Shader modules that define the material schema. */
+  modules;
+  _materialBindingNames;
+  _materialModuleNames;
+  constructor(device, props = {}) {
+    this.device = device;
+    this.modules = props.modules || [];
+    const shaderInputs = new ShaderInputs(Object.fromEntries(this.modules.map((module2) => [module2.name, module2])));
+    this._materialBindingNames = getMaterialBindingNames(shaderInputs);
+    this._materialModuleNames = getMaterialModuleNames(shaderInputs);
+  }
+  /** Creates one typed material instance for this factory's schema. */
+  createMaterial(props = {}) {
+    return new Material(this.device, {
+      ...props,
+      factory: this
+    });
   }
-  return true;
+  /** Returns the logical material-owned resource binding names. */
+  getBindingNames() {
+    return Array.from(this._materialBindingNames);
+  }
+  /** Returns `true` when the supplied binding belongs to this material schema. */
+  ownsBinding(bindingName) {
+    if (this._materialBindingNames.has(bindingName)) {
+      return true;
+    }
+    const aliasedModuleName = getModuleNameFromUniformBinding(bindingName);
+    return aliasedModuleName ? this._materialModuleNames.has(aliasedModuleName) : false;
+  }
+  /** Returns `true` when the supplied shader module is owned by this material schema. */
+  ownsModule(moduleName) {
+    return this._materialModuleNames.has(moduleName);
+  }
+  /** Packages resolved material bindings into bind group `3`. */
+  getBindingsByGroup(bindings) {
+    return Object.keys(bindings).length > 0 ? { [MATERIAL_BIND_GROUP]: bindings } : {};
+  }
+};
+function getModuleNameFromUniformBinding(bindingName) {
+  return bindingName.endsWith("Uniforms") ? bindingName.slice(0, -"Uniforms".length) : null;
+}
+function getMaterialBindingNames(shaderInputs) {
+  const bindingNames = /* @__PURE__ */ new Set();
+  for (const module2 of Object.values(shaderInputs.modules)) {
+    for (const binding of module2.bindingLayout || []) {
+      if (binding.group === MATERIAL_BIND_GROUP) {
+        bindingNames.add(binding.name);
+      }
+    }
+  }
+  return bindingNames;
+}
+function getMaterialModuleNames(shaderInputs) {
+  var _a;
+  const moduleNames = /* @__PURE__ */ new Set();
+  for (const module2 of Object.values(shaderInputs.modules)) {
+    if (module2.name && ((_a = module2.bindingLayout) == null ? void 0 : _a.some((binding) => binding.group === MATERIAL_BIND_GROUP && binding.name === module2.name))) {
+      moduleNames.add(module2.name);
+    }
+  }
+  return moduleNames;
 }
 
+// dist/material/material.js
+var Material = class {
+  /** Application-provided identifier. */
+  id;
+  /** Device that owns the material resources. */
+  device;
+  /** Factory that defines the material schema. */
+  factory;
+  /** Shader inputs for the material-owned modules. */
+  shaderInputs;
+  /** Internal binding store including uniform buffers and resource bindings. */
+  bindings = {};
+  _uniformStore;
+  _bindGroupCacheToken = {};
+  constructor(device, props = {}) {
+    var _a, _b;
+    this.id = props.id || uid("material");
+    this.device = device;
+    this.factory = props.factory || new MaterialFactory(device, {
+      modules: props.modules || ((_a = props.shaderInputs) == null ? void 0 : _a.getModules()) || []
+    });
+    const moduleMap = Object.fromEntries((((_b = props.shaderInputs) == null ? void 0 : _b.getModules()) || this.factory.modules).map((module2) => [
+      module2.name,
+      module2
+    ]));
+    this.shaderInputs = props.shaderInputs || new ShaderInputs(moduleMap);
+    this._uniformStore = new import_core9.UniformStore(this.device, this.shaderInputs.modules);
+    for (const [moduleName, module2] of Object.entries(this.shaderInputs.modules)) {
+      if (this.ownsModule(moduleName) && shaderModuleHasUniforms(module2)) {
+        const uniformBuffer = this._uniformStore.getManagedUniformBuffer(moduleName);
+        this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
+      }
+    }
+    this.updateShaderInputs();
+    if (props.bindings) {
+      this._replaceOwnedBindings(props.bindings);
+    }
+  }
+  /** Destroys managed uniform-buffer resources owned by this material. */
+  destroy() {
+    this._uniformStore.destroy();
+  }
+  /** Creates a new material variant with optional structural and uniform overrides. */
+  clone(props = {}) {
+    const material = this.factory.createMaterial({
+      id: props.id,
+      shaderInputs: props.shaderInputs,
+      bindings: {
+        ...this.getResourceBindings(),
+        ...props.bindings
+      }
+    });
+    if (!props.shaderInputs) {
+      material.setProps(this.shaderInputs.getUniformValues());
+    }
+    if (props.moduleProps) {
+      material.setProps(props.moduleProps);
+    }
+    return material;
+  }
+  /** Returns `true` if this material owns the supplied binding name. */
+  ownsBinding(bindingName) {
+    return this.factory.ownsBinding(bindingName);
+  }
+  /** Returns `true` if this material owns the supplied shader module. */
+  ownsModule(moduleName) {
+    return this.factory.ownsModule(moduleName);
+  }
+  /** Updates material uniform/module props in place without changing material identity. */
+  setProps(props) {
+    this.shaderInputs.setProps(props);
+    this.updateShaderInputs();
+  }
+  /** Updates managed uniform buffers and shader-input-owned bindings. */
+  updateShaderInputs() {
+    this._uniformStore.setUniforms(this.shaderInputs.getUniformValues());
+    const didChange = this._setOwnedBindings(this.shaderInputs.getBindingValues());
+    if (didChange) {
+      this._bindGroupCacheToken = {};
+    }
+  }
+  /** Returns the material-owned resource bindings without internal uniform buffers. */
+  getResourceBindings() {
+    const resourceBindings = {};
+    for (const [name, binding] of Object.entries(this.bindings)) {
+      if (!getModuleNameFromUniformBinding(name)) {
+        resourceBindings[name] = binding;
+      }
+    }
+    return resourceBindings;
+  }
+  /** Returns the resolved bindings, including internal uniform buffers and ready textures. */
+  getBindings() {
+    const validBindings = {};
+    const validBindingsMap = validBindings;
+    for (const [name, binding] of Object.entries(this.bindings)) {
+      if (binding instanceof DynamicTexture) {
+        if (binding.isReady) {
+          validBindingsMap[name] = binding.texture;
+        }
+      } else {
+        validBindingsMap[name] = binding;
+      }
+    }
+    return validBindings;
+  }
+  /** Packages resolved material bindings into logical bind group `3`. */
+  getBindingsByGroup() {
+    return this.factory.getBindingsByGroup(this.getBindings());
+  }
+  /** Returns the stable bind-group cache token for the requested bind group. */
+  getBindGroupCacheKey(group) {
+    return group === MATERIAL_BIND_GROUP ? this._bindGroupCacheToken : null;
+  }
+  /** Returns the latest update timestamp across material-owned resources. */
+  getBindingsUpdateTimestamp() {
+    let timestamp = 0;
+    for (const binding of Object.values(this.bindings)) {
+      if (binding instanceof import_core9.TextureView) {
+        timestamp = Math.max(timestamp, binding.texture.updateTimestamp);
+      } else if (binding instanceof import_core9.Buffer || binding instanceof import_core9.Texture) {
+        timestamp = Math.max(timestamp, binding.updateTimestamp);
+      } else if (binding instanceof DynamicTexture) {
+        timestamp = binding.texture ? Math.max(timestamp, binding.texture.updateTimestamp) : Infinity;
+      } else if (!(binding instanceof import_core9.Sampler)) {
+        timestamp = Math.max(timestamp, binding.buffer.updateTimestamp);
+      }
+    }
+    return timestamp;
+  }
+  /** Replaces owned resource bindings and invalidates the material cache identity when needed. */
+  _replaceOwnedBindings(bindings) {
+    const didChange = this._setOwnedBindings(bindings);
+    if (didChange) {
+      this._bindGroupCacheToken = {};
+    }
+  }
+  _setOwnedBindings(bindings) {
+    let didChange = false;
+    for (const [name, binding] of Object.entries(bindings)) {
+      if (binding === void 0) {
+        continue;
+      }
+      if (!this.ownsBinding(name)) {
+        continue;
+      }
+      if (this.bindings[name] !== binding) {
+        this.bindings[name] = binding;
+        didChange = true;
+      }
+    }
+    return didChange;
+  }
+};
+
 // dist/compute/buffer-transform.js
 var import_core10 = require("@luma.gl/core");
 var import_shadertools3 = require("@luma.gl/shadertools");
@@ -2535,9 +3100,9 @@ var Geometry = class {
 var CLIPSPACE_VERTEX_SHADER_WGSL = (
   /* wgsl */
   `struct VertexInputs {
-  @location(0) clipSpacePosition: vec2<f32>,
-  @location(1) texCoord: vec2<f32>,
-  @location(2) coordinate: vec2<f32>  
+  @location(0) clipSpacePositions: vec2<f32>,
+  @location(1) texCoords: vec2<f32>,
+  @location(2) coordinates: vec2<f32>
 }
 
 struct FragmentInputs {
@@ -2550,10 +3115,10 @@ struct FragmentInputs {
 @vertex
 fn vertexMain(inputs: VertexInputs) -> FragmentInputs {
   var outputs: FragmentInputs;
-  outputs.Position = vec4(inputs.clipSpacePosition, 0., 1.);
-  outputs.position = inputs.clipSpacePosition;
-  outputs.coordinate = inputs.coordinate;
-  outputs.uv = inputs.texCoord;
+  outputs.Position = vec4(inputs.clipSpacePositions, 0., 1.);
+  outputs.position = inputs.clipSpacePositions;
+  outputs.coordinate = inputs.coordinates;
+  outputs.uv = inputs.texCoords;
   return outputs;
 }
 `
@@ -2604,22 +3169,31 @@ ${props.source}` };
 };
 
 // dist/models/billboard-texture-model.js
+var backgroundModule = {
+  name: "background",
+  uniformTypes: {
+    scale: "vec2<f32>"
+  }
+};
 var BACKGROUND_FS_WGSL = (
   /* wgsl */
   `@group(0) @binding(0) var backgroundTexture: texture_2d<f32>;
 @group(0) @binding(1) var backgroundTextureSampler: sampler;
+struct backgroundUniforms {
+  scale: vec2<f32>,
+};
+@group(0) @binding(2) var<uniform> background: backgroundUniforms;
 
-fn billboardTexture_getTextureUV(coordinates: vec2<f32>) -> vec2<f32> {
-	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;
-} 
+fn billboardTexture_getTextureUV(uv: vec2<f32>) -> vec2<f32> {
+        let scale: vec2<f32> = background.scale;
+        var position: vec2<f32> = (uv - vec2<f32>(0.5, 0.5)) / scale + vec2<f32>(0.5, 0.5);
+        return position;
+}
 
 @fragment
 fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4<f32> {
-	let position: vec2<f32> = billboardTexture_getTextureUV(inputs.coordinate);
-	return textureSample(backgroundTexture, backgroundTextureSampler, position);
+        let position: vec2<f32> = billboardTexture_getTextureUV(inputs.uv);
+        return textureSample(backgroundTexture, backgroundTextureSampler, position);
 }
 `
 );
@@ -2629,97 +3203,774 @@ var BACKGROUND_FS = (
 precision highp float;
 
 uniform sampler2D backgroundTexture;
+
+layout(std140) uniform backgroundUniforms {
+  vec2 scale;
+} background;
+
+in vec2 coordinate;
 out vec4 fragColor;
 
-vec2 billboardTexture_getTextureUV() {
-  ivec2 iTexSize = textureSize(backgroundTexture, 0);
-  vec2 texSize = vec2(float(iTexSize.x), float(iTexSize.y));
-  vec2 position = gl_FragCoord.xy / texSize;
+vec2 billboardTexture_getTextureUV(vec2 coord) {
+  vec2 position = (coord - 0.5) / background.scale + 0.5;
   return position;
 }
 
 void main(void) {
-  vec2 position = billboardTexture_getTextureUV();
+  vec2 position = billboardTexture_getTextureUV(coordinate);
   fragColor = texture(backgroundTexture, position);
 }
 `
 );
 var BackgroundTextureModel = class extends ClipSpace {
+  backgroundTexture = null;
   constructor(device, props) {
     super(device, {
+      ...props,
       id: props.id || "background-texture-model",
       source: BACKGROUND_FS_WGSL,
       fs: BACKGROUND_FS,
+      modules: [...props.modules || [], backgroundModule],
       parameters: {
         depthWriteEnabled: false,
+        ...props.parameters || {},
         ...props.blend ? {
           blend: true,
           blendColorOperation: "add",
           blendAlphaOperation: "add",
-          blendColorSrcFactor: "one",
-          blendColorDstFactor: "one-minus-src",
-          blendAlphaSrcFactor: "one",
-          blendAlphaDstFactor: "one-minus-src-alpha"
+          blendColorSrcFactor: "one-minus-dst-alpha",
+          blendColorDstFactor: "one",
+          blendAlphaSrcFactor: "one-minus-dst-alpha",
+          blendAlphaDstFactor: "one"
         } : {}
       }
     });
     if (!props.backgroundTexture) {
       throw new Error("BackgroundTextureModel requires a backgroundTexture prop");
     }
-    this.setTexture(props.backgroundTexture);
+    this.setProps(props);
   }
-  setTexture(backgroundTexture) {
-    this.setBindings({
-      backgroundTexture
-    });
+  /** Update the background texture */
+  setProps(props) {
+    const { backgroundTexture } = props;
+    if (backgroundTexture) {
+      this.setBindings({ backgroundTexture });
+      if (backgroundTexture.isReady) {
+        const texture = backgroundTexture instanceof DynamicTexture ? backgroundTexture.texture : backgroundTexture;
+        this.backgroundTexture = texture;
+        this.updateScale(texture);
+      } else {
+        backgroundTexture.ready.then((texture) => {
+          this.backgroundTexture = texture;
+          this.updateScale(texture);
+        });
+      }
+    }
   }
   predraw() {
-    this.shaderInputs.setProps({});
     super.predraw();
   }
+  updateScale(texture) {
+    if (!texture) {
+      this.shaderInputs.setProps({ background: { scale: [1, 1] } });
+      return;
+    }
+    const [screenWidth, screenHeight] = this.device.getCanvasContext().getDrawingBufferSize();
+    const textureWidth = texture.width;
+    const textureHeight = texture.height;
+    const screenAspect = screenWidth / screenHeight;
+    const textureAspect = textureWidth / textureHeight;
+    let scaleX = 1;
+    let scaleY = 1;
+    if (screenAspect > textureAspect) {
+      scaleY = screenAspect / textureAspect;
+    } else {
+      scaleX = textureAspect / screenAspect;
+    }
+    this.shaderInputs.setProps({ background: { scale: [scaleX, scaleY] } });
+  }
 };
 
-// dist/scenegraph/scenegraph-node.js
-var import_core11 = require("@math.gl/core");
-var ScenegraphNode = class {
-  id;
-  matrix = new import_core11.Matrix4();
-  display = true;
-  position = new import_core11.Vector3();
-  rotation = new import_core11.Vector3();
-  scale = new import_core11.Vector3(1, 1, 1);
-  userData = {};
-  props = {};
+// dist/geometries/sphere-geometry.js
+var SphereGeometry = class extends Geometry {
   constructor(props = {}) {
-    const { id } = props;
-    this.id = id || uid(this.constructor.name);
-    this._setScenegraphNodeProps(props);
-  }
-  getBounds() {
-    return null;
-  }
-  destroy() {
-  }
-  /** @deprecated use .destroy() */
-  delete() {
-    this.destroy();
-  }
-  setProps(props) {
-    this._setScenegraphNodeProps(props);
-    return this;
+    const { id = uid("sphere-geometry") } = props;
+    const { indices, attributes } = tesselateSphere(props);
+    super({
+      ...props,
+      id,
+      topology: "triangle-list",
+      indices,
+      attributes: { ...attributes, ...props.attributes }
+    });
+  }
+};
+function tesselateSphere(props) {
+  const { nlat = 10, nlong = 10 } = props;
+  const startLat = 0;
+  const endLat = Math.PI;
+  const latRange = endLat - startLat;
+  const startLong = 0;
+  const endLong = 2 * Math.PI;
+  const longRange = endLong - startLong;
+  const numVertices = (nlat + 1) * (nlong + 1);
+  const radius = (n1, n2, n3, u, v) => props.radius || 1;
+  const positions = new Float32Array(numVertices * 3);
+  const normals = new Float32Array(numVertices * 3);
+  const texCoords = new Float32Array(numVertices * 2);
+  const IndexType = numVertices > 65535 ? Uint32Array : Uint16Array;
+  const indices = new IndexType(nlat * nlong * 6);
+  for (let y = 0; y <= nlat; y++) {
+    for (let x = 0; x <= nlong; x++) {
+      const u = x / nlong;
+      const v = y / nlat;
+      const index = x + y * (nlong + 1);
+      const i2 = index * 2;
+      const i3 = index * 3;
+      const theta = longRange * u;
+      const phi = latRange * v;
+      const sinTheta = Math.sin(theta);
+      const cosTheta = Math.cos(theta);
+      const sinPhi = Math.sin(phi);
+      const cosPhi = Math.cos(phi);
+      const ux = cosTheta * sinPhi;
+      const uy = cosPhi;
+      const uz = sinTheta * sinPhi;
+      const r = radius(ux, uy, uz, u, v);
+      positions[i3 + 0] = r * ux;
+      positions[i3 + 1] = r * uy;
+      positions[i3 + 2] = r * uz;
+      normals[i3 + 0] = ux;
+      normals[i3 + 1] = uy;
+      normals[i3 + 2] = uz;
+      texCoords[i2 + 0] = u;
+      texCoords[i2 + 1] = 1 - v;
+    }
+  }
+  const numVertsAround = nlong + 1;
+  for (let x = 0; x < nlong; x++) {
+    for (let y = 0; y < nlat; y++) {
+      const index = (x * nlat + y) * 6;
+      indices[index + 0] = y * numVertsAround + x;
+      indices[index + 1] = y * numVertsAround + x + 1;
+      indices[index + 2] = (y + 1) * numVertsAround + x;
+      indices[index + 3] = (y + 1) * numVertsAround + x;
+      indices[index + 4] = y * numVertsAround + x + 1;
+      indices[index + 5] = (y + 1) * numVertsAround + x + 1;
+    }
+  }
+  return {
+    indices: { size: 1, value: indices },
+    attributes: {
+      POSITION: { size: 3, value: positions },
+      NORMAL: { size: 3, value: normals },
+      TEXCOORD_0: { size: 2, value: texCoords }
+    }
+  };
+}
+
+// dist/models/light-model-utils.js
+var import_core11 = require("@math.gl/core");
+var DEFAULT_POINT_LIGHT_RADIUS_FACTOR = 0.02;
+var DEFAULT_SPOT_LIGHT_LENGTH_FACTOR = 0.12;
+var DEFAULT_DIRECTIONAL_LIGHT_LENGTH_FACTOR = 0.15;
+var DEFAULT_DIRECTIONAL_LIGHT_RADIUS_FACTOR = 0.2;
+var DEFAULT_DIRECTION_FALLBACK = [0, 1, 0];
+var DEFAULT_LIGHT_COLOR = [255, 255, 255];
+var DEFAULT_MARKER_SCALE = 1;
+var DIRECTIONAL_ANCHOR_DISTANCE_FACTOR = 0.35;
+var LIGHT_COLOR_FACTOR = 255;
+var MIN_SCENE_SCALE = 1;
+var SPOTLIGHT_OUTER_CONE_EPSILON = 0.01;
+var LIGHT_MARKER_PARAMETERS = {
+  depthCompare: "less-equal",
+  depthWriteEnabled: false,
+  cullMode: "none"
+};
+var INSTANCE_BUFFER_LAYOUT = [
+  { name: "instancePosition", format: "float32x3", stepMode: "instance" },
+  { name: "instanceDirection", format: "float32x3", stepMode: "instance" },
+  { name: "instanceScale", format: "float32x3", stepMode: "instance" },
+  { name: "instanceColor", format: "float32x4", stepMode: "instance" }
+];
+var lightMarker = {
+  name: "lightMarker",
+  props: {},
+  uniforms: {},
+  uniformTypes: {
+    viewProjectionMatrix: "mat4x4<f32>"
+  }
+};
+var CENTERED_LOCAL_POSITION_WGSL = "inputs.positions * inputs.instanceScale";
+var APEX_LOCAL_POSITION_WGSL = "vec3<f32>(inputs.positions.x * inputs.instanceScale.x, (inputs.positions.y - 0.5) * inputs.instanceScale.y, inputs.positions.z * inputs.instanceScale.z)";
+var CENTERED_LOCAL_POSITION_GLSL = "positions * instanceScale";
+var APEX_LOCAL_POSITION_GLSL = "vec3(positions.x * instanceScale.x, (positions.y - 0.5) * instanceScale.y, positions.z * instanceScale.z)";
+var BaseLightModel = class extends Model {
+  lightModelProps;
+  _instanceData;
+  _managedBuffers;
+  buildInstanceData;
+  sizePropNames;
+  constructor(device, props, options) {
+    const instanceData = options.buildInstanceData(props);
+    const managedBuffers = createManagedInstanceBuffers(device, props.id || options.idPrefix, instanceData);
+    const shaderInputs = new ShaderInputs({ lightMarker });
+    shaderInputs.setProps({
+      lightMarker: { viewProjectionMatrix: createViewProjectionMatrix(props) }
+    });
+    const { source: source3, vs: vs3, fs: fs3 } = getLightMarkerShaders(options.anchorMode);
+    const modelProps = props;
+    super(device, {
+      ...modelProps,
+      id: props.id || options.idPrefix,
+      source: source3,
+      vs: vs3,
+      fs: fs3,
+      geometry: options.geometry,
+      shaderInputs,
+      bufferLayout: [...INSTANCE_BUFFER_LAYOUT],
+      attributes: managedBuffers,
+      instanceCount: instanceData.instanceCount,
+      parameters: mergeLightMarkerParameters(props.parameters)
+    });
+    this.lightModelProps = props;
+    this._instanceData = instanceData;
+    this._managedBuffers = managedBuffers;
+    this.buildInstanceData = options.buildInstanceData;
+    this.sizePropNames = options.sizePropNames;
+  }
+  destroy() {
+    super.destroy();
+    destroyManagedInstanceBuffers(this._managedBuffers);
+    this._managedBuffers = {};
+  }
+  draw(renderPass) {
+    if (this.instanceCount === 0) {
+      return true;
+    }
+    return super.draw(renderPass);
+  }
+  setProps(props) {
+    this.lightModelProps = { ...this.lightModelProps, ...props };
+    if (props.parameters) {
+      this.setParameters(mergeLightMarkerParameters(this.lightModelProps.parameters));
+    }
+    if ("viewMatrix" in props || "projectionMatrix" in props) {
+      this.shaderInputs.setProps({
+        lightMarker: { viewProjectionMatrix: createViewProjectionMatrix(this.lightModelProps) }
+      });
+      this.setNeedsRedraw("lightMarker camera");
+    }
+    if (shouldRebuildInstanceData(props, this.sizePropNames)) {
+      this.rebuildInstanceData();
+    }
+  }
+  rebuildInstanceData() {
+    const nextInstanceData = this.buildInstanceData(this.lightModelProps);
+    const nextManagedBuffers = createManagedInstanceBuffers(this.device, this.id, nextInstanceData);
+    this.setAttributes(nextManagedBuffers);
+    this.setInstanceCount(nextInstanceData.instanceCount);
+    destroyManagedInstanceBuffers(this._managedBuffers);
+    this._managedBuffers = nextManagedBuffers;
+    this._instanceData = nextInstanceData;
+  }
+};
+function buildPointLightInstanceData(props) {
+  const pointLights = getPointLights(props.lights);
+  const context = getLightMarkerContext(props);
+  const pointLightRadius = props.pointLightRadius ?? DEFAULT_POINT_LIGHT_RADIUS_FACTOR * context.sceneScale * context.markerScale;
+  return createLightMarkerInstanceData(pointLights.length, (light, _index) => ({
+    color: getDisplayColor(light),
+    direction: DEFAULT_DIRECTION_FALLBACK,
+    position: light.position,
+    scale: [pointLightRadius, pointLightRadius, pointLightRadius]
+  }), pointLights);
+}
+function buildSpotLightInstanceData(props) {
+  const spotLights = getSpotLights(props.lights);
+  const context = getLightMarkerContext(props);
+  const spotLightLength = props.spotLightLength ?? DEFAULT_SPOT_LIGHT_LENGTH_FACTOR * context.sceneScale * context.markerScale;
+  return createLightMarkerInstanceData(spotLights.length, (light, _index) => {
+    const outerConeAngle = clamp(light.outerConeAngle ?? Math.PI / 4, 0, Math.PI / 2 - SPOTLIGHT_OUTER_CONE_EPSILON);
+    const radius = Math.tan(outerConeAngle) * spotLightLength;
+    return {
+      color: getDisplayColor(light),
+      direction: normalizeDirection(light.direction),
+      position: light.position,
+      scale: [radius, spotLightLength, radius]
+    };
+  }, spotLights);
+}
+function buildDirectionalLightInstanceData(props) {
+  const directionalLights = getDirectionalLights(props.lights);
+  const context = getLightMarkerContext(props);
+  const directionalLightLength = props.directionalLightLength ?? DEFAULT_DIRECTIONAL_LIGHT_LENGTH_FACTOR * context.sceneScale * context.markerScale;
+  const directionalLightRadius = directionalLightLength * DEFAULT_DIRECTIONAL_LIGHT_RADIUS_FACTOR;
+  return createLightMarkerInstanceData(directionalLights.length, (light, _index) => {
+    const direction = normalizeDirection(light.direction);
+    const position = [
+      context.sceneCenter[0] - direction[0] * context.sceneScale * DIRECTIONAL_ANCHOR_DISTANCE_FACTOR,
+      context.sceneCenter[1] - direction[1] * context.sceneScale * DIRECTIONAL_ANCHOR_DISTANCE_FACTOR,
+      context.sceneCenter[2] - direction[2] * context.sceneScale * DIRECTIONAL_ANCHOR_DISTANCE_FACTOR
+    ];
+    return {
+      color: getDisplayColor(light),
+      direction,
+      position,
+      scale: [directionalLightRadius, directionalLightLength, directionalLightRadius]
+    };
+  }, directionalLights);
+}
+function getPointLights(lights) {
+  return lights.filter((light) => light.type === "point");
+}
+function getSpotLights(lights) {
+  return lights.filter((light) => light.type === "spot");
+}
+function getDirectionalLights(lights) {
+  return lights.filter((light) => light.type === "directional");
+}
+function getLightMarkerContext(props) {
+  const bounds = getSceneBounds(props.lights, props.bounds);
+  const sceneCenter = [
+    (bounds[0][0] + bounds[1][0]) / 2,
+    (bounds[0][1] + bounds[1][1]) / 2,
+    (bounds[0][2] + bounds[1][2]) / 2
+  ];
+  const sceneScale = Math.max(Math.hypot(bounds[1][0] - bounds[0][0], bounds[1][1] - bounds[0][1], bounds[1][2] - bounds[0][2]), MIN_SCENE_SCALE);
+  return {
+    bounds,
+    markerScale: Math.max(props.markerScale ?? DEFAULT_MARKER_SCALE, 0),
+    sceneCenter,
+    sceneScale
+  };
+}
+function getDisplayColor(light) {
+  const color = light.color || DEFAULT_LIGHT_COLOR;
+  const intensity = Math.max(light.intensity ?? 1, 0);
+  const brightness = clamp(0.35 + 0.3 * Math.log10(intensity + 1), 0.35, 1);
+  return [
+    clamp(color[0] / LIGHT_COLOR_FACTOR, 0, 1) * brightness,
+    clamp(color[1] / LIGHT_COLOR_FACTOR, 0, 1) * brightness,
+    clamp(color[2] / LIGHT_COLOR_FACTOR, 0, 1) * brightness,
+    1
+  ];
+}
+function normalizeDirection(direction) {
+  const [x, y, z] = direction || DEFAULT_DIRECTION_FALLBACK;
+  const length = Math.hypot(x, y, z);
+  if (length === 0) {
+    return [...DEFAULT_DIRECTION_FALLBACK];
+  }
+  return [x / length, y / length, z / length];
+}
+function createLightMarkerInstanceData(instanceCount, getInstance, lights = []) {
+  const instancePositions = new Float32Array(instanceCount * 3);
+  const instanceDirections = new Float32Array(instanceCount * 3);
+  const instanceScales = new Float32Array(instanceCount * 3);
+  const instanceColors = new Float32Array(instanceCount * 4);
+  for (const [index, light] of lights.entries()) {
+    const instance = getInstance(light, index);
+    instancePositions.set(instance.position, index * 3);
+    instanceDirections.set(instance.direction, index * 3);
+    instanceScales.set(instance.scale, index * 3);
+    instanceColors.set(instance.color, index * 4);
+  }
+  return {
+    instanceCount,
+    instancePositions,
+    instanceDirections,
+    instanceScales,
+    instanceColors
+  };
+}
+function getSceneBounds(lights, bounds) {
+  if (bounds) {
+    return cloneBounds(bounds);
+  }
+  const positions = [
+    ...getPointLights(lights).map((light) => light.position),
+    ...getSpotLights(lights).map((light) => light.position)
+  ];
+  if (positions.length === 0) {
+    return [
+      [-0.5, -0.5, -0.5],
+      [0.5, 0.5, 0.5]
+    ];
+  }
+  const minBounds = [...positions[0]];
+  const maxBounds = [...positions[0]];
+  for (const position of positions.slice(1)) {
+    minBounds[0] = Math.min(minBounds[0], position[0]);
+    minBounds[1] = Math.min(minBounds[1], position[1]);
+    minBounds[2] = Math.min(minBounds[2], position[2]);
+    maxBounds[0] = Math.max(maxBounds[0], position[0]);
+    maxBounds[1] = Math.max(maxBounds[1], position[1]);
+    maxBounds[2] = Math.max(maxBounds[2], position[2]);
+  }
+  return [minBounds, maxBounds];
+}
+function cloneBounds(bounds) {
+  return [[...bounds[0]], [...bounds[1]]];
+}
+function createManagedInstanceBuffers(device, idPrefix, instanceData) {
+  return {
+    instancePosition: device.createBuffer({
+      id: `${idPrefix}-instance-position`,
+      data: getBufferDataOrPlaceholder(instanceData.instancePositions, 3)
+    }),
+    instanceDirection: device.createBuffer({
+      id: `${idPrefix}-instance-direction`,
+      data: getBufferDataOrPlaceholder(instanceData.instanceDirections, 3)
+    }),
+    instanceScale: device.createBuffer({
+      id: `${idPrefix}-instance-scale`,
+      data: getBufferDataOrPlaceholder(instanceData.instanceScales, 3)
+    }),
+    instanceColor: device.createBuffer({
+      id: `${idPrefix}-instance-color`,
+      data: getBufferDataOrPlaceholder(instanceData.instanceColors, 4)
+    })
+  };
+}
+function getBufferDataOrPlaceholder(data, size) {
+  return data.length > 0 ? data : new Float32Array(size);
+}
+function destroyManagedInstanceBuffers(managedBuffers) {
+  for (const buffer of Object.values(managedBuffers)) {
+    buffer == null ? void 0 : buffer.destroy();
+  }
+}
+function createViewProjectionMatrix(props) {
+  return new import_core11.Matrix4(props.projectionMatrix).multiplyRight(props.viewMatrix);
+}
+function shouldRebuildInstanceData(props, sizePropNames) {
+  if ("lights" in props || "bounds" in props || "markerScale" in props) {
+    return true;
+  }
+  return sizePropNames.some((sizePropName) => sizePropName in props);
+}
+function mergeLightMarkerParameters(parameters) {
+  return {
+    ...LIGHT_MARKER_PARAMETERS,
+    ...parameters || {}
+  };
+}
+function getLightMarkerShaders(anchorMode) {
+  const localPositionWGSL = anchorMode === "apex" ? APEX_LOCAL_POSITION_WGSL : CENTERED_LOCAL_POSITION_WGSL;
+  const localPositionGLSL = anchorMode === "apex" ? APEX_LOCAL_POSITION_GLSL : CENTERED_LOCAL_POSITION_GLSL;
+  return {
+    source: `struct lightMarkerUniforms {
+  viewProjectionMatrix: mat4x4<f32>,
+};
+
+@binding(0) @group(0) var<uniform> lightMarker : lightMarkerUniforms;
+
+struct VertexInputs {
+  @location(0) positions : vec3<f32>,
+  @location(1) instancePosition : vec3<f32>,
+  @location(2) instanceDirection : vec3<f32>,
+  @location(3) instanceScale : vec3<f32>,
+  @location(4) instanceColor : vec4<f32>,
+};
+
+struct FragmentInputs {
+  @builtin(position) Position : vec4<f32>,
+  @location(0) color : vec4<f32>,
+};
+
+fn lightMarker_rotate(localPosition: vec3<f32>, direction: vec3<f32>) -> vec3<f32> {
+  let forward = normalize(direction);
+  var helperAxis = vec3<f32>(0.0, 1.0, 0.0);
+  if (abs(forward.y) > 0.999) {
+    helperAxis = vec3<f32>(1.0, 0.0, 0.0);
+  }
+
+  let tangent = normalize(cross(helperAxis, forward));
+  let bitangent = cross(forward, tangent);
+  return tangent * localPosition.x + forward * localPosition.y + bitangent * localPosition.z;
+}
+
+@vertex
+fn vertexMain(inputs: VertexInputs) -> FragmentInputs {
+  var outputs : FragmentInputs;
+  let localPosition = ${localPositionWGSL};
+  let worldPosition = inputs.instancePosition + lightMarker_rotate(localPosition, inputs.instanceDirection);
+  outputs.Position = lightMarker.viewProjectionMatrix * vec4<f32>(worldPosition, 1.0);
+  outputs.color = inputs.instanceColor;
+  return outputs;
+}
+
+@fragment
+fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4<f32> {
+  return inputs.color;
+}
+`,
+    vs: `#version 300 es
+
+in vec3 positions;
+in vec3 instancePosition;
+in vec3 instanceDirection;
+in vec3 instanceScale;
+in vec4 instanceColor;
+
+layout(std140) uniform lightMarkerUniforms {
+  mat4 viewProjectionMatrix;
+} lightMarker;
+
+out vec4 vColor;
+
+vec3 lightMarker_rotate(vec3 localPosition, vec3 direction) {
+  vec3 forward = normalize(direction);
+  vec3 helperAxis = abs(forward.y) > 0.999 ? vec3(1.0, 0.0, 0.0) : vec3(0.0, 1.0, 0.0);
+  vec3 tangent = normalize(cross(helperAxis, forward));
+  vec3 bitangent = cross(forward, tangent);
+  return tangent * localPosition.x + forward * localPosition.y + bitangent * localPosition.z;
+}
+
+void main(void) {
+  vec3 localPosition = ${localPositionGLSL};
+  vec3 worldPosition = instancePosition + lightMarker_rotate(localPosition, instanceDirection);
+  gl_Position = lightMarker.viewProjectionMatrix * vec4(worldPosition, 1.0);
+  vColor = instanceColor;
+}
+`,
+    fs: `#version 300 es
+precision highp float;
+
+in vec4 vColor;
+out vec4 fragColor;
+
+void main(void) {
+  fragColor = vColor;
+}
+`
+  };
+}
+function clamp(value, minValue, maxValue) {
+  return Math.min(maxValue, Math.max(minValue, value));
+}
+
+// dist/models/point-light-model.js
+var POINT_LIGHT_GEOMETRY = new SphereGeometry({
+  nlat: 8,
+  nlong: 12,
+  radius: 1
+});
+var PointLightModel = class extends BaseLightModel {
+  constructor(device, props) {
+    super(device, props, {
+      anchorMode: "centered",
+      buildInstanceData: buildPointLightInstanceData,
+      geometry: POINT_LIGHT_GEOMETRY,
+      idPrefix: "point-light-model",
+      sizePropNames: ["pointLightRadius"]
+    });
+  }
+};
+
+// dist/geometries/truncated-cone-geometry.js
+var INDEX_OFFSETS = {
+  x: [2, 0, 1],
+  y: [0, 1, 2],
+  z: [1, 2, 0]
+};
+var TruncatedConeGeometry = class extends Geometry {
+  constructor(props = {}) {
+    const { id = uid("truncated-code-geometry") } = props;
+    const { indices, attributes } = tesselateTruncatedCone(props);
+    super({
+      ...props,
+      id,
+      topology: "triangle-list",
+      indices,
+      attributes: {
+        POSITION: { size: 3, value: attributes.POSITION },
+        NORMAL: { size: 3, value: attributes.NORMAL },
+        TEXCOORD_0: { size: 2, value: attributes.TEXCOORD_0 },
+        ...props.attributes
+      }
+    });
+  }
+};
+function tesselateTruncatedCone(props = {}) {
+  const { bottomRadius = 0, topRadius = 0, height = 1, nradial = 10, nvertical = 10, verticalAxis = "y", topCap = false, bottomCap = false } = props;
+  const extra = (topCap ? 2 : 0) + (bottomCap ? 2 : 0);
+  const numVertices = (nradial + 1) * (nvertical + 1 + extra);
+  const slant = Math.atan2(bottomRadius - topRadius, height);
+  const msin = Math.sin;
+  const mcos = Math.cos;
+  const mpi = Math.PI;
+  const cosSlant = mcos(slant);
+  const sinSlant = msin(slant);
+  const start = topCap ? -2 : 0;
+  const end = nvertical + (bottomCap ? 2 : 0);
+  const vertsAroundEdge = nradial + 1;
+  const indices = new Uint16Array(nradial * (nvertical + extra) * 6);
+  const indexOffset = INDEX_OFFSETS[verticalAxis];
+  const positions = new Float32Array(numVertices * 3);
+  const normals = new Float32Array(numVertices * 3);
+  const texCoords = new Float32Array(numVertices * 2);
+  let i3 = 0;
+  let i2 = 0;
+  for (let i = start; i <= end; i++) {
+    let v = i / nvertical;
+    let y = height * v;
+    let ringRadius;
+    if (i < 0) {
+      y = 0;
+      v = 1;
+      ringRadius = bottomRadius;
+    } else if (i > nvertical) {
+      y = height;
+      v = 1;
+      ringRadius = topRadius;
+    } else {
+      ringRadius = bottomRadius + (topRadius - bottomRadius) * (i / nvertical);
+    }
+    if (i === -2 || i === nvertical + 2) {
+      ringRadius = 0;
+      v = 0;
+    }
+    y -= height / 2;
+    for (let j = 0; j < vertsAroundEdge; j++) {
+      const sin = msin(j * mpi * 2 / nradial);
+      const cos = mcos(j * mpi * 2 / nradial);
+      positions[i3 + indexOffset[0]] = sin * ringRadius;
+      positions[i3 + indexOffset[1]] = y;
+      positions[i3 + indexOffset[2]] = cos * ringRadius;
+      normals[i3 + indexOffset[0]] = i < 0 || i > nvertical ? 0 : sin * cosSlant;
+      normals[i3 + indexOffset[1]] = i < 0 ? -1 : i > nvertical ? 1 : sinSlant;
+      normals[i3 + indexOffset[2]] = i < 0 || i > nvertical ? 0 : cos * cosSlant;
+      texCoords[i2 + 0] = j / nradial;
+      texCoords[i2 + 1] = v;
+      i2 += 2;
+      i3 += 3;
+    }
+  }
+  for (let i = 0; i < nvertical + extra; i++) {
+    for (let j = 0; j < nradial; j++) {
+      const index = (i * nradial + j) * 6;
+      indices[index + 0] = vertsAroundEdge * (i + 0) + 0 + j;
+      indices[index + 1] = vertsAroundEdge * (i + 0) + 1 + j;
+      indices[index + 2] = vertsAroundEdge * (i + 1) + 1 + j;
+      indices[index + 3] = vertsAroundEdge * (i + 0) + 0 + j;
+      indices[index + 4] = vertsAroundEdge * (i + 1) + 1 + j;
+      indices[index + 5] = vertsAroundEdge * (i + 1) + 0 + j;
+    }
+  }
+  return {
+    indices,
+    attributes: {
+      POSITION: positions,
+      NORMAL: normals,
+      TEXCOORD_0: texCoords
+    }
+  };
+}
+
+// dist/geometries/cone-geometry.js
+var ConeGeometry = class extends TruncatedConeGeometry {
+  constructor(props = {}) {
+    const { id = uid("cone-geometry"), radius = 1, cap = true } = props;
+    super({
+      ...props,
+      id,
+      topRadius: 0,
+      topCap: Boolean(cap),
+      bottomCap: Boolean(cap),
+      bottomRadius: radius
+    });
+  }
+};
+
+// dist/models/spot-light-model.js
+var SPOT_LIGHT_GEOMETRY = new ConeGeometry({
+  cap: true,
+  nradial: 16,
+  nvertical: 1,
+  radius: 1
+});
+var SpotLightModel = class extends BaseLightModel {
+  constructor(device, props) {
+    super(device, props, {
+      anchorMode: "apex",
+      buildInstanceData: buildSpotLightInstanceData,
+      geometry: SPOT_LIGHT_GEOMETRY,
+      idPrefix: "spot-light-model",
+      sizePropNames: ["spotLightLength"]
+    });
+  }
+};
+
+// dist/models/directional-light-model.js
+var DIRECTIONAL_LIGHT_GEOMETRY = new ConeGeometry({
+  cap: true,
+  nradial: 12,
+  nvertical: 1,
+  radius: 1
+});
+var DirectionalLightModel = class extends BaseLightModel {
+  constructor(device, props) {
+    super(device, props, {
+      anchorMode: "apex",
+      buildInstanceData: buildDirectionalLightInstanceData,
+      geometry: DIRECTIONAL_LIGHT_GEOMETRY,
+      idPrefix: "directional-light-model",
+      sizePropNames: ["directionalLightLength"]
+    });
+  }
+};
+
+// dist/scenegraph/scenegraph-node.js
+var import_core12 = require("@math.gl/core");
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message);
+  }
+}
+var ScenegraphNode = class {
+  id;
+  matrix = new import_core12.Matrix4();
+  display = true;
+  position = new import_core12.Vector3();
+  rotation = new import_core12.Vector3();
+  scale = new import_core12.Vector3(1, 1, 1);
+  userData = {};
+  props = {};
+  constructor(props = {}) {
+    const { id } = props;
+    this.id = id || uid(this.constructor.name);
+    this._setScenegraphNodeProps(props);
+  }
+  getBounds() {
+    return null;
+  }
+  destroy() {
+  }
+  /** @deprecated use .destroy() */
+  delete() {
+    this.destroy();
+  }
+  setProps(props) {
+    this._setScenegraphNodeProps(props);
+    return this;
   }
   toString() {
     return `{type: ScenegraphNode, id: ${this.id})}`;
   }
   setPosition(position) {
+    assert(position.length === 3, "setPosition requires vector argument");
     this.position = position;
     return this;
   }
   setRotation(rotation) {
+    assert(rotation.length === 3 || rotation.length === 4, "setRotation requires vector argument");
     this.rotation = rotation;
     return this;
   }
   setScale(scale) {
+    assert(scale.length === 3, "setScale requires vector argument");
     this.scale = scale;
     return this;
   }
@@ -2747,17 +3998,18 @@ var ScenegraphNode = class {
     return this;
   }
   updateMatrix() {
-    const pos = this.position;
-    const rot = this.rotation;
-    const scale = this.scale;
     this.matrix.identity();
-    this.matrix.translate(pos);
-    this.matrix.rotateXYZ(rot);
-    this.matrix.scale(scale);
+    this.matrix.translate(this.position);
+    if (this.rotation.length === 4) {
+      const rotationMatrix = new import_core12.Matrix4().fromQuaternion(this.rotation);
+      this.matrix.multiplyRight(rotationMatrix);
+    } else {
+      this.matrix.rotateXYZ(this.rotation);
+    }
+    this.matrix.scale(this.scale);
     return this;
   }
-  update(options = {}) {
-    const { position, rotation, scale } = options;
+  update({ position, rotation, scale } = {}) {
     if (position) {
       this.setPosition(position);
     }
@@ -2772,7 +4024,7 @@ var ScenegraphNode = class {
   }
   getCoordinateUniforms(viewMatrix, modelMatrix) {
     modelMatrix = modelMatrix || this.matrix;
-    const worldMatrix = new import_core11.Matrix4(viewMatrix).multiplyRight(modelMatrix);
+    const worldMatrix = new import_core12.Matrix4(viewMatrix).multiplyRight(modelMatrix);
     const worldInverse = worldMatrix.invert();
     const worldInverseTranspose = worldInverse.transpose();
     return {
@@ -2807,16 +4059,17 @@ var ScenegraphNode = class {
     }
     */
   _setScenegraphNodeProps(props) {
-    if ("position" in props) {
+    if (props == null ? void 0 : props.position) {
       this.setPosition(props.position);
     }
-    if ("rotation" in props) {
+    if (props == null ? void 0 : props.rotation) {
       this.setRotation(props.rotation);
     }
-    if ("scale" in props) {
+    if (props == null ? void 0 : props.scale) {
       this.setScale(props.scale);
     }
-    if ("matrix" in props) {
+    this.updateMatrix();
+    if (props == null ? void 0 : props.matrix) {
       this.setMatrix(props.matrix);
     }
     Object.assign(this.props, props);
@@ -2824,14 +4077,14 @@ var ScenegraphNode = class {
 };
 
 // dist/scenegraph/group-node.js
-var import_core12 = require("@math.gl/core");
-var import_core13 = require("@luma.gl/core");
+var import_core13 = require("@math.gl/core");
+var import_core14 = require("@luma.gl/core");
 var GroupNode = class extends ScenegraphNode {
   children;
   constructor(props = {}) {
     props = Array.isArray(props) ? { children: props } : props;
     const { children = [] } = props;
-    import_core13.log.assert(children.every((child) => child instanceof ScenegraphNode), "every child must an instance of ScenegraphNode");
+    import_core14.log.assert(children.every((child) => child instanceof ScenegraphNode), "every child must an instance of ScenegraphNode");
     super(props);
     this.children = children;
   }
@@ -2846,12 +4099,12 @@ var GroupNode = class extends ScenegraphNode {
         return;
       }
       const [min, max] = bounds;
-      const center = new import_core12.Vector3(min).add(max).divide([2, 2, 2]);
+      const center = new import_core13.Vector3(min).add(max).divide([2, 2, 2]);
       worldMatrix.transformAsPoint(center, center);
-      const halfSize = new import_core12.Vector3(max).subtract(min).divide([2, 2, 2]);
+      const halfSize = new import_core13.Vector3(max).subtract(min).divide([2, 2, 2]);
       worldMatrix.transformAsVector(halfSize, halfSize);
       for (let v = 0; v < 8; v++) {
-        const position = new import_core12.Vector3(v & 1 ? -1 : 1, v & 2 ? -1 : 1, v & 4 ? -1 : 1).multiply(halfSize).add(center);
+        const position = new import_core13.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]);
@@ -2864,190 +4117,86 @@ var GroupNode = class extends ScenegraphNode {
     return result;
   }
   destroy() {
-    this.children.forEach((child) => child.destroy());
-    this.removeAll();
-    super.destroy();
-  }
-  // Unpacks arrays and nested arrays of children
-  add(...children) {
-    for (const child of children) {
-      if (Array.isArray(child)) {
-        this.add(...child);
-      } else {
-        this.children.push(child);
-      }
-    }
-    return this;
-  }
-  remove(child) {
-    const children = this.children;
-    const indexOf = children.indexOf(child);
-    if (indexOf > -1) {
-      children.splice(indexOf, 1);
-    }
-    return this;
-  }
-  removeAll() {
-    this.children = [];
-    return this;
-  }
-  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 });
-      } else {
-        visitor(child, { worldMatrix: modelMatrix });
-      }
-    }
-  }
-};
-
-// dist/scenegraph/model-node.js
-var ModelNode = class extends ScenegraphNode {
-  model;
-  bounds = null;
-  managedResources;
-  // TODO - is this used? override callbacks to make sure we call them with this
-  // onBeforeRender = null;
-  // onAfterRender = null;
-  // AfterRender = null;
-  constructor(props) {
-    super(props);
-    this.model = props.model;
-    this.managedResources = props.managedResources || [];
-    this.bounds = props.bounds || null;
-    this.setProps(props);
-  }
-  destroy() {
-    if (this.model) {
-      this.model.destroy();
-      this.model = null;
-    }
-    this.managedResources.forEach((resource) => resource.destroy());
-    this.managedResources = [];
-  }
-  getBounds() {
-    return this.bounds;
-  }
-  // Expose model methods
-  draw(renderPass) {
-    return this.model.draw(renderPass);
-  }
-};
-
-// dist/geometries/truncated-cone-geometry.js
-var INDEX_OFFSETS = {
-  x: [2, 0, 1],
-  y: [0, 1, 2],
-  z: [1, 2, 0]
-};
-var TruncatedConeGeometry = class extends Geometry {
-  constructor(props = {}) {
-    const { id = uid("truncated-code-geometry") } = props;
-    const { indices, attributes } = tesselateTruncatedCone(props);
-    super({
-      ...props,
-      id,
-      topology: "triangle-list",
-      indices,
-      attributes: {
-        POSITION: { size: 3, value: attributes.POSITION },
-        NORMAL: { size: 3, value: attributes.NORMAL },
-        TEXCOORD_0: { size: 2, value: attributes.TEXCOORD_0 },
-        ...props.attributes
-      }
-    });
-  }
-};
-function tesselateTruncatedCone(props = {}) {
-  const { bottomRadius = 0, topRadius = 0, height = 1, nradial = 10, nvertical = 10, verticalAxis = "y", topCap = false, bottomCap = false } = props;
-  const extra = (topCap ? 2 : 0) + (bottomCap ? 2 : 0);
-  const numVertices = (nradial + 1) * (nvertical + 1 + extra);
-  const slant = Math.atan2(bottomRadius - topRadius, height);
-  const msin = Math.sin;
-  const mcos = Math.cos;
-  const mpi = Math.PI;
-  const cosSlant = mcos(slant);
-  const sinSlant = msin(slant);
-  const start = topCap ? -2 : 0;
-  const end = nvertical + (bottomCap ? 2 : 0);
-  const vertsAroundEdge = nradial + 1;
-  const indices = new Uint16Array(nradial * (nvertical + extra) * 6);
-  const indexOffset = INDEX_OFFSETS[verticalAxis];
-  const positions = new Float32Array(numVertices * 3);
-  const normals = new Float32Array(numVertices * 3);
-  const texCoords = new Float32Array(numVertices * 2);
-  let i3 = 0;
-  let i2 = 0;
-  for (let i = start; i <= end; i++) {
-    let v = i / nvertical;
-    let y = height * v;
-    let ringRadius;
-    if (i < 0) {
-      y = 0;
-      v = 1;
-      ringRadius = bottomRadius;
-    } else if (i > nvertical) {
-      y = height;
-      v = 1;
-      ringRadius = topRadius;
-    } else {
-      ringRadius = bottomRadius + (topRadius - bottomRadius) * (i / nvertical);
-    }
-    if (i === -2 || i === nvertical + 2) {
-      ringRadius = 0;
-      v = 0;
-    }
-    y -= height / 2;
-    for (let j = 0; j < vertsAroundEdge; j++) {
-      const sin = msin(j * mpi * 2 / nradial);
-      const cos = mcos(j * mpi * 2 / nradial);
-      positions[i3 + indexOffset[0]] = sin * ringRadius;
-      positions[i3 + indexOffset[1]] = y;
-      positions[i3 + indexOffset[2]] = cos * ringRadius;
-      normals[i3 + indexOffset[0]] = i < 0 || i > nvertical ? 0 : sin * cosSlant;
-      normals[i3 + indexOffset[1]] = i < 0 ? -1 : i > nvertical ? 1 : sinSlant;
-      normals[i3 + indexOffset[2]] = i < 0 || i > nvertical ? 0 : cos * cosSlant;
-      texCoords[i2 + 0] = j / nradial;
-      texCoords[i2 + 1] = v;
-      i2 += 2;
-      i3 += 3;
+    this.children.forEach((child) => child.destroy());
+    this.removeAll();
+    super.destroy();
+  }
+  // Unpacks arrays and nested arrays of children
+  add(...children) {
+    for (const child of children) {
+      if (Array.isArray(child)) {
+        this.add(...child);
+      } else {
+        this.children.push(child);
+      }
     }
+    return this;
   }
-  for (let i = 0; i < nvertical + extra; i++) {
-    for (let j = 0; j < nradial; j++) {
-      const index = (i * nradial + j) * 6;
-      indices[index + 0] = vertsAroundEdge * (i + 0) + 0 + j;
-      indices[index + 1] = vertsAroundEdge * (i + 0) + 1 + j;
-      indices[index + 2] = vertsAroundEdge * (i + 1) + 1 + j;
-      indices[index + 3] = vertsAroundEdge * (i + 0) + 0 + j;
-      indices[index + 4] = vertsAroundEdge * (i + 1) + 1 + j;
-      indices[index + 5] = vertsAroundEdge * (i + 1) + 0 + j;
+  remove(child) {
+    const children = this.children;
+    const indexOf = children.indexOf(child);
+    if (indexOf > -1) {
+      children.splice(indexOf, 1);
     }
+    return this;
   }
-  return {
-    indices,
-    attributes: {
-      POSITION: positions,
-      NORMAL: normals,
-      TEXCOORD_0: texCoords
+  removeAll() {
+    this.children = [];
+    return this;
+  }
+  traverse(visitor, { worldMatrix = new import_core13.Matrix4() } = {}) {
+    const modelMatrix = new import_core13.Matrix4(worldMatrix).multiplyRight(this.matrix);
+    for (const child of this.children) {
+      if (child instanceof GroupNode) {
+        child.traverse(visitor, { worldMatrix: modelMatrix });
+      } else {
+        visitor(child, { worldMatrix: modelMatrix });
+      }
     }
-  };
-}
+  }
+  preorderTraversal(visitor, { worldMatrix = new import_core13.Matrix4() } = {}) {
+    const modelMatrix = new import_core13.Matrix4(worldMatrix).multiplyRight(this.matrix);
+    visitor(this, { worldMatrix: modelMatrix });
+    for (const child of this.children) {
+      if (child instanceof GroupNode) {
+        child.preorderTraversal(visitor, { worldMatrix: modelMatrix });
+      } else {
+        visitor(child, { worldMatrix: modelMatrix });
+      }
+    }
+  }
+};
 
-// dist/geometries/cone-geometry.js
-var ConeGeometry = class extends TruncatedConeGeometry {
-  constructor(props = {}) {
-    const { id = uid("cone-geometry"), radius = 1, cap = true } = props;
-    super({
-      ...props,
-      id,
-      topRadius: 0,
-      topCap: Boolean(cap),
-      bottomCap: Boolean(cap),
-      bottomRadius: radius
-    });
+// dist/scenegraph/model-node.js
+var ModelNode = class extends ScenegraphNode {
+  model;
+  bounds = null;
+  managedResources;
+  // TODO - is this used? override callbacks to make sure we call them with this
+  // onBeforeRender = null;
+  // onAfterRender = null;
+  // AfterRender = null;
+  constructor(props) {
+    super(props);
+    this.model = props.model;
+    this.managedResources = props.managedResources || [];
+    this.bounds = props.bounds || null;
+    this.setProps(props);
+  }
+  destroy() {
+    if (this.model) {
+      this.model.destroy();
+      this.model = null;
+    }
+    this.managedResources.forEach((resource) => resource.destroy());
+    this.managedResources = [];
+  }
+  getBounds() {
+    return this.bounds;
+  }
+  // Expose model methods
+  draw(renderPass) {
+    return this.model.draw(renderPass);
   }
 };
 
@@ -3674,7 +4823,7 @@ var CylinderGeometry = class extends TruncatedConeGeometry {
 };
 
 // dist/geometries/ico-sphere-geometry.js
-var import_core14 = require("@math.gl/core");
+var import_core15 = 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 {
@@ -3772,7 +4921,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_core14.Vector3(vec1).cross(vec2).normalize();
+    const normal = new import_core15.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]);
@@ -3940,84 +5089,6 @@ function tesselatePlane(props) {
   return unpack ? unpackIndexedGeometry(geometry) : geometry;
 }
 
-// dist/geometries/sphere-geometry.js
-var SphereGeometry = class extends Geometry {
-  constructor(props = {}) {
-    const { id = uid("sphere-geometry") } = props;
-    const { indices, attributes } = tesselateSphere(props);
-    super({
-      ...props,
-      id,
-      topology: "triangle-list",
-      indices,
-      attributes: { ...attributes, ...props.attributes }
-    });
-  }
-};
-function tesselateSphere(props) {
-  const { nlat = 10, nlong = 10 } = props;
-  const startLat = 0;
-  const endLat = Math.PI;
-  const latRange = endLat - startLat;
-  const startLong = 0;
-  const endLong = 2 * Math.PI;
-  const longRange = endLong - startLong;
-  const numVertices = (nlat + 1) * (nlong + 1);
-  const radius = (n1, n2, n3, u, v) => props.radius || 1;
-  const positions = new Float32Array(numVertices * 3);
-  const normals = new Float32Array(numVertices * 3);
-  const texCoords = new Float32Array(numVertices * 2);
-  const IndexType = numVertices > 65535 ? Uint32Array : Uint16Array;
-  const indices = new IndexType(nlat * nlong * 6);
-  for (let y = 0; y <= nlat; y++) {
-    for (let x = 0; x <= nlong; x++) {
-      const u = x / nlong;
-      const v = y / nlat;
-      const index = x + y * (nlong + 1);
-      const i2 = index * 2;
-      const i3 = index * 3;
-      const theta = longRange * u;
-      const phi = latRange * v;
-      const sinTheta = Math.sin(theta);
-      const cosTheta = Math.cos(theta);
-      const sinPhi = Math.sin(phi);
-      const cosPhi = Math.cos(phi);
-      const ux = cosTheta * sinPhi;
-      const uy = cosPhi;
-      const uz = sinTheta * sinPhi;
-      const r = radius(ux, uy, uz, u, v);
-      positions[i3 + 0] = r * ux;
-      positions[i3 + 1] = r * uy;
-      positions[i3 + 2] = r * uz;
-      normals[i3 + 0] = ux;
-      normals[i3 + 1] = uy;
-      normals[i3 + 2] = uz;
-      texCoords[i2 + 0] = u;
-      texCoords[i2 + 1] = 1 - v;
-    }
-  }
-  const numVertsAround = nlong + 1;
-  for (let x = 0; x < nlong; x++) {
-    for (let y = 0; y < nlat; y++) {
-      const index = (x * nlat + y) * 6;
-      indices[index + 0] = y * numVertsAround + x;
-      indices[index + 1] = y * numVertsAround + x + 1;
-      indices[index + 2] = (y + 1) * numVertsAround + x;
-      indices[index + 3] = (y + 1) * numVertsAround + x;
-      indices[index + 4] = y * numVertsAround + x + 1;
-      indices[index + 5] = (y + 1) * numVertsAround + x + 1;
-    }
-  }
-  return {
-    indices: { size: 1, value: indices },
-    attributes: {
-      POSITION: { size: 3, value: positions },
-      NORMAL: { size: 3, value: normals },
-      TEXCOORD_0: { size: 2, value: texCoords }
-    }
-  };
-}
-
 // dist/application-utils/random.js
 function makeRandomGenerator() {
   let s = 1;
@@ -4032,17 +5103,45 @@ function fract(n) {
   return n - Math.floor(n);
 }
 
+// dist/application-utils/load-file.js
+var pathPrefix = "";
+function setPathPrefix(prefix) {
+  pathPrefix = prefix;
+}
+async function loadImageBitmap(url, opts) {
+  const image = new Image();
+  image.crossOrigin = (opts == null ? void 0 : opts.crossOrigin) || "anonymous";
+  image.src = url.startsWith("http") ? url : pathPrefix + url;
+  await image.decode();
+  return opts ? await createImageBitmap(image, opts) : await createImageBitmap(image);
+}
+async function loadImage(url, opts) {
+  return await new Promise((resolve, reject) => {
+    try {
+      const image = new Image();
+      image.onload = () => resolve(image);
+      image.onerror = () => reject(new Error(`Could not load image ${url}.`));
+      image.crossOrigin = (opts == null ? void 0 : opts.crossOrigin) || "anonymous";
+      image.src = url.startsWith("http") ? url : pathPrefix + url;
+    } catch (error) {
+      reject(error);
+    }
+  });
+}
+
 // dist/passes/shader-pass-renderer.js
 var import_shadertools5 = require("@luma.gl/shadertools");
 
 // dist/compute/swap.js
-var import_core15 = require("@luma.gl/core");
+var import_core16 = require("@luma.gl/core");
 var Swap = class {
+  id;
   /** The current resource - usually the source for renders or computations */
   current;
   /** The next resource - usually the target/destination for transforms / computations */
   next;
   constructor(props) {
+    this.id = props.id || "swap";
     this.current = props.current;
     this.next = props.next;
   }
@@ -4063,18 +5162,21 @@ var SwapFramebuffers = class extends Swap {
   constructor(device, props) {
     var _a, _b;
     props = { ...props };
+    const { width = 1, height = 1 } = props;
     let colorAttachments = (_a = props.colorAttachments) == null ? void 0 : _a.map((colorAttachment) => typeof colorAttachment !== "string" ? colorAttachment : device.createTexture({
+      id: `${props.id}-texture-0`,
       format: colorAttachment,
-      usage: import_core15.Texture.SAMPLE | import_core15.Texture.RENDER | import_core15.Texture.COPY_SRC | import_core15.Texture.COPY_DST,
-      width: 1,
-      height: 1
+      usage: import_core16.Texture.SAMPLE | import_core16.Texture.RENDER | import_core16.Texture.COPY_SRC | import_core16.Texture.COPY_DST,
+      width,
+      height
     }));
     const current = device.createFramebuffer({ ...props, colorAttachments });
     colorAttachments = (_b = props.colorAttachments) == null ? void 0 : _b.map((colorAttachment) => typeof colorAttachment !== "string" ? colorAttachment : device.createTexture({
+      id: `${props.id}-texture-1`,
       format: colorAttachment,
-      usage: import_core15.Texture.TEXTURE | import_core15.Texture.COPY_SRC | import_core15.Texture.COPY_DST | import_core15.Texture.RENDER_ATTACHMENT,
-      width: 1,
-      height: 1
+      usage: import_core16.Texture.SAMPLE | import_core16.Texture.RENDER | import_core16.Texture.COPY_SRC | import_core16.Texture.COPY_DST,
+      width,
+      height
     }));
     const next = device.createFramebuffer({ ...props, colorAttachments });
     super({ current, next });
@@ -4135,22 +5237,16 @@ function getFragmentShaderForRenderPass(options) {
 function getFilterShaderWGSL(func) {
   return (
     /* wgsl */
-    `// Binding 0:1 is reserved for shader passes
-// @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 {
-  @location(0) fragUV: vec2f,
-  @location(1) fragPosition: vec4f,
-  @location(2) fragCoordinate: vec4f
-};
+    `@group(0) @binding(0) var sourceTexture: texture_2d<f32>;
+@group(0) @binding(2) var sourceTextureSampler: sampler;
 
 @fragment
 fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {
-  let texSize = textureDimensions(texture, 0);
-  var fragColor = textureSample(texture, sampler, fragUV);
-  fragColor = ${func}(gl_FragColor, texSize, texCoord);
+  let texCoord = inputs.coordinate;
+  let texSize = vec2f(textureDimensions(sourceTexture));
+
+  var fragColor = textureSample(sourceTexture, sourceTextureSampler, texCoord);
+  fragColor = ${func}(fragColor, texSize, texCoord);
   return fragColor;
 }
 `
@@ -4159,23 +5255,14 @@ fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {
 function getSamplerShaderWGSL(func) {
   return (
     /* wgsl */
-    `// Binding 0:1 is reserved for shader passes
-@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 = {
-  @location(0) fragUV: vec2f,
-  @location(1) fragPosition: vec4f,
-  @location(2) fragCoordinate: vec4f
-};
+    `@group(0) @binding(0) var sourceTexture: texture_2d<f32>;
+@group(0) @binding(2) var sourceTextureSampler: sampler;
 
 @fragment
 fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {
-  let texSize = textureDimensions(texture, 0);
-  var fragColor = textureSample(texture, sampler, fragUV);
-  fragColor = ${func}(gl_FragColor, texSize, texCoord);
-  return fragColor;
+  let texCoord = inputs.coordinate;
+  let texSize = vec2f(textureDimensions(sourceTexture));
+  return ${func}(sourceTexture, sourceTextureSampler, texSize, texCoord);
 }
 `
   );
@@ -4234,8 +5321,6 @@ var ShaderPassRenderer = class {
   shaderInputs;
   passRenderers;
   swapFramebuffers;
-  /** For rendering to the screen */
-  clipSpace;
   textureModel;
   constructor(device, props) {
     this.device = device;
@@ -4251,35 +5336,6 @@ var ShaderPassRenderer = class {
     this.textureModel = new BackgroundTextureModel(device, {
       backgroundTexture: this.swapFramebuffers.current.colorAttachments[0].texture
     });
-    this.clipSpace = new ClipSpace(device, {
-      source: (
-        /* wgsl */
-        `  @group(0) @binding(0) var sourceTexture: texture_2d<f32>;
-  @group(0) @binding(1) var sourceTextureSampler: sampler;
-
-@fragment
-fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4<f32> {
-	let texCoord: vec2<f32> = inputs.coordinate;
-	return textureSample(sourceTexture, sourceTextureSampler, texCoord);
-}
-`
-      ),
-      fs: (
-        /* glsl */
-        `#version 300 es
-
-uniform sampler2D sourceTexture;
-in vec2 uv;
-in vec2 coordinate;
-out vec4 fragColor;
-
-void main() {
-  vec2 texCoord = coordinate;
-  fragColor = texture(sourceTexture, coordinate);
-}
-`
-      )
-    });
     this.passRenderers = props.shaderPasses.map((shaderPass) => new PassRenderer(device, shaderPass));
   }
   /** Destroys resources created by this ShaderPassRenderer */
@@ -4288,25 +5344,26 @@ void main() {
       subPassRenderer.destroy();
     }
     this.swapFramebuffers.destroy();
-    this.clipSpace.destroy();
+    this.textureModel.destroy();
   }
-  resize(width, height) {
-    this.swapFramebuffers.resize({ width, height });
+  resize(size) {
+    size ||= this.device.getCanvasContext().getDrawingBufferSize();
+    this.swapFramebuffers.resize({ width: size[0], height: size[1] });
   }
   renderToScreen(options) {
     const outputTexture = this.renderToTexture(options);
     if (!outputTexture) {
       return false;
     }
-    const framebuffer = this.device.getDefaultCanvasContext().getCurrentFramebuffer({ depthStencilAttachment: false });
+    const framebuffer = this.device.getDefaultCanvasContext().getCurrentFramebuffer({ depthStencilFormat: false });
     const renderPass = this.device.beginRenderPass({
       id: "shader-pass-renderer-to-screen",
       framebuffer,
-      clearColor: [0, 0, 0, 1],
-      clearDepth: 1
+      // clearColor: [1, 1, 0, 1],
+      clearDepth: false
     });
-    this.clipSpace.setBindings({ sourceTexture: outputTexture });
-    this.clipSpace.draw(renderPass);
+    this.textureModel.setProps({ backgroundTexture: outputTexture });
+    this.textureModel.draw(renderPass);
     renderPass.end();
     return true;
   }
@@ -4318,14 +5375,14 @@ void main() {
     if (!sourceTexture.isReady) {
       return null;
     }
-    this.textureModel.destroy();
-    this.textureModel = new BackgroundTextureModel(this.device, {
-      backgroundTexture: sourceTexture
-    });
+    if (this.passRenderers.length === 0) {
+      return sourceTexture.texture;
+    }
+    this.textureModel.setProps({ backgroundTexture: sourceTexture });
     const clearTexturePass = this.device.beginRenderPass({
       id: "shader-pass-renderer-clear-texture",
       framebuffer: this.swapFramebuffers.current,
-      clearColor: [0, 0, 0, 1]
+      clearColor: [1, 0, 0, 1]
     });
     this.textureModel.draw(clearTexturePass);
     clearTexturePass.end();
@@ -4412,7 +5469,7 @@ var SubPassRenderer = class {
 };
 
 // dist/compute/computation.js
-var import_core16 = require("@luma.gl/core");
+var import_core17 = require("@luma.gl/core");
 var import_shadertools6 = require("@luma.gl/shadertools");
 var import_types2 = require("@math.gl/types");
 var LOG_DRAW_PRIORITY2 = 2;
@@ -4441,7 +5498,7 @@ var _Computation = class {
   props;
   _destroyed = false;
   constructor(device, props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (device.type !== "webgpu") {
       throw new Error("Computation is only supported in WebGPU");
     }
@@ -4453,11 +5510,11 @@ var _Computation = class {
     const moduleMap = Object.fromEntries(((_a = this.props.modules) == null ? void 0 : _a.map((module2) => [module2.name, module2])) || []);
     this.shaderInputs = props.shaderInputs || new ShaderInputs(moduleMap);
     this.setShaderInputs(this.shaderInputs);
-    this.props.shaderLayout ||= (0, import_shadertools6.getShaderLayoutFromWGSL)(this.props.source);
     const platformInfo = getPlatformInfo2(device);
     const modules = (((_b = this.props.modules) == null ? void 0 : _b.length) > 0 ? this.props.modules : (_c = this.shaderInputs) == null ? void 0 : _c.getModules()) || [];
-    this.pipelineFactory = props.pipelineFactory || PipelineFactory.getDefaultPipelineFactory(this.device);
-    this.shaderFactory = props.shaderFactory || ShaderFactory.getDefaultShaderFactory(this.device);
+    this.props.shaderLayout = mergeShaderModuleBindingsIntoLayout(this.props.shaderLayout, modules) || null;
+    this.pipelineFactory = props.pipelineFactory || import_core17.PipelineFactory.getDefaultPipelineFactory(this.device);
+    this.shaderFactory = props.shaderFactory || import_core17.ShaderFactory.getDefaultShaderFactory(this.device);
     const { source: source3, getUniforms: getUniforms2 } = this.props.shaderAssembler.assembleWGSLShader({
       platformInfo,
       ...this.props,
@@ -4465,6 +5522,8 @@ var _Computation = class {
     });
     this.source = source3;
     this._getModuleUniforms = getUniforms2;
+    const inferredShaderLayout = (_d = device.getShaderLayout) == null ? void 0 : _d.call(device, this.source);
+    this.props.shaderLayout = mergeShaderModuleBindingsIntoLayout(this.props.shaderLayout || inferredShaderLayout || null, modules) || null;
     this.pipeline = this._updatePipeline();
     if (props.bindings) {
       this.setBindings(props.bindings);
@@ -4489,7 +5548,7 @@ var _Computation = class {
       this.pipeline = this._updatePipeline();
       this.pipeline.setBindings(this.bindings);
       computePass.setPipeline(this.pipeline);
-      computePass.setBindings([]);
+      computePass.setBindings({});
       computePass.dispatch(x, y, z);
     } finally {
       this._logDrawCallEnd();
@@ -4511,10 +5570,12 @@ var _Computation = class {
   }
   setShaderInputs(shaderInputs) {
     this.shaderInputs = shaderInputs;
-    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;
+    this._uniformStore = new import_core17.UniformStore(this.device, this.shaderInputs.modules);
+    for (const [moduleName, module2] of Object.entries(this.shaderInputs.modules)) {
+      if (shaderModuleHasUniforms(module2)) {
+        const uniformBuffer = this._uniformStore.getManagedUniformBuffer(moduleName);
+        this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
+      }
     }
   }
   /**
@@ -4548,7 +5609,7 @@ var _Computation = class {
     if (this._pipelineNeedsUpdate) {
       let prevShader = null;
       if (this.pipeline) {
-        import_core16.log.log(1, `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`)();
+        import_core17.log.log(1, `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`)();
         prevShader = this.shader;
       }
       this._pipelineNeedsUpdate = false;
@@ -4572,33 +5633,33 @@ var _Computation = class {
   _lastLogTime = 0;
   _logOpen = false;
   _logDrawCallStart() {
-    const logDrawTimeout = import_core16.log.level > 3 ? 0 : LOG_DRAW_TIMEOUT2;
-    if (import_core16.log.level < 2 || Date.now() - this._lastLogTime < logDrawTimeout) {
+    const logDrawTimeout = import_core17.log.level > 3 ? 0 : LOG_DRAW_TIMEOUT2;
+    if (import_core17.log.level < 2 || Date.now() - this._lastLogTime < logDrawTimeout) {
       return;
     }
     this._lastLogTime = Date.now();
     this._logOpen = true;
-    import_core16.log.group(LOG_DRAW_PRIORITY2, `>>> DRAWING MODEL ${this.id}`, { collapsed: import_core16.log.level <= 2 })();
+    import_core17.log.group(LOG_DRAW_PRIORITY2, `>>> DRAWING MODEL ${this.id}`, { collapsed: import_core17.log.level <= 2 })();
   }
   _logDrawCallEnd() {
     if (this._logOpen) {
       const uniformTable = this.shaderInputs.getDebugTable();
-      import_core16.log.table(LOG_DRAW_PRIORITY2, uniformTable)();
-      import_core16.log.groupEnd(LOG_DRAW_PRIORITY2)();
+      import_core17.log.table(LOG_DRAW_PRIORITY2, uniformTable)();
+      import_core17.log.groupEnd(LOG_DRAW_PRIORITY2)();
       this._logOpen = false;
     }
   }
   _drawCount = 0;
   // TODO - fix typing of luma data types
   _getBufferOrConstantValues(attribute, dataType) {
-    const TypedArrayConstructor = (0, import_core16.getTypedArrayConstructor)(dataType);
-    const typedArray = attribute instanceof import_core16.Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
+    const TypedArrayConstructor = import_core17.dataTypeDecoder.getTypedArrayConstructor(dataType);
+    const typedArray = attribute instanceof import_core17.Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
     return typedArray.toString();
   }
 };
 var Computation = _Computation;
 __publicField(Computation, "defaultProps", {
-  ...import_core16.ComputePipeline.defaultProps,
+  ...import_core17.ComputePipeline.defaultProps,
   id: "unnamed",
   handle: void 0,
   userData: {},
@@ -4623,6 +5684,9 @@ function getPlatformInfo2(device) {
   };
 }
 
+// dist/modules/picking/picking-manager.js
+var import_core18 = require("@luma.gl/core");
+
 // dist/modules/picking/picking-uniforms.js
 var DEFAULT_HIGHLIGHT_COLOR = [0, 1, 1, 1];
 var INVALID_INDEX = -1;
@@ -4640,7 +5704,7 @@ var GLSL_UNIFORMS = (
   `precision highp float;
 precision highp int;
 
-uniform pickingUniforms {
+layout(std140) uniform pickingUniforms {
   int isActive;
   int indexMode;
   int batchIndex;
@@ -4655,15 +5719,17 @@ uniform pickingUniforms {
 var WGSL_UNIFORMS = (
   /* wgsl */
   `struct pickingUniforms {
-  isActive: int32;
-  indexMode: int32;
-  batchIndex: int32;
-
-  isHighlightActive: int32;
-  highlightedBatchIndex: int32;
-  highlightedObjectIndex: int32;
-  highlightColor: vec4<f32>;
-} picking;
+  isActive: i32,
+  indexMode: i32,
+  batchIndex: i32,
+
+  isHighlightActive: i32,
+  highlightedBatchIndex: i32,
+  highlightedObjectIndex: i32,
+  highlightColor: vec4<f32>,
+};
+
+@group(0) @binding(auto) var<uniform> picking: pickingUniforms;
 `
 );
 function getUniforms(props = {}, prevUniforms) {
@@ -4675,25 +5741,36 @@ function getUniforms(props = {}, prevUniforms) {
     case "instance":
       uniforms.indexMode = 0;
       break;
-    case "custom":
+    case "attribute":
       uniforms.indexMode = 1;
       break;
     case void 0:
       break;
   }
+  if (typeof props.batchIndex === "number") {
+    uniforms.batchIndex = props.batchIndex;
+  }
   switch (props.highlightedObjectIndex) {
     case void 0:
       break;
     case null:
       uniforms.isHighlightActive = false;
-      uniforms.highlightedObjectIndex = INVALID_INDEX;
+      uniforms.highlightedObjectIndex = INVALID_INDEX;
+      break;
+    default:
+      uniforms.isHighlightActive = true;
+      uniforms.highlightedObjectIndex = props.highlightedObjectIndex;
+  }
+  switch (props.highlightedBatchIndex) {
+    case void 0:
+      break;
+    case null:
+      uniforms.isHighlightActive = false;
+      uniforms.highlightedBatchIndex = INVALID_INDEX;
       break;
     default:
       uniforms.isHighlightActive = true;
-      uniforms.highlightedObjectIndex = props.highlightedObjectIndex;
-  }
-  if (typeof props.highlightedBatchIndex === "number") {
-    uniforms.highlightedBatchIndex = props.highlightedBatchIndex;
+      uniforms.highlightedBatchIndex = props.highlightedBatchIndex;
   }
   if (props.highlightColor) {
     uniforms.highlightColor = props.highlightColor;
@@ -4709,7 +5786,7 @@ var pickingUniforms = {
     isActive: false,
     indexMode: 0,
     batchIndex: 0,
-    isHighlightActive: true,
+    isHighlightActive: false,
     highlightedBatchIndex: INVALID_INDEX,
     highlightedObjectIndex: INVALID_INDEX,
     highlightColor: DEFAULT_HIGHLIGHT_COLOR
@@ -4718,9 +5795,42 @@ var pickingUniforms = {
 };
 
 // dist/modules/picking/picking-manager.js
+var INDEX_PICKING_ATTACHMENT_INDEX = 1;
+var INDEX_PICKING_CLEAR_COLOR = new Int32Array([INVALID_INDEX, INVALID_INDEX, 0, 0]);
+function resolvePickingMode(deviceType, mode = "color", indexPickingSupported = deviceType === "webgpu") {
+  if (mode === "auto") {
+    return indexPickingSupported ? "index" : "color";
+  }
+  if (mode === "index" && !indexPickingSupported) {
+    throw new Error(`Picking mode "${mode}" requires WebGPU or a WebGL device that supports renderable rg32sint textures.`);
+  }
+  return mode;
+}
+function supportsIndexPicking(device) {
+  return device.type === "webgpu" || device.type === "webgl" && device.isTextureFormatRenderable("rg32sint");
+}
+var resolvePickingBackend = resolvePickingMode;
+function decodeIndexPickInfo(pixelData) {
+  return {
+    objectIndex: pixelData[0] === INVALID_INDEX ? null : pixelData[0],
+    batchIndex: pixelData[1] === INVALID_INDEX ? null : pixelData[1]
+  };
+}
+function decodeColorPickInfo(pixelData) {
+  const encodedObjectIndex = pixelData[0] + pixelData[1] * 256 + pixelData[2] * 65536;
+  if (encodedObjectIndex === 0) {
+    return { objectIndex: null, batchIndex: null };
+  }
+  const batchIndex = pixelData[3] > 0 ? pixelData[3] - 1 : 0;
+  return {
+    objectIndex: encodedObjectIndex - 1,
+    batchIndex
+  };
+}
 var _PickingManager = class {
   device;
   props;
+  mode;
   /** Info from latest pick operation */
   pickInfo = { batchIndex: null, objectIndex: null };
   /** Framebuffer used for picking */
@@ -4728,6 +5838,10 @@ var _PickingManager = class {
   constructor(device, props) {
     this.device = device;
     this.props = { ..._PickingManager.defaultProps, ...props };
+    const requestedMode = props.mode ?? props.backend ?? _PickingManager.defaultProps.mode;
+    this.props.mode = requestedMode;
+    this.props.backend = requestedMode;
+    this.mode = resolvePickingMode(this.device.type, requestedMode, supportsIndexPicking(this.device));
   }
   destroy() {
     var _a;
@@ -4736,58 +5850,44 @@ var _PickingManager = class {
   // TODO - Ask for a cached framebuffer? a Framebuffer factory?
   getFramebuffer() {
     if (!this.framebuffer) {
-      this.framebuffer = this.device.createFramebuffer({
-        colorAttachments: ["rgba8unorm", "rg32sint"],
-        depthStencilAttachment: "depth24plus"
-      });
+      this.framebuffer = this.mode === "index" ? this.createIndexFramebuffer() : this.createColorFramebuffer();
     }
     return this.framebuffer;
   }
   /** Clear highlighted / picked object */
   clearPickState() {
-    this.props.shaderInputs.setProps({ picking: { highlightedObjectIndex: null } });
+    this.setPickingProps({ highlightedBatchIndex: null, highlightedObjectIndex: null });
   }
   /** Prepare for rendering picking colors */
   beginRenderPass() {
-    var _a;
     const framebuffer = this.getFramebuffer();
     framebuffer.resize(this.device.getDefaultCanvasContext().getDevicePixelSize());
-    (_a = this.props.shaderInputs) == null ? void 0 : _a.setProps({ picking: { isActive: true } });
-    const pickingPass = this.device.beginRenderPass({
+    this.setPickingProps({ isActive: true });
+    return this.mode === "index" ? this.device.beginRenderPass({
+      framebuffer,
+      clearColors: [new Float32Array([0, 0, 0, 0]), INDEX_PICKING_CLEAR_COLOR],
+      clearDepth: 1
+    }) : this.device.beginRenderPass({
       framebuffer,
-      clearColors: [new Float32Array([0, 0, 0, 0]), new Int32Array([-1, -1, 0, 0])],
+      clearColor: [0, 0, 0, 0],
       clearDepth: 1
     });
-    return pickingPass;
   }
   async updatePickInfo(mousePosition) {
-    var _a;
     const framebuffer = this.getFramebuffer();
-    const [pickX, pickY] = this.getPickPosition(mousePosition);
-    const pixelData = this.device.readPixelsToArrayWebGL(framebuffer, {
-      sourceX: pickX,
-      sourceY: pickY,
-      sourceWidth: 1,
-      sourceHeight: 1,
-      sourceAttachment: 1
-    });
-    if (!pixelData) {
+    const pickPosition = this.getPickPosition(mousePosition);
+    const pickInfo = await this.readPickInfo(framebuffer, pickPosition);
+    if (!pickInfo) {
       return null;
     }
-    const pickInfo = {
-      objectIndex: pixelData[0] === INVALID_INDEX ? null : pixelData[0],
-      batchIndex: pixelData[1] === INVALID_INDEX ? null : pixelData[1]
-    };
-    if (pickInfo.objectIndex !== this.pickInfo.objectIndex || pickInfo.batchIndex !== this.pickInfo.batchIndex) {
+    if (this.hasPickInfoChanged(pickInfo)) {
       this.pickInfo = pickInfo;
       this.props.onObjectPicked(pickInfo);
     }
-    (_a = this.props.shaderInputs) == null ? void 0 : _a.setProps({
-      picking: {
-        isActive: false,
-        highlightedBatchIndex: pickInfo.batchIndex,
-        highlightedObjectIndex: pickInfo.objectIndex
-      }
+    this.setPickingProps({
+      isActive: false,
+      highlightedBatchIndex: pickInfo.batchIndex,
+      highlightedObjectIndex: pickInfo.objectIndex
     });
     return this.pickInfo;
   }
@@ -4796,49 +5896,204 @@ var _PickingManager = class {
    * use the center pixel location in device pixel range
    */
   getPickPosition(mousePosition) {
-    const devicePixels = this.device.getDefaultCanvasContext().cssToDevicePixels(mousePosition);
+    const yInvert = this.device.type !== "webgpu";
+    const devicePixels = this.device.getDefaultCanvasContext().cssToDevicePixels(mousePosition, yInvert);
     const pickX = devicePixels.x + Math.floor(devicePixels.width / 2);
     const pickY = devicePixels.y + Math.floor(devicePixels.height / 2);
     return [pickX, pickY];
   }
+  createIndexFramebuffer() {
+    const colorTexture = this.device.createTexture({
+      format: "rgba8unorm",
+      width: 1,
+      height: 1,
+      usage: import_core18.Texture.RENDER_ATTACHMENT
+    });
+    const pickingTexture = this.device.createTexture({
+      format: "rg32sint",
+      width: 1,
+      height: 1,
+      usage: import_core18.Texture.RENDER_ATTACHMENT | import_core18.Texture.COPY_SRC
+    });
+    return this.device.createFramebuffer({
+      colorAttachments: [colorTexture, pickingTexture],
+      depthStencilAttachment: "depth24plus"
+    });
+  }
+  createColorFramebuffer() {
+    const pickingTexture = this.device.createTexture({
+      format: "rgba8unorm",
+      width: 1,
+      height: 1,
+      usage: import_core18.Texture.RENDER_ATTACHMENT | import_core18.Texture.COPY_SRC
+    });
+    return this.device.createFramebuffer({
+      colorAttachments: [pickingTexture],
+      depthStencilAttachment: "depth24plus"
+    });
+  }
+  setPickingProps(props) {
+    var _a;
+    (_a = this.props.shaderInputs) == null ? void 0 : _a.setProps({ picking: props });
+  }
+  async readPickInfo(framebuffer, pickPosition) {
+    return this.mode === "index" ? this.readIndexPickInfo(framebuffer, pickPosition) : this.readColorPickInfo(framebuffer, pickPosition);
+  }
+  async readIndexPickInfo(framebuffer, [pickX, pickY]) {
+    var _a;
+    if (this.device.type === "webgpu") {
+      const pickTexture = (_a = framebuffer.colorAttachments[INDEX_PICKING_ATTACHMENT_INDEX]) == null ? void 0 : _a.texture;
+      if (!pickTexture) {
+        return null;
+      }
+      const layout = pickTexture.computeMemoryLayout({ width: 1, height: 1 });
+      const readBuffer = this.device.createBuffer({
+        byteLength: layout.byteLength,
+        usage: import_core18.Buffer.COPY_DST | import_core18.Buffer.MAP_READ
+      });
+      try {
+        pickTexture.readBuffer({
+          x: pickX,
+          y: pickY,
+          width: 1,
+          height: 1
+        }, readBuffer);
+        const pickDataView = await readBuffer.readAsync(0, layout.byteLength);
+        return decodeIndexPickInfo(new Int32Array(pickDataView.buffer, pickDataView.byteOffset, 2));
+      } finally {
+        readBuffer.destroy();
+      }
+    }
+    const pixelData = this.device.readPixelsToArrayWebGL(framebuffer, {
+      sourceX: pickX,
+      sourceY: pickY,
+      sourceWidth: 1,
+      sourceHeight: 1,
+      sourceAttachment: INDEX_PICKING_ATTACHMENT_INDEX
+    });
+    return pixelData ? decodeIndexPickInfo(new Int32Array(pixelData.buffer, pixelData.byteOffset, 2)) : null;
+  }
+  async readColorPickInfo(framebuffer, [pickX, pickY]) {
+    var _a;
+    if (this.device.type === "webgpu") {
+      const pickTexture = (_a = framebuffer.colorAttachments[0]) == null ? void 0 : _a.texture;
+      if (!pickTexture) {
+        return null;
+      }
+      const layout = pickTexture.computeMemoryLayout({ width: 1, height: 1 });
+      const readBuffer = this.device.createBuffer({
+        byteLength: layout.byteLength,
+        usage: import_core18.Buffer.COPY_DST | import_core18.Buffer.MAP_READ
+      });
+      try {
+        pickTexture.readBuffer({
+          x: pickX,
+          y: pickY,
+          width: 1,
+          height: 1
+        }, readBuffer);
+        const pickDataView = await readBuffer.readAsync(0, layout.byteLength);
+        return decodeColorPickInfo(new Uint8Array(pickDataView.buffer, pickDataView.byteOffset, 4));
+      } finally {
+        readBuffer.destroy();
+      }
+    }
+    const pixelData = this.device.readPixelsToArrayWebGL(framebuffer, {
+      sourceX: pickX,
+      sourceY: pickY,
+      sourceWidth: 1,
+      sourceHeight: 1,
+      sourceAttachment: 0
+    });
+    return pixelData ? decodeColorPickInfo(new Uint8Array(pixelData.buffer, pixelData.byteOffset, 4)) : null;
+  }
+  hasPickInfoChanged(pickInfo) {
+    return pickInfo.objectIndex !== this.pickInfo.objectIndex || pickInfo.batchIndex !== this.pickInfo.batchIndex;
+  }
 };
 var PickingManager = _PickingManager;
 __publicField(PickingManager, "defaultProps", {
   shaderInputs: void 0,
   onObjectPicked: () => {
-  }
+  },
+  mode: "color",
+  backend: "color"
 });
 
-// dist/modules/picking/index-picking.js
+// dist/modules/picking/color-picking.js
 var source = (
   /* wgsl */
   `${WGSL_UNIFORMS}
 
-const INDEX_PICKING_MODE_INSTANCE = 0;
-const INDEX_PICKING_MODE_CUSTOM = 1;
-const INDEX_PICKING_INVALID_INDEX = ${INVALID_INDEX}; // 2^32 - 1
+const COLOR_PICKING_INVALID_INDEX = ${INVALID_INDEX};
+const COLOR_PICKING_MAX_OBJECT_INDEX = 16777214;
+const COLOR_PICKING_MAX_BATCH_INDEX = 254;
 
-struct indexPickingFragmentInputs = {
-  objectIndex: int32;
-};
+fn picking_setObjectIndex(objectIndex: i32) -> i32 {
+  return objectIndex;
+}
 
-let indexPickingFragmentInputs: indexPickingFragmentInputs;
+fn picking_isObjectHighlighted(objectIndex: i32) -> bool {
+  return
+    picking.isHighlightActive != 0 &&
+    picking.highlightedBatchIndex == picking.batchIndex &&
+    picking.highlightedObjectIndex == objectIndex;
+}
 
-/**
- * Vertex shaders should call this function to set the object index.
- * If using instance or vertex mode, argument will be ignored, 0 can be supplied.
- */
-fn picking_setObjectIndex(objectIndex: int32) {
-  switch (picking.indexMode) {
-    case INDEX_PICKING_MODE_INSTANCE, default: {
-      picking_objectIndex = instance_index;
-    };
-    case INDEX_PICKING_MODE_CUSTOM: {
-      picking_objectIndex = objectIndex;
-    };
+fn picking_filterHighlightColor(color: vec4<f32>, objectIndex: i32) -> vec4<f32> {
+  if (picking.isActive != 0 || !picking_isObjectHighlighted(objectIndex)) {
+    return color;
+  }
+
+  let highLightAlpha = picking.highlightColor.a;
+  let blendedAlpha = highLightAlpha + color.a * (1.0 - highLightAlpha);
+  if (blendedAlpha == 0.0) {
+    return vec4<f32>(color.rgb, 0.0);
+  }
+
+  let highLightRatio = highLightAlpha / blendedAlpha;
+  let blendedRGB = mix(color.rgb, picking.highlightColor.rgb, highLightRatio);
+  return vec4<f32>(blendedRGB, blendedAlpha);
+}
+
+fn picking_canEncodePickInfo(objectIndex: i32) -> bool {
+  return
+    objectIndex != COLOR_PICKING_INVALID_INDEX &&
+    objectIndex >= 0 &&
+    objectIndex <= COLOR_PICKING_MAX_OBJECT_INDEX &&
+    picking.batchIndex >= 0 &&
+    picking.batchIndex <= COLOR_PICKING_MAX_BATCH_INDEX;
+}
+
+fn picking_getPickingColor(objectIndex: i32) -> vec4<f32> {
+  if (!picking_canEncodePickInfo(objectIndex)) {
+    return vec4<f32>(0.0, 0.0, 0.0, 0.0);
   }
+
+  let encodedObjectIndex = objectIndex + 1;
+  let red = encodedObjectIndex % 256;
+  let green = (encodedObjectIndex / 256) % 256;
+  let blue = (encodedObjectIndex / 65536) % 256;
+  let alpha = picking.batchIndex + 1;
+
+  return vec4<f32>(
+    f32(red) / 255.0,
+    f32(green) / 255.0,
+    f32(blue) / 255.0,
+    f32(alpha) / 255.0
+  );
 }
 
+fn picking_filterPickingColor(color: vec4<f32>, objectIndex: i32) -> vec4<f32> {
+  if (picking.isActive != 0) {
+    if (!picking_canEncodePickInfo(objectIndex)) {
+      discard;
+    }
+    return picking_getPickingColor(objectIndex);
+  }
+
+  return color;
+}
 `
 );
 var vs = (
@@ -4848,14 +6103,10 @@ var vs = (
 const int INDEX_PICKING_MODE_INSTANCE = 0;
 const int INDEX_PICKING_MODE_CUSTOM = 1;
 
-const int INDEX_PICKING_INVALID_INDEX = ${INVALID_INDEX}; // 2^32 - 1
+const int COLOR_PICKING_INVALID_INDEX = ${INVALID_INDEX};
 
 flat out int picking_objectIndex;
 
-/**
- * Vertex shaders should call this function to set the object index.
- * If using instance or vertex mode, argument will be ignored, 0 can be supplied.
- */
 void picking_setObjectIndex(int objectIndex) {
   switch (picking.indexMode) {
     case INDEX_PICKING_MODE_INSTANCE:
@@ -4872,36 +6123,29 @@ var fs = (
   /* glsl */
   `${GLSL_UNIFORMS}
 
-const int INDEX_PICKING_INVALID_INDEX = ${INVALID_INDEX}; // 2^32 - 1
+const int COLOR_PICKING_INVALID_INDEX = ${INVALID_INDEX};
+const int COLOR_PICKING_MAX_OBJECT_INDEX = 16777214;
+const int COLOR_PICKING_MAX_BATCH_INDEX = 254;
 
 flat in int picking_objectIndex;
 
-/**
- * Check if this vertex is highlighted (part of the selected batch and object)
- */ 
 bool picking_isFragmentHighlighted() {
-  return 
+  return
     bool(picking.isHighlightActive) &&
     picking.highlightedBatchIndex == picking.batchIndex &&
     picking.highlightedObjectIndex == picking_objectIndex
     ;
 }
 
-/**
- * Returns highlight color if this item is selected.
- */
 vec4 picking_filterHighlightColor(vec4 color) {
-  // If we are still picking, we don't highlight
   if (bool(picking.isActive)) {
     return color;
   }
 
-  // If we are not highlighted, return color as is
   if (!picking_isFragmentHighlighted()) {
     return color;
   }
-   
-  // Blend in highlight color based on its alpha value
+
   float highLightAlpha = picking.highlightColor.a;
   float blendedAlpha = highLightAlpha + color.a * (1.0 - highLightAlpha);
   float highLightRatio = highLightAlpha / blendedAlpha;
@@ -4910,28 +6154,40 @@ vec4 picking_filterHighlightColor(vec4 color) {
   return vec4(blendedRGB, blendedAlpha);
 }
 
-/*
- * Returns picking color if picking enabled else unmodified argument.
- */
-ivec4 picking_getPickingColor() {
-  // Assumes that colorAttachment0 is rg32int
-  // TODO? - we could render indices into a second color attachment and not mess with fragColor
-  return ivec4(picking_objectIndex, picking.batchIndex, 0u, 0u);  
+bool picking_canEncodePickInfo(int objectIndex) {
+  return
+    objectIndex != COLOR_PICKING_INVALID_INDEX &&
+    objectIndex >= 0 &&
+    objectIndex <= COLOR_PICKING_MAX_OBJECT_INDEX &&
+    picking.batchIndex >= 0 &&
+    picking.batchIndex <= COLOR_PICKING_MAX_BATCH_INDEX;
+}
+
+vec4 picking_getPickingColor() {
+  if (!picking_canEncodePickInfo(picking_objectIndex)) {
+    return vec4(0.0);
+  }
+
+  int encodedObjectIndex = picking_objectIndex + 1;
+  int red = encodedObjectIndex % 256;
+  int green = (encodedObjectIndex / 256) % 256;
+  int blue = (encodedObjectIndex / 65536) % 256;
+  int alpha = picking.batchIndex + 1;
+
+  return vec4(float(red), float(green), float(blue), float(alpha)) / 255.0;
 }
 
 vec4 picking_filterPickingColor(vec4 color) {
   if (bool(picking.isActive)) {
-    if (picking_objectIndex == INDEX_PICKING_INVALID_INDEX) {
+    if (!picking_canEncodePickInfo(picking_objectIndex)) {
       discard;
     }
+    return picking_getPickingColor();
   }
+
   return color;
 }
 
-/*
- * Returns picking color if picking is enabled if not
- * highlight color if this item is selected, otherwise unmodified argument.
- */
 vec4 picking_filterColor(vec4 color) {
   vec4 outColor = color;
   outColor = picking_filterHighlightColor(outColor);
@@ -4948,87 +6204,81 @@ var picking = {
   fs
 };
 
-// dist/modules/picking/color-picking.js
+// dist/modules/picking/index-picking.js
 var source2 = (
   /* wgsl */
   `${WGSL_UNIFORMS}
-`
-);
-var vs2 = (
-  /* glsl */
-  `${GLSL_UNIFORMS}
-out vec4 picking_vRGBcolor_Avalid;
-
-// Normalize unsigned byte color to 0-1 range
-vec3 picking_normalizeColor(vec3 color) {
-  return picking.useFloatColors > 0.5 ? color : color / 255.0;
-}
 
-// Normalize unsigned byte color to 0-1 range
-vec4 picking_normalizeColor(vec4 color) {
-  return picking.useFloatColors > 0.5 ? color : color / 255.0;
-}
-
-bool picking_isColorZero(vec3 color) {
-  return dot(color, vec3(1.0)) < 0.00001;
-}
+const INDEX_PICKING_MODE_INSTANCE = 0;
+const INDEX_PICKING_MODE_CUSTOM = 1;
+const INDEX_PICKING_INVALID_INDEX = ${INVALID_INDEX}; // 2^32 - 1
 
-bool picking_isColorValid(vec3 color) {
-  return dot(color, vec3(1.0)) > 0.00001;
+/**
+ * WGSL shaders need to carry the returned object index through their own stage outputs.
+ */
+fn picking_setObjectIndex(objectIndex: i32) -> i32 {
+  return objectIndex;
 }
 
-// Check if this vertex is highlighted 
-bool isVertexHighlighted(vec3 vertexColor) {
-  vec3 highlightedObjectColor = picking_normalizeColor(picking.highlightedObjectColor);
+fn picking_isObjectHighlighted(objectIndex: i32) -> bool {
   return
-    bool(picking.isHighlightActive) && picking_isColorZero(abs(vertexColor - highlightedObjectColor));
+    picking.isHighlightActive != 0 &&
+    picking.highlightedBatchIndex == picking.batchIndex &&
+    picking.highlightedObjectIndex == objectIndex;
 }
 
-// Set the current picking color
-void picking_setPickingColor(vec3 pickingColor) {
-  pickingColor = picking_normalizeColor(pickingColor);
-
-  if (bool(picking.isActive)) {
-    // Use alpha as the validity flag. If pickingColor is [0, 0, 0] fragment is non-pickable
-    picking_vRGBcolor_Avalid.a = float(picking_isColorValid(pickingColor));
-
-    if (!bool(picking.isAttribute)) {
-      // Stores the picking color so that the fragment shader can render it during picking
-      picking_vRGBcolor_Avalid.rgb = pickingColor;
-    }
-  } else {
-    // Do the comparison with selected item color in vertex shader as it should mean fewer compares
-    picking_vRGBcolor_Avalid.a = float(isVertexHighlighted(pickingColor));
+fn picking_filterHighlightColor(color: vec4<f32>, objectIndex: i32) -> vec4<f32> {
+  if (picking.isActive != 0 || !picking_isObjectHighlighted(objectIndex)) {
+    return color;
   }
-}
 
-void picking_setObjectIndex(uint objectIndex) {
-  if (bool(picking.isActive)) {
-    uint index = objectIndex;
-    if (picking.indexMode == PICKING_INDEX_MODE_INSTANCE) {
-      index = uint(gl_InstanceID);
-    }
-    picking_vRGBcolor_Avalid.r = float(index % 255) / 255.0;
-    picking_vRGBcolor_Avalid.g = float((index / 255) % 255) / 255.0;
-    picking_vRGBcolor_Avalid.b = float((index / 255 / 255) %255) / 255.0;
+  let highLightAlpha = picking.highlightColor.a;
+  let blendedAlpha = highLightAlpha + color.a * (1.0 - highLightAlpha);
+  if (blendedAlpha == 0.0) {
+    return vec4<f32>(color.rgb, 0.0);
   }
+
+  let highLightRatio = highLightAlpha / blendedAlpha;
+  let blendedRGB = mix(color.rgb, picking.highlightColor.rgb, highLightRatio);
+  return vec4<f32>(blendedRGB, blendedAlpha);
 }
 
-void picking_setPickingAttribute(float value) {
-  if (bool(picking.isAttribute)) {
-    picking_vRGBcolor_Avalid.r = value;
+fn picking_filterPickingColor(color: vec4<f32>, objectIndex: i32) -> vec4<f32> {
+  if (picking.isActive != 0 && objectIndex == INDEX_PICKING_INVALID_INDEX) {
+    discard;
   }
+  return color;
 }
 
-void picking_setPickingAttribute(vec2 value) {
-  if (bool(picking.isAttribute)) {
-    picking_vRGBcolor_Avalid.rg = value;
-  }
+fn picking_getPickingColor(objectIndex: i32) -> vec2<i32> {
+  return vec2<i32>(objectIndex, picking.batchIndex);
 }
 
-void picking_setPickingAttribute(vec3 value) {
-  if (bool(picking.isAttribute)) {
-    picking_vRGBcolor_Avalid.rgb = value;
+`
+);
+var vs2 = (
+  /* glsl */
+  `${GLSL_UNIFORMS}
+
+const int INDEX_PICKING_MODE_INSTANCE = 0;
+const int INDEX_PICKING_MODE_CUSTOM = 1;
+
+const int INDEX_PICKING_INVALID_INDEX = ${INVALID_INDEX}; // 2^32 - 1
+
+flat out int picking_objectIndex;
+
+/**
+ * Vertex shaders should call this function to set the object index.
+ * If using instance or vertex mode, argument will be ignored, 0 can be supplied.
+ */
+void picking_setObjectIndex(int objectIndex) {
+  switch (picking.indexMode) {
+    case INDEX_PICKING_MODE_INSTANCE:
+      picking_objectIndex = gl_InstanceID;
+      break;
+    case INDEX_PICKING_MODE_CUSTOM:
+      picking_objectIndex = objectIndex;
+      break;
   }
 }
 `
@@ -5037,41 +6287,58 @@ var fs2 = (
   /* glsl */
   `${GLSL_UNIFORMS}
 
-in vec4 picking_vRGBcolor_Avalid;
+const int INDEX_PICKING_INVALID_INDEX = ${INVALID_INDEX}; // 2^32 - 1
 
-/*
+flat in int picking_objectIndex;
+
+/**
+ * Check if this vertex is highlighted (part of the selected batch and object)
+ */ 
+bool picking_isFragmentHighlighted() {
+  return 
+    bool(picking.isHighlightActive) &&
+    picking.highlightedBatchIndex == picking.batchIndex &&
+    picking.highlightedObjectIndex == picking_objectIndex
+    ;
+}
+
+/**
  * Returns highlight color if this item is selected.
  */
 vec4 picking_filterHighlightColor(vec4 color) {
   // If we are still picking, we don't highlight
-  if (picking.isActive > 0.5) {
+  if (bool(picking.isActive)) {
     return color;
   }
 
-  bool selected = bool(picking_vRGBcolor_Avalid.a);
-
-  if (selected) {
-    // Blend in highlight color based on its alpha value
-    float highLightAlpha = picking.highlightColor.a;
-    float blendedAlpha = highLightAlpha + color.a * (1.0 - highLightAlpha);
-    float highLightRatio = highLightAlpha / blendedAlpha;
-
-    vec3 blendedRGB = mix(color.rgb, picking.highlightColor.rgb, highLightRatio);
-    return vec4(blendedRGB, blendedAlpha);
-  } else {
+  // If we are not highlighted, return color as is
+  if (!picking_isFragmentHighlighted()) {
     return color;
   }
+   
+  // Blend in highlight color based on its alpha value
+  float highLightAlpha = picking.highlightColor.a;
+  float blendedAlpha = highLightAlpha + color.a * (1.0 - highLightAlpha);
+  float highLightRatio = highLightAlpha / blendedAlpha;
+
+  vec3 blendedRGB = mix(color.rgb, picking.highlightColor.rgb, highLightRatio);
+  return vec4(blendedRGB, blendedAlpha);
 }
 
 /*
  * Returns picking color if picking enabled else unmodified argument.
  */
+ivec4 picking_getPickingColor() {
+  // Assumes that colorAttachment0 is rg32int
+  // TODO? - we could render indices into a second color attachment and not mess with fragColor
+  return ivec4(picking_objectIndex, picking.batchIndex, 0u, 0u);  
+}
+
 vec4 picking_filterPickingColor(vec4 color) {
   if (bool(picking.isActive)) {
-    if (picking_vRGBcolor_Avalid.a == 0.0) {
+    if (picking_objectIndex == INDEX_PICKING_INVALID_INDEX) {
       discard;
     }
-    return picking_vRGBcolor_Avalid;
   }
   return color;
 }
@@ -5081,8 +6348,10 @@ vec4 picking_filterPickingColor(vec4 color) {
  * highlight color if this item is selected, otherwise unmodified argument.
  */
 vec4 picking_filterColor(vec4 color) {
-  vec4 highlightColor = picking_filterHighlightColor(color);
-  return picking_filterPickingColor(highlightColor);
+  vec4 outColor = color;
+  outColor = picking_filterHighlightColor(outColor);
+  outColor = picking_filterPickingColor(outColor);
+  return outColor;
 }
 `
 );
@@ -5094,6 +6363,15 @@ var picking2 = {
   fs: fs2
 };
 
+// dist/modules/picking/picking.js
+var picking3 = {
+  ...pickingUniforms,
+  name: "picking",
+  source: picking2.source,
+  vs: picking.vs,
+  fs: picking.fs
+};
+
 // dist/modules/picking/legacy-picking-manager.js
 var LegacyPickingManager = class {
   device;
@@ -5161,4 +6439,11 @@ var LegacyPickingManager = class {
     return [pickX, pickY];
   }
 };
+
+// dist/modules/picking/legacy-color-picking.js
+var import_shadertools7 = require("@luma.gl/shadertools");
+var legacyColorPicking = import_shadertools7.picking;
+
+// dist/index.js
+var AsyncTexture = DynamicTexture;
 //# sourceMappingURL=index.cjs.map