@luma.gl/core 9.2.5 → 9.3.0-alpha.10

package/dist/index.cjs

@@ -36,45 +36,75 @@ __export(dist_exports, {
   DeviceFeatures: () => DeviceFeatures,
   DeviceLimits: () => DeviceLimits,
   ExternalTexture: () => ExternalTexture,
+  Fence: () => Fence,
   Framebuffer: () => Framebuffer,
+  PipelineFactory: () => PipelineFactory,
   PipelineLayout: () => PipelineLayout,
+  PresentationContext: () => PresentationContext,
   QuerySet: () => QuerySet,
   RenderPass: () => RenderPass,
   RenderPipeline: () => RenderPipeline,
   Resource: () => Resource,
   Sampler: () => Sampler,
   Shader: () => Shader,
+  ShaderBlockWriter: () => ShaderBlockWriter,
+  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,
-  getNormalizedDataType: () => getNormalizedDataType,
+  getExternalImageSize: () => getExternalImageSize,
   getScratchArray: () => getScratchArray,
+  getShaderLayoutBinding: () => getShaderLayoutBinding,
+  getTextureImageView: () => getTextureImageView,
   getTypedArrayConstructor: () => getTypedArrayConstructor,
   getVariableShaderTypeInfo: () => getVariableShaderTypeInfo,
-  getVertexFormatFromAttribute: () => getVertexFormatFromAttribute,
-  getVertexFormatInfo: () => getVertexFormatInfo,
+  isExternalImage: () => isExternalImage,
   log: () => log,
   luma: () => luma,
-  makeVertexFormat: () => makeVertexFormat,
+  makeShaderBlockLayout: () => makeShaderBlockLayout,
+  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) {
@@ -84,10 +114,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");
@@ -102,19 +172,75 @@ 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}"`;
   }
   /** props.id, for debugging. */
   id;
+  /** The props that this resource was created with */
   props;
+  /** User data object, reserved for the application */
   userData = {};
+  /** The device that this resource is associated with - TODO can we remove this dup? */
   _device;
   /** Whether this resource has been destroyed */
   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();
   /**
@@ -136,6 +262,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() */
@@ -174,7 +303,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();
@@ -182,37 +311,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 */
@@ -230,6 +429,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 {
@@ -238,7 +528,7 @@ var _Buffer = class extends Resource {
   }
   /** The usage with which this buffer was created */
   usage;
-  /** For index buffers, whether indices are 16 or 32 bit */
+  /** For index buffers, whether indices are 8, 16 or 32 bit. Note: uint8 indices are automatically converted to uint16 for WebGPU compatibility */
   indexType;
   /** "Time" of last update, can be used to check if redraw is needed */
   updateTimestamp;
@@ -249,6 +539,8 @@ var _Buffer = class extends Resource {
         deducedProps.indexType = "uint32";
       } else if (props.data instanceof Uint16Array) {
         deducedProps.indexType = "uint16";
+      } else if (props.data instanceof Uint8Array) {
+        deducedProps.indexType = "uint8";
       }
     }
     delete deducedProps.data;
@@ -267,15 +559,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;
     }
   }
 };
@@ -309,61 +609,73 @@ __publicField(Buffer2, "defaultProps", {
   onMapped: void 0
 });
 
-// dist/shadertypes/data-types/decode-data-types.js
-function 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
-  };
-}
-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],
@@ -379,87 +691,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";
@@ -470,6 +794,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";
@@ -503,16 +828,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": {},
@@ -615,7 +940,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 },
@@ -629,7 +954,10 @@ 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"];
 var COMPRESSED_TEXTURE_FORMAT_PREFIXES = [
   "bc1",
   "bc2",
@@ -645,49 +973,71 @@ var COMPRESSED_TEXTURE_FORMAT_PREFIXES = [
   "astc",
   "pvrtc"
 ];
-var RGB_FORMAT_REGEX = /^(r|rg|rgb|rgba|bgra)([0-9]*)([a-z]*)(-srgb)?(-webgl)?$/;
 var TextureFormatDecoder = class {
-  /** Returns information about a texture format, e.g. attatchment type, components, byte length and flags (integer, signed, normalized) */
-  getInfo(format) {
-    return getTextureFormatInfo(format);
-  }
   /** Checks if a texture format is color */
   isColor(format) {
-    return format.startsWith("rgba") || format.startsWith("bgra") || format.startsWith("rgb");
+    return COLOR_FORMAT_PREFIXES.some((prefix) => format.startsWith(prefix));
   }
   /** Checks if a texture format is depth or stencil */
   isDepthStencil(format) {
-    return format.startsWith("depth") || format.startsWith("stencil");
+    return DEPTH_FORMAT_PREFIXES.some((prefix) => format.startsWith(prefix));
   }
   /** Checks if a texture format is compressed */
   isCompressed(format) {
     return COMPRESSED_TEXTURE_FORMAT_PREFIXES.some((prefix) => format.startsWith(prefix));
   }
-  /**
-   * Returns the "static" capabilities of a texture format.
-   * @note Needs to be checked against current device
-   */
+  /** Returns information about a texture format, e.g. attachment type, components, byte length and flags (integer, signed, normalized) */
+  getInfo(format) {
+    return getTextureFormatInfo(format);
+  }
+  /**  "static" capabilities of a texture format. @note Needs to be adjusted against current device */
   getCapabilities(format) {
-    const info = getTextureFormatDefinition(format);
-    const formatCapabilities = {
-      format,
-      create: info.f ?? true,
-      render: info.render ?? true,
-      filter: info.filter ?? true,
-      blend: info.blend ?? true,
-      store: info.store ?? true
-    };
-    const formatInfo = getTextureFormatInfo(format);
-    const isDepthStencil = format.startsWith("depth") || format.startsWith("stencil");
-    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;
-    formatCapabilities.filter &&= !isDepthStencil && !isSigned && !isInteger && !isWebGLSpecific;
-    return formatCapabilities;
+    return getTextureFormatCapabilities(format);
+  }
+  /** Computes the memory layout for a texture, in particular including row byte alignment */
+  computeMemoryLayout(opts) {
+    return computeTextureMemoryLayout(opts);
   }
 };
 var textureFormatDecoder = new TextureFormatDecoder();
+function computeTextureMemoryLayout({ format, width, height, depth, byteAlignment }) {
+  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 = blockRows;
+  const byteLength = bytesPerRow * rowsPerImage * depth;
+  return {
+    bytesPerPixel,
+    bytesPerRow,
+    rowsPerImage,
+    depthOrArrayLayers: depth,
+    bytesPerImage: bytesPerRow * rowsPerImage,
+    byteLength
+  };
+}
+function getTextureFormatCapabilities(format) {
+  const info = getTextureFormatDefinition(format);
+  const formatCapabilities = {
+    format,
+    create: info.f ?? true,
+    render: info.render ?? true,
+    filter: info.filter ?? true,
+    blend: info.blend ?? true,
+    store: info.store ?? true
+  };
+  const formatInfo = getTextureFormatInfo(format);
+  const isDepthStencil = format.startsWith("depth") || format.startsWith("stencil");
+  const isSigned = formatInfo == null ? void 0 : formatInfo.signed;
+  const isInteger = formatInfo == null ? void 0 : formatInfo.integer;
+  const isWebGLSpecific = formatInfo == null ? void 0 : formatInfo.webgl;
+  const isCompressed = Boolean(formatInfo == null ? void 0 : formatInfo.compressed);
+  formatCapabilities.render &&= !isDepthStencil && !isCompressed;
+  formatCapabilities.filter &&= !isDepthStencil && !isSigned && !isInteger && !isWebGLSpecific;
+  return formatCapabilities;
+}
 function getTextureFormatInfo(format) {
   let formatInfo = getTextureFormatInfoUsingTable(format);
   if (textureFormatDecoder.isCompressed(format)) {
@@ -696,19 +1046,20 @@ 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.length;
+    const components = (channels == null ? void 0 : channels.length) ?? 1;
     const bitsPerChannel = [
       bits,
       components >= 2 ? bits : 0,
@@ -725,7 +1076,7 @@ function getTextureFormatInfo(format) {
       signed: decodedType.signed,
       normalized: decodedType.normalized,
       bitsPerChannel,
-      bytesPerPixel: decodedType.byteLength * channels.length,
+      bytesPerPixel: decodedType.byteLength * components,
       packed: formatInfo.packed,
       srgb: formatInfo.srgb
     };
@@ -782,10 +1133,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;
 }
@@ -808,6 +1180,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;
@@ -838,19 +1257,24 @@ 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) */
   _reused = false;
   /** Used by other luma.gl modules to store data on the device */
-  _lumaData = {};
+  _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;
@@ -898,6 +1322,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);
@@ -942,7 +1376,8 @@ var _Device = class {
   reportError(error, context, ...args) {
     const isHandled = this.props.onError(error, context);
     if (!isHandled) {
-      return log.error(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 () => {
     };
@@ -964,6 +1399,10 @@ or create a device with the 'debug: true' prop.`;
     }
     return this.canvasContext;
   }
+  /** Create a fence sync object */
+  createFence() {
+    throw new Error("createFence() not implemented");
+  }
   /** Create a RenderPass using the default CommandEncoder */
   beginRenderPass(props) {
     return this.commandEncoder.beginRenderPass(props);
@@ -972,6 +1411,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() {
@@ -1007,6 +1518,12 @@ or create a device with the 'debug: true' prop.`;
   resetWebGL() {
     throw new Error("not implemented");
   }
+  // INTERNAL LUMA.GL METHODS
+  getModuleData(moduleName) {
+    this._moduleData[moduleName] ||= {};
+    return this._moduleData[moduleName];
+  }
+  // INTERNAL HELPERS
   // IMPLEMENTATION
   /** Helper to get the canvas context props */
   static _getCanvasContextProps(props) {
@@ -1038,6 +1555,9 @@ or create a device with the 'debug: true' prop.`;
           newProps.indexType = "uint32";
         } else if (props.data instanceof Uint16Array) {
           newProps.indexType = "uint16";
+        } else if (props.data instanceof Uint8Array) {
+          newProps.data = new Uint16Array(props.data);
+          newProps.indexType = "uint16";
         }
       }
       if (!newProps.indexType) {
@@ -1070,7 +1590,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")),
@@ -1081,9 +1602,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: {
@@ -1092,6 +1615,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";
@@ -1111,7 +1653,7 @@ var _Luma = class {
   VERSION = (
     // Version detection using build plugin
     // @ts-expect-error no-undef
-    true ? "9.2.5" : "running from source"
+    true ? "9.3.0-alpha.10" : "running from source"
   );
   spector;
   preregisteredAdapters = /* @__PURE__ */ new Map();
@@ -1276,9 +1818,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;
@@ -1290,8 +1914,22 @@ function withResolvers() {
   return { promise, resolve, reject };
 }
 
-// dist/adapter/canvas-context.js
-var _CanvasContext = class {
+// dist/utils/assert.js
+function assert(condition, message) {
+  var _a;
+  if (!condition) {
+    const error = new Error(message ?? "luma.gl assertion failed.");
+    (_a = Error.captureStackTrace) == null ? void 0 : _a.call(Error, error, assert);
+    throw error;
+  }
+}
+function assertDefined(value, message) {
+  assert(value, message);
+  return value;
+}
+
+// dist/adapter/canvas-surface.js
+var _CanvasSurface = class {
   static isHTMLCanvas(canvas) {
     return typeof HTMLCanvasElement !== "undefined" && canvas instanceof HTMLCanvasElement;
   }
@@ -1325,17 +1963,21 @@ var _CanvasContext = class {
   drawingBufferWidth;
   /** Height of drawing buffer: automatically tracks this.pixelHeight if props.autoResize is true */
   drawingBufferHeight;
+  /** Resolves when the canvas is initialized, i.e. when the ResizeObserver has updated the pixel size */
   _initializedResolvers = withResolvers();
-  _resizeObserver;
-  _intersectionObserver;
-  _position;
+  _canvasObserver;
+  /** Position of the canvas in the document, updated by a timer */
+  _position = [0, 0];
+  /** Whether this canvas context has been destroyed */
   destroyed = false;
+  /** Whether the drawing buffer size needs to be resized (deferred resizing to avoid flicker) */
+  _needsDrawingBufferResize = true;
   toString() {
     return `${this[Symbol.toStringTag]}(${this.id})`;
   }
   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)()) {
@@ -1347,11 +1989,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;
@@ -1367,23 +2009,21 @@ 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" });
-      }
-      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() {
-    this.destroyed = true;
+    if (!this.destroyed) {
+      this.destroyed = true;
+      this._stopObservers();
+      this.device = null;
+    }
   }
   setProps(props) {
     if ("useDevicePixels" in props) {
@@ -1392,55 +2032,41 @@ var _CanvasContext = class {
     }
     return this;
   }
-  // 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).
-   */
+  /** Returns a framebuffer with properly resized current 'swap chain' textures */
+  getCurrentFramebuffer(options) {
+    this._resizeDrawingBufferIfNeeded();
+    return this._getCurrentFramebuffer(options);
+  }
   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. Called automatically if props.autoResize is true. */
   setDrawingBufferSize(width, height) {
-    this.canvas.width = width;
-    this.canvas.height = height;
+    width = Math.floor(width);
+    height = Math.floor(height);
+    if (this.drawingBufferWidth === width && this.drawingBufferHeight === height) {
+      return;
+    }
     this.drawingBufferWidth = width;
     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();
@@ -1450,10 +2076,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() {
@@ -1469,19 +2095,41 @@ 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;
+    }
     const entry = entries.find((entry_) => entry_.target === this.canvas);
     if (!entry) {
       return;
@@ -1492,22 +2140,21 @@ 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;
+    var _a, _b, _c, _d, _e;
+    if (this.destroyed) {
+      return;
+    }
     const entry = entries.find((entry_) => entry_.target === this.canvas);
     if (!entry) {
       return;
     }
-    this.cssWidth = entry.contentBoxSize[0].inlineSize;
-    this.cssHeight = entry.contentBoxSize[0].blockSize;
+    const contentBoxSize = assertDefined((_a = entry.contentBoxSize) == null ? void 0 : _a[0]);
+    this.cssWidth = contentBoxSize.inlineSize;
+    this.cssHeight = contentBoxSize.blockSize;
     const oldPixelSize = this.getDevicePixelSize();
-    const devicePixelWidth = ((_a = entry.devicePixelContentBoxSize) == null ? void 0 : _a[0].inlineSize) || entry.contentBoxSize[0].inlineSize * devicePixelRatio;
-    const devicePixelHeight = ((_b = entry.devicePixelContentBoxSize) == null ? void 0 : _b[0].blockSize) || entry.contentBoxSize[0].blockSize * devicePixelRatio;
+    const devicePixelWidth = ((_c = (_b = entry.devicePixelContentBoxSize) == null ? void 0 : _b[0]) == null ? void 0 : _c.inlineSize) || contentBoxSize.inlineSize * devicePixelRatio;
+    const devicePixelHeight = ((_e = (_d = entry.devicePixelContentBoxSize) == null ? void 0 : _d[0]) == null ? void 0 : _e.blockSize) || contentBoxSize.blockSize * devicePixelRatio;
     const [maxDevicePixelWidth, maxDevicePixelHeight] = this.getMaxDrawingBufferSize();
     this.devicePixelWidth = Math.max(1, Math.min(devicePixelWidth, maxDevicePixelWidth));
     this.devicePixelHeight = Math.max(1, Math.min(devicePixelHeight, maxDevicePixelHeight));
@@ -1517,44 +2164,46 @@ var _CanvasContext = class {
   _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 {
         this.setDrawingBufferSize(this.cssWidth, this.cssHeight);
       }
-      this._updateDevice();
     }
     this._initializedResolvers.resolve();
     this.isInitialized = true;
     this.updatePosition();
   }
-  /** Monitor DPR changes */
+  _resizeDrawingBufferIfNeeded() {
+    if (this._needsDrawingBufferResize) {
+      this._needsDrawingBufferResize = false;
+      const sizeChanged = this.drawingBufferWidth !== this.canvas.width || this.drawingBufferHeight !== this.canvas.height;
+      if (sizeChanged) {
+        this.canvas.width = this.drawingBufferWidth;
+        this.canvas.height = this.drawingBufferHeight;
+        this._configureDevice();
+      }
+    }
+  }
   _observeDevicePixelRatio() {
+    var _a, _b;
+    if (this.destroyed || !this._canvasObserver.started) {
+      return;
+    }
     const oldRatio = this.devicePixelRatio;
     this.devicePixelRatio = window.devicePixelRatio;
     this.updatePosition();
-    this.device.props.onDevicePixelRatioChange(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) {
+      return;
+    }
     const newRect = (_a = this.htmlCanvas) == null ? void 0 : _a.getBoundingClientRect();
     if (newRect) {
       const position = [newRect.left, newRect.top];
@@ -1563,13 +2212,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,
@@ -1597,7 +2248,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;
@@ -1621,33 +2272,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]() {
@@ -1702,7 +2360,15 @@ var _Texture = class extends Resource {
   depth;
   /** mip levels in this texture */
   mipLevels;
-  /** "Time" of last update. Monotonically increasing timestamp. TODO move to AsyncTexture? */
+  /** 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. */
+  ready = Promise.resolve(this);
+  /** isReady is always true. It is provided for type compatibility with DynamicTexture. */
+  isReady = true;
+  /** "Time" of last update. Monotonically increasing timestamp. TODO move to DynamicTexture? */
   updateTimestamp;
   get [Symbol.toStringTag]() {
     return "Texture";
@@ -1711,7 +2377,7 @@ var _Texture = class extends Resource {
     return `Texture(${this.id},${this.format},${this.width}x${this.height})`;
   }
   /** Do not use directly. Create with device.createTexture() */
-  constructor(device, props) {
+  constructor(device, props, backendProps) {
     props = _Texture.normalizeProps(device, props);
     super(device, props, _Texture.defaultProps);
     this.dimension = this.props.dimension;
@@ -1721,6 +2387,10 @@ 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;
+    }
     if (this.props.width === void 0 || this.props.height === void 0) {
       if (device.isExternalImage(props.data)) {
         const size = device.getExternalImageSize(props.data);
@@ -1730,16 +2400,13 @@ var _Texture = class extends Resource {
         this.width = 1;
         this.height = 1;
         if (this.props.width === void 0 || this.props.height === void 0) {
-          log.warn(`${this} created with undefined width or height. This is deprecated. Use AsyncTexture instead.`)();
+          log.warn(`${this} created with undefined width or height. This is deprecated. Use DynamicTexture instead.`)();
         }
       }
     }
+    this.byteAlignment = (backendProps == null ? void 0 : backendProps.byteAlignment) || 1;
     this.updateTimestamp = device.incrementTimestamp();
   }
-  /** Set sampler props associated with this texture */
-  setSampler(sampler) {
-    this.sampler = sampler instanceof Sampler ? sampler : this.device.createSampler(sampler);
-  }
   /**
    * Create a new texture with the same parameters and optionally a different size
    * @note Textures are immutable and cannot be resized after creation, but we can create a similar texture with the same parameters but a new size.
@@ -1748,6 +2415,105 @@ var _Texture = class extends Resource {
   clone(size) {
     return this.device.createTexture({ ...this.props, ...size });
   }
+  /** Set sampler props associated with this texture */
+  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 backend-aligned linear layout, in particular bytesPerRow which includes any required padding for buffer copy/read paths
+   */
+  computeMemoryLayout(options_ = {}) {
+    const options = this._normalizeTextureReadOptions(options_);
+    const { width = this.width, height = this.height, depthOrArrayLayers = this.depth } = options;
+    const { format, byteAlignment } = this;
+    return textureFormatDecoder.computeMemoryLayout({
+      format,
+      width,
+      height,
+      depth: depthOrArrayLayers,
+      byteAlignment
+    });
+  }
+  /**
+   * Read the contents of a texture into a GPU Buffer.
+   * @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 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");
+  }
+  /**
+   * Reads data from a texture into an ArrayBuffer.
+   * @returns An ArrayBuffer 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.
+   * @deprecated Use Texture.readBuffer() with an explicit destination buffer, or DynamicTexture.readAsync() for convenience readback.
+   */
+  readDataAsync(options) {
+    throw new Error("readBuffer not implemented");
+  }
+  /**
+   * 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 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");
+  }
+  /**
+   * Writes an array buffer into a texture.
+   *
+   * @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");
+  }
+  // IMPLEMENTATION SPECIFIC
+  /**
+   * WebGL can read data synchronously.
+   * @note While it is convenient, the performance penalty is very significant
+   */
+  readDataSyncWebGL(options) {
+    throw new Error("readDataSyncWebGL not available");
+  }
+  /** Generate mipmaps (WebGL only) */
+  generateMipmapsWebGL() {
+    throw new Error("generateMipmapsWebGL not available");
+  }
+  // HELPERS
   /** Ensure we have integer coordinates */
   static normalizeProps(device, props) {
     const newProps = { ...props };
@@ -1760,7 +2526,6 @@ var _Texture = class extends Resource {
     }
     return newProps;
   }
-  // HELPERS
   /** Initialize texture with supplied props */
   // eslint-disable-next-line max-statements
   _initializeData(data) {
@@ -1794,23 +2559,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 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 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 */
@@ -1827,13 +2717,12 @@ __publicField(Texture, "COPY_DST", 2);
 __publicField(Texture, "TEXTURE", 4);
 /** @deprecated Use Texture.RENDER */
 __publicField(Texture, "RENDER_ATTACHMENT", 16);
-/** Default options */
 __publicField(Texture, "defaultProps", {
   ...Resource.defaultProps,
   data: null,
   dimension: "2d",
   format: "rgba8unorm",
-  usage: _Texture.TEXTURE | _Texture.RENDER_ATTACHMENT | _Texture.COPY_DST,
+  usage: _Texture.SAMPLE | _Texture.RENDER | _Texture.COPY_DST,
   width: void 0,
   height: void 0,
   depth: 1,
@@ -1847,6 +2736,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,
@@ -1870,6 +2763,29 @@ __publicField(Texture, "defaultCopyExternalImageOptions", {
   premultipliedAlpha: false,
   flipY: false
 });
+__publicField(Texture, "defaultTextureReadOptions", {
+  x: 0,
+  y: 0,
+  z: 0,
+  width: void 0,
+  height: void 0,
+  depthOrArrayLayers: 1,
+  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 {
@@ -1916,24 +2832,32 @@ function formatCompilerLog(shaderLog, source, options) {
   const log2 = shaderLog.slice().sort((a, b) => a.lineNum - b.lineNum);
   switch ((options == null ? void 0 : options.showSourceCode) || "no") {
     case "all":
-      let currentMessage = 0;
+      let currentMessageIndex = 0;
       for (let lineNum = 1; lineNum <= lines.length; lineNum++) {
-        formattedLog += getNumberedLine(lines[lineNum - 1], lineNum, options);
-        while (log2.length > currentMessage && log2[currentMessage].lineNum === lineNum) {
-          const message = log2[currentMessage++];
-          formattedLog += formatCompilerMessage(message, lines, message.lineNum, {
+        const line = lines[lineNum - 1];
+        const currentMessage = log2[currentMessageIndex];
+        if (line && currentMessage) {
+          formattedLog += getNumberedLine(line, lineNum, options);
+        }
+        while (log2.length > currentMessageIndex && currentMessage.lineNum === lineNum) {
+          const message = log2[currentMessageIndex++];
+          if (message) {
+            formattedLog += formatCompilerMessage(message, lines, message.lineNum, {
+              ...options,
+              inlineSource: false
+            });
+          }
+        }
+      }
+      while (log2.length > currentMessageIndex) {
+        const message = log2[currentMessageIndex++];
+        if (message) {
+          formattedLog += formatCompilerMessage(message, [], 0, {
             ...options,
             inlineSource: false
           });
         }
       }
-      while (log2.length > currentMessage) {
-        const message = log2[currentMessage++];
-        formattedLog += formatCompilerMessage(message, [], 0, {
-          ...options,
-          inlineSource: false
-        });
-      }
       return formattedLog;
     case "issues":
     case "no":
@@ -1955,8 +2879,8 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
 
 `;
   }
-  const color = message.type === "error" ? "red" : "#8B4000";
-  return (options == null ? void 0 : options.html) ? `<div class='luma-compiler-log-error' style="color:${color};"><b> ${message.type.toUpperCase()}: ${message.message}</b></div>` : `${message.type.toUpperCase()}: ${message.message}`;
+  const color = message.type === "error" ? "red" : "orange";
+  return (options == null ? void 0 : options.html) ? `<div class='luma-compiler-log-${message.type}' style="color:${color};"><b> ${message.type.toUpperCase()}: ${message.message}</b></div>` : `${message.type.toUpperCase()}: ${message.message}`;
 }
 function getNumberedLines(lines, lineNum, options) {
   let numberedLines = "";
@@ -2037,35 +2961,39 @@ var _Shader = class extends Resource {
    * TODO - this HTML formatting code should not be in Device, should be pluggable
    */
   _displayShaderLog(messages, shaderId) {
-    var _a;
     if (typeof document === "undefined" || !(document == null ? void 0 : document.createElement)) {
       return;
     }
     const shaderName = shaderId;
     const shaderTitle = `${this.stage} shader "${shaderName}"`;
-    let htmlLog = formatCompilerLog(messages, this.source, { showSourceCode: "all", html: true });
+    const htmlLog = formatCompilerLog(messages, this.source, { showSourceCode: "all", html: true });
     const translatedSource = this.getTranslatedSource();
+    const container = document.createElement("div");
+    container.innerHTML = `<h1>Compilation error in ${shaderTitle}</h1>
+<div style="display:flex;position:fixed;top:10px;right:20px;gap:2px;">
+<button id="copy">Copy source</button><br/>
+<button id="close">Close</button>
+</div>
+<code><pre>${htmlLog}</pre></code>`;
     if (translatedSource) {
-      htmlLog += `<br /><br /><h1>Translated Source</h1><br /><br /><code style="user-select:text;"><pre>${translatedSource}</pre></code>`;
-    }
-    const button = document.createElement("Button");
-    button.innerHTML = `
-<h1>Compilation error in ${shaderTitle}</h1><br /><br />
-<code style="user-select:text;"><pre>
-${htmlLog}
-</pre></code>`;
-    button.style.top = "10px";
-    button.style.left = "10px";
-    button.style.position = "absolute";
-    button.style.zIndex = "9999";
-    button.style.width = "100%";
-    button.style.textAlign = "left";
-    document.body.appendChild(button);
-    const errors = document.getElementsByClassName("luma-compiler-log-error");
-    (_a = errors[0]) == null ? void 0 : _a.scrollIntoView();
-    button.onclick = () => {
-      const dataURI = `data:text/plain,${encodeURIComponent(this.source)}`;
-      navigator.clipboard.writeText(dataURI);
+      container.innerHTML += `<br /><h1>Translated Source</h1><br /><br /><code><pre>${translatedSource}</pre></code>`;
+    }
+    container.style.top = "0";
+    container.style.left = "0";
+    container.style.background = "white";
+    container.style.position = "fixed";
+    container.style.zIndex = "9999";
+    container.style.maxWidth = "100vw";
+    container.style.maxHeight = "100vh";
+    container.style.overflowY = "auto";
+    document.body.appendChild(container);
+    const error = container.querySelector(".luma-compiler-log-error");
+    error == null ? void 0 : error.scrollIntoView();
+    container.querySelector("button#close").onclick = () => {
+      container.remove();
+    };
+    container.querySelector("button#copy").onclick = () => {
+      navigator.clipboard.writeText(this.source);
     };
   }
 };
@@ -2085,7 +3013,7 @@ function getShaderIdFromProps(props) {
 function getShaderName(shader, defaultName = "unnamed") {
   const SHADER_NAME_REGEXP = /#define[\s*]SHADER_NAME[\s*]([A-Za-z0-9_-]+)[\s*]/;
   const match = SHADER_NAME_REGEXP.exec(shader);
-  return match ? match[1] : defaultName;
+  return (match == null ? void 0 : match[1]) ?? defaultName;
 }
 
 // dist/adapter/resources/framebuffer.js
@@ -2109,7 +3037,12 @@ var _Framebuffer = class extends Resource {
   clone(size) {
     const colorAttachments = this.colorAttachments.map((colorAttachment) => colorAttachment.texture.clone(size));
     const depthStencilAttachment = this.depthStencilAttachment && this.depthStencilAttachment.texture.clone(size);
-    return this.device.createFramebuffer({ ...this.props, colorAttachments, depthStencilAttachment });
+    return this.device.createFramebuffer({
+      ...this.props,
+      ...size,
+      colorAttachments,
+      depthStencilAttachment
+    });
   }
   resize(size) {
     let updateSize = !size;
@@ -2184,17 +3117,15 @@ var _Framebuffer = class extends Resource {
    * and destroys existing textures if owned
    */
   resizeAttachments(width, height) {
-    for (let i = 0; i < this.colorAttachments.length; ++i) {
-      if (this.colorAttachments[i]) {
-        const resizedTexture = this.colorAttachments[i].texture.clone({
-          width,
-          height
-        });
-        this.destroyAttachedResource(this.colorAttachments[i]);
-        this.colorAttachments[i] = resizedTexture.view;
-        this.attachResource(resizedTexture.view);
-      }
-    }
+    this.colorAttachments.forEach((colorAttachment, i) => {
+      const resizedTexture = colorAttachment.texture.clone({
+        width,
+        height
+      });
+      this.destroyAttachedResource(colorAttachment);
+      this.colorAttachments[i] = resizedTexture.view;
+      this.attachResource(resizedTexture.view);
+    });
     if (this.depthStencilAttachment) {
       const resizedTexture = this.depthStencilAttachment.texture.clone({
         width,
@@ -2231,10 +3162,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;
@@ -2252,47 +3196,30 @@ __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/render-pass.js
-var _RenderPass = class extends Resource {
+// dist/adapter/resources/shared-render-pipeline.js
+var SharedRenderPipeline = class extends Resource {
   get [Symbol.toStringTag]() {
-    return "RenderPass";
+    return "SharedRenderPipeline";
   }
   constructor(device, props) {
-    props = _RenderPass.normalizeProps(device, props);
-    super(device, props, _RenderPass.defaultProps);
-  }
-  static normalizeProps(device, props) {
-    return props;
+    super(device, props, {
+      ...Resource.defaultProps,
+      handle: void 0,
+      vs: void 0,
+      fs: void 0,
+      varyings: void 0,
+      bufferMode: void 0
+    });
   }
 };
-var RenderPass = _RenderPass;
-/** TODO - should be [0, 0, 0, 0], update once deck.gl tests run clean */
-__publicField(RenderPass, "defaultClearColor", [0, 0, 0, 1]);
-/** Depth 1.0 represents the far plance */
-__publicField(RenderPass, "defaultClearDepth", 1);
-/** Clears all stencil bits */
-__publicField(RenderPass, "defaultClearStencil", 0);
-/** Default properties for RenderPass */
-__publicField(RenderPass, "defaultProps", {
-  ...Resource.defaultProps,
-  framebuffer: null,
-  parameters: void 0,
-  clearColor: _RenderPass.defaultClearColor,
-  clearColors: void 0,
-  clearDepth: _RenderPass.defaultClearDepth,
-  clearStencil: _RenderPass.defaultClearStencil,
-  depthReadOnly: false,
-  stencilReadOnly: false,
-  discard: false,
-  occlusionQuerySet: void 0,
-  timestampQuerySet: void 0,
-  beginTimestampIndex: void 0,
-  endTimestampIndex: void 0
-});
 
 // dist/adapter/resources/compute-pipeline.js
 var _ComputePipeline = class extends Resource {
@@ -2316,62 +3243,594 @@ __publicField(ComputePipeline, "defaultProps", {
   shaderLayout: void 0
 });
 
-// dist/adapter/resources/compute-pass.js
-var _ComputePass = class extends Resource {
-  constructor(device, props) {
-    super(device, props, _ComputePass.defaultProps);
-  }
-  get [Symbol.toStringTag]() {
-    return "ComputePass";
-  }
-};
-var ComputePass = _ComputePass;
-__publicField(ComputePass, "defaultProps", {
-  ...Resource.defaultProps,
-  timestampQuerySet: void 0,
-  beginTimestampIndex: void 0,
-  endTimestampIndex: void 0
-});
-
-// dist/adapter/resources/command-encoder.js
-var _CommandEncoder = class extends Resource {
+// 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 "CommandEncoder";
+    return "PipelineFactory";
   }
-  constructor(device, props) {
-    super(device, props, _CommandEncoder.defaultProps);
-  }
-};
-var CommandEncoder = _CommandEncoder;
-// TODO - luma.gl has these on the device, should we align with WebGPU API?
-// beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
-// beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
-__publicField(CommandEncoder, "defaultProps", {
-  ...Resource.defaultProps,
-  measureExecutionTime: void 0
-});
-
-// dist/adapter/resources/command-buffer.js
-var _CommandBuffer = class extends Resource {
-  get [Symbol.toStringTag]() {
-    return "CommandBuffer";
+  toString() {
+    return `PipelineFactory(${this.device.id})`;
   }
-  constructor(device, props) {
-    super(device, props, _CommandBuffer.defaultProps);
+  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]() {
+    return "RenderPass";
+  }
+  constructor(device, props) {
+    props = _RenderPass.normalizeProps(device, props);
+    super(device, props, _RenderPass.defaultProps);
+  }
+  static normalizeProps(device, props) {
+    return props;
+  }
+};
+var RenderPass = _RenderPass;
+/** TODO - should be [0, 0, 0, 0], update once deck.gl tests run clean */
+__publicField(RenderPass, "defaultClearColor", [0, 0, 0, 1]);
+/** Depth 1.0 represents the far plance */
+__publicField(RenderPass, "defaultClearDepth", 1);
+/** Clears all stencil bits */
+__publicField(RenderPass, "defaultClearStencil", 0);
+/** Default properties for RenderPass */
+__publicField(RenderPass, "defaultProps", {
+  ...Resource.defaultProps,
+  framebuffer: null,
+  parameters: void 0,
+  clearColor: _RenderPass.defaultClearColor,
+  clearColors: void 0,
+  clearDepth: _RenderPass.defaultClearDepth,
+  clearStencil: _RenderPass.defaultClearStencil,
+  depthReadOnly: false,
+  stencilReadOnly: false,
+  discard: false,
+  occlusionQuerySet: void 0,
+  timestampQuerySet: void 0,
+  beginTimestampIndex: void 0,
+  endTimestampIndex: void 0
+});
+
+// dist/adapter/resources/compute-pass.js
+var _ComputePass = class extends Resource {
+  constructor(device, props) {
+    super(device, props, _ComputePass.defaultProps);
+  }
+  get [Symbol.toStringTag]() {
+    return "ComputePass";
+  }
+};
+var ComputePass = _ComputePass;
+__publicField(ComputePass, "defaultProps", {
+  ...Resource.defaultProps,
+  timestampQuerySet: void 0,
+  beginTimestampIndex: void 0,
+  endTimestampIndex: void 0
+});
+
+// dist/adapter/resources/command-encoder.js
+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;
+// TODO - luma.gl has these on the device, should we align with WebGPU API?
+// beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
+// beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
+__publicField(CommandEncoder, "defaultProps", {
+  ...Resource.defaultProps,
+  measureExecutionTime: void 0,
+  timeProfilingQuerySet: void 0
+});
+
+// dist/adapter/resources/command-buffer.js
+var _CommandBuffer = class extends Resource {
+  get [Symbol.toStringTag]() {
+    return "CommandBuffer";
+  }
+  constructor(device, props) {
+    super(device, props, _CommandBuffer.defaultProps);
+  }
+};
 var CommandBuffer = _CommandBuffer;
 __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;
@@ -2383,6 +3842,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,
@@ -2479,7 +3965,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>",
@@ -2543,10 +4040,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,
@@ -2615,7 +4112,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;
       }
     }
@@ -2699,6 +4196,20 @@ __publicField(QuerySet, "defaultProps", {
   count: void 0
 });
 
+// dist/adapter/resources/fence.js
+var _Fence = class extends Resource {
+  get [Symbol.toStringTag]() {
+    return "Fence";
+  }
+  constructor(device, props = {}) {
+    super(device, props, _Fence.defaultProps);
+  }
+};
+var Fence = _Fence;
+__publicField(Fence, "defaultProps", {
+  ...Resource.defaultProps
+});
+
 // dist/adapter/resources/pipeline-layout.js
 var _PipelineLayout = class extends Resource {
   get [Symbol.toStringTag]() {
@@ -2717,6 +4228,190 @@ __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/shadertypes/shader-types/shader-block-layout.js
+function makeShaderBlockLayout(uniformTypes, options = {}) {
+  const copiedUniformTypes = { ...uniformTypes };
+  const layout = options.layout ?? "std140";
+  const fields = {};
+  let size = 0;
+  for (const [key, uniformType] of Object.entries(copiedUniformTypes)) {
+    size = addToLayout(fields, key, uniformType, size, layout);
+  }
+  size = alignTo(size, getTypeAlignment(copiedUniformTypes, layout));
+  return {
+    layout,
+    byteLength: size * 4,
+    uniformTypes: copiedUniformTypes,
+    fields
+  };
+}
+function getLeafLayoutInfo(type, layout) {
+  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]);
+    const columnInfo = getVectorLayoutInfo(rows, resolvedType, decodedType.type, layout);
+    const columnStride = getMatrixColumnStride(columnInfo.size, columnInfo.alignment, layout);
+    return {
+      alignment: columnInfo.alignment,
+      size: columns * columnStride,
+      components: columns * rows,
+      columns,
+      rows,
+      columnStride,
+      shaderType: resolvedType,
+      type: decodedType.type
+    };
+  }
+  const vectorMatch = /^vec(\d)<.+>$/.exec(resolvedType);
+  if (vectorMatch) {
+    return getVectorLayoutInfo(Number(vectorMatch[1]), resolvedType, decodedType.type, layout);
+  }
+  return {
+    alignment: 1,
+    size: 1,
+    components: 1,
+    columns: 1,
+    rows: 1,
+    columnStride: 1,
+    shaderType: resolvedType,
+    type: decodedType.type
+  };
+}
+function isCompositeShaderTypeStruct(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function addToLayout(fields, name2, type, offset, layout) {
+  if (typeof type === "string") {
+    const info = getLeafLayoutInfo(type, layout);
+    const alignedOffset = alignTo(offset, info.alignment);
+    fields[name2] = {
+      offset: alignedOffset,
+      ...info
+    };
+    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 = type[1];
+    const stride = getArrayStride(elementType, layout);
+    const arrayOffset = alignTo(offset, getTypeAlignment(type, layout));
+    for (let i = 0; i < length; i++) {
+      addToLayout(fields, `${name2}[${i}]`, elementType, arrayOffset + i * stride, layout);
+    }
+    return arrayOffset + stride * length;
+  }
+  if (isCompositeShaderTypeStruct(type)) {
+    const structAlignment = getTypeAlignment(type, layout);
+    let structOffset = alignTo(offset, structAlignment);
+    for (const [memberName, memberType] of Object.entries(type)) {
+      structOffset = addToLayout(fields, `${name2}.${memberName}`, memberType, structOffset, layout);
+    }
+    return alignTo(structOffset, structAlignment);
+  }
+  throw new Error(`Unsupported CompositeShaderType for ${name2}`);
+}
+function getTypeSize(type, layout) {
+  if (typeof type === "string") {
+    return getLeafLayoutInfo(type, layout).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 getArrayStride(elementType, layout) * length;
+  }
+  let size = 0;
+  for (const memberType of Object.values(type)) {
+    const compositeMemberType = memberType;
+    size = alignTo(size, getTypeAlignment(compositeMemberType, layout));
+    size += getTypeSize(compositeMemberType, layout);
+  }
+  return alignTo(size, getTypeAlignment(type, layout));
+}
+function getTypeAlignment(type, layout) {
+  if (typeof type === "string") {
+    return getLeafLayoutInfo(type, layout).alignment;
+  }
+  if (Array.isArray(type)) {
+    const elementType = type[0];
+    const elementAlignment = getTypeAlignment(elementType, layout);
+    return uses16ByteArrayAlignment(layout) ? Math.max(elementAlignment, 4) : elementAlignment;
+  }
+  let maxAlignment = 1;
+  for (const memberType of Object.values(type)) {
+    const memberAlignment = getTypeAlignment(memberType, layout);
+    maxAlignment = Math.max(maxAlignment, memberAlignment);
+  }
+  return uses16ByteStructAlignment(layout) ? Math.max(maxAlignment, 4) : maxAlignment;
+}
+function getVectorLayoutInfo(components, shaderType, type, layout) {
+  return {
+    alignment: components === 2 ? 2 : 4,
+    size: components === 3 ? 3 : components,
+    components,
+    columns: 1,
+    rows: components,
+    columnStride: components === 3 ? 3 : components,
+    shaderType,
+    type
+  };
+}
+function getArrayStride(elementType, layout) {
+  const elementSize = getTypeSize(elementType, layout);
+  const elementAlignment = getTypeAlignment(elementType, layout);
+  return getArrayLikeStride(elementSize, elementAlignment, layout);
+}
+function getArrayLikeStride(size, alignment, layout) {
+  return alignTo(size, uses16ByteArrayAlignment(layout) ? 4 : alignment);
+}
+function getMatrixColumnStride(size, alignment, layout) {
+  return layout === "std140" ? 4 : alignTo(size, alignment);
+}
+function uses16ByteArrayAlignment(layout) {
+  return layout === "std140" || layout === "wgsl-uniform";
+}
+function uses16ByteStructAlignment(layout) {
+  return layout === "std140" || layout === "wgsl-uniform";
+}
+
 // dist/utils/array-utils-flat.js
 var arrayBuffer;
 function getScratchArrayBuffer(byteLength) {
@@ -2741,88 +4436,192 @@ function isNumberArray(value) {
   return isTypedArray(value);
 }
 
-// dist/portable/uniform-buffer-layout.js
-var minBufferSize = 1024;
-var UniformBufferLayout = class {
-  layout = {};
-  /** number of bytes needed for buffer allocation */
-  byteLength;
-  /** Create a new UniformBufferLayout given a map of attributes. */
-  constructor(uniformTypes, uniformSizes = {}) {
-    let size = 0;
-    for (const [key, uniformType] of Object.entries(uniformTypes)) {
-      const typeAndComponents = getVariableShaderTypeInfo(uniformType);
-      const { type, components } = typeAndComponents;
-      const count = components * ((uniformSizes == null ? void 0 : uniformSizes[key]) ?? 1);
-      size = alignTo(size, count);
-      const offset = size;
-      size += count;
-      this.layout[key] = { type, size: count, offset };
-    }
-    size += (4 - size % 4) % 4;
-    const actualByteLength = size * 4;
-    this.byteLength = Math.max(actualByteLength, minBufferSize);
-  }
-  /** Get the data for the complete buffer */
+// dist/portable/shader-block-writer.js
+var ShaderBlockWriter = class {
+  /** Layout metadata used to flatten and serialize values. */
+  layout;
+  /**
+   * Creates a writer for a precomputed shader-block layout.
+   */
+  constructor(layout) {
+    this.layout = layout;
+  }
+  /**
+   * Returns `true` if the flattened layout contains the given field.
+   */
+  has(name2) {
+    return Boolean(this.layout.fields[name2]);
+  }
+  /**
+   * Returns offset and size metadata for a flattened field.
+   */
+  get(name2) {
+    const entry = this.layout.fields[name2];
+    return entry ? { offset: entry.offset, size: entry.size } : void 0;
+  }
+  /**
+   * Flattens nested composite values into leaf-path values understood by {@link UniformBlock}.
+   *
+   * Top-level values may be supplied either in nested object form matching the
+   * declared composite shader types or as already-flattened leaf-path values.
+   */
+  getFlatUniformValues(uniformValues) {
+    const flattenedUniformValues = {};
+    for (const [name2, value] of Object.entries(uniformValues)) {
+      const uniformType = this.layout.uniformTypes[name2];
+      if (uniformType) {
+        this._flattenCompositeValue(flattenedUniformValues, name2, uniformType, value);
+      } else if (this.layout.fields[name2]) {
+        flattenedUniformValues[name2] = value;
+      }
+    }
+    return flattenedUniformValues;
+  }
+  /**
+   * Serializes the supplied values into buffer-backed binary data.
+   *
+   * The returned view length matches {@link ShaderBlockLayout.byteLength}, which
+   * is the exact packed size of the block.
+   */
   getData(uniformValues) {
-    const arrayBuffer2 = getScratchArrayBuffer(this.byteLength);
+    const buffer = getScratchArrayBuffer(this.layout.byteLength);
+    new Uint8Array(buffer, 0, this.layout.byteLength).fill(0);
     const typedArrays = {
-      i32: new Int32Array(arrayBuffer2),
-      u32: new Uint32Array(arrayBuffer2),
-      f32: new Float32Array(arrayBuffer2),
-      // TODO not implemented
-      f16: new Uint16Array(arrayBuffer2)
+      i32: new Int32Array(buffer),
+      u32: new Uint32Array(buffer),
+      f32: new Float32Array(buffer),
+      f16: new Uint16Array(buffer)
     };
-    for (const [name2, value] of Object.entries(uniformValues)) {
-      const uniformLayout = this.layout[name2];
-      if (!uniformLayout) {
-        log.warn(`Supplied uniform value ${name2} not present in uniform block layout`)();
-        continue;
+    const flattenedUniformValues = this.getFlatUniformValues(uniformValues);
+    for (const [name2, value] of Object.entries(flattenedUniformValues)) {
+      this._writeLeafValue(typedArrays, name2, value);
+    }
+    return new Uint8Array(buffer, 0, this.layout.byteLength);
+  }
+  /**
+   * Recursively flattens nested values using the declared composite shader type.
+   */
+  _flattenCompositeValue(flattenedUniformValues, baseName, uniformType, value) {
+    if (value === void 0) {
+      return;
+    }
+    if (typeof uniformType === "string" || this.layout.fields[baseName]) {
+      flattenedUniformValues[baseName] = value;
+      return;
+    }
+    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;
       }
-      const { type, size, offset } = uniformLayout;
-      const typedArray = typedArrays[type];
-      if (size === 1) {
-        if (typeof value !== "number" && typeof value !== "boolean") {
-          log.warn(`Supplied value for single component uniform ${name2} is not a number: ${value}`)();
+      for (let index = 0; index < Math.min(value.length, length); index++) {
+        const elementValue = value[index];
+        if (elementValue === void 0) {
           continue;
         }
-        typedArray[offset] = Number(value);
-      } else {
-        if (!isNumberArray(value)) {
-          log.warn(`Supplied value for multi component / array uniform ${name2} is not a numeric array: ${value}`)();
+        this._flattenCompositeValue(flattenedUniformValues, `${baseName}[${index}]`, elementType, elementValue);
+      }
+      return;
+    }
+    if (isCompositeShaderTypeStruct(uniformType) && isCompositeUniformObject(value)) {
+      for (const [key, subValue] of Object.entries(value)) {
+        if (subValue === void 0) {
           continue;
         }
-        typedArray.set(value, offset);
+        const nestedName = `${baseName}.${key}`;
+        this._flattenCompositeValue(flattenedUniformValues, nestedName, uniformType[key], subValue);
       }
+      return;
     }
-    return new Uint8Array(arrayBuffer2, 0, this.byteLength);
+    log.warn(`Unsupported uniform value for ${baseName}:`, value)();
   }
-  /** Does this layout have a field with specified name */
-  has(name2) {
-    return Boolean(this.layout[name2]);
+  /**
+   * Expands tightly packed numeric arrays into per-element leaf fields.
+   */
+  _flattenPackedArray(flattenedUniformValues, baseName, elementType, length, value) {
+    const numericValue = value;
+    const elementLayout = getLeafLayoutInfo(elementType, this.layout.layout);
+    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);
+      }
+    }
   }
-  /** Get offset and size for a field with specified name */
-  get(name2) {
-    const layout = this.layout[name2];
-    return layout;
+  /**
+   * Writes one flattened leaf value into its typed-array view.
+   */
+  _writeLeafValue(typedArrays, name2, value) {
+    const entry = this.layout.fields[name2];
+    if (!entry) {
+      log.warn(`Uniform ${name2} not found in layout`)();
+      return;
+    }
+    const { type, components, columns, rows, offset, columnStride } = entry;
+    const array = typedArrays[type];
+    if (components === 1) {
+      array[offset] = Number(value);
+      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 * columnStride;
+      for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
+        array[columnOffset + rowIndex] = Number(sourceValue[sourceIndex++] ?? 0);
+      }
+    }
   }
 };
+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;
@@ -2886,24 +4685,33 @@ var UniformBlock = class {
 };
 
 // dist/portable/uniform-store.js
+var minUniformBufferSize = 1024;
 var UniformStore = class {
+  /** Device used to infer layout and allocate buffers. */
+  device;
   /** Stores the uniform values for each uniform block */
   uniformBlocks = /* @__PURE__ */ new Map();
-  /** Can generate data for a uniform buffer for each block from data */
-  uniformBufferLayouts = /* @__PURE__ */ new Map();
+  /** Flattened layout metadata for each block. */
+  shaderBlockLayouts = /* @__PURE__ */ new Map();
+  /** Serializers for block-backed uniform data. */
+  shaderBlockWriters = /* @__PURE__ */ new Map();
   /** Actual buffer for the blocks */
   uniformBuffers = /* @__PURE__ */ new Map();
   /**
-   * Create a new UniformStore instance
-   * @param blocks
+   * Creates a new {@link UniformStore} for the supplied device and block definitions.
    */
-  constructor(blocks) {
+  constructor(device, blocks) {
+    this.device = device;
     for (const [bufferName, block] of Object.entries(blocks)) {
       const uniformBufferName = bufferName;
-      const uniformBufferLayout = new UniformBufferLayout(block.uniformTypes ?? {}, block.uniformSizes ?? {});
-      this.uniformBufferLayouts.set(uniformBufferName, uniformBufferLayout);
+      const shaderBlockLayout = makeShaderBlockLayout(block.uniformTypes ?? {}, {
+        layout: block.layout ?? getDefaultUniformBufferLayout(device)
+      });
+      const shaderBlockWriter = new ShaderBlockWriter(shaderBlockLayout);
+      this.shaderBlockLayouts.set(uniformBufferName, shaderBlockLayout);
+      this.shaderBlockWriters.set(uniformBufferName, shaderBlockWriter);
       const uniformBlock = new UniformBlock({ name: bufferName });
-      uniformBlock.setUniforms(block.defaultUniforms || {});
+      uniformBlock.setUniforms(shaderBlockWriter.getFlatUniformValues(block.defaultUniforms || {}));
       this.uniformBlocks.set(uniformBufferName, uniformBlock);
     }
   }
@@ -2915,36 +4723,52 @@ var UniformStore = class {
   }
   /**
    * Set uniforms
-   * Makes all properties partial
+   *
+   * Makes all group properties partial and eagerly propagates changes to any
+   * managed GPU buffers.
    */
   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 shaderBlockWriter = this.shaderBlockWriters.get(uniformBufferName);
+      const flattenedUniforms = shaderBlockWriter == null ? void 0 : shaderBlockWriter.getFlatUniformValues(uniformValues || {});
+      (_a = this.uniformBlocks.get(uniformBufferName)) == null ? void 0 : _a.setUniforms(flattenedUniforms || {});
     }
     this.updateUniformBuffers();
   }
-  /** Get the required minimum length of the uniform buffer */
+  /**
+   * Returns the allocation size for the named uniform buffer.
+   *
+   * This may exceed the packed layout size because minimum buffer-size policy is
+   * applied at the store layer.
+   */
   getUniformBufferByteLength(uniformBufferName) {
     var _a;
-    return ((_a = this.uniformBufferLayouts.get(uniformBufferName)) == null ? void 0 : _a.byteLength) || 0;
+    const packedByteLength = ((_a = this.shaderBlockLayouts.get(uniformBufferName)) == null ? void 0 : _a.byteLength) || 0;
+    return Math.max(packedByteLength, minUniformBufferSize);
   }
-  /** Get formatted binary memory that can be uploaded to a buffer */
+  /**
+   * Returns packed binary data that can be uploaded to the named uniform buffer.
+   *
+   * The returned view length matches the packed block size and is not padded to
+   * the store's minimum allocation size.
+   */
   getUniformBufferData(uniformBufferName) {
-    var _a, _b;
+    var _a;
     const uniformValues = ((_a = this.uniformBlocks.get(uniformBufferName)) == null ? void 0 : _a.getAllUniforms()) || {};
-    return (_b = this.uniformBufferLayouts.get(uniformBufferName)) == null ? void 0 : _b.getData(uniformValues);
+    const shaderBlockWriter = this.shaderBlockWriters.get(uniformBufferName);
+    return (shaderBlockWriter == null ? void 0 : shaderBlockWriter.getData(uniformValues)) || new Uint8Array(0);
   }
   /**
-   * Creates an unmanaged uniform buffer (umnanaged means that application is responsible for destroying it)
-   * The new buffer is initialized with current / supplied values
+   * Creates an unmanaged uniform buffer initialized with the current or supplied values.
    */
-  createUniformBuffer(device, uniformBufferName, uniforms) {
+  createUniformBuffer(uniformBufferName, uniforms) {
     if (uniforms) {
       this.setUniforms(uniforms);
     }
     const byteLength = this.getUniformBufferByteLength(uniformBufferName);
-    const uniformBuffer = device.createBuffer({
+    const uniformBuffer = this.device.createBuffer({
       usage: Buffer2.UNIFORM | Buffer2.COPY_DST,
       byteLength
     });
@@ -2952,11 +4776,11 @@ var UniformStore = class {
     uniformBuffer.write(uniformBufferData);
     return uniformBuffer;
   }
-  /** Get the managed uniform buffer. "managed" resources are destroyed when the uniformStore is destroyed. */
-  getManagedUniformBuffer(device, uniformBufferName) {
+  /** Returns the managed uniform buffer for the named block. */
+  getManagedUniformBuffer(uniformBufferName) {
     if (!this.uniformBuffers.get(uniformBufferName)) {
       const byteLength = this.getUniformBufferByteLength(uniformBufferName);
-      const uniformBuffer = device.createBuffer({
+      const uniformBuffer = this.device.createBuffer({
         usage: Buffer2.UNIFORM | Buffer2.COPY_DST,
         byteLength
       });
@@ -2964,7 +4788,11 @@ var UniformStore = class {
     }
     return this.uniformBuffers.get(uniformBufferName);
   }
-  /** Updates all uniform buffers where values have changed */
+  /**
+   * Updates every managed uniform buffer whose source uniforms have changed.
+   *
+   * @returns The first redraw reason encountered, or `false` if nothing changed.
+   */
   updateUniformBuffers() {
     let reason = false;
     for (const uniformBufferName of this.uniformBlocks.keys()) {
@@ -2976,7 +4804,11 @@ var UniformStore = class {
     }
     return reason;
   }
-  /** Update one uniform buffer. Only updates if values have changed */
+  /**
+   * Updates one managed uniform buffer if its corresponding block is dirty.
+   *
+   * @returns The redraw reason for the update, or `false` if no write occurred.
+   */
   updateUniformBuffer(uniformBufferName) {
     var _a;
     const uniformBlock = this.uniformBlocks.get(uniformBufferName);
@@ -2993,8 +4825,49 @@ var UniformStore = class {
     return reason;
   }
 };
+function getDefaultUniformBufferLayout(device) {
+  return device.type === "webgpu" ? "wgsl-uniform" : "std140";
+}
+
+// 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;
+  const { bytesPerImage } = memoryLayout;
+  const offset = bytesPerImage * image;
+  const totalPixels = memoryLayout.bytesPerImage / bytesPerComponent;
+  switch (format) {
+    case "rgba8unorm":
+    case "bgra8unorm":
+    case "rgba8uint":
+      return new Uint8Array(arrayBuffer2, offset, totalPixels);
+    case "r8unorm":
+      return new Uint8Array(arrayBuffer2, offset, totalPixels);
+    case "r16uint":
+    case "rgba16uint":
+      return new Uint16Array(arrayBuffer2, offset, totalPixels);
+    case "r32uint":
+    case "rgba32uint":
+      return new Uint32Array(arrayBuffer2, offset, totalPixels);
+    case "r32float":
+      return new Float32Array(arrayBuffer2, offset, totalPixels);
+    case "rgba16float":
+      return new Uint16Array(arrayBuffer2, offset, totalPixels);
+    case "rgba32float":
+      return new Float32Array(arrayBuffer2, offset, totalPixels);
+    default:
+      throw new Error(`Unsupported format: ${format}`);
+  }
+}
+function setTextureImageData(arrayBuffer2, memoryLayout, format, data, image = 0) {
+  const offset = 0;
+  const totalPixels = memoryLayout.bytesPerImage / memoryLayout.bytesPerPixel;
+  const subArray = data.subarray(0, totalPixels);
+  const typedArray = getTextureImageView(arrayBuffer2, memoryLayout, format, image);
+  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.");
@@ -3004,7 +4877,7 @@ function readPixel(pixelData, x, y, bitsPerChannel) {
   let bitOffsetWithinPixel = 0;
   const channels = [];
   for (let i = 0; i < 4; i++) {
-    const bits = bitsPerChannel[i];
+    const bits = bitsPerChannel[i] ?? 0;
     if (bits <= 0) {
       channels.push(0);
     } else {
@@ -3013,14 +4886,14 @@ function readPixel(pixelData, x, y, bitsPerChannel) {
       bitOffsetWithinPixel += bits;
     }
   }
-  return [channels[0], channels[1], channels[2], channels[3]];
+  return [channels[0] ?? 0, channels[1] ?? 0, channels[2] ?? 0, channels[3] ?? 0];
 }
 function writePixel(dataView, bitOffset, bitsPerChannel, pixel) {
   let currentBitOffset = bitOffset;
   for (let channel = 0; channel < 4; channel++) {
-    const bits = bitsPerChannel[channel];
+    const bits = bitsPerChannel[channel] ?? 0;
     const maxValue = (1 << bits) - 1;
-    const channelValue = pixel[channel] & maxValue;
+    const channelValue = (pixel[channel] ?? 0) & maxValue;
     writeBitsToDataView(dataView, currentBitOffset, bits, channelValue);
     currentBitOffset += bits;
   }