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

package/dist/index.cjs

@@ -38,6 +38,7 @@ __export(dist_exports, {
   ExternalTexture: () => ExternalTexture,
   Fence: () => Fence,
   Framebuffer: () => Framebuffer,
+  PipelineFactory: () => PipelineFactory,
   PipelineLayout: () => PipelineLayout,
   PresentationContext: () => PresentationContext,
   QuerySet: () => QuerySet,
@@ -46,38 +47,39 @@ __export(dist_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: () => assert,
   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
 });
 module.exports = __toCommonJS(dist_exports);
@@ -606,62 +608,73 @@ __publicField(Buffer2, "defaultProps", {
   onMapped: void 0
 });
 
-// dist/shadertypes/data-types/decode-data-types.js
-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;
+// dist/shadertypes/data-types/data-type-decoder.js
+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],
@@ -677,87 +690,99 @@ var NORMALIZED_TYPE_MAP = {
   sint32: ["sint32", "i32", 4, false, Int32Array]
 };
 
-// dist/shadertypes/vertex-arrays/decode-vertex-format.js
-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}`;
-  }
-}
-function getVertexFormatFromAttribute(typedArray, size, normalized) {
-  if (!size || size > 4) {
-    throw new Error(`size ${size}`);
+// dist/shadertypes/vertex-types/vertex-format-decoder.js
+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;
+  }
+  /** 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();
 
-// dist/shadertypes/textures/texture-format-table.js
+// dist/shadertypes/texture-types/texture-format-table.js
 var texture_compression_bc = "texture-compression-bc";
 var texture_compression_astc = "texture-compression-astc";
 var texture_compression_etc2 = "texture-compression-etc2";
@@ -928,7 +953,7 @@ var TEXTURE_FORMAT_TABLE = {
   ...TEXTURE_FORMAT_COMPRESSED_TABLE
 };
 
-// dist/shadertypes/textures/texture-format-decoder.js
+// dist/shadertypes/texture-types/texture-format-decoder.js
 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"];
@@ -1027,11 +1052,11 @@ function getTextureFormatInfo(format) {
       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 == null ? void 0 : channels.length) ?? 1;
     const bitsPerChannel = [
@@ -1131,7 +1156,7 @@ function getCompressedTextureBlockByteLength(format) {
   return 16;
 }
 
-// dist/image-utils/image-types.js
+// dist/shadertypes/image-types/image-types.js
 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;
 }
@@ -1154,6 +1179,53 @@ function getExternalImageSize(data) {
 // dist/adapter/device.js
 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) {
+  var _a;
+  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 ((_a = value.constructor) == null ? void 0 : _a.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;
@@ -1184,6 +1256,8 @@ var _Device = class {
   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) */
@@ -1197,8 +1271,9 @@ var _Device = class {
     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;
@@ -1300,7 +1375,8 @@ var _Device = class {
   reportError(error, context, ...args) {
     const isHandled = this.props.onError(error, context);
     if (!isHandled) {
-      return log.error(this.type === "webgl" ? "%cWebGL" : "%cWebGPU", "color: white; background: red; padding: 2px 6px; border-radius: 3px;", error.message, context, ...args);
+      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, ...logArguments);
     }
     return () => {
     };
@@ -1346,6 +1422,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.
@@ -1568,7 +1652,7 @@ var _Luma = class {
   VERSION = (
     // Version detection using build plugin
     // @ts-expect-error no-undef
-    true ? "9.3.0-alpha.6" : "running from source"
+    true ? "9.3.0-alpha.8" : "running from source"
   );
   spector;
   preregisteredAdapters = /* @__PURE__ */ new Map();
@@ -2372,8 +2456,8 @@ var _Texture = class extends Resource {
    *
    * @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.
    */
@@ -2386,6 +2470,7 @@ var _Texture = class extends Resource {
    *
    * @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");
@@ -3114,7 +3199,8 @@ __publicField(RenderPipeline, "defaultProps", {
   bufferMode: void 0,
   disableWarnings: false,
   _sharedRenderPipeline: void 0,
-  bindings: void 0
+  bindings: void 0,
+  bindGroups: void 0
 });
 
 // dist/adapter/resources/shared-render-pipeline.js
@@ -3134,6 +3220,451 @@ var SharedRenderPipeline = class extends Resource {
   }
 };
 
+// dist/adapter/resources/compute-pipeline.js
+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
+});
+
+// dist/factories/pipeline-factory.js
+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) {
+    var _a;
+    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 = (_a = cache[hash]) == null ? void 0 : _a.resource;
+    if (!pipeline) {
+      const sharedRenderPipeline = this.device.type === "webgl" && this.device.props._sharePipelines ? this.createSharedRenderPipeline(allProps) : void 0;
+      pipeline = this.device.createRenderPipeline({
+        ...allProps,
+        id: allProps.id ? `${allProps.id}-cached` : uid("unnamed-cached"),
+        _sharedRenderPipeline: sharedRenderPipeline
+      });
+      pipeline.hash = hash;
+      cache[hash] = { resource: pipeline, useCount: 1 };
+      if (this.device.props.debugFactories) {
+        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) {
+    var _a;
+    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 = (_a = cache[hash]) == null ? void 0 : _a.resource;
+    if (!pipeline) {
+      pipeline = this.device.createComputePipeline({
+        ...allProps,
+        id: allProps.id ? `${allProps.id}-cached` : void 0
+      });
+      pipeline.hash = hash;
+      cache[hash] = { resource: pipeline, useCount: 1 };
+      if (this.device.props.debugFactories) {
+        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) {
+    var _a;
+    const colorAttachmentFormats = props.colorAttachmentFormats ?? [
+      this.device.preferredColorFormat
+    ];
+    const depthStencilAttachmentFormat = ((_a = props.parameters) == null ? void 0 : _a.depthWriteEnabled) ? props.depthStencilAttachmentFormat || this.device.preferredDepthFormat : null;
+    return this._getHash(JSON.stringify({
+      colorAttachmentFormats,
+      depthStencilAttachmentFormat
+    }));
+  }
+};
+var PipelineFactory = _PipelineFactory;
+__publicField(PipelineFactory, "defaultProps", { ...RenderPipeline.defaultProps });
+
+// dist/factories/shader-factory.js
+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 });
+
+// dist/adapter-utils/bind-groups.js
+function getShaderLayoutBinding(shaderLayout, bindingName, options) {
+  const bindingLayout = shaderLayout.bindings.find((binding) => binding.name === bindingName || `${binding.name.toLocaleLowerCase()}uniforms` === bindingName.toLocaleLowerCase());
+  if (!bindingLayout && !(options == null ? void 0 : 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 == null ? void 0 : 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));
+}
+
+// dist/factories/bind-group-factory.js
+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 == null ? void 0 : 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);
+}
+
 // dist/adapter/resources/render-pass.js
 var _RenderPass = class extends Resource {
   get [Symbol.toStringTag]() {
@@ -3172,28 +3703,6 @@ __publicField(RenderPass, "defaultProps", {
   endTimestampIndex: void 0
 });
 
-// dist/adapter/resources/compute-pipeline.js
-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
-});
-
 // dist/adapter/resources/compute-pass.js
 var _ComputePass = class extends Resource {
   constructor(device, props) {
@@ -3305,7 +3814,7 @@ __publicField(CommandBuffer, "defaultProps", {
   ...Resource.defaultProps
 });
 
-// dist/shadertypes/data-types/decode-shader-types.js
+// dist/shadertypes/shader-types/shader-type-decoder.js
 function getVariableShaderTypeInfo(format) {
   const resolvedFormat = resolveVariableShaderTypeAlias(format);
   const decoded = UNIFORM_FORMATS[resolvedFormat];
@@ -3332,12 +3841,33 @@ function getAttributeShaderTypeInfo(attributeType) {
     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,
@@ -3434,7 +3964,18 @@ var WGSL_ATTRIBUTE_TYPE_ALIAS_MAP = {
   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>",
@@ -3498,10 +4039,10 @@ function getAttributeInfoFromLayouts(shaderLayout, bufferLayout, name2) {
   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 == null ? void 0 : bufferMapping.vertexFormat) || defaultVertexFormat;
-  const vertexFormatInfo = getVertexFormatInfo(vertexFormat);
+  const vertexFormatInfo = vertexFormatDecoder.getVertexFormatInfo(vertexFormat);
   return {
     attributeName: (bufferMapping == null ? void 0 : bufferMapping.attributeName) || shaderDeclaration.name,
     bufferName: (bufferMapping == null ? void 0 : bufferMapping.bufferName) || shaderDeclaration.name,
@@ -3570,7 +4111,7 @@ function getAttributeFromAttributesList(bufferLayouts, name2) {
     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;
       }
     }
@@ -3686,6 +4227,36 @@ __publicField(PipelineLayout, "defaultProps", {
   }
 });
 
+// dist/shadertypes/data-types/decode-data-types.js
+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]
+};
+
 // dist/utils/array-utils-flat.js
 var arrayBuffer;
 function getScratchArrayBuffer(byteLength) {
@@ -3699,19 +4270,32 @@ function getScratchArray(Type, length) {
   return new Type(scratchArrayBuffer, 0, length);
 }
 
+// dist/utils/is-array.js
+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);
+}
+
 // dist/portable/uniform-buffer-layout.js
 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 == null ? void 0 : 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 */
@@ -3723,98 +4307,232 @@ var UniformBufferLayout = class {
     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);
+      }
     }
   }
 };
-
-// dist/utils/is-array.js
-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);
 }
 
 // dist/utils/array-equal.js
@@ -3915,10 +4633,10 @@ var UniformStore = class {
   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);
     }
   }
@@ -3935,7 +4653,10 @@ var UniformStore = class {
   setUniforms(uniforms) {
     var _a;
     for (const [blockName, uniformValues] of Object.entries(uniforms)) {
-      (_a = this.uniformBlocks.get(blockName)) == null ? void 0 : _a.setUniforms(uniformValues);
+      const uniformBufferName = blockName;
+      const uniformBufferLayout = this.uniformBufferLayouts.get(uniformBufferName);
+      const flattenedUniforms = uniformBufferLayout == null ? void 0 : uniformBufferLayout.getFlatUniformValues(uniformValues || {});
+      (_a = this.uniformBlocks.get(uniformBufferName)) == null ? void 0 : _a.setUniforms(flattenedUniforms || {});
     }
     this.updateUniformBuffers();
   }
@@ -4009,7 +4730,7 @@ var UniformStore = class {
   }
 };
 
-// dist/shadertypes/textures/texture-layout.js
+// dist/shadertypes/texture-types/texture-layout.js
 function getTextureImageView(arrayBuffer2, memoryLayout, format, image = 0) {
   const formatInfo = textureFormatDecoder.getInfo(format);
   const bytesPerComponent = formatInfo.bytesPerPixel / formatInfo.components;
@@ -4047,7 +4768,7 @@ function setTextureImageData(arrayBuffer2, memoryLayout, format, data, image = 0
   typedArray.set(subArray, offset);
 }
 
-// dist/shadertypes/textures/pixel-utils.js
+// dist/shadertypes/texture-types/pixel-utils.js
 function readPixel(pixelData, x, y, bitsPerChannel) {
   if (x < 0 || x >= pixelData.width || y < 0 || y >= pixelData.height) {
     throw new Error("Coordinates out of bounds.");