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

package/dist/dist.dev.js

@@ -66,6 +66,7 @@ var __exports__ = (() => {
     ExternalTexture: () => ExternalTexture,
     Fence: () => Fence,
     Framebuffer: () => Framebuffer,
+    PipelineFactory: () => PipelineFactory,
     PipelineLayout: () => PipelineLayout,
     PresentationContext: () => PresentationContext,
     QuerySet: () => QuerySet,
@@ -74,38 +75,39 @@ var __exports__ = (() => {
     Resource: () => Resource,
     Sampler: () => Sampler,
     Shader: () => Shader,
+    ShaderFactory: () => ShaderFactory,
     SharedRenderPipeline: () => SharedRenderPipeline,
     Texture: () => Texture,
-    TextureFormatDecoder: () => TextureFormatDecoder,
     TextureView: () => TextureView,
     TransformFeedback: () => TransformFeedback,
     UniformBlock: () => UniformBlock,
     UniformBufferLayout: () => UniformBufferLayout,
     UniformStore: () => UniformStore,
     VertexArray: () => VertexArray,
+    _getDefaultBindGroupFactory: () => _getDefaultBindGroupFactory,
     _getTextureFormatDefinition: () => getTextureFormatDefinition,
     _getTextureFormatTable: () => getTextureFormatTable,
     assert: () => assert2,
     assertDefined: () => assertDefined,
+    dataTypeDecoder: () => dataTypeDecoder,
+    flattenBindingsByGroup: () => flattenBindingsByGroup,
     getAttributeInfosFromLayouts: () => getAttributeInfosFromLayouts,
     getAttributeShaderTypeInfo: () => getAttributeShaderTypeInfo,
-    getDataType: () => getDataType,
-    getDataTypeInfo: () => getDataTypeInfo,
     getExternalImageSize: () => getExternalImageSize,
-    getNormalizedDataType: () => getNormalizedDataType,
     getScratchArray: () => getScratchArray,
+    getShaderLayoutBinding: () => getShaderLayoutBinding,
     getTextureImageView: () => getTextureImageView,
     getTypedArrayConstructor: () => getTypedArrayConstructor,
     getVariableShaderTypeInfo: () => getVariableShaderTypeInfo,
-    getVertexFormatFromAttribute: () => getVertexFormatFromAttribute,
-    getVertexFormatInfo: () => getVertexFormatInfo,
     isExternalImage: () => isExternalImage,
     log: () => log,
     luma: () => luma,
-    makeVertexFormat: () => makeVertexFormat,
+    normalizeBindingsByGroup: () => normalizeBindingsByGroup,
     readPixel: () => readPixel,
     setTextureImageData: () => setTextureImageData,
+    shaderTypeDecoder: () => shaderTypeDecoder,
     textureFormatDecoder: () => textureFormatDecoder,
+    vertexFormatDecoder: () => vertexFormatDecoder,
     writePixel: () => writePixel
   });
 
@@ -1347,62 +1349,73 @@ var __exports__ = (() => {
     onMapped: void 0
   });
 
-  // ../core/src/shadertypes/data-types/decode-data-types.ts
-  function getDataTypeInfo(type) {
-    const normalized = type.includes("norm");
-    const integer = !normalized && !type.startsWith("float");
-    const signed = type.startsWith("s");
-    const typeInfo = NORMALIZED_TYPE_MAP[type];
-    const [signedType, primitiveType, byteLength] = typeInfo || ["uint8 ", "i32", 1];
-    return {
-      signedType,
-      primitiveType,
-      byteLength,
-      normalized,
-      integer,
-      signed
-    };
-  }
-  function getNormalizedDataType(signedDataType) {
-    const dataType = signedDataType;
-    switch (dataType) {
-      case "uint8":
-        return "unorm8";
-      case "sint8":
-        return "snorm8";
-      case "uint16":
-        return "unorm16";
-      case "sint16":
-        return "snorm16";
-      default:
-        return dataType;
+  // ../core/src/shadertypes/data-types/data-type-decoder.ts
+  var DataTypeDecoder = class {
+    /**
+     * Gets info about a data type constant (signed or normalized)
+     * @returns underlying primitive / signed types, byte length, normalization, integer, signed flags
+     */
+    getDataTypeInfo(type) {
+      const [signedType, primitiveType, byteLength] = NORMALIZED_TYPE_MAP[type];
+      const normalized = type.includes("norm");
+      const integer = !normalized && !type.startsWith("float");
+      const signed = type.startsWith("s");
+      return {
+        signedType,
+        primitiveType,
+        byteLength,
+        normalized,
+        integer,
+        signed
+        // TODO - add webglOnly flag
+      };
     }
-  }
-  function alignTo(size, count) {
-    switch (count) {
-      case 1:
-        return size;
-      case 2:
-        return size + size % 2;
-      default:
-        return size + (4 - size % 4) % 4;
+    /** Build a vertex format from a signed data type and a component */
+    getNormalizedDataType(signedDataType) {
+      const dataType = signedDataType;
+      switch (dataType) {
+        case "uint8":
+          return "unorm8";
+        case "sint8":
+          return "snorm8";
+        case "uint16":
+          return "unorm16";
+        case "sint16":
+          return "snorm16";
+        default:
+          return dataType;
+      }
     }
-  }
-  function getDataType(arrayOrType) {
-    const Constructor = ArrayBuffer.isView(arrayOrType) ? arrayOrType.constructor : arrayOrType;
-    if (Constructor === Uint8ClampedArray) {
-      return "uint8";
+    /** Align offset to 1, 2 or 4 elements (4, 8 or 16 bytes) */
+    alignTo(size, count) {
+      switch (count) {
+        case 1:
+          return size;
+        case 2:
+          return size + size % 2;
+        default:
+          return size + (4 - size % 4) % 4;
+      }
     }
-    const info = Object.values(NORMALIZED_TYPE_MAP).find((entry) => Constructor === entry[4]);
-    if (!info) {
-      throw new Error(Constructor.name);
+    /** Returns the VariableShaderType that corresponds to a typed array */
+    getDataType(arrayOrType) {
+      const Constructor = ArrayBuffer.isView(arrayOrType) ? arrayOrType.constructor : arrayOrType;
+      if (Constructor === Uint8ClampedArray) {
+        return "uint8";
+      }
+      const info = Object.values(NORMALIZED_TYPE_MAP).find((entry) => Constructor === entry[4]);
+      if (!info) {
+        throw new Error(Constructor.name);
+      }
+      return info[0];
     }
-    return info[0];
-  }
-  function getTypedArrayConstructor(type) {
-    const [, , , , Constructor] = NORMALIZED_TYPE_MAP[type];
-    return Constructor;
-  }
+    /** Returns the TypedArray that corresponds to a shader data type */
+    getTypedArrayConstructor(type) {
+      const [, , , , Constructor] = NORMALIZED_TYPE_MAP[type];
+      return Constructor;
+    }
+  };
+  var dataTypeDecoder = new DataTypeDecoder();
   var NORMALIZED_TYPE_MAP = {
     uint8: ["uint8", "u32", 1, false, Uint8Array],
     sint8: ["sint8", "i32", 1, false, Int8Array],
@@ -1418,87 +1431,99 @@ var __exports__ = (() => {
     sint32: ["sint32", "i32", 4, false, Int32Array]
   };
 
-  // ../core/src/shadertypes/vertex-arrays/decode-vertex-format.ts
-  function getVertexFormatInfo(format) {
-    let webglOnly;
-    if (format.endsWith("-webgl")) {
-      format.replace("-webgl", "");
-      webglOnly = true;
-    }
-    const [type_, count] = format.split("x");
-    const type = type_;
-    const components = count ? parseInt(count) : 1;
-    const decodedType = getDataTypeInfo(type);
-    const result = {
-      type,
-      components,
-      byteLength: decodedType.byteLength * components,
-      integer: decodedType.integer,
-      signed: decodedType.signed,
-      normalized: decodedType.normalized
-    };
-    if (webglOnly) {
-      result.webglOnly = true;
-    }
-    return result;
-  }
-  function makeVertexFormat(signedDataType, components, normalized) {
-    const dataType = normalized ? getNormalizedDataType(signedDataType) : signedDataType;
-    switch (dataType) {
-      case "unorm8":
-        if (components === 1) {
-          return "unorm8";
-        }
-        if (components === 3) {
-          return "unorm8x3-webgl";
-        }
-        return `${dataType}x${components}`;
-      case "snorm8":
-      case "uint8":
-      case "sint8":
-      case "uint16":
-      case "sint16":
-      case "unorm16":
-      case "snorm16":
-      case "float16":
-        if (components === 1 || components === 3) {
-          throw new Error(`size: ${components}`);
-        }
-        return `${dataType}x${components}`;
-      default:
-        return components === 1 ? dataType : `${dataType}x${components}`;
+  // ../core/src/shadertypes/vertex-types/vertex-format-decoder.ts
+  var VertexFormatDecoder = class {
+    /**
+     * Decodes a vertex format, returning type, components, byte  length and flags (integer, signed, normalized)
+     */
+    getVertexFormatInfo(format) {
+      let webglOnly;
+      if (format.endsWith("-webgl")) {
+        format.replace("-webgl", "");
+        webglOnly = true;
+      }
+      const [type_, count] = format.split("x");
+      const type = type_;
+      const components = count ? parseInt(count) : 1;
+      const decodedType = dataTypeDecoder.getDataTypeInfo(type);
+      const result = {
+        type,
+        components,
+        byteLength: decodedType.byteLength * components,
+        integer: decodedType.integer,
+        signed: decodedType.signed,
+        normalized: decodedType.normalized
+      };
+      if (webglOnly) {
+        result.webglOnly = true;
+      }
+      return result;
     }
-  }
-  function getVertexFormatFromAttribute(typedArray, size, normalized) {
-    if (!size || size > 4) {
-      throw new Error(`size ${size}`);
+    /** Build a vertex format from a signed data type and a component */
+    makeVertexFormat(signedDataType, components, normalized) {
+      const dataType = normalized ? dataTypeDecoder.getNormalizedDataType(signedDataType) : signedDataType;
+      switch (dataType) {
+        case "unorm8":
+          if (components === 1) {
+            return "unorm8";
+          }
+          if (components === 3) {
+            return "unorm8x3-webgl";
+          }
+          return `${dataType}x${components}`;
+        case "snorm8":
+        case "uint8":
+        case "sint8":
+        case "uint16":
+        case "sint16":
+        case "unorm16":
+        case "snorm16":
+        case "float16":
+          if (components === 1 || components === 3) {
+            throw new Error(`size: ${components}`);
+          }
+          return `${dataType}x${components}`;
+        default:
+          return components === 1 ? dataType : `${dataType}x${components}`;
+      }
     }
-    const components = size;
-    const signedDataType = getDataType(typedArray);
-    return makeVertexFormat(signedDataType, components, normalized);
-  }
-  function getCompatibleVertexFormat(opts) {
-    let vertexType;
-    switch (opts.primitiveType) {
-      case "f32":
-        vertexType = "float32";
-        break;
-      case "i32":
-        vertexType = "sint32";
-        break;
-      case "u32":
-        vertexType = "uint32";
-        break;
-      case "f16":
-        return opts.components <= 2 ? "float16x2" : "float16x4";
+    /** Get the vertex format for an attribute with TypedArray and size */
+    getVertexFormatFromAttribute(typedArray, size, normalized) {
+      if (!size || size > 4) {
+        throw new Error(`size ${size}`);
+      }
+      const components = size;
+      const signedDataType = dataTypeDecoder.getDataType(typedArray);
+      return this.makeVertexFormat(signedDataType, components, normalized);
     }
-    if (opts.components === 1) {
-      return vertexType;
+    /**
+     * Return a "default" vertex format for a certain shader data type
+     * The simplest vertex format that matches the shader attribute's data type
+     */
+    getCompatibleVertexFormat(opts) {
+      let vertexType;
+      switch (opts.primitiveType) {
+        case "f32":
+          vertexType = "float32";
+          break;
+        case "i32":
+          vertexType = "sint32";
+          break;
+        case "u32":
+          vertexType = "uint32";
+          break;
+        case "f16":
+          return opts.components <= 2 ? "float16x2" : "float16x4";
+      }
+      if (opts.components === 1) {
+        return vertexType;
+      }
+      return `${vertexType}x${opts.components}`;
     }
-    return `${vertexType}x${opts.components}`;
-  }
+  };
+  var vertexFormatDecoder = new VertexFormatDecoder();
 
-  // ../core/src/shadertypes/textures/texture-format-table.ts
+  // ../core/src/shadertypes/texture-types/texture-format-table.ts
   var texture_compression_bc = "texture-compression-bc";
   var texture_compression_astc = "texture-compression-astc";
   var texture_compression_etc2 = "texture-compression-etc2";
@@ -1669,7 +1694,7 @@ var __exports__ = (() => {
     ...TEXTURE_FORMAT_COMPRESSED_TABLE
   };
 
-  // ../core/src/shadertypes/textures/texture-format-decoder.ts
+  // ../core/src/shadertypes/texture-types/texture-format-decoder.ts
   var RGB_FORMAT_REGEX = /^(r|rg|rgb|rgba|bgra)([0-9]*)([a-z]*)(-srgb)?(-webgl)?$/;
   var COLOR_FORMAT_PREFIXES = ["rgb", "rgba", "bgra"];
   var DEPTH_FORMAT_PREFIXES = ["depth", "stencil"];
@@ -1780,11 +1805,11 @@ var __exports__ = (() => {
         formatInfo.blockHeight = blockSize.blockHeight;
       }
     }
-    const matches = RGB_FORMAT_REGEX.exec(format);
+    const matches = !formatInfo.packed ? RGB_FORMAT_REGEX.exec(format) : null;
     if (matches) {
       const [, channels, length, type, srgb, suffix] = matches;
       const dataType = `${type}${length}`;
-      const decodedType = getDataTypeInfo(dataType);
+      const decodedType = dataTypeDecoder.getDataTypeInfo(dataType);
       const bits = decodedType.byteLength * 8;
       const components = channels?.length ?? 1;
       const bitsPerChannel = [
@@ -1883,7 +1908,7 @@ var __exports__ = (() => {
     return 16;
   }
 
-  // ../core/src/image-utils/image-types.ts
+  // ../core/src/shadertypes/image-types/image-types.ts
   function isExternalImage(data) {
     return typeof ImageData !== "undefined" && data instanceof ImageData || typeof ImageBitmap !== "undefined" && data instanceof ImageBitmap || typeof HTMLImageElement !== "undefined" && data instanceof HTMLImageElement || typeof HTMLVideoElement !== "undefined" && data instanceof HTMLVideoElement || typeof VideoFrame !== "undefined" && data instanceof VideoFrame || typeof HTMLCanvasElement !== "undefined" && data instanceof HTMLCanvasElement || typeof OffscreenCanvas !== "undefined" && data instanceof OffscreenCanvas;
   }
@@ -1906,6 +1931,52 @@ var __exports__ = (() => {
   // ../core/src/adapter/device.ts
   var DeviceLimits = class {
   };
+  function formatErrorLogArguments(context, args) {
+    const formattedContext = formatErrorLogValue(context);
+    const formattedArgs = args.map(formatErrorLogValue).filter((arg) => arg !== void 0);
+    return [formattedContext, ...formattedArgs].filter((arg) => arg !== void 0);
+  }
+  function formatErrorLogValue(value) {
+    if (value === void 0) {
+      return void 0;
+    }
+    if (value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      return value;
+    }
+    if (value instanceof Error) {
+      return value.message;
+    }
+    if (Array.isArray(value)) {
+      return value.map(formatErrorLogValue);
+    }
+    if (typeof value === "object") {
+      if (hasCustomToString(value)) {
+        const stringValue = String(value);
+        if (stringValue !== "[object Object]") {
+          return stringValue;
+        }
+      }
+      if (looksLikeGPUCompilationMessage(value)) {
+        return formatGPUCompilationMessage(value);
+      }
+      return value.constructor?.name || "Object";
+    }
+    return String(value);
+  }
+  function hasCustomToString(value) {
+    return "toString" in value && typeof value.toString === "function" && value.toString !== Object.prototype.toString;
+  }
+  function looksLikeGPUCompilationMessage(value) {
+    return "message" in value && "type" in value;
+  }
+  function formatGPUCompilationMessage(value) {
+    const type = typeof value.type === "string" ? value.type : "message";
+    const message = typeof value.message === "string" ? value.message : "";
+    const lineNum = typeof value.lineNum === "number" ? value.lineNum : null;
+    const linePos = typeof value.linePos === "number" ? value.linePos : null;
+    const location = lineNum !== null && linePos !== null ? ` @ ${lineNum}:${linePos}` : lineNum !== null ? ` @ ${lineNum}` : "";
+    return `${type}${location}: ${message}`.trim();
+  }
   var DeviceFeatures = class {
     features;
     disabledFeatures;
@@ -1935,6 +2006,8 @@ var __exports__ = (() => {
     userData = {};
     /** stats */
     statsManager = lumaStats;
+    /** Internal per-device factory storage */
+    _factories = {};
     /** An abstract timestamp used for change tracking */
     timestamp = 0;
     /** True if this device has been reused during device creation (app has multiple references) */
@@ -1948,8 +2021,9 @@ var __exports__ = (() => {
       this.props = { ..._Device.defaultProps, ...props };
       this.id = this.props.id || uid(this[Symbol.toStringTag].toLowerCase());
     }
+    // TODO - just expose the shadertypes decoders?
     getVertexFormatInfo(format) {
-      return getVertexFormatInfo(format);
+      return vertexFormatDecoder.getVertexFormatInfo(format);
     }
     isVertexFormatSupported(format) {
       return true;
@@ -2049,12 +2123,12 @@ var __exports__ = (() => {
     reportError(error, context, ...args) {
       const isHandled = this.props.onError(error, context);
       if (!isHandled) {
+        const logArguments = formatErrorLogArguments(context, args);
         return log.error(
           this.type === "webgl" ? "%cWebGL" : "%cWebGPU",
           "color: white; background: red; padding: 2px 6px; border-radius: 3px;",
           error.message,
-          context,
-          ...args
+          ...logArguments
         );
       }
       return () => {
@@ -2101,6 +2175,14 @@ or create a device with the 'debug: true' prop.`;
     _createSharedRenderPipelineWebGL(_props) {
       throw new Error("_createSharedRenderPipelineWebGL() not implemented");
     }
+    /** Internal WebGPU-only helper for retrieving the native bind-group layout for a pipeline group. */
+    _createBindGroupLayoutWebGPU(_pipeline, _group) {
+      throw new Error("_createBindGroupLayoutWebGPU() not implemented");
+    }
+    /** Internal WebGPU-only helper for creating a native bind group. */
+    _createBindGroupWebGPU(_bindGroupLayout, _shaderLayout, _bindings, _group) {
+      throw new Error("_createBindGroupWebGPU() not implemented");
+    }
     /**
      * Internal helper that returns `true` when timestamp-query GPU timing should be
      * collected for this device.
@@ -3128,8 +3210,8 @@ or create a device with the 'debug: true' prop.`;
      *
      * @note The memory layout of the texture data is determined by the texture format and dimensions.
      * @note The application can call Texture.computeMemoryLayout() to compute the backend-aligned layout.
-     * @note The application can call Buffer.readAsync()
-     * @note If not supplied a buffer will be created and the application needs to call Buffer.destroy
+     * @note The application can call Buffer.readAsync() to read the returned buffer on the CPU.
+     * @note The destination buffer must be supplied by the caller and must be large enough for the requested region.
      * @note On WebGPU this corresponds to a texture-to-buffer copy and uses buffer-copy alignment rules.
      * @note On WebGL, luma.gl emulates the same logical readback behavior.
      */
@@ -3142,6 +3224,7 @@ or create a device with the 'debug: true' prop.`;
      *
      * @note The memory layout of the texture data is determined by the texture format and dimensions.
      * @note The application can call Texture.computeMemoryLayout() to compute the layout.
+     * @deprecated Use Texture.readBuffer() with an explicit destination buffer, or DynamicTexture.readAsync() for convenience readback.
      */
     readDataAsync(options) {
       throw new Error("readBuffer not implemented");
@@ -3888,7 +3971,8 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     bufferMode: void 0,
     disableWarnings: false,
     _sharedRenderPipeline: void 0,
-    bindings: void 0
+    bindings: void 0,
+    bindGroups: void 0
   });
 
   // ../core/src/adapter/resources/shared-render-pipeline.ts
@@ -3908,6 +3992,482 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     }
   };
 
+  // ../core/src/adapter/resources/compute-pipeline.ts
+  var _ComputePipeline = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "ComputePipeline";
+    }
+    hash = "";
+    /** The merged shader layout */
+    shaderLayout;
+    constructor(device, props) {
+      super(device, props, _ComputePipeline.defaultProps);
+      this.shaderLayout = props.shaderLayout;
+    }
+  };
+  var ComputePipeline = _ComputePipeline;
+  __publicField(ComputePipeline, "defaultProps", {
+    ...Resource.defaultProps,
+    shader: void 0,
+    entryPoint: void 0,
+    constants: {},
+    shaderLayout: void 0
+  });
+
+  // ../core/src/factories/pipeline-factory.ts
+  var _PipelineFactory = class {
+    /** Get the singleton default pipeline factory for the specified device */
+    static getDefaultPipelineFactory(device) {
+      const moduleData = device.getModuleData("@luma.gl/core");
+      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;
+    }
+    /**
+     * WebGL has two cache layers with different priorities:
+     * - `_sharedRenderPipelineCache` owns `WEBGLSharedRenderPipeline` / `WebGLProgram` reuse.
+     * - `_renderPipelineCache` owns `RenderPipeline` wrapper reuse.
+     *
+     * Shared WebGL program reuse is the hard requirement. Wrapper reuse is beneficial,
+     * but wrapper cache misses are acceptable if that keeps the cache logic simple and
+     * prevents incorrect cache hits.
+     *
+     * In particular, wrapper hash logic must never force program creation or linked-program
+     * introspection just to decide whether a shared WebGL program can be reused.
+     */
+    /** 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 = { ...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) {
+          log.log(3, `${this}: ${pipeline} created, count=${cache[hash].useCount}`)();
+        }
+      } else {
+        cache[hash].useCount++;
+        if (this.device.props.debugFactories) {
+          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 = { ...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) {
+          log.log(3, `${this}: ${pipeline} created, count=${cache[hash].useCount}`)();
+        }
+      } else {
+        cache[hash].useCount++;
+        if (this.device.props.debugFactories) {
+          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) {
+          log.log(3, `${this}: ${pipeline} released and destroyed`)();
+        }
+      } else if (cache[hash].useCount < 0) {
+        log.error(`${this}: ${pipeline} released, useCount < 0, resetting`)();
+        cache[hash].useCount = 0;
+      } else if (this.device.props.debugFactories) {
+        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 RenderPipeline) {
+        this.releaseSharedRenderPipeline(pipeline);
+      }
+      return true;
+    }
+    /** Get the appropriate cache for the type of pipeline */
+    _getCache(pipeline) {
+      let cache;
+      if (pipeline instanceof ComputePipeline) {
+        cache = this._computePipelineCache;
+      }
+      if (pipeline instanceof 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);
+      const shaderLayoutHash = this._getHash(JSON.stringify(props.shaderLayout));
+      return `${type}/C/${shaderHash}SL${shaderLayoutHash}`;
+    }
+    /** 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 shaderLayoutHash = this._getHash(JSON.stringify(props.shaderLayout));
+      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}SL${shaderLayoutHash}BL${bufferLayoutHash}`;
+        case "webgpu":
+        default:
+          const entryPointHash = this._getHash(
+            JSON.stringify({
+              vertexEntryPoint: props.vertexEntryPoint,
+              fragmentEntryPoint: props.fragmentEntryPoint
+            })
+          );
+          const parameterHash = this._getHash(JSON.stringify(props.parameters));
+          const attachmentHash = this._getWebGPUAttachmentHash(props);
+          return `${type}/R/${vsHash}/${fsHash}V${varyingHash}T${props.topology}EP${entryPointHash}P${parameterHash}SL${shaderLayoutHash}BL${bufferLayoutHash}A${attachmentHash}`;
+      }
+    }
+    // This is the only gate for shared `WebGLProgram` reuse.
+    // Only include inputs that affect program linking or transform-feedback linkage.
+    // Wrapper-only concerns such as topology, parameters, attachment formats and layout
+    // overrides must not be added here.
+    _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 }));
+    }
+    _getWebGPUAttachmentHash(props) {
+      const colorAttachmentFormats = props.colorAttachmentFormats ?? [
+        this.device.preferredColorFormat
+      ];
+      const depthStencilAttachmentFormat = props.parameters?.depthWriteEnabled ? props.depthStencilAttachmentFormat || this.device.preferredDepthFormat : null;
+      return this._getHash(
+        JSON.stringify({
+          colorAttachmentFormats,
+          depthStencilAttachmentFormat
+        })
+      );
+    }
+  };
+  var PipelineFactory = _PipelineFactory;
+  __publicField(PipelineFactory, "defaultProps", { ...RenderPipeline.defaultProps });
+
+  // ../core/src/factories/shader-factory.ts
+  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/core");
+      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) {
+          log.log(3, `${this}: Created new shader ${resource.id}`)();
+        }
+      } else {
+        cacheEntry.useCount++;
+        if (this.device.props.debugFactories) {
+          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) {
+              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) {
+          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", { ...Shader.defaultProps });
+
+  // ../core/src/adapter-utils/bind-groups.ts
+  function getShaderLayoutBinding(shaderLayout, bindingName, options) {
+    const bindingLayout = shaderLayout.bindings.find(
+      (binding) => binding.name === bindingName || `${binding.name.toLocaleLowerCase()}uniforms` === bindingName.toLocaleLowerCase()
+    );
+    if (!bindingLayout && !options?.ignoreWarnings) {
+      log.warn(`Binding ${bindingName} not set: Not found in shader layout.`)();
+    }
+    return bindingLayout || null;
+  }
+  function normalizeBindingsByGroup(shaderLayout, bindingsOrBindGroups) {
+    if (!bindingsOrBindGroups) {
+      return {};
+    }
+    if (areBindingsGrouped(bindingsOrBindGroups)) {
+      const bindGroups2 = bindingsOrBindGroups;
+      return Object.fromEntries(
+        Object.entries(bindGroups2).map(([group, bindings]) => [Number(group), { ...bindings }])
+      );
+    }
+    const bindGroups = {};
+    for (const [bindingName, binding] of Object.entries(bindingsOrBindGroups)) {
+      const bindingLayout = getShaderLayoutBinding(shaderLayout, bindingName);
+      const group = bindingLayout?.group ?? 0;
+      bindGroups[group] ||= {};
+      bindGroups[group][bindingName] = binding;
+    }
+    return bindGroups;
+  }
+  function flattenBindingsByGroup(bindGroups) {
+    const bindings = {};
+    for (const groupBindings of Object.values(bindGroups)) {
+      Object.assign(bindings, groupBindings);
+    }
+    return bindings;
+  }
+  function areBindingsGrouped(bindingsOrBindGroups) {
+    const keys = Object.keys(bindingsOrBindGroups);
+    return keys.length > 0 && keys.every((key) => /^\d+$/.test(key));
+  }
+
+  // ../core/src/factories/bind-group-factory.ts
+  var BindGroupFactory = class {
+    device;
+    _layoutCacheByPipeline = /* @__PURE__ */ new WeakMap();
+    _bindGroupCacheByLayout = /* @__PURE__ */ new WeakMap();
+    constructor(device) {
+      this.device = device;
+    }
+    getBindGroups(pipeline, bindings, bindGroupCacheKeys) {
+      if (this.device.type !== "webgpu" || pipeline.shaderLayout.bindings.length === 0) {
+        return {};
+      }
+      const bindingsByGroup = normalizeBindingsByGroup(pipeline.shaderLayout, bindings);
+      const resolvedBindGroups = {};
+      for (const group of getBindGroupIndicesUpToMax(pipeline.shaderLayout.bindings)) {
+        const groupBindings = bindingsByGroup[group];
+        const bindGroupLayout = this._getBindGroupLayout(pipeline, group);
+        if (!groupBindings || Object.keys(groupBindings).length === 0) {
+          if (!hasBindingsInGroup(pipeline.shaderLayout.bindings, group)) {
+            resolvedBindGroups[group] = this._getEmptyBindGroup(
+              bindGroupLayout,
+              pipeline.shaderLayout,
+              group
+            );
+          }
+          continue;
+        }
+        const bindGroupCacheKey = bindGroupCacheKeys?.[group];
+        if (bindGroupCacheKey) {
+          const layoutCache = this._getLayoutBindGroupCache(bindGroupLayout);
+          if (layoutCache.bindGroupsBySource.has(bindGroupCacheKey)) {
+            resolvedBindGroups[group] = layoutCache.bindGroupsBySource.get(bindGroupCacheKey) || null;
+            continue;
+          }
+          const bindGroup = this.device._createBindGroupWebGPU(
+            bindGroupLayout,
+            pipeline.shaderLayout,
+            groupBindings,
+            group
+          );
+          layoutCache.bindGroupsBySource.set(bindGroupCacheKey, bindGroup);
+          resolvedBindGroups[group] = bindGroup;
+        } else {
+          resolvedBindGroups[group] = this.device._createBindGroupWebGPU(
+            bindGroupLayout,
+            pipeline.shaderLayout,
+            groupBindings,
+            group
+          );
+        }
+      }
+      return resolvedBindGroups;
+    }
+    _getBindGroupLayout(pipeline, group) {
+      let layoutCache = this._layoutCacheByPipeline.get(pipeline);
+      if (!layoutCache) {
+        layoutCache = {};
+        this._layoutCacheByPipeline.set(pipeline, layoutCache);
+      }
+      layoutCache[group] ||= this.device._createBindGroupLayoutWebGPU(pipeline, group);
+      return layoutCache[group];
+    }
+    _getEmptyBindGroup(bindGroupLayout, shaderLayout, group) {
+      const layoutCache = this._getLayoutBindGroupCache(bindGroupLayout);
+      layoutCache.emptyBindGroup ||= this.device._createBindGroupWebGPU(bindGroupLayout, shaderLayout, {}, group) || null;
+      return layoutCache.emptyBindGroup;
+    }
+    _getLayoutBindGroupCache(bindGroupLayout) {
+      let layoutCache = this._bindGroupCacheByLayout.get(bindGroupLayout);
+      if (!layoutCache) {
+        layoutCache = { bindGroupsBySource: /* @__PURE__ */ new WeakMap() };
+        this._bindGroupCacheByLayout.set(bindGroupLayout, layoutCache);
+      }
+      return layoutCache;
+    }
+  };
+  function _getDefaultBindGroupFactory(device) {
+    device._factories.bindGroupFactory ||= new BindGroupFactory(device);
+    return device._factories.bindGroupFactory;
+  }
+  function getBindGroupIndicesUpToMax(bindings) {
+    const maxGroup = bindings.reduce(
+      (highestGroup, binding) => Math.max(highestGroup, binding.group),
+      -1
+    );
+    return Array.from({ length: maxGroup + 1 }, (_, group) => group);
+  }
+  function hasBindingsInGroup(bindings, group) {
+    return bindings.some((binding) => binding.group === group);
+  }
+
   // ../core/src/adapter/resources/render-pass.ts
   var _RenderPass = class extends Resource {
     get [Symbol.toStringTag]() {
@@ -3946,28 +4506,6 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     endTimestampIndex: void 0
   });
 
-  // ../core/src/adapter/resources/compute-pipeline.ts
-  var _ComputePipeline = class extends Resource {
-    get [Symbol.toStringTag]() {
-      return "ComputePipeline";
-    }
-    hash = "";
-    /** The merged shader layout */
-    shaderLayout;
-    constructor(device, props) {
-      super(device, props, _ComputePipeline.defaultProps);
-      this.shaderLayout = props.shaderLayout;
-    }
-  };
-  var ComputePipeline = _ComputePipeline;
-  __publicField(ComputePipeline, "defaultProps", {
-    ...Resource.defaultProps,
-    shader: void 0,
-    entryPoint: void 0,
-    constants: {},
-    shaderLayout: void 0
-  });
-
   // ../core/src/adapter/resources/compute-pass.ts
   var _ComputePass = class extends Resource {
     constructor(device, props) {
@@ -4079,7 +4617,7 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     ...Resource.defaultProps
   });
 
-  // ../core/src/shadertypes/data-types/decode-shader-types.ts
+  // ../core/src/shadertypes/shader-types/shader-type-decoder.ts
   function getVariableShaderTypeInfo(format) {
     const resolvedFormat = resolveVariableShaderTypeAlias(format);
     const decoded = UNIFORM_FORMATS[resolvedFormat];
@@ -4106,12 +4644,33 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
       signed
     };
   }
+  var ShaderTypeDecoder = class {
+    getVariableShaderTypeInfo(format) {
+      return getVariableShaderTypeInfo(format);
+    }
+    getAttributeShaderTypeInfo(attributeType) {
+      return getAttributeShaderTypeInfo(attributeType);
+    }
+    makeShaderAttributeType(primitiveType, components) {
+      return makeShaderAttributeType(primitiveType, components);
+    }
+    resolveAttributeShaderTypeAlias(alias) {
+      return resolveAttributeShaderTypeAlias(alias);
+    }
+    resolveVariableShaderTypeAlias(alias) {
+      return resolveVariableShaderTypeAlias(alias);
+    }
+  };
+  function makeShaderAttributeType(primitiveType, components) {
+    return components === 1 ? primitiveType : `vec${components}<${primitiveType}>`;
+  }
   function resolveAttributeShaderTypeAlias(alias) {
     return WGSL_ATTRIBUTE_TYPE_ALIAS_MAP[alias] || alias;
   }
   function resolveVariableShaderTypeAlias(alias) {
     return WGSL_VARIABLE_TYPE_ALIAS_MAP[alias] || alias;
   }
+  var shaderTypeDecoder = new ShaderTypeDecoder();
   var PRIMITIVE_TYPE_SIZES = {
     f32: 4,
     f16: 2,
@@ -4208,7 +4767,18 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     vec4h: "vec4<f16>"
   };
   var WGSL_VARIABLE_TYPE_ALIAS_MAP = {
-    ...WGSL_ATTRIBUTE_TYPE_ALIAS_MAP,
+    vec2i: "vec2<i32>",
+    vec3i: "vec3<i32>",
+    vec4i: "vec4<i32>",
+    vec2u: "vec2<u32>",
+    vec3u: "vec3<u32>",
+    vec4u: "vec4<u32>",
+    vec2f: "vec2<f32>",
+    vec3f: "vec3<f32>",
+    vec4f: "vec4<f32>",
+    vec2h: "vec2<f16>",
+    vec3h: "vec3<f16>",
+    vec4h: "vec4<f16>",
     mat2x2f: "mat2x2<f32>",
     mat2x3f: "mat2x3<f32>",
     mat2x4f: "mat2x4<f32>",
@@ -4275,10 +4845,10 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     if (!shaderDeclaration) {
       return null;
     }
-    const attributeTypeInfo = getAttributeShaderTypeInfo(shaderDeclaration.type);
-    const defaultVertexFormat = getCompatibleVertexFormat(attributeTypeInfo);
+    const attributeTypeInfo = shaderTypeDecoder.getAttributeShaderTypeInfo(shaderDeclaration.type);
+    const defaultVertexFormat = vertexFormatDecoder.getCompatibleVertexFormat(attributeTypeInfo);
     const vertexFormat = bufferMapping?.vertexFormat || defaultVertexFormat;
-    const vertexFormatInfo = getVertexFormatInfo(vertexFormat);
+    const vertexFormatInfo = vertexFormatDecoder.getVertexFormatInfo(vertexFormat);
     return {
       attributeName: bufferMapping?.attributeName || shaderDeclaration.name,
       bufferName: bufferMapping?.bufferName || shaderDeclaration.name,
@@ -4346,7 +4916,7 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
       let byteStride = bufferLayout.byteStride;
       if (typeof bufferLayout.byteStride !== "number") {
         for (const attributeMapping2 of bufferLayout.attributes || []) {
-          const info = getVertexFormatInfo(attributeMapping2.format);
+          const info = vertexFormatDecoder.getVertexFormatInfo(attributeMapping2.format);
           byteStride += info.byteLength;
         }
       }
@@ -4466,6 +5036,36 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     }
   });
 
+  // ../core/src/shadertypes/data-types/decode-data-types.ts
+  function alignTo(size, count) {
+    switch (count) {
+      case 1:
+        return size;
+      case 2:
+        return size + size % 2;
+      default:
+        return size + (4 - size % 4) % 4;
+    }
+  }
+  function getTypedArrayConstructor(type) {
+    const [, , , , Constructor] = NORMALIZED_TYPE_MAP2[type];
+    return Constructor;
+  }
+  var NORMALIZED_TYPE_MAP2 = {
+    uint8: ["uint8", "u32", 1, false, Uint8Array],
+    sint8: ["sint8", "i32", 1, false, Int8Array],
+    unorm8: ["uint8", "f32", 1, true, Uint8Array],
+    snorm8: ["sint8", "f32", 1, true, Int8Array],
+    uint16: ["uint16", "u32", 2, false, Uint16Array],
+    sint16: ["sint16", "i32", 2, false, Int16Array],
+    unorm16: ["uint16", "u32", 2, true, Uint16Array],
+    snorm16: ["sint16", "i32", 2, true, Int16Array],
+    float16: ["float16", "f16", 2, false, Uint16Array],
+    float32: ["float32", "f32", 4, false, Float32Array],
+    uint32: ["uint32", "u32", 4, false, Uint32Array],
+    sint32: ["sint32", "i32", 4, false, Int32Array]
+  };
+
   // ../core/src/utils/array-utils-flat.ts
   var arrayBuffer;
   function getScratchArrayBuffer(byteLength) {
@@ -4479,19 +5079,32 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     return new Type(scratchArrayBuffer, 0, length);
   }
 
+  // ../core/src/utils/is-array.ts
+  function isTypedArray(value) {
+    return ArrayBuffer.isView(value) && !(value instanceof DataView);
+  }
+  function isNumberArray(value) {
+    if (Array.isArray(value)) {
+      return value.length === 0 || typeof value[0] === "number";
+    }
+    return isTypedArray(value);
+  }
+
   // ../core/src/portable/uniform-buffer-layout.ts
   var minBufferSize = 1024;
   var UniformBufferLayout = class {
     layout = {};
+    uniformTypes;
     /** number of bytes needed for buffer allocation */
     byteLength;
     /** Create a new UniformBufferLayout given a map of attributes. */
-    constructor(uniformTypes, uniformSizes = {}) {
+    constructor(uniformTypes) {
+      this.uniformTypes = { ...uniformTypes };
       let size = 0;
-      for (const [key, uniformType] of Object.entries(uniformTypes)) {
-        size = this._addToLayout(key, uniformType, size, uniformSizes?.[key]);
+      for (const [key, uniformType] of Object.entries(this.uniformTypes)) {
+        size = this._addToLayout(key, uniformType, size);
       }
-      size += (4 - size % 4) % 4;
+      size = alignTo(size, 4);
       this.byteLength = Math.max(size * 4, minBufferSize);
     }
     /** Does this layout have a field with specified name */
@@ -4503,98 +5116,241 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
       const layout = this.layout[name2];
       return layout;
     }
+    /** Flatten nested uniform values into leaf-path values understood by UniformBlock. */
+    getFlatUniformValues(uniformValues) {
+      const flattenedUniformValues = {};
+      for (const [name2, value] of Object.entries(uniformValues)) {
+        const uniformType = this.uniformTypes[name2];
+        if (uniformType) {
+          this._flattenCompositeValue(flattenedUniformValues, name2, uniformType, value);
+        } else if (this.layout[name2]) {
+          flattenedUniformValues[name2] = value;
+        }
+      }
+      return flattenedUniformValues;
+    }
     /** Get the data for the complete buffer */
     getData(uniformValues) {
       const buffer = getScratchArrayBuffer(this.byteLength);
+      new Uint8Array(buffer, 0, this.byteLength).fill(0);
       const typedArrays = {
         i32: new Int32Array(buffer),
         u32: new Uint32Array(buffer),
         f32: new Float32Array(buffer),
         f16: new Uint16Array(buffer)
       };
-      for (const [name2, value] of Object.entries(uniformValues)) {
-        this._writeCompositeValue(typedArrays, name2, value);
+      const flattenedUniformValues = this.getFlatUniformValues(uniformValues);
+      for (const [name2, value] of Object.entries(flattenedUniformValues)) {
+        this._writeLeafValue(typedArrays, name2, value);
       }
       return new Uint8Array(buffer, 0, this.byteLength);
     }
     // Recursively add a uniform to the layout
-    _addToLayout(name2, type, offset, count = 1) {
+    _addToLayout(name2, type, offset) {
       if (typeof type === "string") {
-        const info = getVariableShaderTypeInfo(type);
-        const sizeInSlots = info.components * count;
-        const alignedOffset = alignTo(offset, info.components);
+        const info = getLeafLayoutInfo(type);
+        const alignedOffset = alignTo(offset, info.alignment);
         this.layout[name2] = {
           offset: alignedOffset,
-          size: sizeInSlots,
-          type: info.type
+          ...info
         };
-        return alignedOffset + sizeInSlots;
+        return alignedOffset + info.size;
       }
       if (Array.isArray(type)) {
+        if (Array.isArray(type[0])) {
+          throw new Error(`Nested arrays are not supported for ${name2}`);
+        }
         const elementType = type[0];
-        const length = count > 1 ? count : type.length > 1 ? type[1] : 1;
-        let arrayOffset = alignTo(offset, 4);
+        const length = type[1];
+        const stride = alignTo(getTypeSize(elementType), 4);
+        const arrayOffset = alignTo(offset, 4);
         for (let i = 0; i < length; i++) {
-          arrayOffset = this._addToLayout(`${name2}[${i}]`, elementType, arrayOffset);
+          this._addToLayout(`${name2}[${i}]`, elementType, arrayOffset + i * stride);
         }
-        return arrayOffset;
+        return arrayOffset + stride * length;
       }
-      if (typeof type === "object") {
+      if (isCompositeShaderTypeStruct(type)) {
         let structOffset = alignTo(offset, 4);
         for (const [memberName, memberType] of Object.entries(type)) {
           structOffset = this._addToLayout(`${name2}.${memberName}`, memberType, structOffset);
         }
-        return structOffset;
+        return alignTo(structOffset, 4);
       }
       throw new Error(`Unsupported CompositeShaderType for ${name2}`);
     }
-    _writeCompositeValue(typedArrays, baseName, value) {
-      if (this.layout[baseName]) {
-        this._writeToBuffer(typedArrays, baseName, value);
+    _flattenCompositeValue(flattenedUniformValues, baseName, uniformType, value) {
+      if (value === void 0) {
+        return;
+      }
+      if (typeof uniformType === "string" || this.layout[baseName]) {
+        flattenedUniformValues[baseName] = value;
         return;
       }
-      if (Array.isArray(value)) {
-        for (let i = 0; i < value.length; i++) {
-          const element = value[i];
-          const indexedName = `${baseName}[${i}]`;
-          this._writeCompositeValue(typedArrays, indexedName, element);
+      if (Array.isArray(uniformType)) {
+        const elementType = uniformType[0];
+        const length = uniformType[1];
+        if (Array.isArray(elementType)) {
+          throw new Error(`Nested arrays are not supported for ${baseName}`);
+        }
+        if (typeof elementType === "string" && isNumberArray(value)) {
+          this._flattenPackedArray(flattenedUniformValues, baseName, elementType, length, value);
+          return;
+        }
+        if (!Array.isArray(value)) {
+          log.warn(`Unsupported uniform array value for ${baseName}:`, value)();
+          return;
+        }
+        for (let index = 0; index < Math.min(value.length, length); index++) {
+          const elementValue = value[index];
+          if (elementValue === void 0) {
+            continue;
+          }
+          this._flattenCompositeValue(
+            flattenedUniformValues,
+            `${baseName}[${index}]`,
+            elementType,
+            elementValue
+          );
         }
         return;
       }
-      if (typeof value === "object" && value !== null) {
+      if (isCompositeShaderTypeStruct(uniformType) && isCompositeUniformObject(value)) {
         for (const [key, subValue] of Object.entries(value)) {
+          if (subValue === void 0) {
+            continue;
+          }
           const nestedName = `${baseName}.${key}`;
-          this._writeCompositeValue(typedArrays, nestedName, subValue);
+          this._flattenCompositeValue(flattenedUniformValues, nestedName, uniformType[key], subValue);
         }
         return;
       }
       log.warn(`Unsupported uniform value for ${baseName}:`, value)();
     }
-    _writeToBuffer(typedArrays, name2, value) {
+    _flattenPackedArray(flattenedUniformValues, baseName, elementType, length, value) {
+      const numericValue = value;
+      const elementLayout = getLeafLayoutInfo(elementType);
+      const packedElementLength = elementLayout.components;
+      for (let index = 0; index < length; index++) {
+        const start = index * packedElementLength;
+        if (start >= numericValue.length) {
+          break;
+        }
+        if (packedElementLength === 1) {
+          flattenedUniformValues[`${baseName}[${index}]`] = Number(numericValue[start]);
+        } else {
+          flattenedUniformValues[`${baseName}[${index}]`] = sliceNumericArray(
+            value,
+            start,
+            start + packedElementLength
+          );
+        }
+      }
+    }
+    _writeLeafValue(typedArrays, name2, value) {
       const layout = this.layout[name2];
       if (!layout) {
         log.warn(`Uniform ${name2} not found in layout`)();
         return;
       }
-      const { type, size, offset } = layout;
+      const { type, components, columns, rows, offset } = layout;
       const array = typedArrays[type];
-      if (size === 1) {
+      if (components === 1) {
         array[offset] = Number(value);
-      } else {
-        array.set(value, offset);
+        return;
+      }
+      const sourceValue = value;
+      if (columns === 1) {
+        for (let componentIndex = 0; componentIndex < components; componentIndex++) {
+          array[offset + componentIndex] = Number(sourceValue[componentIndex] ?? 0);
+        }
+        return;
+      }
+      let sourceIndex = 0;
+      for (let columnIndex = 0; columnIndex < columns; columnIndex++) {
+        const columnOffset = offset + columnIndex * 4;
+        for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
+          array[columnOffset + rowIndex] = Number(sourceValue[sourceIndex++] ?? 0);
+        }
       }
     }
   };
-
-  // ../core/src/utils/is-array.ts
-  function isTypedArray(value) {
-    return ArrayBuffer.isView(value) && !(value instanceof DataView);
+  function getTypeSize(type) {
+    if (typeof type === "string") {
+      return getLeafLayoutInfo(type).size;
+    }
+    if (Array.isArray(type)) {
+      const elementType = type[0];
+      const length = type[1];
+      if (Array.isArray(elementType)) {
+        throw new Error("Nested arrays are not supported");
+      }
+      return alignTo(getTypeSize(elementType), 4) * length;
+    }
+    let size = 0;
+    for (const memberType of Object.values(type)) {
+      const compositeMemberType = memberType;
+      size = alignTo(size, getTypeAlignment(compositeMemberType));
+      size += getTypeSize(compositeMemberType);
+    }
+    return alignTo(size, 4);
   }
-  function isNumberArray(value) {
-    if (Array.isArray(value)) {
-      return value.length === 0 || typeof value[0] === "number";
+  function getTypeAlignment(type) {
+    if (typeof type === "string") {
+      return getLeafLayoutInfo(type).alignment;
     }
-    return isTypedArray(value);
+    if (Array.isArray(type)) {
+      return 4;
+    }
+    return 4;
+  }
+  function getLeafLayoutInfo(type) {
+    const resolvedType = resolveVariableShaderTypeAlias(type);
+    const decodedType = getVariableShaderTypeInfo(resolvedType);
+    const matrixMatch = /^mat(\d)x(\d)<.+>$/.exec(resolvedType);
+    if (matrixMatch) {
+      const columns = Number(matrixMatch[1]);
+      const rows = Number(matrixMatch[2]);
+      return {
+        alignment: 4,
+        size: columns * 4,
+        components: columns * rows,
+        columns,
+        rows,
+        shaderType: resolvedType,
+        type: decodedType.type
+      };
+    }
+    const vectorMatch = /^vec(\d)<.+>$/.exec(resolvedType);
+    if (vectorMatch) {
+      const components = Number(vectorMatch[1]);
+      return {
+        alignment: components === 2 ? 2 : 4,
+        size: components === 3 ? 4 : components,
+        components,
+        columns: 1,
+        rows: components,
+        shaderType: resolvedType,
+        type: decodedType.type
+      };
+    }
+    return {
+      alignment: 1,
+      size: 1,
+      components: 1,
+      columns: 1,
+      rows: 1,
+      shaderType: resolvedType,
+      type: decodedType.type
+    };
+  }
+  function isCompositeShaderTypeStruct(value) {
+    return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+  }
+  function isCompositeUniformObject(value) {
+    return Boolean(value) && typeof value === "object" && !Array.isArray(value) && !ArrayBuffer.isView(value);
+  }
+  function sliceNumericArray(value, start, end) {
+    return Array.prototype.slice.call(value, start, end);
   }
 
   // ../core/src/utils/array-equal.ts
@@ -4696,13 +5452,12 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     constructor(blocks) {
       for (const [bufferName, block] of Object.entries(blocks)) {
         const uniformBufferName = bufferName;
-        const uniformBufferLayout = new UniformBufferLayout(
-          block.uniformTypes ?? {},
-          block.uniformSizes ?? {}
-        );
+        const uniformBufferLayout = new UniformBufferLayout(block.uniformTypes ?? {});
         this.uniformBufferLayouts.set(uniformBufferName, uniformBufferLayout);
         const uniformBlock = new UniformBlock({ name: bufferName });
-        uniformBlock.setUniforms(block.defaultUniforms || {});
+        uniformBlock.setUniforms(
+          uniformBufferLayout.getFlatUniformValues(block.defaultUniforms || {})
+        );
         this.uniformBlocks.set(uniformBufferName, uniformBlock);
       }
     }
@@ -4718,7 +5473,12 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
      */
     setUniforms(uniforms) {
       for (const [blockName, uniformValues] of Object.entries(uniforms)) {
-        this.uniformBlocks.get(blockName)?.setUniforms(uniformValues);
+        const uniformBufferName = blockName;
+        const uniformBufferLayout = this.uniformBufferLayouts.get(uniformBufferName);
+        const flattenedUniforms = uniformBufferLayout?.getFlatUniformValues(
+          uniformValues || {}
+        );
+        this.uniformBlocks.get(uniformBufferName)?.setUniforms(flattenedUniforms || {});
       }
       this.updateUniformBuffers();
     }
@@ -4794,7 +5554,7 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     }
   };
 
-  // ../core/src/shadertypes/textures/texture-layout.ts
+  // ../core/src/shadertypes/texture-types/texture-layout.ts
   function getTextureImageView(arrayBuffer2, memoryLayout, format, image = 0) {
     const formatInfo = textureFormatDecoder.getInfo(format);
     const bytesPerComponent = formatInfo.bytesPerPixel / formatInfo.components;
@@ -4832,7 +5592,7 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     typedArray.set(subArray, offset);
   }
 
-  // ../core/src/shadertypes/textures/pixel-utils.ts
+  // ../core/src/shadertypes/texture-types/pixel-utils.ts
   function readPixel(pixelData, x, y, bitsPerChannel) {
     if (x < 0 || x >= pixelData.width || y < 0 || y >= pixelData.height) {
       throw new Error("Coordinates out of bounds.");