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

package/dist/dist.dev.js

@@ -70,6 +70,7 @@ var __exports__ = (() => {
     ConeGeometry: () => ConeGeometry,
     CubeGeometry: () => CubeGeometry,
     CylinderGeometry: () => CylinderGeometry,
+    DirectionalLightModel: () => DirectionalLightModel,
     DynamicTexture: () => DynamicTexture,
     GPUGeometry: () => GPUGeometry,
     Geometry: () => Geometry,
@@ -77,16 +78,18 @@ var __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,
@@ -94,14 +97,19 @@ var __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
   });
   __reExport(bundle_exports, __toESM(require_core(), 1));
 
@@ -579,6 +587,9 @@ var __exports__ = (() => {
           this._initialized = true;
           await this._initDevice();
           this._initialize();
+          if (!this._running) {
+            return null;
+          }
           await this.props.onInitialize(this._getAnimationProps());
         }
         if (!this._running) {
@@ -966,7 +977,7 @@ var __exports__ = (() => {
   }
 
   // src/model/model.ts
-  var import_core10 = __toESM(require_core(), 1);
+  var import_core8 = __toESM(require_core(), 1);
   var import_shadertools2 = __toESM(require_shadertools(), 1);
 
   // src/geometry/gpu-geometry.ts
@@ -1069,300 +1080,19 @@ var __exports__ = (() => {
           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 };
   }
 
-  // src/factories/pipeline-factory.ts
-  var import_core4 = __toESM(require_core(), 1);
-  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) {
-      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 = cache[hash]?.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) {
-      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 = cache[hash]?.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 });
-
-  // src/factories/shader-factory.ts
-  var import_core5 = __toESM(require_core(), 1);
-  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 });
-
   // src/debug/debug-shader-layout.ts
   function getDebugTableForShaderLayout(layout, name) {
     const table = {};
@@ -1469,7 +1199,7 @@ var __exports__ = (() => {
   }
 
   // src/utils/buffer-layout-helper.ts
-  var import_core6 = __toESM(require_core(), 1);
+  var import_core4 = __toESM(require_core(), 1);
   var BufferLayoutHelper = class {
     bufferLayouts;
     constructor(bufferLayouts) {
@@ -1497,7 +1227,7 @@ var __exports__ = (() => {
     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;
     }
@@ -1529,8 +1259,51 @@ var __exports__ = (() => {
     return sortedLayout;
   }
 
+  // src/utils/shader-module-utils.ts
+  function mergeShaderModuleBindingsIntoLayout(shaderLayout, modules) {
+    if (!shaderLayout || !modules.some((module) => module.bindingLayout?.length)) {
+      return shaderLayout;
+    }
+    const mergedLayout = {
+      ...shaderLayout,
+      bindings: shaderLayout.bindings.map((binding) => ({ ...binding }))
+    };
+    if ("attributes" in (shaderLayout || {})) {
+      mergedLayout.attributes = shaderLayout?.attributes || [];
+    }
+    for (const module of modules) {
+      for (const bindingLayout of module.bindingLayout || []) {
+        for (const relatedBindingName of getRelatedBindingNames(bindingLayout.name)) {
+          const binding = mergedLayout.bindings.find(
+            (candidate) => candidate.name === relatedBindingName
+          );
+          if (binding?.group === 0) {
+            binding.group = bindingLayout.group;
+          }
+        }
+      }
+    }
+    return mergedLayout;
+  }
+  function shaderModuleHasUniforms(module) {
+    return Boolean(module.uniformTypes && !isObjectEmpty(module.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;
+  }
+
   // src/shader-inputs.ts
-  var import_core7 = __toESM(require_core(), 1);
+  var import_core5 = __toESM(require_core(), 1);
   var import_shadertools = __toESM(require_shadertools(), 1);
 
   // ../../node_modules/@math.gl/types/dist/is-array.js
@@ -1551,11 +1324,11 @@ var __exports__ = (() => {
   function isUniformValue(value) {
     return 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;
@@ -1588,19 +1361,22 @@ var __exports__ = (() => {
     constructor(modules, options) {
       Object.assign(this.options, options);
       const resolvedModules = (0, import_shadertools.getShaderModuleDependencies)(
-        Object.values(modules).filter((module) => module.dependencies)
+        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, module] of Object.entries(modules)) {
+        if (!module) {
+          continue;
+        }
         this._addModule(module);
         if (module.name && name !== module.name && !this.options.disableWarnings) {
-          import_core7.log.warn(`Module name: ${name} vs ${module.name}`)();
+          import_core5.log.warn(`Module name: ${name} vs ${module.name}`)();
         }
       }
     }
@@ -1617,15 +1393,22 @@ var __exports__ = (() => {
         const module = this.modules[moduleName];
         if (!module) {
           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 = module.getUniforms?.(moduleProps, oldUniforms) || moduleProps;
-        const { uniforms, bindings } = splitUniformsAndBindings(uniformsAndBindings);
-        this.moduleUniforms[moduleName] = { ...oldUniforms, ...uniforms };
+        const { uniforms, bindings } = splitUniformsAndBindings(
+          uniformsAndBindings,
+          module.uniformTypes
+        );
+        this.moduleUniforms[moduleName] = mergeModuleUniforms(
+          oldUniforms,
+          uniforms,
+          module.uniformTypes
+        );
         this.moduleBindings[moduleName] = { ...oldBindings, ...bindings };
       }
     }
@@ -1664,16 +1447,99 @@ var __exports__ = (() => {
     }
     _addModule(module) {
       const moduleName = module.name;
-      this.moduleUniforms[moduleName] = module.defaultUniforms || {};
+      this.moduleUniforms[moduleName] = mergeModuleUniforms(
+        {},
+        module.defaultUniforms || {},
+        module.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(module) {
+    return Boolean(module?.dependencies);
+  }
 
   // src/dynamic-texture/dynamic-texture.ts
-  var import_core9 = __toESM(require_core(), 1);
+  var import_core7 = __toESM(require_core(), 1);
 
   // src/dynamic-texture/texture-data.ts
-  var import_core8 = __toESM(require_core(), 1);
+  var import_core6 = __toESM(require_core(), 1);
   var TEXTURE_CUBE_FACE_MAP = { "+X": 0, "-X": 1, "+Y": 2, "-Y": 3, "+Z": 4, "-Z": 5 };
   function getFirstMipLevel(layer) {
     if (!layer)
@@ -1727,8 +1593,8 @@ var __exports__ = (() => {
     }
   }
   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 };
@@ -1738,6 +1604,9 @@ var __exports__ = (() => {
   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) {
@@ -1762,13 +1631,13 @@ var __exports__ = (() => {
   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,
@@ -1783,6 +1652,19 @@ var __exports__ = (() => {
           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");
       }
@@ -1878,7 +1760,12 @@ var __exports__ = (() => {
       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 = () => {
@@ -1908,11 +1795,11 @@ var __exports__ = (() => {
           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);
@@ -1925,18 +1812,17 @@ var __exports__ = (() => {
           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() {
@@ -1954,16 +1840,60 @@ var __exports__ = (() => {
       } 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.
@@ -1978,7 +1908,7 @@ var __exports__ = (() => {
       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()`. */
@@ -2082,18 +2012,18 @@ var __exports__ = (() => {
     }
     _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
@@ -2102,11 +2032,13 @@ var __exports__ = (() => {
     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":
@@ -2239,7 +2171,7 @@ var __exports__ = (() => {
     }
     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++) {
@@ -2308,6 +2240,7 @@ var __exports__ = (() => {
     /** 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 = {};
@@ -2318,6 +2251,7 @@ var __exports__ = (() => {
     _destroyed = false;
     /** "Time" of last draw. Monotonically increasing timestamp */
     _lastDrawTimestamp = -1;
+    _bindingTable = [];
     get [Symbol.toStringTag]() {
       return "Model";
     }
@@ -2330,6 +2264,7 @@ var __exports__ = (() => {
       this.id = props.id || uid("model");
       this.device = device;
       Object.assign(this.userData, props.userData);
+      this.material = props.material || null;
       const moduleMap = Object.fromEntries(
         this.props.modules?.map((module) => [module.name, module]) || []
       );
@@ -2340,16 +2275,22 @@ var __exports__ = (() => {
         // @ts-ignore shaderInputs is assigned in setShaderInputs above.
         (this.props.modules?.length > 0 ? this.props.modules : this.shaderInputs?.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 = device.getShaderLayout?.(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,
@@ -2359,6 +2300,7 @@ var __exports__ = (() => {
         this.vs = vs3;
         this.fs = fs3;
         this._getModuleUniforms = getUniforms2;
+        this._bindingTable = [];
       }
       this.vertexCount = this.props.vertexCount;
       this.instanceCount = this.props.instanceCount;
@@ -2368,8 +2310,8 @@ var __exports__ = (() => {
       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,
@@ -2429,6 +2371,10 @@ var __exports__ = (() => {
     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();
@@ -2442,7 +2388,7 @@ var __exports__ = (() => {
     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 {
@@ -2457,6 +2403,7 @@ var __exports__ = (() => {
         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({
@@ -2471,6 +2418,8 @@ var __exports__ = (() => {
           // 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
@@ -2574,19 +2523,23 @@ var __exports__ = (() => {
     /** Set the shader inputs */
     setShaderInputs(shaderInputs) {
       this.shaderInputs = shaderInputs;
-      this._uniformStore = new import_core10.UniformStore(this.shaderInputs.modules);
+      this._uniformStore = new import_core8.UniformStore(this.shaderInputs.modules);
       for (const [moduleName, module] of Object.entries(this.shaderInputs.modules)) {
-        if (shaderModuleHasUniforms(module)) {
+        if (shaderModuleHasUniforms(module) && !this.material?.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");
     }
     /**
@@ -2618,7 +2571,7 @@ var __exports__ = (() => {
     setAttributes(buffers, options) {
       const disableWarnings = options?.disableWarnings ?? this.props.disableWarnings;
       if (buffers["indices"]) {
-        import_core10.log.warn(
+        import_core8.log.warn(
           `Model:${this.id} setAttributes() - indexBuffer should be set using setIndexBuffer()`
         )();
       }
@@ -2631,7 +2584,7 @@ var __exports__ = (() => {
         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;
         }
@@ -2646,7 +2599,7 @@ var __exports__ = (() => {
           }
         }
         if (!set && !disableWarnings) {
-          import_core10.log.warn(
+          import_core8.log.warn(
             `Model(${this.id}): Ignoring buffer "${buffer.id}" for unknown attribute "${bufferName}"`
           )();
         }
@@ -2667,7 +2620,7 @@ var __exports__ = (() => {
         if (attributeInfo) {
           this.vertexArray.setConstantWebGL(attributeInfo.location, value);
         } else if (!(options?.disableWarnings ?? this.props.disableWarnings)) {
-          import_core10.log.warn(
+          import_core8.log.warn(
             `Model "${this.id}: Ignoring constant supplied for unknown attribute "${attributeName}"`
           )();
         }
@@ -2682,6 +2635,11 @@ var __exports__ = (() => {
           return binding.id;
         }
       }
+      for (const binding of Object.values(this.material?.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. */
@@ -2698,24 +2656,43 @@ var __exports__ = (() => {
       }
       return validBindings;
     }
+    _getBindGroups() {
+      const shaderLayout = this.pipeline?.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() {
+      const bindGroupCacheKey = this.material?.getBindGroupCacheKey(3);
+      return bindGroupCacheKey ? { 3: bindGroupCacheKey } : {};
+    }
     /** Get the timestamp of the latest updated bound GPU memory resource (buffer/texture). */
     _getBindingsUpdateTimestamp() {
       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, this.material?.getBindingsUpdateTimestamp() || 0);
     }
     /**
      * Updates the optional geometry attributes
@@ -2746,7 +2723,7 @@ var __exports__ = (() => {
         let prevShaderVs = null;
         let prevShaderFs = null;
         if (this.pipeline) {
-          import_core10.log.log(
+          import_core8.log.log(
             1,
             `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`
           )();
@@ -2773,16 +2750,15 @@ var __exports__ = (() => {
         }
         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._attributeInfos = (0, import_core8.getAttributeInfosFromLayouts)(
           this.pipeline.shaderLayout,
           this.bufferLayout
         );
@@ -2798,24 +2774,24 @@ var __exports__ = (() => {
     _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;
       }
     }
@@ -2854,14 +2830,26 @@ var __exports__ = (() => {
     }
     // 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,
@@ -2881,6 +2869,7 @@ var __exports__ = (() => {
     instanceCount: 0,
     vertexCount: 0,
     shaderInputs: void 0,
+    material: void 0,
     pipelineFactory: void 0,
     shaderFactory: void 0,
     transformFeedback: void 0,
@@ -2888,9 +2877,6 @@ var __exports__ = (() => {
     debugShaders: void 0,
     disableWarnings: void 0
   });
-  function shaderModuleHasUniforms(module) {
-    return Boolean(module.uniformTypes && !isObjectEmpty(module.uniformTypes));
-  }
   function getPlatformInfo(device) {
     return {
       type: device.type,
@@ -2901,85 +2887,310 @@ var __exports__ = (() => {
       features: device.features
     };
   }
-  function isObjectEmpty(obj) {
-    for (const key in obj) {
-      return false;
-    }
-    return true;
-  }
 
-  // src/compute/buffer-transform.ts
-  var import_core11 = __toESM(require_core(), 1);
-  var import_shadertools3 = __toESM(require_shadertools(), 1);
-  var _BufferTransform = class {
+  // src/material/material.ts
+  var import_core9 = __toESM(require_core(), 1);
+
+  // src/material/material-factory.ts
+  var MATERIAL_BIND_GROUP = 3;
+  var MaterialFactory = class {
+    /** Device that creates materials for this schema. */
     device;
-    model;
-    transformFeedback;
-    static isSupported(device) {
-      return device?.info?.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.model.setTransformFeedback(this.transformFeedback);
-      Object.seal(this);
+      this.modules = props.modules || [];
+      const shaderInputs = new ShaderInputs(
+        Object.fromEntries(this.modules.map((module) => [module.name, module]))
+      );
+      this._materialBindingNames = getMaterialBindingNames(shaderInputs);
+      this._materialModuleNames = getMaterialModuleNames(shaderInputs);
     }
-    /** Destroy owned resources. */
-    destroy() {
-      if (this.model) {
-        this.model.destroy();
-      }
+    /** Creates one typed material instance for this factory's schema. */
+    createMaterial(props = {}) {
+      return new Material(this.device, {
+        ...props,
+        factory: this
+      });
     }
-    /** @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?.inputBuffers) {
-        this.model.setAttributes(options.inputBuffers);
-      }
-      if (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 module of Object.values(shaderInputs.modules)) {
+      for (const binding of module.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) {
+    const moduleNames = /* @__PURE__ */ new Set();
+    for (const module of Object.values(shaderInputs.modules)) {
+      if (module.name && module.bindingLayout?.some(
+        (binding) => binding.group === MATERIAL_BIND_GROUP && binding.name === module.name
+      )) {
+        moduleNames.add(module.name);
       }
-      const { buffer, byteOffset = 0, byteLength = buffer.byteLength } = result;
-      return buffer.readAsync(byteOffset, byteLength);
     }
-  };
-  var BufferTransform = _BufferTransform;
-  __publicField(BufferTransform, "defaultProps", {
+    return moduleNames;
+  }
+
+  // src/material/material.ts
+  var Material = class {
+    /** Application-provided identifier. */
+    id;
+    /** Device that owns the material resources. */
+    device;
+    /** Factory that defines the material schema. */
+    factory;
+    /** Shader inputs for the material-owned modules. */
+    shaderInputs;
+    /** Internal binding store including uniform buffers and resource bindings. */
+    bindings = {};
+    _uniformStore;
+    _bindGroupCacheToken = {};
+    constructor(device, props = {}) {
+      this.id = props.id || uid("material");
+      this.device = device;
+      this.factory = props.factory || new MaterialFactory(device, {
+        modules: props.modules || props.shaderInputs?.getModules() || []
+      });
+      const moduleMap = Object.fromEntries(
+        (props.shaderInputs?.getModules() || this.factory.modules).map((module) => [
+          module.name,
+          module
+        ])
+      );
+      this.shaderInputs = props.shaderInputs || new ShaderInputs(moduleMap);
+      this._uniformStore = new import_core9.UniformStore(this.shaderInputs.modules);
+      for (const [moduleName, module] of Object.entries(this.shaderInputs.modules)) {
+        if (this.ownsModule(moduleName) && shaderModuleHasUniforms(module)) {
+          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;
+    }
+  };
+
+  // src/compute/buffer-transform.ts
+  var import_core10 = __toESM(require_core(), 1);
+  var import_shadertools3 = __toESM(require_shadertools(), 1);
+  var _BufferTransform = class {
+    device;
+    model;
+    transformFeedback;
+    static isSupported(device) {
+      return device?.info?.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?.inputBuffers) {
+        this.model.setAttributes(options.inputBuffers);
+      }
+      if (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
@@ -3371,6 +3582,84 @@ void main(void) {
     }
   };
 
+  // src/geometries/sphere-geometry.ts
+  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 }
+      }
+    };
+  }
+
   // ../../node_modules/@math.gl/core/dist/lib/common.js
   var RADIANS_TO_DEGREES = 1 / Math.PI * 180;
   var DEGREES_TO_RADIANS = 1 / 180 * Math.PI;
@@ -5406,28 +5695,616 @@ void main(void) {
     return result;
   }
 
-  // src/scenegraph/scenegraph-node.ts
-  function assert2(condition, message) {
-    if (!condition) {
-      throw new Error(message);
-    }
-  }
-  var ScenegraphNode = class {
-    id;
-    matrix = new Matrix4();
-    display = true;
-    position = new Vector3();
-    rotation = new Vector3();
-    scale = new Vector3(1, 1, 1);
-    userData = {};
-    props = {};
-    constructor(props = {}) {
-      const { id } = props;
-      this.id = id || uid(this.constructor.name);
-      this._setScenegraphNodeProps(props);
+  // src/models/light-model-utils.ts
+  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>"
     }
-    getBounds() {
-      return null;
+  };
+  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?.destroy();
+    }
+  }
+  function createViewProjectionMatrix(props) {
+    return new 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));
+  }
+
+  // src/models/point-light-model.ts
+  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"]
+      });
+    }
+  };
+
+  // src/geometries/truncated-cone-geometry.ts
+  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
+      }
+    };
+  }
+
+  // src/geometries/cone-geometry.ts
+  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
+      });
+    }
+  };
+
+  // src/models/spot-light-model.ts
+  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"]
+      });
+    }
+  };
+
+  // src/models/directional-light-model.ts
+  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"]
+      });
+    }
+  };
+
+  // src/scenegraph/scenegraph-node.ts
+  function assert2(condition, message) {
+    if (!condition) {
+      throw new Error(message);
+    }
+  }
+  var ScenegraphNode = class {
+    id;
+    matrix = new Matrix4();
+    display = true;
+    position = new Vector3();
+    rotation = new Vector3();
+    scale = new 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() {
     }
@@ -5685,130 +6562,6 @@ void main(void) {
     }
   };
 
-  // src/geometries/truncated-cone-geometry.ts
-  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
-      }
-    };
-  }
-
-  // src/geometries/cone-geometry.ts
-  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
-      });
-    }
-  };
-
   // src/geometries/cube-geometry.ts
   var CubeGeometry = class extends Geometry {
     constructor(props = {}) {
@@ -6699,84 +7452,6 @@ void main(void) {
     return unpack ? unpackIndexedGeometry(geometry) : geometry;
   }
 
-  // src/geometries/sphere-geometry.ts
-  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 }
-      }
-    };
-  }
-
   // src/application-utils/random.ts
   function makeRandomGenerator() {
     let s = 1;
@@ -7203,11 +7878,11 @@ void main() {
       );
       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 = (this.props.modules?.length > 0 ? this.props.modules : this.shaderInputs?.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,
@@ -7215,6 +7890,11 @@ void main() {
       });
       this.source = source3;
       this._getModuleUniforms = getUniforms2;
+      const inferredShaderLayout = device.getShaderLayout?.(this.source);
+      this.props.shaderLayout = mergeShaderModuleBindingsIntoLayout(
+        this.props.shaderLayout || inferredShaderLayout || null,
+        modules
+      ) || null;
       this.pipeline = this._updatePipeline();
       if (props.bindings) {
         this.setBindings(props.bindings);
@@ -7239,7 +7919,7 @@ void main() {
         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();
@@ -7262,9 +7942,11 @@ void main() {
     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, module] of Object.entries(this.shaderInputs.modules)) {
+        if (shaderModuleHasUniforms(module)) {
+          const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
+          this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
+        }
       }
     }
     /**
@@ -7344,7 +8026,7 @@ void main() {
     _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();
     }
@@ -7376,6 +8058,9 @@ void main() {
     };
   }
 
+  // src/modules/picking/picking-manager.ts
+  var import_core18 = __toESM(require_core(), 1);
+
   // src/modules/picking/picking-uniforms.ts
   var DEFAULT_HIGHLIGHT_COLOR = [0, 1, 1, 1];
   var INVALID_INDEX = -1;
@@ -7408,15 +8093,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) {
@@ -7428,25 +8115,36 @@ uniform pickingUniforms {
       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;
@@ -7462,7 +8160,7 @@ uniform pickingUniforms {
       isActive: false,
       indexMode: 0,
       batchIndex: 0,
-      isHighlightActive: true,
+      isHighlightActive: false,
       highlightedBatchIndex: INVALID_INDEX,
       highlightedObjectIndex: INVALID_INDEX,
       highlightColor: DEFAULT_HIGHLIGHT_COLOR
@@ -7471,9 +8169,44 @@ uniform pickingUniforms {
   };
 
   // src/modules/picking/picking-manager.ts
+  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 */
@@ -7481,6 +8214,14 @@ uniform pickingUniforms {
     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() {
       this.framebuffer?.destroy();
@@ -7488,56 +8229,44 @@ uniform pickingUniforms {
     // 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() {
       const framebuffer = this.getFramebuffer();
       framebuffer.resize(this.device.getDefaultCanvasContext().getDevicePixelSize());
-      this.props.shaderInputs?.setProps({ picking: { isActive: true } });
-      const pickingPass = this.device.beginRenderPass({
+      this.setPickingProps({ isActive: true });
+      return this.mode === "index" ? this.device.beginRenderPass({
+        framebuffer,
+        clearColors: [new Float32Array([0, 0, 0, 0]), INDEX_PICKING_CLEAR_COLOR],
+        clearDepth: 1
+      }) : this.device.beginRenderPass({
         framebuffer,
-        clearColors: [new Float32Array([0, 0, 0, 0]), new Int32Array([-1, -1, 0, 0])],
+        clearColor: [0, 0, 0, 0],
         clearDepth: 1
       });
-      return pickingPass;
     }
     async updatePickInfo(mousePosition) {
       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);
       }
-      this.props.shaderInputs?.setProps({
-        picking: {
-          isActive: false,
-          highlightedBatchIndex: pickInfo.batchIndex,
-          highlightedObjectIndex: pickInfo.objectIndex
-        }
+      this.setPickingProps({
+        isActive: false,
+        highlightedBatchIndex: pickInfo.batchIndex,
+        highlightedObjectIndex: pickInfo.objectIndex
       });
       return this.pickInfo;
     }
@@ -7546,43 +8275,207 @@ uniform pickingUniforms {
      * 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) {
+      this.props.shaderInputs?.setProps({ picking: props });
+    }
+    async readPickInfo(framebuffer, pickPosition) {
+      return this.mode === "index" ? this.readIndexPickInfo(framebuffer, pickPosition) : this.readColorPickInfo(framebuffer, pickPosition);
+    }
+    async readIndexPickInfo(framebuffer, [pickX, pickY]) {
+      if (this.device.type === "webgpu") {
+        const pickTexture = framebuffer.colorAttachments[INDEX_PICKING_ATTACHMENT_INDEX]?.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]) {
+      if (this.device.type === "webgpu") {
+        const pickTexture = framebuffer.colorAttachments[0]?.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"
   });
 
-  // src/modules/picking/index-picking.ts
+  // src/modules/picking/color-picking.ts
   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 = (
@@ -7592,14 +8485,10 @@ fn picking_setObjectIndex(objectIndex: int32) {
 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:
@@ -7616,36 +8505,29 @@ void picking_setObjectIndex(int objectIndex) {
     /* 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;
@@ -7654,28 +8536,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);
@@ -7692,87 +8586,81 @@ vec4 picking_filterColor(vec4 color) {
     fs
   };
 
-  // src/modules/picking/color-picking.ts
+  // src/modules/picking/index-picking.ts
   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;
   }
 }
 `
@@ -7781,41 +8669,58 @@ void picking_setPickingAttribute(vec3 value) {
     /* 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;
 }
@@ -7825,8 +8730,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;
 }
 `
   );
@@ -7838,6 +8745,15 @@ vec4 picking_filterColor(vec4 color) {
     fs: fs2
   };
 
+  // src/modules/picking/picking.ts
+  var picking3 = {
+    ...pickingUniforms,
+    name: "picking",
+    source: picking2.source,
+    vs: picking.vs,
+    fs: picking.fs
+  };
+
   // src/modules/picking/legacy-picking-manager.ts
   var LegacyPickingManager = class {
     device;
@@ -7907,6 +8823,10 @@ vec4 picking_filterColor(vec4 color) {
     }
   };
 
+  // src/modules/picking/legacy-color-picking.ts
+  var import_shadertools7 = __toESM(require_shadertools(), 1);
+  var legacyColorPicking = import_shadertools7.picking;
+
   // src/index.ts
   var AsyncTexture = DynamicTexture;
   return __toCommonJS(bundle_exports);