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

package/dist/index.cjs

@@ -38,50 +38,72 @@ __export(dist_exports, {
   ExternalTexture: () => ExternalTexture,
   Fence: () => Fence,
   Framebuffer: () => Framebuffer,
+  PipelineFactory: () => PipelineFactory,
   PipelineLayout: () => PipelineLayout,
+  PresentationContext: () => PresentationContext,
   QuerySet: () => QuerySet,
   RenderPass: () => RenderPass,
   RenderPipeline: () => RenderPipeline,
   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);
 
 // dist/utils/stats-manager.js
 var import_stats = require("@probe.gl/stats");
+var GPU_TIME_AND_MEMORY_STATS = "GPU Time and Memory";
+var GPU_TIME_AND_MEMORY_STAT_ORDER = [
+  "Adapter",
+  "GPU",
+  "GPU Type",
+  "GPU Backend",
+  "Frame Rate",
+  "CPU Time",
+  "GPU Time",
+  "GPU Memory",
+  "Buffer Memory",
+  "Texture Memory",
+  "Referenced Buffer Memory",
+  "Referenced Texture Memory",
+  "Swap Chain Texture"
+];
+var ORDERED_STATS_CACHE = /* @__PURE__ */ new WeakMap();
+var ORDERED_STAT_NAME_SET_CACHE = /* @__PURE__ */ new WeakMap();
 var StatsManager = class {
   stats = /* @__PURE__ */ new Map();
   getStats(name2) {
@@ -91,10 +113,50 @@ var StatsManager = class {
     if (!this.stats.has(name2)) {
       this.stats.set(name2, new import_stats.Stats({ id: name2 }));
     }
-    return this.stats.get(name2);
+    const stats = this.stats.get(name2);
+    if (name2 === GPU_TIME_AND_MEMORY_STATS) {
+      initializeStats(stats, GPU_TIME_AND_MEMORY_STAT_ORDER);
+    }
+    return stats;
   }
 };
 var lumaStats = new StatsManager();
+function initializeStats(stats, orderedStatNames) {
+  const statsMap = stats.stats;
+  let addedOrderedStat = false;
+  for (const statName of orderedStatNames) {
+    if (!statsMap[statName]) {
+      stats.get(statName);
+      addedOrderedStat = true;
+    }
+  }
+  const statCount = Object.keys(statsMap).length;
+  const cachedStats = ORDERED_STATS_CACHE.get(stats);
+  if (!addedOrderedStat && (cachedStats == null ? void 0 : cachedStats.orderedStatNames) === orderedStatNames && cachedStats.statCount === statCount) {
+    return;
+  }
+  const reorderedStats = {};
+  let orderedStatNamesSet = ORDERED_STAT_NAME_SET_CACHE.get(orderedStatNames);
+  if (!orderedStatNamesSet) {
+    orderedStatNamesSet = new Set(orderedStatNames);
+    ORDERED_STAT_NAME_SET_CACHE.set(orderedStatNames, orderedStatNamesSet);
+  }
+  for (const statName of orderedStatNames) {
+    if (statsMap[statName]) {
+      reorderedStats[statName] = statsMap[statName];
+    }
+  }
+  for (const [statName, stat] of Object.entries(statsMap)) {
+    if (!orderedStatNamesSet.has(statName)) {
+      reorderedStats[statName] = stat;
+    }
+  }
+  for (const statName of Object.keys(statsMap)) {
+    delete statsMap[statName];
+  }
+  Object.assign(statsMap, reorderedStats);
+  ORDERED_STATS_CACHE.set(stats, { orderedStatNames, statCount });
+}
 
 // dist/utils/log.js
 var import_log = require("@probe.gl/log");
@@ -109,6 +171,57 @@ function uid(id = "id") {
 }
 
 // dist/adapter/resources/resource.js
+var CPU_HOTSPOT_PROFILER_MODULE = "cpu-hotspot-profiler";
+var RESOURCE_COUNTS_STATS = "GPU Resource Counts";
+var LEGACY_RESOURCE_COUNTS_STATS = "Resource Counts";
+var GPU_TIME_AND_MEMORY_STATS2 = "GPU Time and Memory";
+var BASE_RESOURCE_COUNT_ORDER = [
+  "Resources",
+  "Buffers",
+  "Textures",
+  "Samplers",
+  "TextureViews",
+  "Framebuffers",
+  "QuerySets",
+  "Shaders",
+  "RenderPipelines",
+  "ComputePipelines",
+  "PipelineLayouts",
+  "VertexArrays",
+  "RenderPasss",
+  "ComputePasss",
+  "CommandEncoders",
+  "CommandBuffers"
+];
+var WEBGL_RESOURCE_COUNT_ORDER = [
+  "Resources",
+  "Buffers",
+  "Textures",
+  "Samplers",
+  "TextureViews",
+  "Framebuffers",
+  "QuerySets",
+  "Shaders",
+  "RenderPipelines",
+  "SharedRenderPipelines",
+  "ComputePipelines",
+  "PipelineLayouts",
+  "VertexArrays",
+  "RenderPasss",
+  "ComputePasss",
+  "CommandEncoders",
+  "CommandBuffers"
+];
+var BASE_RESOURCE_COUNT_STAT_ORDER = BASE_RESOURCE_COUNT_ORDER.flatMap((resourceType) => [
+  `${resourceType} Created`,
+  `${resourceType} Active`
+]);
+var WEBGL_RESOURCE_COUNT_STAT_ORDER = WEBGL_RESOURCE_COUNT_ORDER.flatMap((resourceType) => [
+  `${resourceType} Created`,
+  `${resourceType} Active`
+]);
+var ORDERED_STATS_CACHE2 = /* @__PURE__ */ new WeakMap();
+var ORDERED_STAT_NAME_SET_CACHE2 = /* @__PURE__ */ new WeakMap();
 var Resource = class {
   toString() {
     return `${this[Symbol.toStringTag] || this.constructor.name}:"${this.id}"`;
@@ -125,6 +238,8 @@ var Resource = class {
   destroyed = false;
   /** For resources that allocate GPU memory */
   allocatedBytes = 0;
+  /** Stats bucket currently holding the tracked allocation */
+  allocatedBytesName = null;
   /** Attached resources will be destroyed when this resource is destroyed. Tracks auto-created "sub" resources. */
   _attachedResources = /* @__PURE__ */ new Set();
   /**
@@ -146,6 +261,9 @@ var Resource = class {
    * destroy can be called on any resource to release it before it is garbage collected.
    */
   destroy() {
+    if (this.destroyed) {
+      return;
+    }
     this.destroyResource();
   }
   /** @deprecated Use destroy() */
@@ -184,7 +302,7 @@ var Resource = class {
   }
   /** Destroy all owned resources. Make sure the resources are no longer needed before calling. */
   destroyAttachedResources() {
-    for (const resource of Object.values(this._attachedResources)) {
+    for (const resource of this._attachedResources) {
       resource.destroy();
     }
     this._attachedResources = /* @__PURE__ */ new Set();
@@ -192,37 +310,107 @@ var Resource = class {
   // PROTECTED METHODS
   /** Perform all destroy steps. Can be called by derived resources when overriding destroy() */
   destroyResource() {
+    if (this.destroyed) {
+      return;
+    }
     this.destroyAttachedResources();
     this.removeStats();
     this.destroyed = true;
   }
   /** Called by .destroy() to track object destruction. Subclass must call if overriding destroy() */
   removeStats() {
-    const stats = this._device.statsManager.getStats("Resource Counts");
-    const name2 = this[Symbol.toStringTag];
-    stats.get(`${name2}s Active`).decrementCount();
+    const profiler = getCpuHotspotProfiler(this._device);
+    const startTime = profiler ? getTimestamp() : 0;
+    const statsObjects = [
+      this._device.statsManager.getStats(RESOURCE_COUNTS_STATS),
+      this._device.statsManager.getStats(LEGACY_RESOURCE_COUNTS_STATS)
+    ];
+    const orderedStatNames = getResourceCountStatOrder(this._device);
+    for (const stats of statsObjects) {
+      initializeStats2(stats, orderedStatNames);
+    }
+    const name2 = this.getStatsName();
+    for (const stats of statsObjects) {
+      stats.get("Resources Active").decrementCount();
+      stats.get(`${name2}s Active`).decrementCount();
+    }
+    if (profiler) {
+      profiler.statsBookkeepingCalls = (profiler.statsBookkeepingCalls || 0) + 1;
+      profiler.statsBookkeepingTimeMs = (profiler.statsBookkeepingTimeMs || 0) + (getTimestamp() - startTime);
+    }
   }
   /** Called by subclass to track memory allocations */
-  trackAllocatedMemory(bytes, name2 = this[Symbol.toStringTag]) {
-    const stats = this._device.statsManager.getStats("Resource Counts");
+  trackAllocatedMemory(bytes, name2 = this.getStatsName()) {
+    const profiler = getCpuHotspotProfiler(this._device);
+    const startTime = profiler ? getTimestamp() : 0;
+    const stats = this._device.statsManager.getStats(GPU_TIME_AND_MEMORY_STATS2);
+    if (this.allocatedBytes > 0 && this.allocatedBytesName) {
+      stats.get("GPU Memory").subtractCount(this.allocatedBytes);
+      stats.get(`${this.allocatedBytesName} Memory`).subtractCount(this.allocatedBytes);
+    }
     stats.get("GPU Memory").addCount(bytes);
     stats.get(`${name2} Memory`).addCount(bytes);
+    if (profiler) {
+      profiler.statsBookkeepingCalls = (profiler.statsBookkeepingCalls || 0) + 1;
+      profiler.statsBookkeepingTimeMs = (profiler.statsBookkeepingTimeMs || 0) + (getTimestamp() - startTime);
+    }
     this.allocatedBytes = bytes;
+    this.allocatedBytesName = name2;
+  }
+  /** Called by subclass to track handle-backed memory allocations separately from owned allocations */
+  trackReferencedMemory(bytes, name2 = this.getStatsName()) {
+    this.trackAllocatedMemory(bytes, `Referenced ${name2}`);
   }
   /** Called by subclass to track memory deallocations */
-  trackDeallocatedMemory(name2 = this[Symbol.toStringTag]) {
-    const stats = this._device.statsManager.getStats("Resource Counts");
+  trackDeallocatedMemory(name2 = this.getStatsName()) {
+    if (this.allocatedBytes === 0) {
+      this.allocatedBytesName = null;
+      return;
+    }
+    const profiler = getCpuHotspotProfiler(this._device);
+    const startTime = profiler ? getTimestamp() : 0;
+    const stats = this._device.statsManager.getStats(GPU_TIME_AND_MEMORY_STATS2);
     stats.get("GPU Memory").subtractCount(this.allocatedBytes);
-    stats.get(`${name2} Memory`).subtractCount(this.allocatedBytes);
+    stats.get(`${this.allocatedBytesName || name2} Memory`).subtractCount(this.allocatedBytes);
+    if (profiler) {
+      profiler.statsBookkeepingCalls = (profiler.statsBookkeepingCalls || 0) + 1;
+      profiler.statsBookkeepingTimeMs = (profiler.statsBookkeepingTimeMs || 0) + (getTimestamp() - startTime);
+    }
     this.allocatedBytes = 0;
+    this.allocatedBytesName = null;
+  }
+  /** Called by subclass to deallocate handle-backed memory tracked via trackReferencedMemory() */
+  trackDeallocatedReferencedMemory(name2 = this.getStatsName()) {
+    this.trackDeallocatedMemory(`Referenced ${name2}`);
   }
   /** Called by resource constructor to track object creation */
   addStats() {
-    const stats = this._device.statsManager.getStats("Resource Counts");
-    const name2 = this[Symbol.toStringTag];
-    stats.get("Resources Created").incrementCount();
-    stats.get(`${name2}s Created`).incrementCount();
-    stats.get(`${name2}s Active`).incrementCount();
+    const name2 = this.getStatsName();
+    const profiler = getCpuHotspotProfiler(this._device);
+    const startTime = profiler ? getTimestamp() : 0;
+    const statsObjects = [
+      this._device.statsManager.getStats(RESOURCE_COUNTS_STATS),
+      this._device.statsManager.getStats(LEGACY_RESOURCE_COUNTS_STATS)
+    ];
+    const orderedStatNames = getResourceCountStatOrder(this._device);
+    for (const stats of statsObjects) {
+      initializeStats2(stats, orderedStatNames);
+    }
+    for (const stats of statsObjects) {
+      stats.get("Resources Created").incrementCount();
+      stats.get("Resources Active").incrementCount();
+      stats.get(`${name2}s Created`).incrementCount();
+      stats.get(`${name2}s Active`).incrementCount();
+    }
+    if (profiler) {
+      profiler.statsBookkeepingCalls = (profiler.statsBookkeepingCalls || 0) + 1;
+      profiler.statsBookkeepingTimeMs = (profiler.statsBookkeepingTimeMs || 0) + (getTimestamp() - startTime);
+    }
+    recordTransientCanvasResourceCreate(this._device, name2);
+  }
+  /** Canonical resource name used for stats buckets. */
+  getStatsName() {
+    return getCanonicalResourceName(this);
   }
 };
 /** Default properties for resource */
@@ -240,6 +428,97 @@ function selectivelyMerge(props, defaultProps) {
   }
   return mergedProps;
 }
+function initializeStats2(stats, orderedStatNames) {
+  const statsMap = stats.stats;
+  let addedOrderedStat = false;
+  for (const statName of orderedStatNames) {
+    if (!statsMap[statName]) {
+      stats.get(statName);
+      addedOrderedStat = true;
+    }
+  }
+  const statCount = Object.keys(statsMap).length;
+  const cachedStats = ORDERED_STATS_CACHE2.get(stats);
+  if (!addedOrderedStat && (cachedStats == null ? void 0 : cachedStats.orderedStatNames) === orderedStatNames && cachedStats.statCount === statCount) {
+    return;
+  }
+  const reorderedStats = {};
+  let orderedStatNamesSet = ORDERED_STAT_NAME_SET_CACHE2.get(orderedStatNames);
+  if (!orderedStatNamesSet) {
+    orderedStatNamesSet = new Set(orderedStatNames);
+    ORDERED_STAT_NAME_SET_CACHE2.set(orderedStatNames, orderedStatNamesSet);
+  }
+  for (const statName of orderedStatNames) {
+    if (statsMap[statName]) {
+      reorderedStats[statName] = statsMap[statName];
+    }
+  }
+  for (const [statName, stat] of Object.entries(statsMap)) {
+    if (!orderedStatNamesSet.has(statName)) {
+      reorderedStats[statName] = stat;
+    }
+  }
+  for (const statName of Object.keys(statsMap)) {
+    delete statsMap[statName];
+  }
+  Object.assign(statsMap, reorderedStats);
+  ORDERED_STATS_CACHE2.set(stats, { orderedStatNames, statCount });
+}
+function getResourceCountStatOrder(device) {
+  return device.type === "webgl" ? WEBGL_RESOURCE_COUNT_STAT_ORDER : BASE_RESOURCE_COUNT_STAT_ORDER;
+}
+function getCpuHotspotProfiler(device) {
+  const profiler = device.userData[CPU_HOTSPOT_PROFILER_MODULE];
+  return (profiler == null ? void 0 : profiler.enabled) ? profiler : null;
+}
+function getTimestamp() {
+  var _a, _b;
+  return ((_b = (_a = globalThis.performance) == null ? void 0 : _a.now) == null ? void 0 : _b.call(_a)) ?? Date.now();
+}
+function recordTransientCanvasResourceCreate(device, name2) {
+  const profiler = getCpuHotspotProfiler(device);
+  if (!profiler || !profiler.activeDefaultFramebufferAcquireDepth) {
+    return;
+  }
+  profiler.transientCanvasResourceCreates = (profiler.transientCanvasResourceCreates || 0) + 1;
+  switch (name2) {
+    case "Texture":
+      profiler.transientCanvasTextureCreates = (profiler.transientCanvasTextureCreates || 0) + 1;
+      break;
+    case "TextureView":
+      profiler.transientCanvasTextureViewCreates = (profiler.transientCanvasTextureViewCreates || 0) + 1;
+      break;
+    case "Sampler":
+      profiler.transientCanvasSamplerCreates = (profiler.transientCanvasSamplerCreates || 0) + 1;
+      break;
+    case "Framebuffer":
+      profiler.transientCanvasFramebufferCreates = (profiler.transientCanvasFramebufferCreates || 0) + 1;
+      break;
+    default:
+      break;
+  }
+}
+function getCanonicalResourceName(resource) {
+  let prototype = Object.getPrototypeOf(resource);
+  while (prototype) {
+    const parentPrototype = Object.getPrototypeOf(prototype);
+    if (!parentPrototype || parentPrototype === Resource.prototype) {
+      return getPrototypeToStringTag(prototype) || resource[Symbol.toStringTag] || resource.constructor.name;
+    }
+    prototype = parentPrototype;
+  }
+  return resource[Symbol.toStringTag] || resource.constructor.name;
+}
+function getPrototypeToStringTag(prototype) {
+  const descriptor = Object.getOwnPropertyDescriptor(prototype, Symbol.toStringTag);
+  if (typeof (descriptor == null ? void 0 : descriptor.get) === "function") {
+    return descriptor.get.call(prototype);
+  }
+  if (typeof (descriptor == null ? void 0 : descriptor.value) === "string") {
+    return descriptor.value;
+  }
+  return null;
+}
 
 // dist/adapter/resources/buffer.js
 var _Buffer = class extends Resource {
@@ -279,15 +558,23 @@ var _Buffer = class extends Resource {
   /** A partial CPU-side copy of the data in this buffer, for debugging purposes */
   debugData = new ArrayBuffer(0);
   /** This doesn't handle partial non-zero offset updates correctly */
-  _setDebugData(data, byteOffset, byteLength) {
-    const arrayBuffer2 = ArrayBuffer.isView(data) ? data.buffer : data;
+  _setDebugData(data, _byteOffset, byteLength) {
+    let arrayBufferView = null;
+    let arrayBuffer2;
+    if (ArrayBuffer.isView(data)) {
+      arrayBufferView = data;
+      arrayBuffer2 = data.buffer;
+    } else {
+      arrayBuffer2 = data;
+    }
     const debugDataLength = Math.min(data ? data.byteLength : byteLength, _Buffer.DEBUG_DATA_MAX_LENGTH);
     if (arrayBuffer2 === null) {
       this.debugData = new ArrayBuffer(debugDataLength);
-    } else if (byteOffset === 0 && byteLength === arrayBuffer2.byteLength) {
-      this.debugData = arrayBuffer2.slice(0, debugDataLength);
     } else {
-      this.debugData = arrayBuffer2.slice(byteOffset, byteOffset + debugDataLength);
+      const sourceByteOffset = Math.min((arrayBufferView == null ? void 0 : arrayBufferView.byteOffset) || 0, arrayBuffer2.byteLength);
+      const availableByteLength = Math.max(0, arrayBuffer2.byteLength - sourceByteOffset);
+      const copyByteLength = Math.min(debugDataLength, availableByteLength);
+      this.debugData = new Uint8Array(arrayBuffer2, sourceByteOffset, copyByteLength).slice().buffer;
     }
   }
 };
@@ -321,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],
@@ -392,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";
@@ -483,6 +793,7 @@ var float32_renderable = "float32-renderable-webgl";
 var float16_renderable = "float16-renderable-webgl";
 var rgb9e5ufloat_renderable = "rgb9e5ufloat-renderable-webgl";
 var snorm8_renderable = "snorm8-renderable-webgl";
+var norm16_webgl = "norm16-webgl";
 var norm16_renderable = "norm16-renderable-webgl";
 var snorm16_renderable = "snorm16-renderable-webgl";
 var float32_filterable = "float32-filterable";
@@ -516,16 +827,16 @@ var TEXTURE_FORMAT_COLOR_DEPTH_TABLE = {
   "rgba8sint": {},
   "bgra8unorm": {},
   "bgra8unorm-srgb": {},
-  "r16unorm": { f: norm16_renderable },
-  "rg16unorm": { render: norm16_renderable },
-  "rgb16unorm-webgl": { f: norm16_renderable },
+  "r16unorm": { f: norm16_webgl, render: norm16_renderable },
+  "rg16unorm": { f: norm16_webgl, render: norm16_renderable },
+  "rgb16unorm-webgl": { f: norm16_webgl, render: false },
   // rgb not renderable
-  "rgba16unorm": { render: norm16_renderable },
-  "r16snorm": { f: snorm16_renderable },
-  "rg16snorm": { render: snorm16_renderable },
-  "rgb16snorm-webgl": { f: norm16_renderable },
+  "rgba16unorm": { f: norm16_webgl, render: norm16_renderable },
+  "r16snorm": { f: norm16_webgl, render: snorm16_renderable },
+  "rg16snorm": { f: norm16_webgl, render: snorm16_renderable },
+  "rgb16snorm-webgl": { f: norm16_webgl, render: false },
   // rgb not renderable
-  "rgba16snorm": { render: snorm16_renderable },
+  "rgba16snorm": { f: norm16_webgl, render: snorm16_renderable },
   "r16uint": {},
   "rg16uint": {},
   "rgba16uint": {},
@@ -628,7 +939,7 @@ var TEXTURE_FORMAT_COMPRESSED_TABLE = {
   // WEBGL_compressed_texture_pvrtc
   "pvrtc-rgb4unorm-webgl": { f: texture_compression_pvrtc_webgl },
   "pvrtc-rgba4unorm-webgl": { f: texture_compression_pvrtc_webgl },
-  "pvrtc-rbg2unorm-webgl": { f: texture_compression_pvrtc_webgl },
+  "pvrtc-rgb2unorm-webgl": { f: texture_compression_pvrtc_webgl },
   "pvrtc-rgba2unorm-webgl": { f: texture_compression_pvrtc_webgl },
   // WEBGL_compressed_texture_etc1
   "etc1-rbg-unorm-webgl": { f: texture_compression_etc1_webgl },
@@ -642,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"];
@@ -689,10 +1000,13 @@ var TextureFormatDecoder = class {
 };
 var textureFormatDecoder = new TextureFormatDecoder();
 function computeTextureMemoryLayout({ format, width, height, depth, byteAlignment }) {
-  const { bytesPerPixel } = textureFormatDecoder.getInfo(format);
-  const unpaddedBytesPerRow = width * bytesPerPixel;
+  const formatInfo = textureFormatDecoder.getInfo(format);
+  const { bytesPerPixel, bytesPerBlock = bytesPerPixel, blockWidth = 1, blockHeight = 1, compressed = false } = formatInfo;
+  const blockColumns = compressed ? Math.ceil(width / blockWidth) : width;
+  const blockRows = compressed ? Math.ceil(height / blockHeight) : height;
+  const unpaddedBytesPerRow = blockColumns * bytesPerBlock;
   const bytesPerRow = Math.ceil(unpaddedBytesPerRow / byteAlignment) * byteAlignment;
-  const rowsPerImage = height;
+  const rowsPerImage = blockRows;
   const byteLength = bytesPerRow * rowsPerImage * depth;
   return {
     bytesPerPixel,
@@ -718,7 +1032,8 @@ function getTextureFormatCapabilities(format) {
   const isSigned = formatInfo == null ? void 0 : formatInfo.signed;
   const isInteger = formatInfo == null ? void 0 : formatInfo.integer;
   const isWebGLSpecific = formatInfo == null ? void 0 : formatInfo.webgl;
-  formatCapabilities.render &&= !isSigned;
+  const isCompressed = Boolean(formatInfo == null ? void 0 : formatInfo.compressed);
+  formatCapabilities.render &&= !isDepthStencil && !isCompressed;
   formatCapabilities.filter &&= !isDepthStencil && !isSigned && !isInteger && !isWebGLSpecific;
   return formatCapabilities;
 }
@@ -730,17 +1045,18 @@ function getTextureFormatInfo(format) {
     formatInfo.bytesPerPixel = 1;
     formatInfo.srgb = false;
     formatInfo.compressed = true;
+    formatInfo.bytesPerBlock = getCompressedTextureBlockByteLength(format);
     const blockSize = getCompressedTextureBlockSize(format);
     if (blockSize) {
       formatInfo.blockWidth = blockSize.blockWidth;
       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 = [
@@ -816,10 +1132,31 @@ function getCompressedTextureBlockSize(format) {
     const [, blockWidth, blockHeight] = matches;
     return { blockWidth: Number(blockWidth), blockHeight: Number(blockHeight) };
   }
+  if (format.startsWith("bc") || format.startsWith("etc1") || format.startsWith("etc2") || format.startsWith("eac") || format.startsWith("atc")) {
+    return { blockWidth: 4, blockHeight: 4 };
+  }
+  if (format.startsWith("pvrtc-rgb4") || format.startsWith("pvrtc-rgba4")) {
+    return { blockWidth: 4, blockHeight: 4 };
+  }
+  if (format.startsWith("pvrtc-rgb2") || format.startsWith("pvrtc-rgba2")) {
+    return { blockWidth: 8, blockHeight: 4 };
+  }
   return null;
 }
+function getCompressedTextureBlockByteLength(format) {
+  if (format.startsWith("bc1") || format.startsWith("bc4") || format.startsWith("etc1") || format.startsWith("etc2-rgb8") || format.startsWith("etc2-rgb8a1") || format.startsWith("eac-r11") || format === "atc-rgb-unorm-webgl") {
+    return 8;
+  }
+  if (format.startsWith("bc2") || format.startsWith("bc3") || format.startsWith("bc5") || format.startsWith("bc6h") || format.startsWith("bc7") || format.startsWith("etc2-rgba8") || format.startsWith("eac-rg11") || format.startsWith("astc") || format === "atc-rgba-unorm-webgl" || format === "atc-rgbai-unorm-webgl") {
+    return 16;
+  }
+  if (format.startsWith("pvrtc")) {
+    return 8;
+  }
+  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;
 }
@@ -842,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;
@@ -872,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) */
@@ -879,12 +1265,15 @@ var _Device = class {
   /** Used by other luma.gl modules to store data on the device */
   _moduleData = {};
   _textureCaps = {};
+  /** Internal timestamp query set used when GPU timing collection is enabled for this device. */
+  _debugGPUTimeQuery = null;
   constructor(props) {
     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;
@@ -932,6 +1321,16 @@ var _Device = class {
   isTextureFormatCompressed(format) {
     return textureFormatDecoder.isCompressed(format);
   }
+  /** Returns the compressed texture formats that can be created and sampled on this device */
+  getSupportedCompressedTextureFormats() {
+    const supportedFormats = [];
+    for (const format of Object.keys(getTextureFormatTable())) {
+      if (this.isTextureFormatCompressed(format) && this.isTextureFormatSupported(format)) {
+        supportedFormats.push(format);
+      }
+    }
+    return supportedFormats;
+  }
   // DEBUG METHODS
   pushDebugGroup(groupLabel) {
     this.commandEncoder.pushDebugGroup(groupLabel);
@@ -976,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 () => {
     };
@@ -1010,6 +1410,78 @@ or create a device with the 'debug: true' prop.`;
   beginComputePass(props) {
     return this.commandEncoder.beginComputePass(props);
   }
+  /**
+   * Generate mipmaps for a WebGPU texture.
+   * WebGPU textures must be created up front with the required mip count, usage flags, and a format that supports the chosen generation path.
+   * WebGL uses `Texture.generateMipmapsWebGL()` directly because the backend manages mip generation on the texture object itself.
+   */
+  generateMipmapsWebGPU(_texture) {
+    throw new Error("not implemented");
+  }
+  /** Internal helper for creating a shareable WebGL render-pipeline implementation. */
+  _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.
+   */
+  _supportsDebugGPUTime() {
+    return this.features.has("timestamp-query") && Boolean(this.props.debug || this.props.debugGPUTime);
+  }
+  /**
+   * Internal helper that enables device-managed GPU timing collection on the
+   * default command encoder. Reuses the existing query set if timing is already enabled.
+   *
+   * @param queryCount - Number of timestamp slots reserved for profiled passes.
+   * @returns The device-managed timestamp QuerySet, or `null` when timing is not supported or could not be enabled.
+   */
+  _enableDebugGPUTime(queryCount = 256) {
+    if (!this._supportsDebugGPUTime()) {
+      return null;
+    }
+    if (this._debugGPUTimeQuery) {
+      return this._debugGPUTimeQuery;
+    }
+    try {
+      this._debugGPUTimeQuery = this.createQuerySet({ type: "timestamp", count: queryCount });
+      this.commandEncoder = this.createCommandEncoder({
+        id: this.commandEncoder.props.id,
+        timeProfilingQuerySet: this._debugGPUTimeQuery
+      });
+    } catch {
+      this._debugGPUTimeQuery = null;
+    }
+    return this._debugGPUTimeQuery;
+  }
+  /**
+   * Internal helper that disables device-managed GPU timing collection and restores
+   * the default command encoder to an unprofiled state.
+   */
+  _disableDebugGPUTime() {
+    if (!this._debugGPUTimeQuery) {
+      return;
+    }
+    if (this.commandEncoder.getTimeProfilingQuerySet() === this._debugGPUTimeQuery) {
+      this.commandEncoder = this.createCommandEncoder({
+        id: this.commandEncoder.props.id
+      });
+    }
+    this._debugGPUTimeQuery.destroy();
+    this._debugGPUTimeQuery = null;
+  }
+  /** Internal helper that returns `true` when device-managed GPU timing is currently active. */
+  _isDebugGPUTimeEnabled() {
+    return this._debugGPUTimeQuery !== null;
+  }
   // DEPRECATED METHODS
   /** @deprecated Use getDefaultCanvasContext() */
   getCanvasContext() {
@@ -1117,7 +1589,8 @@ __publicField(Device, "defaultProps", {
   onVisibilityChange: (context) => log.log(1, `${context} Visibility changed ${context.isVisible}`)(),
   onDevicePixelRatioChange: (context, info) => log.log(1, `${context} DPR changed ${info.oldRatio} => ${context.devicePixelRatio}`)(),
   // Debug flags
-  debug: log.get("debug") || void 0,
+  debug: getDefaultDebugValue(),
+  debugGPUTime: false,
   debugShaders: log.get("debug-shaders") || void 0,
   debugFramebuffers: Boolean(log.get("debug-framebuffers")),
   debugFactories: Boolean(log.get("debug-factories")),
@@ -1128,9 +1601,11 @@ __publicField(Device, "defaultProps", {
   // Experimental
   _reuseDevices: false,
   _requestMaxLimits: true,
-  _cacheShaders: false,
-  _cachePipelines: false,
-  _cacheDestroyPolicy: "unused",
+  _cacheShaders: true,
+  _destroyShaders: false,
+  _cachePipelines: true,
+  _sharePipelines: true,
+  _destroyPipelines: false,
   // TODO - Change these after confirming things work as expected
   _initializeFeatures: true,
   _disabledFeatures: {
@@ -1139,6 +1614,25 @@ __publicField(Device, "defaultProps", {
   // INTERNAL
   _handle: void 0
 });
+function _getDefaultDebugValue(logDebugValue, nodeEnv) {
+  if (logDebugValue !== void 0 && logDebugValue !== null) {
+    return Boolean(logDebugValue);
+  }
+  if (nodeEnv !== void 0) {
+    return nodeEnv !== "production";
+  }
+  return false;
+}
+function getDefaultDebugValue() {
+  return _getDefaultDebugValue(log.get("debug"), getNodeEnv());
+}
+function getNodeEnv() {
+  const processObject = globalThis.process;
+  if (!(processObject == null ? void 0 : processObject.env)) {
+    return void 0;
+  }
+  return processObject.env["NODE_ENV"];
+}
 
 // dist/adapter/luma.js
 var STARTUP_MESSAGE = "set luma.log.level=1 (or higher) to trace rendering";
@@ -1158,7 +1652,7 @@ var _Luma = class {
   VERSION = (
     // Version detection using build plugin
     // @ts-expect-error no-undef
-    true ? "9.3.0-alpha.4" : "running from source"
+    true ? "9.3.0-alpha.8" : "running from source"
   );
   spector;
   preregisteredAdapters = /* @__PURE__ */ new Map();
@@ -1323,9 +1817,91 @@ function getPageLoadPromise() {
   return pageLoadPromise;
 }
 
-// dist/adapter/canvas-context.js
+// dist/adapter/canvas-surface.js
 var import_env2 = require("@probe.gl/env");
 
+// dist/adapter/canvas-observer.js
+var CanvasObserver = class {
+  props;
+  _resizeObserver;
+  _intersectionObserver;
+  _observeDevicePixelRatioTimeout = null;
+  _observeDevicePixelRatioMediaQuery = null;
+  _handleDevicePixelRatioChange = () => this._refreshDevicePixelRatio();
+  _trackPositionInterval = null;
+  _started = false;
+  get started() {
+    return this._started;
+  }
+  constructor(props) {
+    this.props = props;
+  }
+  start() {
+    if (this._started || !this.props.canvas) {
+      return;
+    }
+    this._started = true;
+    this._intersectionObserver ||= new IntersectionObserver((entries) => this.props.onIntersection(entries));
+    this._resizeObserver ||= new ResizeObserver((entries) => this.props.onResize(entries));
+    this._intersectionObserver.observe(this.props.canvas);
+    try {
+      this._resizeObserver.observe(this.props.canvas, { box: "device-pixel-content-box" });
+    } catch {
+      this._resizeObserver.observe(this.props.canvas, { box: "content-box" });
+    }
+    this._observeDevicePixelRatioTimeout = setTimeout(() => this._refreshDevicePixelRatio(), 0);
+    if (this.props.trackPosition) {
+      this._trackPosition();
+    }
+  }
+  stop() {
+    var _a, _b;
+    if (!this._started) {
+      return;
+    }
+    this._started = false;
+    if (this._observeDevicePixelRatioTimeout) {
+      clearTimeout(this._observeDevicePixelRatioTimeout);
+      this._observeDevicePixelRatioTimeout = null;
+    }
+    if (this._observeDevicePixelRatioMediaQuery) {
+      this._observeDevicePixelRatioMediaQuery.removeEventListener("change", this._handleDevicePixelRatioChange);
+      this._observeDevicePixelRatioMediaQuery = null;
+    }
+    if (this._trackPositionInterval) {
+      clearInterval(this._trackPositionInterval);
+      this._trackPositionInterval = null;
+    }
+    (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
+    (_b = this._intersectionObserver) == null ? void 0 : _b.disconnect();
+  }
+  _refreshDevicePixelRatio() {
+    var _a;
+    if (!this._started) {
+      return;
+    }
+    this.props.onDevicePixelRatioChange();
+    (_a = this._observeDevicePixelRatioMediaQuery) == null ? void 0 : _a.removeEventListener("change", this._handleDevicePixelRatioChange);
+    this._observeDevicePixelRatioMediaQuery = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+    this._observeDevicePixelRatioMediaQuery.addEventListener("change", this._handleDevicePixelRatioChange, { once: true });
+  }
+  _trackPosition(intervalMs = 100) {
+    if (this._trackPositionInterval) {
+      return;
+    }
+    this._trackPositionInterval = setInterval(() => {
+      if (!this._started) {
+        if (this._trackPositionInterval) {
+          clearInterval(this._trackPositionInterval);
+          this._trackPositionInterval = null;
+        }
+      } else {
+        this.props.onPositionChange();
+      }
+    }, intervalMs);
+  }
+};
+
 // dist/utils/promise-utils.js
 function withResolvers() {
   let resolve;
@@ -1351,8 +1927,8 @@ function assertDefined(value, message) {
   return value;
 }
 
-// dist/adapter/canvas-context.js
-var _CanvasContext = class {
+// dist/adapter/canvas-surface.js
+var _CanvasSurface = class {
   static isHTMLCanvas(canvas) {
     return typeof HTMLCanvasElement !== "undefined" && canvas instanceof HTMLCanvasElement;
   }
@@ -1388,11 +1964,7 @@ var _CanvasContext = class {
   drawingBufferHeight;
   /** Resolves when the canvas is initialized, i.e. when the ResizeObserver has updated the pixel size */
   _initializedResolvers = withResolvers();
-  /** ResizeObserver to track canvas size changes */
-  _resizeObserver;
-  /** IntersectionObserver to track canvas visibility changes */
-  _intersectionObserver;
-  _observeDevicePixelRatioTimeout = null;
+  _canvasObserver;
   /** Position of the canvas in the document, updated by a timer */
   _position = [0, 0];
   /** Whether this canvas context has been destroyed */
@@ -1404,7 +1976,7 @@ var _CanvasContext = class {
   }
   constructor(props) {
     var _a, _b;
-    this.props = { ..._CanvasContext.defaultProps, ...props };
+    this.props = { ..._CanvasSurface.defaultProps, ...props };
     props = this.props;
     this.initialized = this._initializedResolvers.promise;
     if (!(0, import_env2.isBrowser)()) {
@@ -1416,11 +1988,11 @@ var _CanvasContext = class {
     } else {
       this.canvas = props.canvas;
     }
-    if (_CanvasContext.isHTMLCanvas(this.canvas)) {
+    if (_CanvasSurface.isHTMLCanvas(this.canvas)) {
       this.id = props.id || this.canvas.id;
       this.type = "html-canvas";
       this.htmlCanvas = this.canvas;
-    } else if (_CanvasContext.isOffscreenCanvas(this.canvas)) {
+    } else if (_CanvasSurface.isOffscreenCanvas(this.canvas)) {
       this.id = props.id || "offscreen-canvas";
       this.type = "offscreen-canvas";
       this.offscreenCanvas = this.canvas;
@@ -1436,32 +2008,20 @@ var _CanvasContext = class {
     this.drawingBufferHeight = this.canvas.height;
     this.devicePixelRatio = globalThis.devicePixelRatio || 1;
     this._position = [0, 0];
-    if (_CanvasContext.isHTMLCanvas(this.canvas)) {
-      this._intersectionObserver = new IntersectionObserver((entries) => this._handleIntersection(entries));
-      this._intersectionObserver.observe(this.canvas);
-      this._resizeObserver = new ResizeObserver((entries) => this._handleResize(entries));
-      try {
-        this._resizeObserver.observe(this.canvas, { box: "device-pixel-content-box" });
-      } catch {
-        this._resizeObserver.observe(this.canvas, { box: "content-box" });
-      }
-      this._observeDevicePixelRatioTimeout = setTimeout(() => this._observeDevicePixelRatio(), 0);
-      if (this.props.trackPosition) {
-        this._trackPosition();
-      }
-    }
+    this._canvasObserver = new CanvasObserver({
+      canvas: this.htmlCanvas,
+      trackPosition: this.props.trackPosition,
+      onResize: (entries) => this._handleResize(entries),
+      onIntersection: (entries) => this._handleIntersection(entries),
+      onDevicePixelRatioChange: () => this._observeDevicePixelRatio(),
+      onPositionChange: () => this.updatePosition()
+    });
   }
   destroy() {
-    var _a, _b;
     if (!this.destroyed) {
       this.destroyed = true;
-      if (this._observeDevicePixelRatioTimeout) {
-        clearTimeout(this._observeDevicePixelRatioTimeout);
-        this._observeDevicePixelRatioTimeout = null;
-      }
+      this._stopObservers();
       this.device = null;
-      (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
-      (_b = this._intersectionObserver) == null ? void 0 : _b.disconnect();
     }
   }
   setProps(props) {
@@ -1476,41 +2036,22 @@ var _CanvasContext = class {
     this._resizeDrawingBufferIfNeeded();
     return this._getCurrentFramebuffer(options);
   }
-  // SIZE METHODS
-  /**
-   * Returns the size covered by the canvas in CSS pixels
-   * @note This can be different from the actual device pixel size of a canvas due to DPR scaling, and rounding to integer pixels
-   * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
-   */
   getCSSSize() {
     return [this.cssWidth, this.cssHeight];
   }
   getPosition() {
     return this._position;
   }
-  /**
-   * Returns the size covered by the canvas in actual device pixels.
-   * @note This can be different from the 'CSS' size of a canvas due to DPR scaling, and rounding to integer pixels
-   * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
-   */
   getDevicePixelSize() {
     return [this.devicePixelWidth, this.devicePixelHeight];
   }
-  /** Get the drawing buffer size (number of pixels GPU is rendering into, can be different from CSS size) */
   getDrawingBufferSize() {
     return [this.drawingBufferWidth, this.drawingBufferHeight];
   }
-  /** Returns the biggest allowed framebuffer size. @todo Allow the application to limit this? */
   getMaxDrawingBufferSize() {
     const maxTextureDimension = this.device.limits.maxTextureDimension2D;
     return [maxTextureDimension, maxTextureDimension];
   }
-  /**
-   * Update the canvas drawing buffer size.
-   * @note - Called automatically if props.autoResize is true.
-   * @note - Defers update of drawing buffer size until framebuffer is requested to avoid flicker
-   * (resizing clears the drawing buffer)!
-   */
   setDrawingBufferSize(width, height) {
     width = Math.floor(width);
     height = Math.floor(height);
@@ -1521,19 +2062,10 @@ var _CanvasContext = class {
     this.drawingBufferHeight = height;
     this._needsDrawingBufferResize = true;
   }
-  /**
-   * Returns the current DPR (number of physical pixels per CSS pixel), if props.useDevicePixels is true
-   * @note This can be a fractional (non-integer) number, e.g. when the user zooms in the browser.
-   * @note This function handles the non-HTML canvas cases
-   */
   getDevicePixelRatio() {
-    const dpr = typeof window !== "undefined" && window.devicePixelRatio;
-    return dpr || 1;
+    const devicePixelRatio2 = typeof window !== "undefined" && window.devicePixelRatio;
+    return devicePixelRatio2 || 1;
   }
-  // DEPRECATED METHODS
-  /**
-   * Maps CSS pixel position to device pixel position
-   */
   cssToDevicePixels(cssPixel, yInvert = true) {
     const ratio = this.cssToDeviceRatio();
     const [width, height] = this.getDrawingBufferSize();
@@ -1543,10 +2075,10 @@ var _CanvasContext = class {
   getPixelSize() {
     return this.getDevicePixelSize();
   }
-  /** @deprecated - TODO which values should we use for aspect */
+  /** @deprecated Use the current drawing buffer size for projection setup. */
   getAspect() {
-    const [width, height] = this.getDevicePixelSize();
-    return width / height;
+    const [width, height] = this.getDrawingBufferSize();
+    return width > 0 && height > 0 ? width / height : 1;
   }
   /** @deprecated Returns multiplier need to convert CSS size to Device size */
   cssToDeviceRatio() {
@@ -1562,18 +2094,37 @@ var _CanvasContext = class {
   resize(size) {
     this.setDrawingBufferSize(size.width, size.height);
   }
-  // IMPLEMENTATION
-  /**
-   * Allows subclass constructor to override the canvas id for auto created canvases.
-   * This can really help when debugging DOM in apps that create multiple devices
-   */
   _setAutoCreatedCanvasId(id) {
     var _a;
     if (((_a = this.htmlCanvas) == null ? void 0 : _a.id) === "lumagl-auto-created-canvas") {
       this.htmlCanvas.id = id;
     }
   }
-  /** reacts to an observed intersection */
+  /**
+   * Starts DOM observation after the derived context and its device are fully initialized.
+   *
+   * `CanvasSurface` construction runs before subclasses can assign `this.device`, and the
+   * default WebGL canvas context is created before `WebGLDevice` has initialized `limits`,
+   * `features`, and the rest of its runtime state. Deferring observer startup avoids early
+   * `ResizeObserver` and DPR callbacks running against a partially initialized device.
+   */
+  _startObservers() {
+    if (this.destroyed) {
+      return;
+    }
+    this._canvasObserver.start();
+  }
+  /**
+   * Stops all DOM observation and timers associated with a canvas surface.
+   *
+   * This pairs with `_startObservers()` so teardown uses the same lifecycle whether a context is
+   * explicitly destroyed, abandoned during device reuse, or temporarily has not started observing
+   * yet. Centralizing shutdown here keeps resize/DPR/position watchers from surviving past the
+   * lifetime of the owning device.
+   */
+  _stopObservers() {
+    this._canvasObserver.stop();
+  }
   _handleIntersection(entries) {
     if (this.destroyed) {
       return;
@@ -1588,11 +2139,6 @@ var _CanvasContext = class {
       this.device.props.onVisibilityChange(this);
     }
   }
-  /**
-   * Reacts to an observed resize by using the most accurate pixel size information the browser can provide
-   * @see https://web.dev/articles/device-pixel-content-box
-   * @see https://webgpufundamentals.org/webgpu/lessons/webgpu-resizing-the-canvas.html
-   */
   _handleResize(entries) {
     var _a, _b, _c, _d, _e;
     if (this.destroyed) {
@@ -1614,12 +2160,11 @@ var _CanvasContext = class {
     this._updateDrawingBufferSize();
     this.device.props.onResize(this, { oldPixelSize });
   }
-  /** Initiate a deferred update for the canvas drawing buffer size */
   _updateDrawingBufferSize() {
     if (this.props.autoResize) {
       if (typeof this.props.useDevicePixels === "number") {
-        const dpr = this.props.useDevicePixels;
-        this.setDrawingBufferSize(this.cssWidth * dpr, this.cssHeight * dpr);
+        const devicePixelRatio2 = this.props.useDevicePixels;
+        this.setDrawingBufferSize(this.cssWidth * devicePixelRatio2, this.cssHeight * devicePixelRatio2);
       } else if (this.props.useDevicePixels) {
         this.setDrawingBufferSize(this.devicePixelWidth, this.devicePixelHeight);
       } else {
@@ -1630,7 +2175,6 @@ var _CanvasContext = class {
     this.isInitialized = true;
     this.updatePosition();
   }
-  /** Perform a deferred resize of the drawing buffer if needed */
   _resizeDrawingBufferIfNeeded() {
     if (this._needsDrawingBufferResize) {
       this._needsDrawingBufferResize = false;
@@ -1642,33 +2186,18 @@ var _CanvasContext = class {
       }
     }
   }
-  /** Monitor DPR changes */
   _observeDevicePixelRatio() {
     var _a, _b;
-    if (this.destroyed) {
+    if (this.destroyed || !this._canvasObserver.started) {
       return;
     }
     const oldRatio = this.devicePixelRatio;
     this.devicePixelRatio = window.devicePixelRatio;
     this.updatePosition();
-    (_b = (_a = this.device.props).onDevicePixelRatioChange) == null ? void 0 : _b.call(_a, this, { oldRatio });
-    matchMedia(`(resolution: ${this.devicePixelRatio}dppx)`).addEventListener("change", () => this._observeDevicePixelRatio(), { once: true });
-  }
-  /** Start tracking positions with a timer */
-  _trackPosition(intervalMs = 100) {
-    const intervalId = setInterval(() => {
-      if (this.destroyed) {
-        clearInterval(intervalId);
-      } else {
-        this.updatePosition();
-      }
-    }, intervalMs);
+    (_b = (_a = this.device.props).onDevicePixelRatioChange) == null ? void 0 : _b.call(_a, this, {
+      oldRatio
+    });
   }
-  /**
-   * Calculated the absolute position of the canvas
-   * @note - getBoundingClientRect() is normally cheap but can be expensive
-   * if called before browser has finished a reflow. Should not be the case here.
-   */
   updatePosition() {
     var _a, _b, _c;
     if (this.destroyed) {
@@ -1682,13 +2211,15 @@ var _CanvasContext = class {
       if (positionChanged) {
         const oldPosition = this._position;
         this._position = position;
-        (_c = (_b = this.device.props).onPositionChange) == null ? void 0 : _c.call(_b, this, { oldPosition });
+        (_c = (_b = this.device.props).onPositionChange) == null ? void 0 : _c.call(_b, this, {
+          oldPosition
+        });
       }
     }
   }
 };
-var CanvasContext = _CanvasContext;
-__publicField(CanvasContext, "defaultProps", {
+var CanvasSurface = _CanvasSurface;
+__publicField(CanvasSurface, "defaultProps", {
   id: void 0,
   canvas: null,
   width: 800,
@@ -1716,7 +2247,7 @@ function getContainer(container) {
 }
 function getCanvasFromDOM(canvasId) {
   const canvas = document.getElementById(canvasId);
-  if (!CanvasContext.isHTMLCanvas(canvas)) {
+  if (!CanvasSurface.isHTMLCanvas(canvas)) {
     throw new Error("Object is not a canvas element");
   }
   return canvas;
@@ -1740,33 +2271,40 @@ function scalePixels(pixel, ratio, width, height, yInvert) {
   const point = pixel;
   const x = scaleX(point[0], ratio, width);
   let y = scaleY(point[1], ratio, height, yInvert);
-  let t = scaleX(point[0] + 1, ratio, width);
-  const xHigh = t === width - 1 ? t : t - 1;
-  t = scaleY(point[1] + 1, ratio, height, yInvert);
+  let temporary = scaleX(point[0] + 1, ratio, width);
+  const xHigh = temporary === width - 1 ? temporary : temporary - 1;
+  temporary = scaleY(point[1] + 1, ratio, height, yInvert);
   let yHigh;
   if (yInvert) {
-    t = t === 0 ? t : t + 1;
+    temporary = temporary === 0 ? temporary : temporary + 1;
     yHigh = y;
-    y = t;
+    y = temporary;
   } else {
-    yHigh = t === height - 1 ? t : t - 1;
+    yHigh = temporary === height - 1 ? temporary : temporary - 1;
   }
   return {
     x,
     y,
-    // when ratio < 1, current css pixel and next css pixel may point to same device pixel, set width/height to 1 in those cases.
     width: Math.max(xHigh - x + 1, 1),
     height: Math.max(yHigh - y + 1, 1)
   };
 }
 function scaleX(x, ratio, width) {
-  const r = Math.min(Math.round(x * ratio), width - 1);
-  return r;
+  return Math.min(Math.round(x * ratio), width - 1);
 }
 function scaleY(y, ratio, height, yInvert) {
   return yInvert ? Math.max(0, height - 1 - Math.round(y * ratio)) : Math.min(Math.round(y * ratio), height - 1);
 }
 
+// dist/adapter/canvas-context.js
+var CanvasContext = class extends CanvasSurface {
+};
+__publicField(CanvasContext, "defaultProps", CanvasSurface.defaultProps);
+
+// dist/adapter/presentation-context.js
+var PresentationContext = class extends CanvasSurface {
+};
+
 // dist/adapter/resources/sampler.js
 var _Sampler = class extends Resource {
   get [Symbol.toStringTag]() {
@@ -1821,6 +2359,8 @@ var _Texture = class extends Resource {
   depth;
   /** mip levels in this texture */
   mipLevels;
+  /** sample count */
+  samples;
   /** Rows are multiples of this length, padded with extra bytes if needed */
   byteAlignment;
   /** The ready promise is always resolved. It is provided for type compatibility with DynamicTexture. */
@@ -1846,6 +2386,7 @@ var _Texture = class extends Resource {
     this.height = this.props.height;
     this.depth = this.props.depth;
     this.mipLevels = this.props.mipLevels;
+    this.samples = this.props.samples || 1;
     if (this.dimension === "cube") {
       this.depth = 6;
     }
@@ -1877,9 +2418,25 @@ var _Texture = class extends Resource {
   setSampler(sampler) {
     this.sampler = sampler instanceof Sampler ? sampler : this.device.createSampler(sampler);
   }
+  /**
+   * Copy raw image data (bytes) into the texture.
+   *
+   * @note Deprecated compatibility wrapper over {@link writeData}.
+   * @note Uses the same layout defaults and alignment rules as {@link writeData}.
+   * @note Tightly packed CPU uploads can omit `bytesPerRow` and `rowsPerImage`.
+   * @note If the CPU source rows are padded, pass explicit `bytesPerRow` and `rowsPerImage`.
+   * @deprecated Use writeData()
+   */
+  copyImageData(options) {
+    const { data, depth, ...writeOptions } = options;
+    this.writeData(data, {
+      ...writeOptions,
+      depthOrArrayLayers: writeOptions.depthOrArrayLayers ?? depth
+    });
+  }
   /**
    * Calculates the memory layout of the texture, required when reading and writing data.
-   * @return the memory layout of the texture, in particular bytesPerRow which includes required padding
+   * @return the backend-aligned linear layout, in particular bytesPerRow which includes any required padding for buffer copy/read paths
    */
   computeMemoryLayout(options_ = {}) {
     const options = this._normalizeTextureReadOptions(options_);
@@ -1898,9 +2455,11 @@ var _Texture = class extends Resource {
    * @returns A Buffer containing the texture data.
    *
    * @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.
-   * @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 Texture.computeMemoryLayout() to compute the backend-aligned layout.
+   * @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.
    */
   readBuffer(options, buffer) {
     throw new Error("readBuffer not implemented");
@@ -1911,15 +2470,20 @@ 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");
   }
   /**
-   * Writes an GPU Buffer into a texture.
+   * Writes a GPU Buffer into a texture.
    *
+   * @param buffer - Source GPU buffer.
+   * @param options - Destination subresource, extent, and source layout options.
    * @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.
+   * @note The application can call Texture.computeMemoryLayout() to compute the backend-aligned layout.
+   * @note On WebGPU this corresponds to a buffer-to-texture copy and uses buffer-copy alignment rules.
+   * @note On WebGL, luma.gl emulates the same destination and layout semantics.
    */
   writeBuffer(buffer, options) {
     throw new Error("readBuffer not implemented");
@@ -1927,8 +2491,11 @@ var _Texture = class extends Resource {
   /**
    * Writes an array buffer into a texture.
    *
-   * @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.
+   * @param data - Source texel data.
+   * @param options - Destination subresource, extent, and source layout options.
+   * @note If `bytesPerRow` and `rowsPerImage` are omitted, luma.gl computes a tightly packed CPU-memory layout for the requested region.
+   * @note On WebGPU this corresponds to `GPUQueue.writeTexture()` and does not implicitly pad rows to 256 bytes.
+   * @note On WebGL, padded CPU data is supported via the same `bytesPerRow` and `rowsPerImage` options.
    */
   writeData(data, options) {
     throw new Error("readBuffer not implemented");
@@ -1991,37 +2558,148 @@ var _Texture = class extends Resource {
     }
   }
   _normalizeCopyImageDataOptions(options_) {
-    const { width, height, depth } = this;
-    const options = { ..._Texture.defaultCopyDataOptions, width, height, depth, ...options_ };
-    const info = this.device.getTextureFormatInfo(this.format);
-    if (!options_.bytesPerRow && !info.bytesPerPixel) {
-      throw new Error(`bytesPerRow must be provided for texture format ${this.format}`);
-    }
-    options.bytesPerRow = options_.bytesPerRow || width * (info.bytesPerPixel || 4);
-    options.rowsPerImage = options_.rowsPerImage || height;
-    return options;
+    const { data, depth, ...writeOptions } = options_;
+    const options = this._normalizeTextureWriteOptions({
+      ...writeOptions,
+      depthOrArrayLayers: writeOptions.depthOrArrayLayers ?? depth
+    });
+    return { data, depth: options.depthOrArrayLayers, ...options };
   }
   _normalizeCopyExternalImageOptions(options_) {
+    const optionsWithoutUndefined = _Texture._omitUndefined(options_);
+    const mipLevel = optionsWithoutUndefined.mipLevel ?? 0;
+    const mipLevelSize = this._getMipLevelSize(mipLevel);
     const size = this.device.getExternalImageSize(options_.image);
-    const options = { ..._Texture.defaultCopyExternalImageOptions, ...size, ...options_ };
-    options.width = Math.min(options.width, this.width - options.x);
-    options.height = Math.min(options.height, this.height - options.y);
+    const options = {
+      ..._Texture.defaultCopyExternalImageOptions,
+      ...mipLevelSize,
+      ...size,
+      ...optionsWithoutUndefined
+    };
+    options.width = Math.min(options.width, mipLevelSize.width - options.x);
+    options.height = Math.min(options.height, mipLevelSize.height - options.y);
+    options.depth = Math.min(options.depth, mipLevelSize.depthOrArrayLayers - options.z);
     return options;
   }
   _normalizeTextureReadOptions(options_) {
-    const { width, height } = this;
-    const options = { ..._Texture.defaultTextureReadOptions, width, height, ...options_ };
-    options.width = Math.min(options.width, this.width - options.x);
-    options.height = Math.min(options.height, this.height - options.y);
+    const optionsWithoutUndefined = _Texture._omitUndefined(options_);
+    const mipLevel = optionsWithoutUndefined.mipLevel ?? 0;
+    const mipLevelSize = this._getMipLevelSize(mipLevel);
+    const options = {
+      ..._Texture.defaultTextureReadOptions,
+      ...mipLevelSize,
+      ...optionsWithoutUndefined
+    };
+    options.width = Math.min(options.width, mipLevelSize.width - options.x);
+    options.height = Math.min(options.height, mipLevelSize.height - options.y);
+    options.depthOrArrayLayers = Math.min(options.depthOrArrayLayers, mipLevelSize.depthOrArrayLayers - options.z);
     return options;
   }
+  /**
+   * Normalizes a texture read request and validates the color-only readback contract used by the
+   * current texture read APIs. Supported dimensions are `2d`, `cube`, `cube-array`,
+   * `2d-array`, and `3d`.
+   *
+   * @throws if the texture format, aspect, or dimension is not supported by the first-pass
+   * color-read implementation.
+   */
+  _getSupportedColorReadOptions(options_) {
+    const options = this._normalizeTextureReadOptions(options_);
+    const formatInfo = textureFormatDecoder.getInfo(this.format);
+    this._validateColorReadAspect(options);
+    this._validateColorReadFormat(formatInfo);
+    switch (this.dimension) {
+      case "2d":
+      case "cube":
+      case "cube-array":
+      case "2d-array":
+      case "3d":
+        return options;
+      default:
+        throw new Error(`${this} color readback does not support ${this.dimension} textures`);
+    }
+  }
+  /** Validates that a read request targets the full color aspect of the texture. */
+  _validateColorReadAspect(options) {
+    if (options.aspect !== "all") {
+      throw new Error(`${this} color readback only supports aspect 'all'`);
+    }
+  }
+  /** Validates that a read request targets an uncompressed color-renderable texture format. */
+  _validateColorReadFormat(formatInfo) {
+    if (formatInfo.compressed) {
+      throw new Error(`${this} color readback does not support compressed formats (${this.format})`);
+    }
+    switch (formatInfo.attachment) {
+      case "color":
+        return;
+      case "depth":
+        throw new Error(`${this} color readback does not support depth formats (${this.format})`);
+      case "stencil":
+        throw new Error(`${this} color readback does not support stencil formats (${this.format})`);
+      case "depth-stencil":
+        throw new Error(`${this} color readback does not support depth-stencil formats (${this.format})`);
+      default:
+        throw new Error(`${this} color readback does not support format ${this.format}`);
+    }
+  }
   _normalizeTextureWriteOptions(options_) {
-    const { width, height } = this;
-    const options = { ..._Texture.defaultTextureReadOptions, width, height, ...options_ };
-    options.width = Math.min(options.width, this.width - options.x);
-    options.height = Math.min(options.height, this.height - options.y);
+    const optionsWithoutUndefined = _Texture._omitUndefined(options_);
+    const mipLevel = optionsWithoutUndefined.mipLevel ?? 0;
+    const mipLevelSize = this._getMipLevelSize(mipLevel);
+    const options = {
+      ..._Texture.defaultTextureWriteOptions,
+      ...mipLevelSize,
+      ...optionsWithoutUndefined
+    };
+    options.width = Math.min(options.width, mipLevelSize.width - options.x);
+    options.height = Math.min(options.height, mipLevelSize.height - options.y);
+    options.depthOrArrayLayers = Math.min(options.depthOrArrayLayers, mipLevelSize.depthOrArrayLayers - options.z);
+    const layout = textureFormatDecoder.computeMemoryLayout({
+      format: this.format,
+      width: options.width,
+      height: options.height,
+      depth: options.depthOrArrayLayers,
+      byteAlignment: this.byteAlignment
+    });
+    const minimumBytesPerRow = layout.bytesPerPixel * options.width;
+    options.bytesPerRow = optionsWithoutUndefined.bytesPerRow ?? layout.bytesPerRow;
+    options.rowsPerImage = optionsWithoutUndefined.rowsPerImage ?? options.height;
+    if (options.bytesPerRow < minimumBytesPerRow) {
+      throw new Error(`bytesPerRow (${options.bytesPerRow}) must be at least ${minimumBytesPerRow} for ${this.format}`);
+    }
+    if (options.rowsPerImage < options.height) {
+      throw new Error(`rowsPerImage (${options.rowsPerImage}) must be at least ${options.height} for ${this.format}`);
+    }
+    const bytesPerPixel = this.device.getTextureFormatInfo(this.format).bytesPerPixel;
+    if (bytesPerPixel && options.bytesPerRow % bytesPerPixel !== 0) {
+      throw new Error(`bytesPerRow (${options.bytesPerRow}) must be a multiple of bytesPerPixel (${bytesPerPixel}) for ${this.format}`);
+    }
     return options;
   }
+  _getMipLevelSize(mipLevel) {
+    const width = Math.max(1, this.width >> mipLevel);
+    const height = this.baseDimension === "1d" ? 1 : Math.max(1, this.height >> mipLevel);
+    const depthOrArrayLayers = this.dimension === "3d" ? Math.max(1, this.depth >> mipLevel) : this.depth;
+    return { width, height, depthOrArrayLayers };
+  }
+  getAllocatedByteLength() {
+    let allocatedByteLength = 0;
+    for (let mipLevel = 0; mipLevel < this.mipLevels; mipLevel++) {
+      const { width, height, depthOrArrayLayers } = this._getMipLevelSize(mipLevel);
+      allocatedByteLength += textureFormatDecoder.computeMemoryLayout({
+        format: this.format,
+        width,
+        height,
+        depth: depthOrArrayLayers,
+        byteAlignment: 1
+      }).byteLength;
+    }
+    return allocatedByteLength * this.samples;
+  }
+  static _omitUndefined(options) {
+    return Object.fromEntries(Object.entries(options).filter(([, value]) => value !== void 0));
+  }
 };
 var Texture = _Texture;
 /** The texture can be bound for use as a sampled texture in a shader */
@@ -2057,6 +2735,10 @@ __publicField(Texture, "defaultCopyDataOptions", {
   byteOffset: 0,
   bytesPerRow: void 0,
   rowsPerImage: void 0,
+  width: void 0,
+  height: void 0,
+  depthOrArrayLayers: void 0,
+  depth: 1,
   mipLevel: 0,
   x: 0,
   y: 0,
@@ -2090,6 +2772,19 @@ __publicField(Texture, "defaultTextureReadOptions", {
   mipLevel: 0,
   aspect: "all"
 });
+__publicField(Texture, "defaultTextureWriteOptions", {
+  byteOffset: 0,
+  bytesPerRow: void 0,
+  rowsPerImage: void 0,
+  x: 0,
+  y: 0,
+  z: 0,
+  width: void 0,
+  height: void 0,
+  depthOrArrayLayers: 1,
+  mipLevel: 0,
+  aspect: "all"
+});
 
 // dist/adapter/resources/texture-view.js
 var _TextureView = class extends Resource {
@@ -2466,10 +3161,23 @@ var _RenderPipeline = class extends Resource {
   linkStatus = "pending";
   /** The hash of the pipeline */
   hash = "";
+  /** Optional shared backend implementation */
+  sharedRenderPipeline = null;
+  /** Whether shader or pipeline compilation/linking is still in progress */
+  get isPending() {
+    var _a;
+    return this.linkStatus === "pending" || this.vs.compilationStatus === "pending" || ((_a = this.fs) == null ? void 0 : _a.compilationStatus) === "pending";
+  }
+  /** Whether shader or pipeline compilation/linking has failed */
+  get isErrored() {
+    var _a;
+    return this.linkStatus === "error" || this.vs.compilationStatus === "error" || ((_a = this.fs) == null ? void 0 : _a.compilationStatus) === "error";
+  }
   constructor(device, props) {
     super(device, props, _RenderPipeline.defaultProps);
     this.shaderLayout = this.props.shaderLayout;
     this.bufferLayout = this.props.bufferLayout || [];
+    this.sharedRenderPipeline = this.props._sharedRenderPipeline || null;
   }
 };
 var RenderPipeline = _RenderPipeline;
@@ -2487,10 +3195,476 @@ __publicField(RenderPipeline, "defaultProps", {
   colorAttachmentFormats: void 0,
   depthStencilAttachmentFormat: void 0,
   parameters: {},
-  bindings: {},
-  uniforms: {}
+  varyings: void 0,
+  bufferMode: void 0,
+  disableWarnings: false,
+  _sharedRenderPipeline: void 0,
+  bindings: void 0,
+  bindGroups: void 0
 });
 
+// dist/adapter/resources/shared-render-pipeline.js
+var SharedRenderPipeline = class extends Resource {
+  get [Symbol.toStringTag]() {
+    return "SharedRenderPipeline";
+  }
+  constructor(device, props) {
+    super(device, props, {
+      ...Resource.defaultProps,
+      handle: void 0,
+      vs: void 0,
+      fs: void 0,
+      varyings: void 0,
+      bufferMode: 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/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]() {
@@ -2529,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) {
@@ -2573,8 +3725,69 @@ var _CommandEncoder = class extends Resource {
   get [Symbol.toStringTag]() {
     return "CommandEncoder";
   }
+  _timeProfilingQuerySet = null;
+  _timeProfilingSlotCount = 0;
+  _gpuTimeMs;
   constructor(device, props) {
     super(device, props, _CommandEncoder.defaultProps);
+    this._timeProfilingQuerySet = props.timeProfilingQuerySet ?? null;
+    this._timeProfilingSlotCount = 0;
+    this._gpuTimeMs = void 0;
+  }
+  /**
+   * Reads all resolved timestamp pairs on the current profiler query set and caches the sum
+   * as milliseconds on this encoder.
+   */
+  async resolveTimeProfilingQuerySet() {
+    this._gpuTimeMs = void 0;
+    if (!this._timeProfilingQuerySet) {
+      return;
+    }
+    const pairCount = Math.floor(this._timeProfilingSlotCount / 2);
+    if (pairCount <= 0) {
+      return;
+    }
+    const queryCount = pairCount * 2;
+    const results = await this._timeProfilingQuerySet.readResults({
+      firstQuery: 0,
+      queryCount
+    });
+    let totalDurationNanoseconds = 0n;
+    for (let queryIndex = 0; queryIndex < queryCount; queryIndex += 2) {
+      totalDurationNanoseconds += results[queryIndex + 1] - results[queryIndex];
+    }
+    this._gpuTimeMs = Number(totalDurationNanoseconds) / 1e6;
+  }
+  /** Returns the number of query slots consumed by automatic pass profiling on this encoder. */
+  getTimeProfilingSlotCount() {
+    return this._timeProfilingSlotCount;
+  }
+  getTimeProfilingQuerySet() {
+    return this._timeProfilingQuerySet;
+  }
+  /** Internal helper for auto-assigning timestamp slots to render/compute passes on this encoder. */
+  _applyTimeProfilingToPassProps(props) {
+    const passProps = props || {};
+    if (!this._supportsTimestampQueries() || !this._timeProfilingQuerySet) {
+      return passProps;
+    }
+    if (passProps.timestampQuerySet !== void 0 || passProps.beginTimestampIndex !== void 0 || passProps.endTimestampIndex !== void 0) {
+      return passProps;
+    }
+    const beginTimestampIndex = this._timeProfilingSlotCount;
+    if (beginTimestampIndex + 1 >= this._timeProfilingQuerySet.props.count) {
+      return passProps;
+    }
+    this._timeProfilingSlotCount += 2;
+    return {
+      ...passProps,
+      timestampQuerySet: this._timeProfilingQuerySet,
+      beginTimestampIndex,
+      endTimestampIndex: beginTimestampIndex + 1
+    };
+  }
+  _supportsTimestampQueries() {
+    return this.device.features.has("timestamp-query");
   }
 };
 var CommandEncoder = _CommandEncoder;
@@ -2583,7 +3796,8 @@ var CommandEncoder = _CommandEncoder;
 // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
 __publicField(CommandEncoder, "defaultProps", {
   ...Resource.defaultProps,
-  measureExecutionTime: void 0
+  measureExecutionTime: void 0,
+  timeProfilingQuerySet: void 0
 });
 
 // dist/adapter/resources/command-buffer.js
@@ -2600,13 +3814,22 @@ __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 decoded = UNIFORM_FORMATS[format];
+  const resolvedFormat = resolveVariableShaderTypeAlias(format);
+  const decoded = UNIFORM_FORMATS[resolvedFormat];
+  if (!decoded) {
+    throw new Error(`Unsupported variable shader type: ${format}`);
+  }
   return decoded;
 }
 function getAttributeShaderTypeInfo(attributeType) {
-  const [primitiveType, components] = TYPE_INFO[attributeType];
+  const resolvedAttributeType = resolveAttributeShaderTypeAlias(attributeType);
+  const decoded = TYPE_INFO[resolvedAttributeType];
+  if (!decoded) {
+    throw new Error(`Unsupported attribute shader type: ${attributeType}`);
+  }
+  const [primitiveType, components] = decoded;
   const integer = primitiveType === "i32" || primitiveType === "u32";
   const signed = primitiveType !== "u32";
   const byteLength = PRIMITIVE_TYPE_SIZES[primitiveType] * components;
@@ -2618,6 +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,
@@ -2714,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>",
@@ -2778,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,
@@ -2850,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;
       }
     }
@@ -2936,7 +4197,9 @@ __publicField(QuerySet, "defaultProps", {
 
 // dist/adapter/resources/fence.js
 var _Fence = class extends Resource {
-  [Symbol.toStringTag] = "WEBGLFence";
+  get [Symbol.toStringTag]() {
+    return "Fence";
+  }
   constructor(device, props = {}) {
     super(device, props, _Fence.defaultProps);
   }
@@ -2964,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) {
@@ -2977,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 */
@@ -3001,115 +4307,255 @@ 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
+var MAX_ELEMENTWISE_ARRAY_COMPARE_LENGTH = 128;
 function arrayEqual(a, b, limit = 16) {
-  if (a !== b) {
-    return false;
+  if (a === b) {
+    return true;
   }
   const arrayA = a;
   const arrayB = b;
-  if (!isNumberArray(arrayA)) {
+  if (!isNumberArray(arrayA) || !isNumberArray(arrayB)) {
     return false;
   }
-  if (isNumberArray(arrayB) && arrayA.length === arrayB.length) {
-    for (let i = 0; i < arrayA.length; ++i) {
-      if (arrayB[i] !== arrayA[i]) {
-        return false;
-      }
+  if (arrayA.length !== arrayB.length) {
+    return false;
+  }
+  const maxCompareLength = Math.min(limit, MAX_ELEMENTWISE_ARRAY_COMPARE_LENGTH);
+  if (arrayA.length > maxCompareLength) {
+    return false;
+  }
+  for (let i = 0; i < arrayA.length; ++i) {
+    if (arrayB[i] !== arrayA[i]) {
+      return false;
     }
   }
   return true;
@@ -3187,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);
     }
   }
@@ -3207,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();
   }
@@ -3281,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;
@@ -3319,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.");