@luma.gl/engine 9.3.0-alpha.6 → 9.3.0-alpha.9

package/dist/index.cjs

@@ -35,6 +35,7 @@ __export(dist_exports, {
   ConeGeometry: () => ConeGeometry,
   CubeGeometry: () => CubeGeometry,
   CylinderGeometry: () => CylinderGeometry,
+  DirectionalLightModel: () => DirectionalLightModel,
   DynamicTexture: () => DynamicTexture,
   GPUGeometry: () => GPUGeometry,
   Geometry: () => Geometry,
@@ -42,16 +43,18 @@ __export(dist_exports, {
   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,
@@ -59,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);
 
@@ -350,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) {
@@ -744,7 +755,7 @@ function clearError(device) {
 }
 
 // dist/model/model.js
-var import_core10 = require("@luma.gl/core");
+var import_core8 = require("@luma.gl/core");
 var import_shadertools2 = require("@luma.gl/shadertools");
 
 // dist/geometry/gpu-geometry.js
@@ -848,293 +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) {
-    const moduleData = device.getModuleData("@luma.gl/engine");
-    moduleData.defaultPipelineFactory ||= new _PipelineFactory(device);
-    return moduleData.defaultPipelineFactory;
-  }
-  device;
-  _hashCounter = 0;
-  _hashes = {};
-  _renderPipelineCache = {};
-  _computePipelineCache = {};
-  _sharedRenderPipelineCache = {};
-  get [Symbol.toStringTag]() {
-    return "PipelineFactory";
-  }
-  toString() {
-    return `PipelineFactory(${this.device.id})`;
-  }
-  constructor(device) {
-    this.device = device;
-  }
-  /** Return a RenderPipeline matching supplied props. Reuses an equivalent pipeline if already created. */
-  createRenderPipeline(props) {
-    var _a;
-    if (!this.device.props._cachePipelines) {
-      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.resource;
-    if (!pipeline) {
-      const sharedRenderPipeline = this.device.type === "webgl" && this.device.props._sharePipelines ? this.createSharedRenderPipeline(allProps) : void 0;
-      pipeline = this.device.createRenderPipeline({
-        ...allProps,
-        id: allProps.id ? `${allProps.id}-cached` : uid("unnamed-cached"),
-        _sharedRenderPipeline: sharedRenderPipeline
-      });
-      pipeline.hash = hash;
-      cache[hash] = { resource: pipeline, useCount: 1 };
-      if (this.device.props.debugFactories) {
-        import_core4.log.log(3, `${this}: ${pipeline} created, count=${cache[hash].useCount}`)();
-      }
-    } else {
-      cache[hash].useCount++;
-      if (this.device.props.debugFactories) {
-        import_core4.log.log(3, `${this}: ${cache[hash].resource} 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.device.props._cachePipelines) {
-      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.resource;
-    if (!pipeline) {
-      pipeline = this.device.createComputePipeline({
-        ...allProps,
-        id: allProps.id ? `${allProps.id}-cached` : void 0
-      });
-      pipeline.hash = hash;
-      cache[hash] = { resource: pipeline, useCount: 1 };
-      if (this.device.props.debugFactories) {
-        import_core4.log.log(3, `${this}: ${pipeline} created, count=${cache[hash].useCount}`)();
-      }
-    } else {
-      cache[hash].useCount++;
-      if (this.device.props.debugFactories) {
-        import_core4.log.log(3, `${this}: ${cache[hash].resource} reused, count=${cache[hash].useCount}, (id=${props.id})`)();
-      }
-    }
-    return pipeline;
-  }
-  release(pipeline) {
-    if (!this.device.props._cachePipelines) {
-      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.device.props.debugFactories) {
-        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.device.props.debugFactories) {
-      import_core4.log.log(3, `${this}: ${pipeline} released, count=${cache[hash].useCount}`)();
-    }
-  }
-  createSharedRenderPipeline(props) {
-    const sharedPipelineHash = this._hashSharedRenderPipeline(props);
-    let sharedCacheItem = this._sharedRenderPipelineCache[sharedPipelineHash];
-    if (!sharedCacheItem) {
-      const sharedRenderPipeline = this.device._createSharedRenderPipelineWebGL(props);
-      sharedCacheItem = { resource: sharedRenderPipeline, useCount: 0 };
-      this._sharedRenderPipelineCache[sharedPipelineHash] = sharedCacheItem;
-    }
-    sharedCacheItem.useCount++;
-    return sharedCacheItem.resource;
-  }
-  releaseSharedRenderPipeline(pipeline) {
-    if (!pipeline.sharedRenderPipeline) {
-      return;
-    }
-    const sharedPipelineHash = this._hashSharedRenderPipeline(pipeline.sharedRenderPipeline.props);
-    const sharedCacheItem = this._sharedRenderPipelineCache[sharedPipelineHash];
-    if (!sharedCacheItem) {
-      return;
-    }
-    sharedCacheItem.useCount--;
-    if (sharedCacheItem.useCount === 0) {
-      sharedCacheItem.resource.destroy();
-      delete this._sharedRenderPipelineCache[sharedPipelineHash];
-    }
-  }
-  // PRIVATE
-  /** Destroy a cached pipeline, removing it from the cache if configured to do so. */
-  _destroyPipeline(pipeline) {
-    const cache = this._getCache(pipeline);
-    if (!this.device.props._destroyPipelines) {
-      return false;
-    }
-    delete cache[pipeline.hash];
-    pipeline.destroy();
-    if (pipeline instanceof import_core4.RenderPipeline) {
-      this.releaseSharedRenderPipeline(pipeline);
-    }
-    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 = this._getWebGLVaryingHash(props);
-    const bufferLayoutHash = this._getHash(JSON.stringify(props.bufferLayout));
-    const { type } = this.device;
-    switch (type) {
-      case "webgl":
-        const webglParameterHash = this._getHash(JSON.stringify(props.parameters));
-        return `${type}/R/${vsHash}/${fsHash}V${varyingHash}T${props.topology}P${webglParameterHash}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}`;
-    }
-  }
-  _hashSharedRenderPipeline(props) {
-    const vsHash = props.vs ? this._getHash(props.vs.source) : 0;
-    const fsHash = props.fs ? this._getHash(props.fs.source) : 0;
-    const varyingHash = this._getWebGLVaryingHash(props);
-    return `webgl/S/${vsHash}/${fsHash}V${varyingHash}`;
-  }
-  _getHash(key) {
-    if (this._hashes[key] === void 0) {
-      this._hashes[key] = this._hashCounter++;
-    }
-    return this._hashes[key];
-  }
-  _getWebGLVaryingHash(props) {
-    const { varyings = [], bufferMode = null } = props;
-    return this._getHash(JSON.stringify({ varyings, bufferMode }));
-  }
-};
-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) {
-    const moduleData = device.getModuleData("@luma.gl/engine");
-    moduleData.defaultShaderFactory ||= new _ShaderFactory(device);
-    return moduleData.defaultShaderFactory;
-  }
-  device;
-  _cache = {};
-  get [Symbol.toStringTag]() {
-    return "ShaderFactory";
-  }
-  toString() {
-    return `${this[Symbol.toStringTag]}(${this.device.id})`;
-  }
-  /** @internal */
-  constructor(device) {
-    this.device = device;
-  }
-  /** Requests a {@link Shader} from the cache, creating a new Shader only if necessary. */
-  createShader(props) {
-    if (!this.device.props._cacheShaders) {
-      return this.device.createShader(props);
-    }
-    const key = this._hashShader(props);
-    let cacheEntry = this._cache[key];
-    if (!cacheEntry) {
-      const resource = this.device.createShader({
-        ...props,
-        id: props.id ? `${props.id}-cached` : void 0
-      });
-      this._cache[key] = cacheEntry = { resource, useCount: 1 };
-      if (this.device.props.debugFactories) {
-        import_core5.log.log(3, `${this}: Created new shader ${resource.id}`)();
-      }
-    } else {
-      cacheEntry.useCount++;
-      if (this.device.props.debugFactories) {
-        import_core5.log.log(3, `${this}: Reusing shader ${cacheEntry.resource.id} count=${cacheEntry.useCount}`)();
-      }
-    }
-    return cacheEntry.resource;
-  }
-  /** Releases a previously-requested {@link Shader}, destroying it if no users remain. */
-  release(shader) {
-    if (!this.device.props._cacheShaders) {
-      shader.destroy();
-      return;
-    }
-    const key = this._hashShader(shader);
-    const cacheEntry = this._cache[key];
-    if (cacheEntry) {
-      cacheEntry.useCount--;
-      if (cacheEntry.useCount === 0) {
-        if (this.device.props._destroyShaders) {
-          delete this._cache[key];
-          cacheEntry.resource.destroy();
-          if (this.device.props.debugFactories) {
-            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.device.props.debugFactories) {
-        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;
@@ -1235,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) {
@@ -1264,7 +1001,7 @@ 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;
   }
@@ -1294,8 +1031,52 @@ function sortedBufferLayoutByShaderSourceLocations(shaderLayout, bufferLayout) {
   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
@@ -1303,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;
@@ -1339,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}`)();
       }
     }
   }
@@ -1368,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 };
     }
   }
@@ -1416,16 +1200,87 @@ 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/dynamic-texture/dynamic-texture.js
-var import_core9 = require("@luma.gl/core");
+var import_core7 = require("@luma.gl/core");
 
 // dist/dynamic-texture/texture-data.js
-var import_core8 = require("@luma.gl/core");
+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)
@@ -1479,8 +1334,8 @@ function getTextureSizeFromData(props) {
   }
 }
 function getTextureMipLevelSize(data) {
-  if ((0, import_core8.isExternalImage)(data)) {
-    return (0, import_core8.getExternalImageSize)(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 };
@@ -1490,6 +1345,9 @@ function getTextureMipLevelSize(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) {
@@ -1512,13 +1370,13 @@ function getTexture1DSubresources(data) {
 function _normalizeTexture2DData(data) {
   return Array.isArray(data) ? data : [data];
 }
-function getTexture2DSubresources(slice, lodData) {
+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_core8.isExternalImage)(imageData)) {
+    if ((0, import_core6.isExternalImage)(imageData)) {
       subresources.push({
         type: "external-image",
         image: imageData,
@@ -1533,6 +1391,19 @@ function getTexture2DSubresources(slice, lodData) {
         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");
     }
@@ -1628,7 +1499,12 @@ var _DynamicTexture = class {
     try {
       const propsWithSyncData = await this._loadAllData(originalPropsWithAsyncData);
       this._checkNotDestroyed();
-      const subresources = propsWithSyncData.data ? getTextureSubresources(propsWithSyncData) : [];
+      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 = () => {
@@ -1658,11 +1534,11 @@ var _DynamicTexture = class {
         data: void 0
       };
       if (this.device.isTextureFormatCompressed(resolvedFormat) && !userProvidedUsage) {
-        baseTextureProps.usage = import_core9.Texture.SAMPLE | import_core9.Texture.COPY_DST;
+        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_core9.Texture.SAMPLE | import_core9.Texture.STORAGE | import_core9.Texture.COPY_DST | import_core9.Texture.COPY_SRC : import_core9.Texture.SAMPLE | import_core9.Texture.RENDER | import_core9.Texture.COPY_DST | import_core9.Texture.COPY_SRC;
+        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);
@@ -1675,18 +1551,17 @@ var _DynamicTexture = class {
         this._setTextureSubresources(textureData.subresources);
       }
       if (this.props.mipmaps && !textureData.hasExplicitMipChain && !shouldGenerateMipmaps) {
-        import_core9.log.warn(`${this} skipping auto-generated mipmaps for compressed texture format`)();
+        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_core9.log.info(0, `${this} created`)();
+      import_core7.log.info(0, `${this} created`)();
     } catch (e) {
       const err = e instanceof Error ? e : new Error(String(e));
       this.rejectReady(err);
-      throw err;
     }
   }
   destroy() {
@@ -1704,16 +1579,57 @@ var _DynamicTexture = class {
     } else if (this.device.type === "webgpu") {
       this.device.generateMipmapsWebGPU(this.texture);
     } else {
-      import_core9.log.warn(`${this} mipmaps not supported on ${this.device.type}`);
+      import_core7.log.warn(`${this} mipmaps not supported on ${this.device.type}`);
     }
   }
   /** Set sampler or create one from props */
   setSampler(sampler = {}) {
     this._checkReady();
-    const s = sampler instanceof import_core9.Sampler ? sampler : this.device.createSampler(sampler);
+    const s = sampler instanceof import_core7.Sampler ? sampler : this.device.createSampler(sampler);
     this.texture.setSampler(s);
     this._sampler = s;
   }
+  /**
+   * 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.
+   */
+  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) {
+      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.
@@ -1728,7 +1644,7 @@ var _DynamicTexture = class {
     this._sampler = this.texture.sampler;
     this._view = this.texture.view;
     prev.destroy();
-    import_core9.log.info(`${this} resized`);
+    import_core7.log.info(`${this} resized`);
     return true;
   }
   /** Convert cube face label to texture slice index. Index can be used with `setTexture2DData()`. */
@@ -1830,18 +1746,18 @@ var _DynamicTexture = class {
   }
   _checkNotDestroyed() {
     if (this.destroyed) {
-      import_core9.log.warn(`${this} already destroyed`);
+      import_core7.log.warn(`${this} already destroyed`);
     }
   }
   _checkReady() {
     if (!this.isReady) {
-      import_core9.log.warn(`${this} Cannot perform this operation before ready`);
+      import_core7.log.warn(`${this} Cannot perform this operation before ready`);
     }
   }
 };
 var DynamicTexture = _DynamicTexture;
 __publicField(DynamicTexture, "defaultProps", {
-  ...import_core9.Texture.defaultProps,
+  ...import_core7.Texture.defaultProps,
   dimension: "2d",
   data: null,
   mipmaps: false
@@ -1850,11 +1766,13 @@ 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);
+      return getTexture2DSubresources(0, props.data, baseLevelSize, textureFormat);
     case "3d":
       return getTexture3DSubresources(props.data);
     case "2d-array":
@@ -1981,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++) {
@@ -2050,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 = {};
@@ -2060,6 +1979,7 @@ var _Model = class {
   _destroyed = false;
   /** "Time" of last draw. Monotonically increasing timestamp */
   _lastDrawTimestamp = -1;
+  _bindingTable = [];
   get [Symbol.toStringTag]() {
     return "Model";
   }
@@ -2067,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);
@@ -2081,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 ||= device.getShaderLayout(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,
@@ -2100,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;
@@ -2109,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,
@@ -2171,6 +2096,10 @@ 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();
@@ -2184,7 +2113,7 @@ var _Model = class {
   draw(renderPass) {
     const loadingBinding = this._areBindingsLoading();
     if (loadingBinding) {
-      import_core10.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 {
@@ -2199,6 +2128,7 @@ var _Model = class {
       this._logDrawCallStart();
       this.pipeline = this._updatePipeline();
       const syncBindings = this._getBindings();
+      const syncBindGroups = this._getBindGroups();
       const { indexBuffer } = this.vertexArray;
       const indexCount = indexBuffer ? indexBuffer.byteLength / (indexBuffer.indexType === "uint32" ? 4 : 2) : void 0;
       drawSuccess = this.pipeline.draw({
@@ -2213,6 +2143,8 @@ var _Model = class {
         // 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
@@ -2313,20 +2245,25 @@ var _Model = class {
   }
   /** Set the shader inputs */
   setShaderInputs(shaderInputs) {
+    var _a;
     this.shaderInputs = shaderInputs;
-    this._uniformStore = new import_core10.UniformStore(this.shaderInputs.modules);
+    this._uniformStore = new import_core8.UniformStore(this.shaderInputs.modules);
     for (const [moduleName, module2] of Object.entries(this.shaderInputs.modules)) {
-      if (shaderModuleHasUniforms(module2)) {
+      if (shaderModuleHasUniforms(module2) && !((_a = this.material) == null ? void 0 : _a.ownsModule(moduleName))) {
         const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, 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");
   }
   /**
@@ -2358,7 +2295,7 @@ var _Model = class {
   setAttributes(buffers, options) {
     const disableWarnings = (options == null ? void 0 : options.disableWarnings) ?? this.props.disableWarnings;
     if (buffers["indices"]) {
-      import_core10.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);
@@ -2366,7 +2303,7 @@ var _Model = class {
       const bufferLayout = bufferLayoutHelper.getBufferLayout(bufferName);
       if (!bufferLayout) {
         if (!disableWarnings) {
-          import_core10.log.warn(`Model(${this.id}): Missing layout for buffer "${bufferName}".`)();
+          import_core8.log.warn(`Model(${this.id}): Missing layout for buffer "${bufferName}".`)();
         }
         continue;
       }
@@ -2381,7 +2318,7 @@ var _Model = class {
         }
       }
       if (!set && !disableWarnings) {
-        import_core10.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");
@@ -2400,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_core10.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");
@@ -2408,11 +2345,17 @@ 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 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;
+      }
+    }
     return false;
   }
   /** Extracts texture view from loaded async textures. Returns null if any textures have not yet been loaded. */
@@ -2429,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_core10.TextureView) {
+      if (binding instanceof import_core8.TextureView) {
         timestamp = Math.max(timestamp, binding.texture.updateTimestamp);
-      } else if (binding instanceof import_core10.Buffer || binding instanceof import_core10.Texture) {
+      } else if (binding instanceof import_core8.Buffer || binding instanceof import_core8.Texture) {
         timestamp = Math.max(timestamp, binding.updateTimestamp);
       } 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_core10.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
@@ -2477,7 +2442,7 @@ var _Model = class {
       let prevShaderVs = null;
       let prevShaderFs = null;
       if (this.pipeline) {
-        import_core10.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;
       }
@@ -2501,16 +2466,15 @@ 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_core10.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 && prevShaderFs !== prevShaderVs) {
@@ -2523,24 +2487,24 @@ var _Model = class {
   _lastLogTime = 0;
   _logOpen = false;
   _logDrawCallStart() {
-    const logDrawTimeout = import_core10.log.level > 3 ? 0 : LOG_DRAW_TIMEOUT;
-    if (import_core10.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_core10.log.group(LOG_DRAW_PRIORITY, `>>> DRAWING MODEL ${this.id}`, { collapsed: import_core10.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_core10.log.table(LOG_DRAW_PRIORITY, shaderLayoutTable)();
+      import_core8.log.table(LOG_DRAW_PRIORITY, shaderLayoutTable)();
       const uniformTable = this.shaderInputs.getDebugTable();
-      import_core10.log.table(LOG_DRAW_PRIORITY, uniformTable)();
+      import_core8.log.table(LOG_DRAW_PRIORITY, uniformTable)();
       const attributeTable = this._getAttributeDebugTable();
-      import_core10.log.table(LOG_DRAW_PRIORITY, this._attributeInfos)();
-      import_core10.log.table(LOG_DRAW_PRIORITY, attributeTable)();
-      import_core10.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;
     }
   }
@@ -2579,14 +2543,26 @@ var _Model = class {
   }
   // TODO - fix typing of luma data types
   _getBufferOrConstantValues(attribute, dataType) {
-    const TypedArrayConstructor = (0, import_core10.getTypedArrayConstructor)(dataType);
-    const typedArray = attribute instanceof import_core10.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_core10.RenderPipeline.defaultProps,
+  ...import_core8.RenderPipeline.defaultProps,
   source: void 0,
   vs: null,
   fs: null,
@@ -2606,6 +2582,7 @@ __publicField(Model, "defaultProps", {
   instanceCount: 0,
   vertexCount: 0,
   shaderInputs: void 0,
+  material: void 0,
   pipelineFactory: void 0,
   shaderFactory: void 0,
   transformFeedback: void 0,
@@ -2613,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,
@@ -2626,101 +2600,322 @@ function getPlatformInfo(device) {
     features: device.features
   };
 }
-function isObjectEmpty(obj) {
-  for (const key in obj) {
-    return false;
-  }
-  return true;
-}
 
-// dist/compute/buffer-transform.js
-var import_core11 = require("@luma.gl/core");
-var import_shadertools3 = require("@luma.gl/shadertools");
-var _BufferTransform = class {
+// 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;
-  model;
-  transformFeedback;
-  static isSupported(device) {
-    var _a;
-    return ((_a = device == null ? void 0 : device.info) == null ? void 0 : _a.type) === "webgl";
-  }
-  constructor(device, props = _BufferTransform.defaultProps) {
-    if (!_BufferTransform.isSupported(device)) {
-      throw new Error("BufferTransform not yet implemented on WebGPU");
-    }
+  /** Shader modules that define the material schema. */
+  modules;
+  _materialBindingNames;
+  _materialModuleNames;
+  constructor(device, props = {}) {
     this.device = device;
-    this.model = new Model(this.device, {
-      id: props.id || "buffer-transform-model",
-      fs: props.fs || (0, import_shadertools3.getPassthroughFS)(),
-      topology: props.topology || "point-list",
-      varyings: props.outputs || props.varyings,
-      ...props
-    });
-    this.transformFeedback = this.device.createTransformFeedback({
-      layout: this.model.pipeline.shaderLayout,
-      // @ts-expect-error TODO
-      buffers: props.feedbackBuffers
+    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
     });
-    this.model.setTransformFeedback(this.transformFeedback);
-    Object.seal(this);
   }
-  /** Destroy owned resources. */
-  destroy() {
-    if (this.model) {
-      this.model.destroy();
-    }
-  }
-  /** @deprecated Use {@link destroy}. */
-  delete() {
-    this.destroy();
+  /** Returns the logical material-owned resource binding names. */
+  getBindingNames() {
+    return Array.from(this._materialBindingNames);
   }
-  /** Run one transform loop. */
-  run(options) {
-    if (options == null ? void 0 : options.inputBuffers) {
-      this.model.setAttributes(options.inputBuffers);
-    }
-    if (options == null ? void 0 : options.outputBuffers) {
-      this.transformFeedback.setBuffers(options.outputBuffers);
+  /** Returns `true` when the supplied binding belongs to this material schema. */
+  ownsBinding(bindingName) {
+    if (this._materialBindingNames.has(bindingName)) {
+      return true;
     }
-    const renderPass = this.device.beginRenderPass(options);
-    this.model.draw(renderPass);
-    renderPass.end();
+    const aliasedModuleName = getModuleNameFromUniformBinding(bindingName);
+    return aliasedModuleName ? this._materialModuleNames.has(aliasedModuleName) : false;
   }
-  // DEPRECATED METHODS
-  /** @deprecated App knows what buffers it is passing in - Returns the {@link Buffer} or {@link BufferRange} for given varying name. */
-  getBuffer(varyingName) {
-    return this.transformFeedback.getBuffer(varyingName);
+  /** Returns `true` when the supplied shader module is owned by this material schema. */
+  ownsModule(moduleName) {
+    return this._materialModuleNames.has(moduleName);
   }
-  /** @deprecated App knows what buffers it is passing in - Reads the {@link Buffer} or {@link BufferRange} for given varying name. */
-  readAsync(varyingName) {
-    const result = this.getBuffer(varyingName);
-    if (!result) {
-      throw new Error("BufferTransform#getBuffer");
+  /** 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);
+      }
     }
-    if (result instanceof import_core11.Buffer) {
-      return result.readAsync();
+  }
+  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);
     }
-    const { buffer, byteOffset = 0, byteLength = buffer.byteLength } = result;
-    return buffer.readAsync(byteOffset, byteLength);
   }
-};
-var BufferTransform = _BufferTransform;
-__publicField(BufferTransform, "defaultProps", {
-  ...Model.defaultProps,
-  outputs: void 0,
-  feedbackBuffers: void 0
-});
+  return moduleNames;
+}
 
-// dist/compute/texture-transform.js
-var import_shadertools4 = require("@luma.gl/shadertools");
-var FS_OUTPUT_VARIABLE = "transform_output";
-var TextureTransform = class {
+// dist/material/material.js
+var Material = class {
+  /** Application-provided identifier. */
+  id;
+  /** Device that owns the material resources. */
   device;
-  model;
-  sampler;
-  currentIndex = 0;
-  samplerTextureMap = null;
-  bindings = [];
+  /** 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.shaderInputs.modules);
+    for (const [moduleName, module2] of Object.entries(this.shaderInputs.modules)) {
+      if (this.ownsModule(moduleName) && shaderModuleHasUniforms(module2)) {
+        const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, 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");
+var _BufferTransform = class {
+  device;
+  model;
+  transformFeedback;
+  static isSupported(device) {
+    var _a;
+    return ((_a = device == null ? void 0 : device.info) == null ? void 0 : _a.type) === "webgl";
+  }
+  constructor(device, props = _BufferTransform.defaultProps) {
+    if (!_BufferTransform.isSupported(device)) {
+      throw new Error("BufferTransform not yet implemented on WebGPU");
+    }
+    this.device = device;
+    this.model = new Model(this.device, {
+      id: props.id || "buffer-transform-model",
+      fs: props.fs || (0, import_shadertools3.getPassthroughFS)(),
+      topology: props.topology || "point-list",
+      varyings: props.outputs || props.varyings,
+      ...props
+    });
+    this.transformFeedback = this.device.createTransformFeedback({
+      layout: this.model.pipeline.shaderLayout,
+      // @ts-expect-error TODO
+      buffers: props.feedbackBuffers
+    });
+    this.model.setTransformFeedback(this.transformFeedback);
+    Object.seal(this);
+  }
+  /** Destroy owned resources. */
+  destroy() {
+    if (this.model) {
+      this.model.destroy();
+    }
+  }
+  /** @deprecated Use {@link destroy}. */
+  delete() {
+    this.destroy();
+  }
+  /** Run one transform loop. */
+  run(options) {
+    if (options == null ? void 0 : options.inputBuffers) {
+      this.model.setAttributes(options.inputBuffers);
+    }
+    if (options == null ? void 0 : options.outputBuffers) {
+      this.transformFeedback.setBuffers(options.outputBuffers);
+    }
+    const renderPass = this.device.beginRenderPass(options);
+    this.model.draw(renderPass);
+    renderPass.end();
+  }
+  // DEPRECATED METHODS
+  /** @deprecated App knows what buffers it is passing in - Returns the {@link Buffer} or {@link BufferRange} for given varying name. */
+  getBuffer(varyingName) {
+    return this.transformFeedback.getBuffer(varyingName);
+  }
+  /** @deprecated App knows what buffers it is passing in - Reads the {@link Buffer} or {@link BufferRange} for given varying name. */
+  readAsync(varyingName) {
+    const result = this.getBuffer(varyingName);
+    if (!result) {
+      throw new Error("BufferTransform#getBuffer");
+    }
+    if (result instanceof import_core10.Buffer) {
+      return result.readAsync();
+    }
+    const { buffer, byteOffset = 0, byteLength = buffer.byteLength } = result;
+    return buffer.readAsync(byteOffset, byteLength);
+  }
+};
+var BufferTransform = _BufferTransform;
+__publicField(BufferTransform, "defaultProps", {
+  ...Model.defaultProps,
+  outputs: void 0,
+  feedbackBuffers: void 0
+});
+
+// dist/compute/texture-transform.js
+var import_shadertools4 = require("@luma.gl/shadertools");
+var FS_OUTPUT_VARIABLE = "transform_output";
+var TextureTransform = class {
+  device;
+  model;
+  sampler;
+  currentIndex = 0;
+  samplerTextureMap = null;
+  bindings = [];
   // each element is an object : {sourceTextures, targetTexture, framebuffer}
   resources = {};
   // resources to be deleted
@@ -3096,45 +3291,676 @@ var BackgroundTextureModel = class extends ClipSpace {
   }
 };
 
-// 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 = {};
+// 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();
+    const { id = uid("sphere-geometry") } = props;
+    const { indices, attributes } = tesselateSphere(props);
+    super({
+      ...props,
+      id,
+      topology: "triangle-list",
+      indices,
+      attributes: { ...attributes, ...props.attributes }
+    });
   }
-  setProps(props) {
-    this._setScenegraphNodeProps(props);
-    return this;
+};
+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;
+    }
   }
-  toString() {
-    return `{type: ScenegraphNode, id: ${this.id})}`;
+  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;
+    }
   }
-  setPosition(position) {
-    assert(position.length === 3, "setPosition requires vector argument");
+  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;
+
+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;
   }
@@ -3374,121 +4200,6 @@ var ModelNode = class extends ScenegraphNode {
   }
 };
 
-// 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/geometries/cube-geometry.js
 var CubeGeometry = class extends Geometry {
   constructor(props = {}) {
@@ -4378,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;
@@ -4865,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");
     }
@@ -4877,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 ||= device.getShaderLayout(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,
@@ -4889,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);
@@ -4913,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();
@@ -4936,9 +5571,11 @@ var _Computation = class {
   setShaderInputs(shaderInputs) {
     this.shaderInputs = shaderInputs;
     this._uniformStore = new import_core17.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;
+    for (const [moduleName, module2] of Object.entries(this.shaderInputs.modules)) {
+      if (shaderModuleHasUniforms(module2)) {
+        const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
+        this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
+      }
     }
   }
   /**
@@ -5015,7 +5652,7 @@ var _Computation = class {
   _drawCount = 0;
   // TODO - fix typing of luma data types
   _getBufferOrConstantValues(attribute, dataType) {
-    const TypedArrayConstructor = (0, import_core17.getTypedArrayConstructor)(dataType);
+    const TypedArrayConstructor = import_core17.dataTypeDecoder.getTypedArrayConstructor(dataType);
     const typedArray = attribute instanceof import_core17.Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
     return typedArray.toString();
   }
@@ -5047,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;
@@ -5079,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) {
@@ -5099,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;
   }
-  switch (props.highlightedObjectIndex) {
+  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;
+      break;
+    default:
+      uniforms.isHighlightActive = true;
+      uniforms.highlightedObjectIndex = props.highlightedObjectIndex;
+  }
+  switch (props.highlightedBatchIndex) {
     case void 0:
       break;
     case null:
       uniforms.isHighlightActive = false;
-      uniforms.highlightedObjectIndex = INVALID_INDEX;
+      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;
@@ -5133,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
@@ -5142,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 */
@@ -5152,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;
@@ -5160,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]), new Int32Array([-1, -1, 0, 0])],
+      clearColors: [new Float32Array([0, 0, 0, 0]), INDEX_PICKING_CLEAR_COLOR],
+      clearDepth: 1
+    }) : this.device.beginRenderPass({
+      framebuffer,
+      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;
   }
@@ -5220,43 +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;
 
-/**
- * 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_setObjectIndex(objectIndex: i32) -> i32 {
+  return objectIndex;
+}
+
+fn picking_isObjectHighlighted(objectIndex: i32) -> bool {
+  return
+    picking.isHighlightActive != 0 &&
+    picking.highlightedBatchIndex == picking.batchIndex &&
+    picking.highlightedObjectIndex == 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 = (
@@ -5266,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:
@@ -5290,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;
@@ -5328,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);
@@ -5366,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;
   }
 }
 `
@@ -5455,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;
 }
@@ -5499,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;
 }
 `
 );
@@ -5512,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;
@@ -5580,6 +6440,10 @@ var LegacyPickingManager = class {
   }
 };
 
+// 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