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

package/dist/dist.dev.js

@@ -66,44 +66,48 @@ var __exports__ = (() => {
     ExternalTexture: () => ExternalTexture,
     Fence: () => Fence,
     Framebuffer: () => Framebuffer,
+    PipelineFactory: () => PipelineFactory,
     PipelineLayout: () => PipelineLayout,
+    PresentationContext: () => PresentationContext,
     QuerySet: () => QuerySet,
     RenderPass: () => RenderPass,
     RenderPipeline: () => RenderPipeline,
     Resource: () => Resource,
     Sampler: () => Sampler,
     Shader: () => Shader,
+    ShaderFactory: () => ShaderFactory,
+    SharedRenderPipeline: () => SharedRenderPipeline,
     Texture: () => Texture,
-    TextureFormatDecoder: () => TextureFormatDecoder,
     TextureView: () => TextureView,
     TransformFeedback: () => TransformFeedback,
     UniformBlock: () => UniformBlock,
     UniformBufferLayout: () => UniformBufferLayout,
     UniformStore: () => UniformStore,
     VertexArray: () => VertexArray,
+    _getDefaultBindGroupFactory: () => _getDefaultBindGroupFactory,
     _getTextureFormatDefinition: () => getTextureFormatDefinition,
     _getTextureFormatTable: () => getTextureFormatTable,
     assert: () => assert2,
     assertDefined: () => assertDefined,
+    dataTypeDecoder: () => dataTypeDecoder,
+    flattenBindingsByGroup: () => flattenBindingsByGroup,
     getAttributeInfosFromLayouts: () => getAttributeInfosFromLayouts,
     getAttributeShaderTypeInfo: () => getAttributeShaderTypeInfo,
-    getDataType: () => getDataType,
-    getDataTypeInfo: () => getDataTypeInfo,
     getExternalImageSize: () => getExternalImageSize,
-    getNormalizedDataType: () => getNormalizedDataType,
     getScratchArray: () => getScratchArray,
+    getShaderLayoutBinding: () => getShaderLayoutBinding,
     getTextureImageView: () => getTextureImageView,
     getTypedArrayConstructor: () => getTypedArrayConstructor,
     getVariableShaderTypeInfo: () => getVariableShaderTypeInfo,
-    getVertexFormatFromAttribute: () => getVertexFormatFromAttribute,
-    getVertexFormatInfo: () => getVertexFormatInfo,
     isExternalImage: () => isExternalImage,
     log: () => log,
     luma: () => luma,
-    makeVertexFormat: () => makeVertexFormat,
+    normalizeBindingsByGroup: () => normalizeBindingsByGroup,
     readPixel: () => readPixel,
     setTextureImageData: () => setTextureImageData,
+    shaderTypeDecoder: () => shaderTypeDecoder,
     textureFormatDecoder: () => textureFormatDecoder,
+    vertexFormatDecoder: () => vertexFormatDecoder,
     writePixel: () => writePixel
   });
 
@@ -301,6 +305,24 @@ var __exports__ = (() => {
   };
 
   // ../core/src/utils/stats-manager.ts
+  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) {
@@ -310,10 +332,50 @@ var __exports__ = (() => {
       if (!this.stats.has(name2)) {
         this.stats.set(name2, new 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?.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 });
+  }
 
   // ../../node_modules/@probe.gl/env/dist/lib/globals.js
   var window_ = globalThis;
@@ -848,6 +910,57 @@ var __exports__ = (() => {
   }
 
   // ../core/src/adapter/resources/resource.ts
+  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}"`;
@@ -864,6 +977,8 @@ var __exports__ = (() => {
     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();
     /**
@@ -885,6 +1000,9 @@ var __exports__ = (() => {
      * 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() */
@@ -923,7 +1041,7 @@ var __exports__ = (() => {
     }
     /** 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();
@@ -931,37 +1049,107 @@ var __exports__ = (() => {
     // 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 */
@@ -979,6 +1167,96 @@ var __exports__ = (() => {
     }
     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?.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?.enabled ? profiler : null;
+  }
+  function getTimestamp() {
+    return globalThis.performance?.now?.() ?? 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?.get === "function") {
+      return descriptor.get.call(prototype);
+    }
+    if (typeof descriptor?.value === "string") {
+      return descriptor.value;
+    }
+    return null;
+  }
 
   // ../core/src/adapter/resources/buffer.ts
   var _Buffer = class extends Resource {
@@ -1018,18 +1296,26 @@ var __exports__ = (() => {
     /** 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?.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;
       }
     }
   };
@@ -1063,62 +1349,73 @@ var __exports__ = (() => {
     onMapped: void 0
   });
 
-  // ../core/src/shadertypes/data-types/decode-data-types.ts
-  function getDataTypeInfo(type) {
-    const normalized = type.includes("norm");
-    const integer = !normalized && !type.startsWith("float");
-    const signed = type.startsWith("s");
-    const typeInfo = NORMALIZED_TYPE_MAP[type];
-    const [signedType, primitiveType, byteLength] = typeInfo || ["uint8 ", "i32", 1];
-    return {
-      signedType,
-      primitiveType,
-      byteLength,
-      normalized,
-      integer,
-      signed
-    };
-  }
-  function getNormalizedDataType(signedDataType) {
-    const dataType = signedDataType;
-    switch (dataType) {
-      case "uint8":
-        return "unorm8";
-      case "sint8":
-        return "snorm8";
-      case "uint16":
-        return "unorm16";
-      case "sint16":
-        return "snorm16";
-      default:
-        return dataType;
+  // ../core/src/shadertypes/data-types/data-type-decoder.ts
+  var DataTypeDecoder = class {
+    /**
+     * Gets info about a data type constant (signed or normalized)
+     * @returns underlying primitive / signed types, byte length, normalization, integer, signed flags
+     */
+    getDataTypeInfo(type) {
+      const [signedType, primitiveType, byteLength] = NORMALIZED_TYPE_MAP[type];
+      const normalized = type.includes("norm");
+      const integer = !normalized && !type.startsWith("float");
+      const signed = type.startsWith("s");
+      return {
+        signedType,
+        primitiveType,
+        byteLength,
+        normalized,
+        integer,
+        signed
+        // TODO - add webglOnly flag
+      };
     }
-  }
-  function alignTo(size, count) {
-    switch (count) {
-      case 1:
-        return size;
-      case 2:
-        return size + size % 2;
-      default:
-        return size + (4 - size % 4) % 4;
+    /** Build a vertex format from a signed data type and a component */
+    getNormalizedDataType(signedDataType) {
+      const dataType = signedDataType;
+      switch (dataType) {
+        case "uint8":
+          return "unorm8";
+        case "sint8":
+          return "snorm8";
+        case "uint16":
+          return "unorm16";
+        case "sint16":
+          return "snorm16";
+        default:
+          return dataType;
+      }
     }
-  }
-  function getDataType(arrayOrType) {
-    const Constructor = ArrayBuffer.isView(arrayOrType) ? arrayOrType.constructor : arrayOrType;
-    if (Constructor === Uint8ClampedArray) {
-      return "uint8";
+    /** Align offset to 1, 2 or 4 elements (4, 8 or 16 bytes) */
+    alignTo(size, count) {
+      switch (count) {
+        case 1:
+          return size;
+        case 2:
+          return size + size % 2;
+        default:
+          return size + (4 - size % 4) % 4;
+      }
     }
-    const info = Object.values(NORMALIZED_TYPE_MAP).find((entry) => Constructor === entry[4]);
-    if (!info) {
-      throw new Error(Constructor.name);
+    /** Returns the VariableShaderType that corresponds to a typed array */
+    getDataType(arrayOrType) {
+      const Constructor = ArrayBuffer.isView(arrayOrType) ? arrayOrType.constructor : arrayOrType;
+      if (Constructor === Uint8ClampedArray) {
+        return "uint8";
+      }
+      const info = Object.values(NORMALIZED_TYPE_MAP).find((entry) => Constructor === entry[4]);
+      if (!info) {
+        throw new Error(Constructor.name);
+      }
+      return info[0];
     }
-    return info[0];
-  }
-  function getTypedArrayConstructor(type) {
-    const [, , , , Constructor] = NORMALIZED_TYPE_MAP[type];
-    return Constructor;
-  }
+    /** Returns the TypedArray that corresponds to a shader data type */
+    getTypedArrayConstructor(type) {
+      const [, , , , Constructor] = NORMALIZED_TYPE_MAP[type];
+      return Constructor;
+    }
+  };
+  var dataTypeDecoder = new DataTypeDecoder();
   var NORMALIZED_TYPE_MAP = {
     uint8: ["uint8", "u32", 1, false, Uint8Array],
     sint8: ["sint8", "i32", 1, false, Int8Array],
@@ -1134,87 +1431,99 @@ var __exports__ = (() => {
     sint32: ["sint32", "i32", 4, false, Int32Array]
   };
 
-  // ../core/src/shadertypes/vertex-arrays/decode-vertex-format.ts
-  function getVertexFormatInfo(format) {
-    let webglOnly;
-    if (format.endsWith("-webgl")) {
-      format.replace("-webgl", "");
-      webglOnly = true;
-    }
-    const [type_, count] = format.split("x");
-    const type = type_;
-    const components = count ? parseInt(count) : 1;
-    const decodedType = getDataTypeInfo(type);
-    const result = {
-      type,
-      components,
-      byteLength: decodedType.byteLength * components,
-      integer: decodedType.integer,
-      signed: decodedType.signed,
-      normalized: decodedType.normalized
-    };
-    if (webglOnly) {
-      result.webglOnly = true;
-    }
-    return result;
-  }
-  function makeVertexFormat(signedDataType, components, normalized) {
-    const dataType = normalized ? getNormalizedDataType(signedDataType) : signedDataType;
-    switch (dataType) {
-      case "unorm8":
-        if (components === 1) {
-          return "unorm8";
-        }
-        if (components === 3) {
-          return "unorm8x3-webgl";
-        }
-        return `${dataType}x${components}`;
-      case "snorm8":
-      case "uint8":
-      case "sint8":
-      case "uint16":
-      case "sint16":
-      case "unorm16":
-      case "snorm16":
-      case "float16":
-        if (components === 1 || components === 3) {
-          throw new Error(`size: ${components}`);
-        }
-        return `${dataType}x${components}`;
-      default:
-        return components === 1 ? dataType : `${dataType}x${components}`;
+  // ../core/src/shadertypes/vertex-types/vertex-format-decoder.ts
+  var VertexFormatDecoder = class {
+    /**
+     * Decodes a vertex format, returning type, components, byte  length and flags (integer, signed, normalized)
+     */
+    getVertexFormatInfo(format) {
+      let webglOnly;
+      if (format.endsWith("-webgl")) {
+        format.replace("-webgl", "");
+        webglOnly = true;
+      }
+      const [type_, count] = format.split("x");
+      const type = type_;
+      const components = count ? parseInt(count) : 1;
+      const decodedType = dataTypeDecoder.getDataTypeInfo(type);
+      const result = {
+        type,
+        components,
+        byteLength: decodedType.byteLength * components,
+        integer: decodedType.integer,
+        signed: decodedType.signed,
+        normalized: decodedType.normalized
+      };
+      if (webglOnly) {
+        result.webglOnly = true;
+      }
+      return result;
     }
-  }
-  function getVertexFormatFromAttribute(typedArray, size, normalized) {
-    if (!size || size > 4) {
-      throw new Error(`size ${size}`);
+    /** Build a vertex format from a signed data type and a component */
+    makeVertexFormat(signedDataType, components, normalized) {
+      const dataType = normalized ? dataTypeDecoder.getNormalizedDataType(signedDataType) : signedDataType;
+      switch (dataType) {
+        case "unorm8":
+          if (components === 1) {
+            return "unorm8";
+          }
+          if (components === 3) {
+            return "unorm8x3-webgl";
+          }
+          return `${dataType}x${components}`;
+        case "snorm8":
+        case "uint8":
+        case "sint8":
+        case "uint16":
+        case "sint16":
+        case "unorm16":
+        case "snorm16":
+        case "float16":
+          if (components === 1 || components === 3) {
+            throw new Error(`size: ${components}`);
+          }
+          return `${dataType}x${components}`;
+        default:
+          return components === 1 ? dataType : `${dataType}x${components}`;
+      }
     }
-    const components = size;
-    const signedDataType = getDataType(typedArray);
-    return makeVertexFormat(signedDataType, components, normalized);
-  }
-  function getCompatibleVertexFormat(opts) {
-    let vertexType;
-    switch (opts.primitiveType) {
-      case "f32":
-        vertexType = "float32";
-        break;
-      case "i32":
-        vertexType = "sint32";
-        break;
-      case "u32":
-        vertexType = "uint32";
-        break;
-      case "f16":
-        return opts.components <= 2 ? "float16x2" : "float16x4";
+    /** Get the vertex format for an attribute with TypedArray and size */
+    getVertexFormatFromAttribute(typedArray, size, normalized) {
+      if (!size || size > 4) {
+        throw new Error(`size ${size}`);
+      }
+      const components = size;
+      const signedDataType = dataTypeDecoder.getDataType(typedArray);
+      return this.makeVertexFormat(signedDataType, components, normalized);
     }
-    if (opts.components === 1) {
-      return vertexType;
+    /**
+     * Return a "default" vertex format for a certain shader data type
+     * The simplest vertex format that matches the shader attribute's data type
+     */
+    getCompatibleVertexFormat(opts) {
+      let vertexType;
+      switch (opts.primitiveType) {
+        case "f32":
+          vertexType = "float32";
+          break;
+        case "i32":
+          vertexType = "sint32";
+          break;
+        case "u32":
+          vertexType = "uint32";
+          break;
+        case "f16":
+          return opts.components <= 2 ? "float16x2" : "float16x4";
+      }
+      if (opts.components === 1) {
+        return vertexType;
+      }
+      return `${vertexType}x${opts.components}`;
     }
-    return `${vertexType}x${opts.components}`;
-  }
+  };
+  var vertexFormatDecoder = new VertexFormatDecoder();
 
-  // ../core/src/shadertypes/textures/texture-format-table.ts
+  // ../core/src/shadertypes/texture-types/texture-format-table.ts
   var texture_compression_bc = "texture-compression-bc";
   var texture_compression_astc = "texture-compression-astc";
   var texture_compression_etc2 = "texture-compression-etc2";
@@ -1225,6 +1534,7 @@ var __exports__ = (() => {
   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";
@@ -1258,16 +1568,16 @@ var __exports__ = (() => {
     "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": {},
@@ -1370,7 +1680,7 @@ var __exports__ = (() => {
     // 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 },
@@ -1384,7 +1694,7 @@ var __exports__ = (() => {
     ...TEXTURE_FORMAT_COMPRESSED_TABLE
   };
 
-  // ../core/src/shadertypes/textures/texture-format-decoder.ts
+  // ../core/src/shadertypes/texture-types/texture-format-decoder.ts
   var RGB_FORMAT_REGEX = /^(r|rg|rgb|rgba|bgra)([0-9]*)([a-z]*)(-srgb)?(-webgl)?$/;
   var COLOR_FORMAT_PREFIXES = ["rgb", "rgba", "bgra"];
   var DEPTH_FORMAT_PREFIXES = ["depth", "stencil"];
@@ -1437,10 +1747,19 @@ var __exports__ = (() => {
     depth,
     byteAlignment
   }) {
-    const { bytesPerPixel } = textureFormatDecoder.getInfo(format);
-    const unpaddedBytesPerRow = width * bytesPerPixel;
+    const formatInfo = textureFormatDecoder.getInfo(format);
+    const {
+      bytesPerPixel,
+      bytesPerBlock = bytesPerPixel,
+      blockWidth = 1,
+      blockHeight = 1,
+      compressed = false
+    } = formatInfo;
+    const blockColumns = compressed ? Math.ceil(width / blockWidth) : width;
+    const blockRows = compressed ? Math.ceil(height / blockHeight) : height;
+    const unpaddedBytesPerRow = blockColumns * bytesPerBlock;
     const bytesPerRow = Math.ceil(unpaddedBytesPerRow / byteAlignment) * byteAlignment;
-    const rowsPerImage = height;
+    const rowsPerImage = blockRows;
     const byteLength = bytesPerRow * rowsPerImage * depth;
     return {
       bytesPerPixel,
@@ -1466,7 +1785,8 @@ var __exports__ = (() => {
     const isSigned = formatInfo?.signed;
     const isInteger = formatInfo?.integer;
     const isWebGLSpecific = formatInfo?.webgl;
-    formatCapabilities.render &&= !isSigned;
+    const isCompressed = Boolean(formatInfo?.compressed);
+    formatCapabilities.render &&= !isDepthStencil && !isCompressed;
     formatCapabilities.filter &&= !isDepthStencil && !isSigned && !isInteger && !isWebGLSpecific;
     return formatCapabilities;
   }
@@ -1478,17 +1798,18 @@ var __exports__ = (() => {
       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 ?? 1;
       const bitsPerChannel = [
@@ -1563,10 +1884,31 @@ var __exports__ = (() => {
       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;
+  }
 
-  // ../core/src/image-utils/image-types.ts
+  // ../core/src/shadertypes/image-types/image-types.ts
   function isExternalImage(data) {
     return typeof ImageData !== "undefined" && data instanceof ImageData || typeof ImageBitmap !== "undefined" && data instanceof ImageBitmap || typeof HTMLImageElement !== "undefined" && data instanceof HTMLImageElement || typeof HTMLVideoElement !== "undefined" && data instanceof HTMLVideoElement || typeof VideoFrame !== "undefined" && data instanceof VideoFrame || typeof HTMLCanvasElement !== "undefined" && data instanceof HTMLCanvasElement || typeof OffscreenCanvas !== "undefined" && data instanceof OffscreenCanvas;
   }
@@ -1589,6 +1931,52 @@ var __exports__ = (() => {
   // ../core/src/adapter/device.ts
   var DeviceLimits = class {
   };
+  function formatErrorLogArguments(context, args) {
+    const formattedContext = formatErrorLogValue(context);
+    const formattedArgs = args.map(formatErrorLogValue).filter((arg) => arg !== void 0);
+    return [formattedContext, ...formattedArgs].filter((arg) => arg !== void 0);
+  }
+  function formatErrorLogValue(value) {
+    if (value === void 0) {
+      return void 0;
+    }
+    if (value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      return value;
+    }
+    if (value instanceof Error) {
+      return value.message;
+    }
+    if (Array.isArray(value)) {
+      return value.map(formatErrorLogValue);
+    }
+    if (typeof value === "object") {
+      if (hasCustomToString(value)) {
+        const stringValue = String(value);
+        if (stringValue !== "[object Object]") {
+          return stringValue;
+        }
+      }
+      if (looksLikeGPUCompilationMessage(value)) {
+        return formatGPUCompilationMessage(value);
+      }
+      return value.constructor?.name || "Object";
+    }
+    return String(value);
+  }
+  function hasCustomToString(value) {
+    return "toString" in value && typeof value.toString === "function" && value.toString !== Object.prototype.toString;
+  }
+  function looksLikeGPUCompilationMessage(value) {
+    return "message" in value && "type" in value;
+  }
+  function formatGPUCompilationMessage(value) {
+    const type = typeof value.type === "string" ? value.type : "message";
+    const message = typeof value.message === "string" ? value.message : "";
+    const lineNum = typeof value.lineNum === "number" ? value.lineNum : null;
+    const linePos = typeof value.linePos === "number" ? value.linePos : null;
+    const location = lineNum !== null && linePos !== null ? ` @ ${lineNum}:${linePos}` : lineNum !== null ? ` @ ${lineNum}` : "";
+    return `${type}${location}: ${message}`.trim();
+  }
   var DeviceFeatures = class {
     features;
     disabledFeatures;
@@ -1618,6 +2006,8 @@ var __exports__ = (() => {
     userData = {};
     /** stats */
     statsManager = lumaStats;
+    /** Internal per-device factory storage */
+    _factories = {};
     /** An abstract timestamp used for change tracking */
     timestamp = 0;
     /** True if this device has been reused during device creation (app has multiple references) */
@@ -1625,12 +2015,15 @@ var __exports__ = (() => {
     /** Used by other luma.gl modules to store data on the device */
     _moduleData = {};
     _textureCaps = {};
+    /** Internal timestamp query set used when GPU timing collection is enabled for this device. */
+    _debugGPUTimeQuery = null;
     constructor(props) {
       this.props = { ..._Device.defaultProps, ...props };
       this.id = this.props.id || uid(this[Symbol.toStringTag].toLowerCase());
     }
+    // TODO - just expose the shadertypes decoders?
     getVertexFormatInfo(format) {
-      return getVertexFormatInfo(format);
+      return vertexFormatDecoder.getVertexFormatInfo(format);
     }
     isVertexFormatSupported(format) {
       return true;
@@ -1678,6 +2071,16 @@ var __exports__ = (() => {
     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);
@@ -1720,12 +2123,12 @@ var __exports__ = (() => {
     reportError(error, context, ...args) {
       const isHandled = this.props.onError(error, context);
       if (!isHandled) {
+        const logArguments = formatErrorLogArguments(context, args);
         return log.error(
           this.type === "webgl" ? "%cWebGL" : "%cWebGPU",
           "color: white; background: red; padding: 2px 6px; border-radius: 3px;",
           error.message,
-          context,
-          ...args
+          ...logArguments
         );
       }
       return () => {
@@ -1760,6 +2163,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() {
@@ -1867,7 +2342,8 @@ or create a device with the 'debug: true' prop.`;
     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")),
@@ -1878,9 +2354,11 @@ or create a device with the 'debug: true' prop.`;
     // 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: {
@@ -1889,6 +2367,25 @@ or create a device with the 'debug: true' prop.`;
     // 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?.env) {
+      return void 0;
+    }
+    return processObject.env["NODE_ENV"];
+  }
 
   // ../core/src/adapter/luma.ts
   var STARTUP_MESSAGE = "set luma.log.level=1 (or higher) to trace rendering";
@@ -2066,6 +2563,100 @@ or create a device with the 'debug: true' prop.`;
     return pageLoadPromise;
   }
 
+  // ../core/src/adapter/canvas-observer.ts
+  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() {
+      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;
+      }
+      this._resizeObserver?.disconnect();
+      this._intersectionObserver?.disconnect();
+    }
+    _refreshDevicePixelRatio() {
+      if (!this._started) {
+        return;
+      }
+      this.props.onDevicePixelRatioChange();
+      this._observeDevicePixelRatioMediaQuery?.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);
+    }
+  };
+
   // ../core/src/utils/promise-utils.ts
   function withResolvers() {
     let resolve;
@@ -2090,8 +2681,8 @@ or create a device with the 'debug: true' prop.`;
     return value;
   }
 
-  // ../core/src/adapter/canvas-context.ts
-  var _CanvasContext = class {
+  // ../core/src/adapter/canvas-surface.ts
+  var _CanvasSurface = class {
     static isHTMLCanvas(canvas) {
       return typeof HTMLCanvasElement !== "undefined" && canvas instanceof HTMLCanvasElement;
     }
@@ -2127,11 +2718,7 @@ or create a device with the 'debug: true' prop.`;
     drawingBufferHeight;
     /** Resolves when the canvas is initialized, i.e. when the ResizeObserver has updated the pixel size */
     _initializedResolvers = withResolvers();
-    /** ResizeObserver to track canvas size changes */
-    _resizeObserver;
-    /** IntersectionObserver to track canvas visibility changes */
-    _intersectionObserver;
-    _observeDevicePixelRatioTimeout = null;
+    _canvasObserver;
     /** Position of the canvas in the document, updated by a timer */
     _position = [0, 0];
     /** Whether this canvas context has been destroyed */
@@ -2142,7 +2729,7 @@ or create a device with the 'debug: true' prop.`;
       return `${this[Symbol.toStringTag]}(${this.id})`;
     }
     constructor(props) {
-      this.props = { ..._CanvasContext.defaultProps, ...props };
+      this.props = { ..._CanvasSurface.defaultProps, ...props };
       props = this.props;
       this.initialized = this._initializedResolvers.promise;
       if (!isBrowser()) {
@@ -2154,11 +2741,11 @@ or create a device with the 'debug: true' prop.`;
       } 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;
@@ -2174,33 +2761,20 @@ or create a device with the 'debug: true' prop.`;
       this.drawingBufferHeight = this.canvas.height;
       this.devicePixelRatio = globalThis.devicePixelRatio || 1;
       this._position = [0, 0];
-      if (_CanvasContext.isHTMLCanvas(this.canvas)) {
-        this._intersectionObserver = new IntersectionObserver(
-          (entries) => this._handleIntersection(entries)
-        );
-        this._intersectionObserver.observe(this.canvas);
-        this._resizeObserver = new ResizeObserver((entries) => this._handleResize(entries));
-        try {
-          this._resizeObserver.observe(this.canvas, { box: "device-pixel-content-box" });
-        } catch {
-          this._resizeObserver.observe(this.canvas, { box: "content-box" });
-        }
-        this._observeDevicePixelRatioTimeout = setTimeout(() => this._observeDevicePixelRatio(), 0);
-        if (this.props.trackPosition) {
-          this._trackPosition();
-        }
-      }
+      this._canvasObserver = new CanvasObserver({
+        canvas: this.htmlCanvas,
+        trackPosition: this.props.trackPosition,
+        onResize: (entries) => this._handleResize(entries),
+        onIntersection: (entries) => this._handleIntersection(entries),
+        onDevicePixelRatioChange: () => this._observeDevicePixelRatio(),
+        onPositionChange: () => this.updatePosition()
+      });
     }
     destroy() {
       if (!this.destroyed) {
         this.destroyed = true;
-        if (this._observeDevicePixelRatioTimeout) {
-          clearTimeout(this._observeDevicePixelRatioTimeout);
-          this._observeDevicePixelRatioTimeout = null;
-        }
+        this._stopObservers();
         this.device = null;
-        this._resizeObserver?.disconnect();
-        this._intersectionObserver?.disconnect();
       }
     }
     setProps(props) {
@@ -2215,41 +2789,22 @@ or create a device with the 'debug: true' prop.`;
       this._resizeDrawingBufferIfNeeded();
       return this._getCurrentFramebuffer(options);
     }
-    // SIZE METHODS
-    /**
-     * Returns the size covered by the canvas in CSS pixels
-     * @note This can be different from the actual device pixel size of a canvas due to DPR scaling, and rounding to integer pixels
-     * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
-     */
     getCSSSize() {
       return [this.cssWidth, this.cssHeight];
     }
     getPosition() {
       return this._position;
     }
-    /**
-     * Returns the size covered by the canvas in actual device pixels.
-     * @note This can be different from the 'CSS' size of a canvas due to DPR scaling, and rounding to integer pixels
-     * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
-     */
     getDevicePixelSize() {
       return [this.devicePixelWidth, this.devicePixelHeight];
     }
-    /** Get the drawing buffer size (number of pixels GPU is rendering into, can be different from CSS size) */
     getDrawingBufferSize() {
       return [this.drawingBufferWidth, this.drawingBufferHeight];
     }
-    /** Returns the biggest allowed framebuffer size. @todo Allow the application to limit this? */
     getMaxDrawingBufferSize() {
       const maxTextureDimension = this.device.limits.maxTextureDimension2D;
       return [maxTextureDimension, maxTextureDimension];
     }
-    /**
-     * Update the canvas drawing buffer size.
-     * @note - Called automatically if props.autoResize is true.
-     * @note - Defers update of drawing buffer size until framebuffer is requested to avoid flicker
-     * (resizing clears the drawing buffer)!
-     */
     setDrawingBufferSize(width, height) {
       width = Math.floor(width);
       height = Math.floor(height);
@@ -2260,19 +2815,10 @@ or create a device with the 'debug: true' prop.`;
       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();
@@ -2282,10 +2828,10 @@ or create a device with the 'debug: true' prop.`;
     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() {
@@ -2301,17 +2847,36 @@ or create a device with the 'debug: true' prop.`;
     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) {
       if (this.htmlCanvas?.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;
@@ -2326,11 +2891,6 @@ or create a device with the 'debug: true' prop.`;
         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) {
       if (this.destroyed) {
         return;
@@ -2351,12 +2911,14 @@ or create a device with the 'debug: true' prop.`;
       this._updateDrawingBufferSize();
       this.device.props.onResize(this, { oldPixelSize });
     }
-    /** Initiate a deferred update for the canvas drawing buffer size */
     _updateDrawingBufferSize() {
       if (this.props.autoResize) {
         if (typeof this.props.useDevicePixels === "number") {
-          const dpr = this.props.useDevicePixels;
-          this.setDrawingBufferSize(this.cssWidth * dpr, this.cssHeight * dpr);
+          const devicePixelRatio2 = this.props.useDevicePixels;
+          this.setDrawingBufferSize(
+            this.cssWidth * devicePixelRatio2,
+            this.cssHeight * devicePixelRatio2
+          );
         } else if (this.props.useDevicePixels) {
           this.setDrawingBufferSize(this.devicePixelWidth, this.devicePixelHeight);
         } else {
@@ -2367,7 +2929,6 @@ or create a device with the 'debug: true' prop.`;
       this.isInitialized = true;
       this.updatePosition();
     }
-    /** Perform a deferred resize of the drawing buffer if needed */
     _resizeDrawingBufferIfNeeded() {
       if (this._needsDrawingBufferResize) {
         this._needsDrawingBufferResize = false;
@@ -2379,36 +2940,17 @@ or create a device with the 'debug: true' prop.`;
         }
       }
     }
-    /** Monitor DPR changes */
     _observeDevicePixelRatio() {
-      if (this.destroyed) {
+      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);
+      this.device.props.onDevicePixelRatioChange?.(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() {
       if (this.destroyed) {
         return;
@@ -2421,13 +2963,15 @@ or create a device with the 'debug: true' prop.`;
         if (positionChanged) {
           const oldPosition = this._position;
           this._position = position;
-          this.device.props.onPositionChange?.(this, { oldPosition });
+          this.device.props.onPositionChange?.(this, {
+            oldPosition
+          });
         }
       }
     }
   };
-  var CanvasContext = _CanvasContext;
-  __publicField(CanvasContext, "defaultProps", {
+  var CanvasSurface = _CanvasSurface;
+  __publicField(CanvasSurface, "defaultProps", {
     id: void 0,
     canvas: null,
     width: 800,
@@ -2455,7 +2999,7 @@ or create a device with the 'debug: true' prop.`;
   }
   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;
@@ -2479,33 +3023,40 @@ or create a device with the 'debug: true' prop.`;
     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);
   }
 
+  // ../core/src/adapter/canvas-context.ts
+  var CanvasContext = class extends CanvasSurface {
+  };
+  __publicField(CanvasContext, "defaultProps", CanvasSurface.defaultProps);
+
+  // ../core/src/adapter/presentation-context.ts
+  var PresentationContext = class extends CanvasSurface {
+  };
+
   // ../core/src/adapter/resources/sampler.ts
   var _Sampler = class extends Resource {
     get [Symbol.toStringTag]() {
@@ -2560,6 +3111,8 @@ or create a device with the 'debug: true' prop.`;
     depth;
     /** mip levels in this texture */
     mipLevels;
+    /** sample count */
+    samples;
     /** Rows are multiples of this length, padded with extra bytes if needed */
     byteAlignment;
     /** The ready promise is always resolved. It is provided for type compatibility with DynamicTexture. */
@@ -2585,6 +3138,7 @@ or create a device with the 'debug: true' prop.`;
       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;
       }
@@ -2618,9 +3172,25 @@ or create a device with the 'debug: true' prop.`;
     setSampler(sampler) {
       this.sampler = sampler instanceof Sampler ? sampler : this.device.createSampler(sampler);
     }
+    /**
+     * Copy raw image data (bytes) into the texture.
+     *
+     * @note Deprecated compatibility wrapper over {@link writeData}.
+     * @note Uses the same layout defaults and alignment rules as {@link writeData}.
+     * @note Tightly packed CPU uploads can omit `bytesPerRow` and `rowsPerImage`.
+     * @note If the CPU source rows are padded, pass explicit `bytesPerRow` and `rowsPerImage`.
+     * @deprecated Use writeData()
+     */
+    copyImageData(options) {
+      const { data, depth, ...writeOptions } = options;
+      this.writeData(data, {
+        ...writeOptions,
+        depthOrArrayLayers: writeOptions.depthOrArrayLayers ?? depth
+      });
+    }
     /**
      * Calculates the memory layout of the texture, required when reading and writing data.
-     * @return the memory layout of the texture, in particular bytesPerRow which includes required padding
+     * @return the backend-aligned linear layout, in particular bytesPerRow which includes any required padding for buffer copy/read paths
      */
     computeMemoryLayout(options_ = {}) {
       const options = this._normalizeTextureReadOptions(options_);
@@ -2639,9 +3209,11 @@ or create a device with the 'debug: true' prop.`;
      * @returns A Buffer containing the texture data.
      *
      * @note The memory layout of the texture data is determined by the texture format and dimensions.
-     * @note The application can call Texture.computeMemoryLayout() to compute the layout.
-     * @note The application can call Buffer.readAsync()
-     * @note If not supplied a buffer will be created and the application needs to call Buffer.destroy
+     * @note The application can call Texture.computeMemoryLayout() to compute the backend-aligned layout.
+     * @note The application can call Buffer.readAsync() to read the returned buffer on the CPU.
+     * @note The destination buffer must be supplied by the caller and must be large enough for the requested region.
+     * @note On WebGPU this corresponds to a texture-to-buffer copy and uses buffer-copy alignment rules.
+     * @note On WebGL, luma.gl emulates the same logical readback behavior.
      */
     readBuffer(options, buffer) {
       throw new Error("readBuffer not implemented");
@@ -2652,15 +3224,20 @@ or create a device with the 'debug: true' prop.`;
      *
      * @note The memory layout of the texture data is determined by the texture format and dimensions.
      * @note The application can call Texture.computeMemoryLayout() to compute the layout.
+     * @deprecated Use Texture.readBuffer() with an explicit destination buffer, or DynamicTexture.readAsync() for convenience readback.
      */
     readDataAsync(options) {
       throw new Error("readBuffer not implemented");
     }
     /**
-     * Writes an GPU Buffer into a texture.
+     * Writes a GPU Buffer into a texture.
      *
+     * @param buffer - Source GPU buffer.
+     * @param options - Destination subresource, extent, and source layout options.
      * @note The memory layout of the texture data is determined by the texture format and dimensions.
-     * @note The application can call Texture.computeMemoryLayout() to compute the layout.
+     * @note The application can call Texture.computeMemoryLayout() to compute the backend-aligned layout.
+     * @note On WebGPU this corresponds to a buffer-to-texture copy and uses buffer-copy alignment rules.
+     * @note On WebGL, luma.gl emulates the same destination and layout semantics.
      */
     writeBuffer(buffer, options) {
       throw new Error("readBuffer not implemented");
@@ -2668,8 +3245,11 @@ or create a device with the 'debug: true' prop.`;
     /**
      * Writes an array buffer into a texture.
      *
-     * @note The memory layout of the texture data is determined by the texture format and dimensions.
-     * @note The application can call Texture.computeMemoryLayout() to compute the layout.
+     * @param data - Source texel data.
+     * @param options - Destination subresource, extent, and source layout options.
+     * @note If `bytesPerRow` and `rowsPerImage` are omitted, luma.gl computes a tightly packed CPU-memory layout for the requested region.
+     * @note On WebGPU this corresponds to `GPUQueue.writeTexture()` and does not implicitly pad rows to 256 bytes.
+     * @note On WebGL, padded CPU data is supported via the same `bytesPerRow` and `rowsPerImage` options.
      */
     writeData(data, options) {
       throw new Error("readBuffer not implemented");
@@ -2732,37 +3312,166 @@ or create a device with the 'debug: true' prop.`;
       }
     }
     _normalizeCopyImageDataOptions(options_) {
-      const { width, height, depth } = this;
-      const options = { ..._Texture.defaultCopyDataOptions, width, height, depth, ...options_ };
-      const info = this.device.getTextureFormatInfo(this.format);
-      if (!options_.bytesPerRow && !info.bytesPerPixel) {
-        throw new Error(`bytesPerRow must be provided for texture format ${this.format}`);
-      }
-      options.bytesPerRow = options_.bytesPerRow || width * (info.bytesPerPixel || 4);
-      options.rowsPerImage = options_.rowsPerImage || height;
-      return options;
+      const { data, depth, ...writeOptions } = options_;
+      const options = this._normalizeTextureWriteOptions({
+        ...writeOptions,
+        depthOrArrayLayers: writeOptions.depthOrArrayLayers ?? depth
+      });
+      return { data, depth: options.depthOrArrayLayers, ...options };
     }
     _normalizeCopyExternalImageOptions(options_) {
+      const optionsWithoutUndefined = _Texture._omitUndefined(options_);
+      const mipLevel = optionsWithoutUndefined.mipLevel ?? 0;
+      const mipLevelSize = this._getMipLevelSize(mipLevel);
       const size = this.device.getExternalImageSize(options_.image);
-      const options = { ..._Texture.defaultCopyExternalImageOptions, ...size, ...options_ };
-      options.width = Math.min(options.width, this.width - options.x);
-      options.height = Math.min(options.height, this.height - options.y);
+      const options = {
+        ..._Texture.defaultCopyExternalImageOptions,
+        ...mipLevelSize,
+        ...size,
+        ...optionsWithoutUndefined
+      };
+      options.width = Math.min(options.width, mipLevelSize.width - options.x);
+      options.height = Math.min(options.height, mipLevelSize.height - options.y);
+      options.depth = Math.min(options.depth, mipLevelSize.depthOrArrayLayers - options.z);
       return options;
     }
     _normalizeTextureReadOptions(options_) {
-      const { width, height } = this;
-      const options = { ..._Texture.defaultTextureReadOptions, width, height, ...options_ };
-      options.width = Math.min(options.width, this.width - options.x);
-      options.height = Math.min(options.height, this.height - options.y);
+      const optionsWithoutUndefined = _Texture._omitUndefined(options_);
+      const mipLevel = optionsWithoutUndefined.mipLevel ?? 0;
+      const mipLevelSize = this._getMipLevelSize(mipLevel);
+      const options = {
+        ..._Texture.defaultTextureReadOptions,
+        ...mipLevelSize,
+        ...optionsWithoutUndefined
+      };
+      options.width = Math.min(options.width, mipLevelSize.width - options.x);
+      options.height = Math.min(options.height, mipLevelSize.height - options.y);
+      options.depthOrArrayLayers = Math.min(
+        options.depthOrArrayLayers,
+        mipLevelSize.depthOrArrayLayers - options.z
+      );
       return options;
     }
+    /**
+     * Normalizes a texture read request and validates the color-only readback contract used by the
+     * current texture read APIs. Supported dimensions are `2d`, `cube`, `cube-array`,
+     * `2d-array`, and `3d`.
+     *
+     * @throws if the texture format, aspect, or dimension is not supported by the first-pass
+     * color-read implementation.
+     */
+    _getSupportedColorReadOptions(options_) {
+      const options = this._normalizeTextureReadOptions(options_);
+      const formatInfo = textureFormatDecoder.getInfo(this.format);
+      this._validateColorReadAspect(options);
+      this._validateColorReadFormat(formatInfo);
+      switch (this.dimension) {
+        case "2d":
+        case "cube":
+        case "cube-array":
+        case "2d-array":
+        case "3d":
+          return options;
+        default:
+          throw new Error(`${this} color readback does not support ${this.dimension} textures`);
+      }
+    }
+    /** Validates that a read request targets the full color aspect of the texture. */
+    _validateColorReadAspect(options) {
+      if (options.aspect !== "all") {
+        throw new Error(`${this} color readback only supports aspect 'all'`);
+      }
+    }
+    /** Validates that a read request targets an uncompressed color-renderable texture format. */
+    _validateColorReadFormat(formatInfo) {
+      if (formatInfo.compressed) {
+        throw new Error(
+          `${this} color readback does not support compressed formats (${this.format})`
+        );
+      }
+      switch (formatInfo.attachment) {
+        case "color":
+          return;
+        case "depth":
+          throw new Error(`${this} color readback does not support depth formats (${this.format})`);
+        case "stencil":
+          throw new Error(`${this} color readback does not support stencil formats (${this.format})`);
+        case "depth-stencil":
+          throw new Error(
+            `${this} color readback does not support depth-stencil formats (${this.format})`
+          );
+        default:
+          throw new Error(`${this} color readback does not support format ${this.format}`);
+      }
+    }
     _normalizeTextureWriteOptions(options_) {
-      const { width, height } = this;
-      const options = { ..._Texture.defaultTextureReadOptions, width, height, ...options_ };
-      options.width = Math.min(options.width, this.width - options.x);
-      options.height = Math.min(options.height, this.height - options.y);
+      const optionsWithoutUndefined = _Texture._omitUndefined(options_);
+      const mipLevel = optionsWithoutUndefined.mipLevel ?? 0;
+      const mipLevelSize = this._getMipLevelSize(mipLevel);
+      const options = {
+        ..._Texture.defaultTextureWriteOptions,
+        ...mipLevelSize,
+        ...optionsWithoutUndefined
+      };
+      options.width = Math.min(options.width, mipLevelSize.width - options.x);
+      options.height = Math.min(options.height, mipLevelSize.height - options.y);
+      options.depthOrArrayLayers = Math.min(
+        options.depthOrArrayLayers,
+        mipLevelSize.depthOrArrayLayers - options.z
+      );
+      const layout = textureFormatDecoder.computeMemoryLayout({
+        format: this.format,
+        width: options.width,
+        height: options.height,
+        depth: options.depthOrArrayLayers,
+        byteAlignment: this.byteAlignment
+      });
+      const minimumBytesPerRow = layout.bytesPerPixel * options.width;
+      options.bytesPerRow = optionsWithoutUndefined.bytesPerRow ?? layout.bytesPerRow;
+      options.rowsPerImage = optionsWithoutUndefined.rowsPerImage ?? options.height;
+      if (options.bytesPerRow < minimumBytesPerRow) {
+        throw new Error(
+          `bytesPerRow (${options.bytesPerRow}) must be at least ${minimumBytesPerRow} for ${this.format}`
+        );
+      }
+      if (options.rowsPerImage < options.height) {
+        throw new Error(
+          `rowsPerImage (${options.rowsPerImage}) must be at least ${options.height} for ${this.format}`
+        );
+      }
+      const bytesPerPixel = this.device.getTextureFormatInfo(this.format).bytesPerPixel;
+      if (bytesPerPixel && options.bytesPerRow % bytesPerPixel !== 0) {
+        throw new Error(
+          `bytesPerRow (${options.bytesPerRow}) must be a multiple of bytesPerPixel (${bytesPerPixel}) for ${this.format}`
+        );
+      }
       return options;
     }
+    _getMipLevelSize(mipLevel) {
+      const width = Math.max(1, this.width >> mipLevel);
+      const height = this.baseDimension === "1d" ? 1 : Math.max(1, this.height >> mipLevel);
+      const depthOrArrayLayers = this.dimension === "3d" ? Math.max(1, this.depth >> mipLevel) : this.depth;
+      return { width, height, depthOrArrayLayers };
+    }
+    getAllocatedByteLength() {
+      let allocatedByteLength = 0;
+      for (let mipLevel = 0; mipLevel < this.mipLevels; mipLevel++) {
+        const { width, height, depthOrArrayLayers } = this._getMipLevelSize(mipLevel);
+        allocatedByteLength += textureFormatDecoder.computeMemoryLayout({
+          format: this.format,
+          width,
+          height,
+          depth: depthOrArrayLayers,
+          byteAlignment: 1
+        }).byteLength;
+      }
+      return allocatedByteLength * this.samples;
+    }
+    static _omitUndefined(options) {
+      return Object.fromEntries(
+        Object.entries(options).filter(([, value]) => value !== void 0)
+      );
+    }
   };
   var Texture = _Texture;
   /** The texture can be bound for use as a sampled texture in a shader */
@@ -2798,6 +3507,10 @@ or create a device with the 'debug: true' prop.`;
     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,
@@ -2831,6 +3544,19 @@ or create a device with the 'debug: true' prop.`;
     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"
+  });
 
   // ../core/src/adapter/resources/texture-view.ts
   var _TextureView = class extends Resource {
@@ -3209,10 +3935,21 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     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() {
+      return this.linkStatus === "pending" || this.vs.compilationStatus === "pending" || this.fs?.compilationStatus === "pending";
+    }
+    /** Whether shader or pipeline compilation/linking has failed */
+    get isErrored() {
+      return this.linkStatus === "error" || this.vs.compilationStatus === "error" || this.fs?.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;
@@ -3230,10 +3967,507 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     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
   });
 
+  // ../core/src/adapter/resources/shared-render-pipeline.ts
+  var SharedRenderPipeline = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "SharedRenderPipeline";
+    }
+    constructor(device, props) {
+      super(device, props, {
+        ...Resource.defaultProps,
+        handle: void 0,
+        vs: void 0,
+        fs: void 0,
+        varyings: void 0,
+        bufferMode: void 0
+      });
+    }
+  };
+
+  // ../core/src/adapter/resources/compute-pipeline.ts
+  var _ComputePipeline = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "ComputePipeline";
+    }
+    hash = "";
+    /** The merged shader layout */
+    shaderLayout;
+    constructor(device, props) {
+      super(device, props, _ComputePipeline.defaultProps);
+      this.shaderLayout = props.shaderLayout;
+    }
+  };
+  var ComputePipeline = _ComputePipeline;
+  __publicField(ComputePipeline, "defaultProps", {
+    ...Resource.defaultProps,
+    shader: void 0,
+    entryPoint: void 0,
+    constants: {},
+    shaderLayout: void 0
+  });
+
+  // ../core/src/factories/pipeline-factory.ts
+  var _PipelineFactory = class {
+    /** Get the singleton default pipeline factory for the specified device */
+    static getDefaultPipelineFactory(device) {
+      const moduleData = device.getModuleData("@luma.gl/core");
+      moduleData.defaultPipelineFactory ||= new _PipelineFactory(device);
+      return moduleData.defaultPipelineFactory;
+    }
+    device;
+    _hashCounter = 0;
+    _hashes = {};
+    _renderPipelineCache = {};
+    _computePipelineCache = {};
+    _sharedRenderPipelineCache = {};
+    get [Symbol.toStringTag]() {
+      return "PipelineFactory";
+    }
+    toString() {
+      return `PipelineFactory(${this.device.id})`;
+    }
+    constructor(device) {
+      this.device = device;
+    }
+    /**
+     * WebGL has two cache layers with different priorities:
+     * - `_sharedRenderPipelineCache` owns `WEBGLSharedRenderPipeline` / `WebGLProgram` reuse.
+     * - `_renderPipelineCache` owns `RenderPipeline` wrapper reuse.
+     *
+     * Shared WebGL program reuse is the hard requirement. Wrapper reuse is beneficial,
+     * but wrapper cache misses are acceptable if that keeps the cache logic simple and
+     * prevents incorrect cache hits.
+     *
+     * In particular, wrapper hash logic must never force program creation or linked-program
+     * introspection just to decide whether a shared WebGL program can be reused.
+     */
+    /** Return a RenderPipeline matching supplied props. Reuses an equivalent pipeline if already created. */
+    createRenderPipeline(props) {
+      if (!this.device.props._cachePipelines) {
+        return this.device.createRenderPipeline(props);
+      }
+      const allProps = { ...RenderPipeline.defaultProps, ...props };
+      const cache = this._renderPipelineCache;
+      const hash = this._hashRenderPipeline(allProps);
+      let pipeline = cache[hash]?.resource;
+      if (!pipeline) {
+        const sharedRenderPipeline = this.device.type === "webgl" && this.device.props._sharePipelines ? this.createSharedRenderPipeline(allProps) : void 0;
+        pipeline = this.device.createRenderPipeline({
+          ...allProps,
+          id: allProps.id ? `${allProps.id}-cached` : uid("unnamed-cached"),
+          _sharedRenderPipeline: sharedRenderPipeline
+        });
+        pipeline.hash = hash;
+        cache[hash] = { resource: pipeline, useCount: 1 };
+        if (this.device.props.debugFactories) {
+          log.log(3, `${this}: ${pipeline} created, count=${cache[hash].useCount}`)();
+        }
+      } else {
+        cache[hash].useCount++;
+        if (this.device.props.debugFactories) {
+          log.log(
+            3,
+            `${this}: ${cache[hash].resource} reused, count=${cache[hash].useCount}, (id=${props.id})`
+          )();
+        }
+      }
+      return pipeline;
+    }
+    /** Return a ComputePipeline matching supplied props. Reuses an equivalent pipeline if already created. */
+    createComputePipeline(props) {
+      if (!this.device.props._cachePipelines) {
+        return this.device.createComputePipeline(props);
+      }
+      const allProps = { ...ComputePipeline.defaultProps, ...props };
+      const cache = this._computePipelineCache;
+      const hash = this._hashComputePipeline(allProps);
+      let pipeline = cache[hash]?.resource;
+      if (!pipeline) {
+        pipeline = this.device.createComputePipeline({
+          ...allProps,
+          id: allProps.id ? `${allProps.id}-cached` : void 0
+        });
+        pipeline.hash = hash;
+        cache[hash] = { resource: pipeline, useCount: 1 };
+        if (this.device.props.debugFactories) {
+          log.log(3, `${this}: ${pipeline} created, count=${cache[hash].useCount}`)();
+        }
+      } else {
+        cache[hash].useCount++;
+        if (this.device.props.debugFactories) {
+          log.log(
+            3,
+            `${this}: ${cache[hash].resource} reused, count=${cache[hash].useCount}, (id=${props.id})`
+          )();
+        }
+      }
+      return pipeline;
+    }
+    release(pipeline) {
+      if (!this.device.props._cachePipelines) {
+        pipeline.destroy();
+        return;
+      }
+      const cache = this._getCache(pipeline);
+      const hash = pipeline.hash;
+      cache[hash].useCount--;
+      if (cache[hash].useCount === 0) {
+        this._destroyPipeline(pipeline);
+        if (this.device.props.debugFactories) {
+          log.log(3, `${this}: ${pipeline} released and destroyed`)();
+        }
+      } else if (cache[hash].useCount < 0) {
+        log.error(`${this}: ${pipeline} released, useCount < 0, resetting`)();
+        cache[hash].useCount = 0;
+      } else if (this.device.props.debugFactories) {
+        log.log(3, `${this}: ${pipeline} released, count=${cache[hash].useCount}`)();
+      }
+    }
+    createSharedRenderPipeline(props) {
+      const sharedPipelineHash = this._hashSharedRenderPipeline(props);
+      let sharedCacheItem = this._sharedRenderPipelineCache[sharedPipelineHash];
+      if (!sharedCacheItem) {
+        const sharedRenderPipeline = this.device._createSharedRenderPipelineWebGL(props);
+        sharedCacheItem = { resource: sharedRenderPipeline, useCount: 0 };
+        this._sharedRenderPipelineCache[sharedPipelineHash] = sharedCacheItem;
+      }
+      sharedCacheItem.useCount++;
+      return sharedCacheItem.resource;
+    }
+    releaseSharedRenderPipeline(pipeline) {
+      if (!pipeline.sharedRenderPipeline) {
+        return;
+      }
+      const sharedPipelineHash = this._hashSharedRenderPipeline(pipeline.sharedRenderPipeline.props);
+      const sharedCacheItem = this._sharedRenderPipelineCache[sharedPipelineHash];
+      if (!sharedCacheItem) {
+        return;
+      }
+      sharedCacheItem.useCount--;
+      if (sharedCacheItem.useCount === 0) {
+        sharedCacheItem.resource.destroy();
+        delete this._sharedRenderPipelineCache[sharedPipelineHash];
+      }
+    }
+    // PRIVATE
+    /** Destroy a cached pipeline, removing it from the cache if configured to do so. */
+    _destroyPipeline(pipeline) {
+      const cache = this._getCache(pipeline);
+      if (!this.device.props._destroyPipelines) {
+        return false;
+      }
+      delete cache[pipeline.hash];
+      pipeline.destroy();
+      if (pipeline instanceof RenderPipeline) {
+        this.releaseSharedRenderPipeline(pipeline);
+      }
+      return true;
+    }
+    /** Get the appropriate cache for the type of pipeline */
+    _getCache(pipeline) {
+      let cache;
+      if (pipeline instanceof ComputePipeline) {
+        cache = this._computePipelineCache;
+      }
+      if (pipeline instanceof RenderPipeline) {
+        cache = this._renderPipelineCache;
+      }
+      if (!cache) {
+        throw new Error(`${this}`);
+      }
+      if (!cache[pipeline.hash]) {
+        throw new Error(`${this}: ${pipeline} matched incorrect entry`);
+      }
+      return cache;
+    }
+    /** Calculate a hash based on all the inputs for a compute pipeline */
+    _hashComputePipeline(props) {
+      const { type } = this.device;
+      const shaderHash = this._getHash(props.shader.source);
+      const shaderLayoutHash = this._getHash(JSON.stringify(props.shaderLayout));
+      return `${type}/C/${shaderHash}SL${shaderLayoutHash}`;
+    }
+    /** Calculate a hash based on all the inputs for a render pipeline */
+    _hashRenderPipeline(props) {
+      const vsHash = props.vs ? this._getHash(props.vs.source) : 0;
+      const fsHash = props.fs ? this._getHash(props.fs.source) : 0;
+      const varyingHash = this._getWebGLVaryingHash(props);
+      const shaderLayoutHash = this._getHash(JSON.stringify(props.shaderLayout));
+      const bufferLayoutHash = this._getHash(JSON.stringify(props.bufferLayout));
+      const { type } = this.device;
+      switch (type) {
+        case "webgl":
+          const webglParameterHash = this._getHash(JSON.stringify(props.parameters));
+          return `${type}/R/${vsHash}/${fsHash}V${varyingHash}T${props.topology}P${webglParameterHash}SL${shaderLayoutHash}BL${bufferLayoutHash}`;
+        case "webgpu":
+        default:
+          const entryPointHash = this._getHash(
+            JSON.stringify({
+              vertexEntryPoint: props.vertexEntryPoint,
+              fragmentEntryPoint: props.fragmentEntryPoint
+            })
+          );
+          const parameterHash = this._getHash(JSON.stringify(props.parameters));
+          const attachmentHash = this._getWebGPUAttachmentHash(props);
+          return `${type}/R/${vsHash}/${fsHash}V${varyingHash}T${props.topology}EP${entryPointHash}P${parameterHash}SL${shaderLayoutHash}BL${bufferLayoutHash}A${attachmentHash}`;
+      }
+    }
+    // This is the only gate for shared `WebGLProgram` reuse.
+    // Only include inputs that affect program linking or transform-feedback linkage.
+    // Wrapper-only concerns such as topology, parameters, attachment formats and layout
+    // overrides must not be added here.
+    _hashSharedRenderPipeline(props) {
+      const vsHash = props.vs ? this._getHash(props.vs.source) : 0;
+      const fsHash = props.fs ? this._getHash(props.fs.source) : 0;
+      const varyingHash = this._getWebGLVaryingHash(props);
+      return `webgl/S/${vsHash}/${fsHash}V${varyingHash}`;
+    }
+    _getHash(key) {
+      if (this._hashes[key] === void 0) {
+        this._hashes[key] = this._hashCounter++;
+      }
+      return this._hashes[key];
+    }
+    _getWebGLVaryingHash(props) {
+      const { varyings = [], bufferMode = null } = props;
+      return this._getHash(JSON.stringify({ varyings, bufferMode }));
+    }
+    _getWebGPUAttachmentHash(props) {
+      const colorAttachmentFormats = props.colorAttachmentFormats ?? [
+        this.device.preferredColorFormat
+      ];
+      const depthStencilAttachmentFormat = props.parameters?.depthWriteEnabled ? props.depthStencilAttachmentFormat || this.device.preferredDepthFormat : null;
+      return this._getHash(
+        JSON.stringify({
+          colorAttachmentFormats,
+          depthStencilAttachmentFormat
+        })
+      );
+    }
+  };
+  var PipelineFactory = _PipelineFactory;
+  __publicField(PipelineFactory, "defaultProps", { ...RenderPipeline.defaultProps });
+
+  // ../core/src/factories/shader-factory.ts
+  var _ShaderFactory = class {
+    /** Returns the default ShaderFactory for the given {@link Device}, creating one if necessary. */
+    static getDefaultShaderFactory(device) {
+      const moduleData = device.getModuleData("@luma.gl/core");
+      moduleData.defaultShaderFactory ||= new _ShaderFactory(device);
+      return moduleData.defaultShaderFactory;
+    }
+    device;
+    _cache = {};
+    get [Symbol.toStringTag]() {
+      return "ShaderFactory";
+    }
+    toString() {
+      return `${this[Symbol.toStringTag]}(${this.device.id})`;
+    }
+    /** @internal */
+    constructor(device) {
+      this.device = device;
+    }
+    /** Requests a {@link Shader} from the cache, creating a new Shader only if necessary. */
+    createShader(props) {
+      if (!this.device.props._cacheShaders) {
+        return this.device.createShader(props);
+      }
+      const key = this._hashShader(props);
+      let cacheEntry = this._cache[key];
+      if (!cacheEntry) {
+        const resource = this.device.createShader({
+          ...props,
+          id: props.id ? `${props.id}-cached` : void 0
+        });
+        this._cache[key] = cacheEntry = { resource, useCount: 1 };
+        if (this.device.props.debugFactories) {
+          log.log(3, `${this}: Created new shader ${resource.id}`)();
+        }
+      } else {
+        cacheEntry.useCount++;
+        if (this.device.props.debugFactories) {
+          log.log(
+            3,
+            `${this}: Reusing shader ${cacheEntry.resource.id} count=${cacheEntry.useCount}`
+          )();
+        }
+      }
+      return cacheEntry.resource;
+    }
+    /** Releases a previously-requested {@link Shader}, destroying it if no users remain. */
+    release(shader) {
+      if (!this.device.props._cacheShaders) {
+        shader.destroy();
+        return;
+      }
+      const key = this._hashShader(shader);
+      const cacheEntry = this._cache[key];
+      if (cacheEntry) {
+        cacheEntry.useCount--;
+        if (cacheEntry.useCount === 0) {
+          if (this.device.props._destroyShaders) {
+            delete this._cache[key];
+            cacheEntry.resource.destroy();
+            if (this.device.props.debugFactories) {
+              log.log(3, `${this}: Releasing shader ${shader.id}, destroyed`)();
+            }
+          }
+        } else if (cacheEntry.useCount < 0) {
+          throw new Error(`ShaderFactory: Shader ${shader.id} released too many times`);
+        } else if (this.device.props.debugFactories) {
+          log.log(3, `${this}: Releasing shader ${shader.id} count=${cacheEntry.useCount}`)();
+        }
+      }
+    }
+    // PRIVATE
+    _hashShader(value) {
+      return `${value.stage}:${value.source}`;
+    }
+  };
+  var ShaderFactory = _ShaderFactory;
+  __publicField(ShaderFactory, "defaultProps", { ...Shader.defaultProps });
+
+  // ../core/src/adapter-utils/bind-groups.ts
+  function getShaderLayoutBinding(shaderLayout, bindingName, options) {
+    const bindingLayout = shaderLayout.bindings.find(
+      (binding) => binding.name === bindingName || `${binding.name.toLocaleLowerCase()}uniforms` === bindingName.toLocaleLowerCase()
+    );
+    if (!bindingLayout && !options?.ignoreWarnings) {
+      log.warn(`Binding ${bindingName} not set: Not found in shader layout.`)();
+    }
+    return bindingLayout || null;
+  }
+  function normalizeBindingsByGroup(shaderLayout, bindingsOrBindGroups) {
+    if (!bindingsOrBindGroups) {
+      return {};
+    }
+    if (areBindingsGrouped(bindingsOrBindGroups)) {
+      const bindGroups2 = bindingsOrBindGroups;
+      return Object.fromEntries(
+        Object.entries(bindGroups2).map(([group, bindings]) => [Number(group), { ...bindings }])
+      );
+    }
+    const bindGroups = {};
+    for (const [bindingName, binding] of Object.entries(bindingsOrBindGroups)) {
+      const bindingLayout = getShaderLayoutBinding(shaderLayout, bindingName);
+      const group = bindingLayout?.group ?? 0;
+      bindGroups[group] ||= {};
+      bindGroups[group][bindingName] = binding;
+    }
+    return bindGroups;
+  }
+  function flattenBindingsByGroup(bindGroups) {
+    const bindings = {};
+    for (const groupBindings of Object.values(bindGroups)) {
+      Object.assign(bindings, groupBindings);
+    }
+    return bindings;
+  }
+  function areBindingsGrouped(bindingsOrBindGroups) {
+    const keys = Object.keys(bindingsOrBindGroups);
+    return keys.length > 0 && keys.every((key) => /^\d+$/.test(key));
+  }
+
+  // ../core/src/factories/bind-group-factory.ts
+  var BindGroupFactory = class {
+    device;
+    _layoutCacheByPipeline = /* @__PURE__ */ new WeakMap();
+    _bindGroupCacheByLayout = /* @__PURE__ */ new WeakMap();
+    constructor(device) {
+      this.device = device;
+    }
+    getBindGroups(pipeline, bindings, bindGroupCacheKeys) {
+      if (this.device.type !== "webgpu" || pipeline.shaderLayout.bindings.length === 0) {
+        return {};
+      }
+      const bindingsByGroup = normalizeBindingsByGroup(pipeline.shaderLayout, bindings);
+      const resolvedBindGroups = {};
+      for (const group of getBindGroupIndicesUpToMax(pipeline.shaderLayout.bindings)) {
+        const groupBindings = bindingsByGroup[group];
+        const bindGroupLayout = this._getBindGroupLayout(pipeline, group);
+        if (!groupBindings || Object.keys(groupBindings).length === 0) {
+          if (!hasBindingsInGroup(pipeline.shaderLayout.bindings, group)) {
+            resolvedBindGroups[group] = this._getEmptyBindGroup(
+              bindGroupLayout,
+              pipeline.shaderLayout,
+              group
+            );
+          }
+          continue;
+        }
+        const bindGroupCacheKey = bindGroupCacheKeys?.[group];
+        if (bindGroupCacheKey) {
+          const layoutCache = this._getLayoutBindGroupCache(bindGroupLayout);
+          if (layoutCache.bindGroupsBySource.has(bindGroupCacheKey)) {
+            resolvedBindGroups[group] = layoutCache.bindGroupsBySource.get(bindGroupCacheKey) || null;
+            continue;
+          }
+          const bindGroup = this.device._createBindGroupWebGPU(
+            bindGroupLayout,
+            pipeline.shaderLayout,
+            groupBindings,
+            group
+          );
+          layoutCache.bindGroupsBySource.set(bindGroupCacheKey, bindGroup);
+          resolvedBindGroups[group] = bindGroup;
+        } else {
+          resolvedBindGroups[group] = this.device._createBindGroupWebGPU(
+            bindGroupLayout,
+            pipeline.shaderLayout,
+            groupBindings,
+            group
+          );
+        }
+      }
+      return resolvedBindGroups;
+    }
+    _getBindGroupLayout(pipeline, group) {
+      let layoutCache = this._layoutCacheByPipeline.get(pipeline);
+      if (!layoutCache) {
+        layoutCache = {};
+        this._layoutCacheByPipeline.set(pipeline, layoutCache);
+      }
+      layoutCache[group] ||= this.device._createBindGroupLayoutWebGPU(pipeline, group);
+      return layoutCache[group];
+    }
+    _getEmptyBindGroup(bindGroupLayout, shaderLayout, group) {
+      const layoutCache = this._getLayoutBindGroupCache(bindGroupLayout);
+      layoutCache.emptyBindGroup ||= this.device._createBindGroupWebGPU(bindGroupLayout, shaderLayout, {}, group) || null;
+      return layoutCache.emptyBindGroup;
+    }
+    _getLayoutBindGroupCache(bindGroupLayout) {
+      let layoutCache = this._bindGroupCacheByLayout.get(bindGroupLayout);
+      if (!layoutCache) {
+        layoutCache = { bindGroupsBySource: /* @__PURE__ */ new WeakMap() };
+        this._bindGroupCacheByLayout.set(bindGroupLayout, layoutCache);
+      }
+      return layoutCache;
+    }
+  };
+  function _getDefaultBindGroupFactory(device) {
+    device._factories.bindGroupFactory ||= new BindGroupFactory(device);
+    return device._factories.bindGroupFactory;
+  }
+  function getBindGroupIndicesUpToMax(bindings) {
+    const maxGroup = bindings.reduce(
+      (highestGroup, binding) => Math.max(highestGroup, binding.group),
+      -1
+    );
+    return Array.from({ length: maxGroup + 1 }, (_, group) => group);
+  }
+  function hasBindingsInGroup(bindings, group) {
+    return bindings.some((binding) => binding.group === group);
+  }
+
   // ../core/src/adapter/resources/render-pass.ts
   var _RenderPass = class extends Resource {
     get [Symbol.toStringTag]() {
@@ -3272,28 +4506,6 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     endTimestampIndex: void 0
   });
 
-  // ../core/src/adapter/resources/compute-pipeline.ts
-  var _ComputePipeline = class extends Resource {
-    get [Symbol.toStringTag]() {
-      return "ComputePipeline";
-    }
-    hash = "";
-    /** The merged shader layout */
-    shaderLayout;
-    constructor(device, props) {
-      super(device, props, _ComputePipeline.defaultProps);
-      this.shaderLayout = props.shaderLayout;
-    }
-  };
-  var ComputePipeline = _ComputePipeline;
-  __publicField(ComputePipeline, "defaultProps", {
-    ...Resource.defaultProps,
-    shader: void 0,
-    entryPoint: void 0,
-    constants: {},
-    shaderLayout: void 0
-  });
-
   // ../core/src/adapter/resources/compute-pass.ts
   var _ComputePass = class extends Resource {
     constructor(device, props) {
@@ -3316,8 +4528,69 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     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;
@@ -3326,7 +4599,8 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
   // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
   __publicField(CommandEncoder, "defaultProps", {
     ...Resource.defaultProps,
-    measureExecutionTime: void 0
+    measureExecutionTime: void 0,
+    timeProfilingQuerySet: void 0
   });
 
   // ../core/src/adapter/resources/command-buffer.ts
@@ -3343,13 +4617,22 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     ...Resource.defaultProps
   });
 
-  // ../core/src/shadertypes/data-types/decode-shader-types.ts
+  // ../core/src/shadertypes/shader-types/shader-type-decoder.ts
   function getVariableShaderTypeInfo(format) {
-    const 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;
@@ -3361,6 +4644,33 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
       signed
     };
   }
+  var ShaderTypeDecoder = class {
+    getVariableShaderTypeInfo(format) {
+      return getVariableShaderTypeInfo(format);
+    }
+    getAttributeShaderTypeInfo(attributeType) {
+      return getAttributeShaderTypeInfo(attributeType);
+    }
+    makeShaderAttributeType(primitiveType, components) {
+      return makeShaderAttributeType(primitiveType, components);
+    }
+    resolveAttributeShaderTypeAlias(alias) {
+      return resolveAttributeShaderTypeAlias(alias);
+    }
+    resolveVariableShaderTypeAlias(alias) {
+      return resolveVariableShaderTypeAlias(alias);
+    }
+  };
+  function makeShaderAttributeType(primitiveType, components) {
+    return components === 1 ? primitiveType : `vec${components}<${primitiveType}>`;
+  }
+  function resolveAttributeShaderTypeAlias(alias) {
+    return WGSL_ATTRIBUTE_TYPE_ALIAS_MAP[alias] || alias;
+  }
+  function resolveVariableShaderTypeAlias(alias) {
+    return WGSL_VARIABLE_TYPE_ALIAS_MAP[alias] || alias;
+  }
+  var shaderTypeDecoder = new ShaderTypeDecoder();
   var PRIMITIVE_TYPE_SIZES = {
     f32: 4,
     f16: 2,
@@ -3457,7 +4767,18 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     vec4h: "vec4<f16>"
   };
   var WGSL_VARIABLE_TYPE_ALIAS_MAP = {
-    ...WGSL_ATTRIBUTE_TYPE_ALIAS_MAP,
+    vec2i: "vec2<i32>",
+    vec3i: "vec3<i32>",
+    vec4i: "vec4<i32>",
+    vec2u: "vec2<u32>",
+    vec3u: "vec3<u32>",
+    vec4u: "vec4<u32>",
+    vec2f: "vec2<f32>",
+    vec3f: "vec3<f32>",
+    vec4f: "vec4<f32>",
+    vec2h: "vec2<f16>",
+    vec3h: "vec3<f16>",
+    vec4h: "vec4<f16>",
     mat2x2f: "mat2x2<f32>",
     mat2x3f: "mat2x3<f32>",
     mat2x4f: "mat2x4<f32>",
@@ -3524,10 +4845,10 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     if (!shaderDeclaration) {
       return null;
     }
-    const attributeTypeInfo = getAttributeShaderTypeInfo(shaderDeclaration.type);
-    const defaultVertexFormat = getCompatibleVertexFormat(attributeTypeInfo);
+    const attributeTypeInfo = shaderTypeDecoder.getAttributeShaderTypeInfo(shaderDeclaration.type);
+    const defaultVertexFormat = vertexFormatDecoder.getCompatibleVertexFormat(attributeTypeInfo);
     const vertexFormat = bufferMapping?.vertexFormat || defaultVertexFormat;
-    const vertexFormatInfo = getVertexFormatInfo(vertexFormat);
+    const vertexFormatInfo = vertexFormatDecoder.getVertexFormatInfo(vertexFormat);
     return {
       attributeName: bufferMapping?.attributeName || shaderDeclaration.name,
       bufferName: bufferMapping?.bufferName || shaderDeclaration.name,
@@ -3595,7 +4916,7 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
       let byteStride = bufferLayout.byteStride;
       if (typeof bufferLayout.byteStride !== "number") {
         for (const attributeMapping2 of bufferLayout.attributes || []) {
-          const info = getVertexFormatInfo(attributeMapping2.format);
+          const info = vertexFormatDecoder.getVertexFormatInfo(attributeMapping2.format);
           byteStride += info.byteLength;
         }
       }
@@ -3685,7 +5006,9 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
 
   // ../core/src/adapter/resources/fence.ts
   var _Fence = class extends Resource {
-    [Symbol.toStringTag] = "WEBGLFence";
+    get [Symbol.toStringTag]() {
+      return "Fence";
+    }
     constructor(device, props = {}) {
       super(device, props, _Fence.defaultProps);
     }
@@ -3713,6 +5036,36 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     }
   });
 
+  // ../core/src/shadertypes/data-types/decode-data-types.ts
+  function alignTo(size, count) {
+    switch (count) {
+      case 1:
+        return size;
+      case 2:
+        return size + size % 2;
+      default:
+        return size + (4 - size % 4) % 4;
+    }
+  }
+  function getTypedArrayConstructor(type) {
+    const [, , , , Constructor] = NORMALIZED_TYPE_MAP2[type];
+    return Constructor;
+  }
+  var NORMALIZED_TYPE_MAP2 = {
+    uint8: ["uint8", "u32", 1, false, Uint8Array],
+    sint8: ["sint8", "i32", 1, false, Int8Array],
+    unorm8: ["uint8", "f32", 1, true, Uint8Array],
+    snorm8: ["sint8", "f32", 1, true, Int8Array],
+    uint16: ["uint16", "u32", 2, false, Uint16Array],
+    sint16: ["sint16", "i32", 2, false, Int16Array],
+    unorm16: ["uint16", "u32", 2, true, Uint16Array],
+    snorm16: ["sint16", "i32", 2, true, Int16Array],
+    float16: ["float16", "f16", 2, false, Uint16Array],
+    float32: ["float32", "f32", 4, false, Float32Array],
+    uint32: ["uint32", "u32", 4, false, Uint32Array],
+    sint32: ["sint32", "i32", 4, false, Int32Array]
+  };
+
   // ../core/src/utils/array-utils-flat.ts
   var arrayBuffer;
   function getScratchArrayBuffer(byteLength) {
@@ -3726,19 +5079,32 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     return new Type(scratchArrayBuffer, 0, length);
   }
 
+  // ../core/src/utils/is-array.ts
+  function isTypedArray(value) {
+    return ArrayBuffer.isView(value) && !(value instanceof DataView);
+  }
+  function isNumberArray(value) {
+    if (Array.isArray(value)) {
+      return value.length === 0 || typeof value[0] === "number";
+    }
+    return isTypedArray(value);
+  }
+
   // ../core/src/portable/uniform-buffer-layout.ts
   var minBufferSize = 1024;
   var UniformBufferLayout = class {
     layout = {};
+    uniformTypes;
     /** number of bytes needed for buffer allocation */
     byteLength;
     /** Create a new UniformBufferLayout given a map of attributes. */
-    constructor(uniformTypes, uniformSizes = {}) {
+    constructor(uniformTypes) {
+      this.uniformTypes = { ...uniformTypes };
       let size = 0;
-      for (const [key, uniformType] of Object.entries(uniformTypes)) {
-        size = this._addToLayout(key, uniformType, size, uniformSizes?.[key]);
+      for (const [key, uniformType] of Object.entries(this.uniformTypes)) {
+        size = this._addToLayout(key, uniformType, size);
       }
-      size += (4 - size % 4) % 4;
+      size = alignTo(size, 4);
       this.byteLength = Math.max(size * 4, minBufferSize);
     }
     /** Does this layout have a field with specified name */
@@ -3750,115 +5116,264 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
       const layout = this.layout[name2];
       return layout;
     }
+    /** Flatten nested uniform values into leaf-path values understood by UniformBlock. */
+    getFlatUniformValues(uniformValues) {
+      const flattenedUniformValues = {};
+      for (const [name2, value] of Object.entries(uniformValues)) {
+        const uniformType = this.uniformTypes[name2];
+        if (uniformType) {
+          this._flattenCompositeValue(flattenedUniformValues, name2, uniformType, value);
+        } else if (this.layout[name2]) {
+          flattenedUniformValues[name2] = value;
+        }
+      }
+      return flattenedUniformValues;
+    }
     /** Get the data for the complete buffer */
     getData(uniformValues) {
       const buffer = getScratchArrayBuffer(this.byteLength);
+      new Uint8Array(buffer, 0, this.byteLength).fill(0);
       const typedArrays = {
         i32: new Int32Array(buffer),
         u32: new Uint32Array(buffer),
         f32: new Float32Array(buffer),
         f16: new Uint16Array(buffer)
       };
-      for (const [name2, value] of Object.entries(uniformValues)) {
-        this._writeCompositeValue(typedArrays, name2, value);
+      const flattenedUniformValues = this.getFlatUniformValues(uniformValues);
+      for (const [name2, value] of Object.entries(flattenedUniformValues)) {
+        this._writeLeafValue(typedArrays, name2, value);
       }
       return new Uint8Array(buffer, 0, this.byteLength);
     }
     // Recursively add a uniform to the layout
-    _addToLayout(name2, type, offset, count = 1) {
+    _addToLayout(name2, type, offset) {
       if (typeof type === "string") {
-        const info = getVariableShaderTypeInfo(type);
-        const sizeInSlots = info.components * count;
-        const alignedOffset = alignTo(offset, info.components);
+        const info = getLeafLayoutInfo(type);
+        const alignedOffset = alignTo(offset, info.alignment);
         this.layout[name2] = {
           offset: alignedOffset,
-          size: sizeInSlots,
-          type: info.type
+          ...info
         };
-        return alignedOffset + sizeInSlots;
+        return alignedOffset + info.size;
       }
       if (Array.isArray(type)) {
+        if (Array.isArray(type[0])) {
+          throw new Error(`Nested arrays are not supported for ${name2}`);
+        }
         const elementType = type[0];
-        const length = count > 1 ? count : type.length > 1 ? type[1] : 1;
-        let arrayOffset = alignTo(offset, 4);
+        const length = type[1];
+        const stride = alignTo(getTypeSize(elementType), 4);
+        const arrayOffset = alignTo(offset, 4);
         for (let i = 0; i < length; i++) {
-          arrayOffset = this._addToLayout(`${name2}[${i}]`, elementType, arrayOffset);
+          this._addToLayout(`${name2}[${i}]`, elementType, arrayOffset + i * stride);
         }
-        return arrayOffset;
+        return arrayOffset + stride * length;
       }
-      if (typeof type === "object") {
+      if (isCompositeShaderTypeStruct(type)) {
         let structOffset = alignTo(offset, 4);
         for (const [memberName, memberType] of Object.entries(type)) {
           structOffset = this._addToLayout(`${name2}.${memberName}`, memberType, structOffset);
         }
-        return structOffset;
+        return alignTo(structOffset, 4);
       }
       throw new Error(`Unsupported CompositeShaderType for ${name2}`);
     }
-    _writeCompositeValue(typedArrays, baseName, value) {
-      if (this.layout[baseName]) {
-        this._writeToBuffer(typedArrays, baseName, value);
+    _flattenCompositeValue(flattenedUniformValues, baseName, uniformType, value) {
+      if (value === void 0) {
+        return;
+      }
+      if (typeof uniformType === "string" || this.layout[baseName]) {
+        flattenedUniformValues[baseName] = value;
         return;
       }
-      if (Array.isArray(value)) {
-        for (let i = 0; i < value.length; i++) {
-          const element = value[i];
-          const indexedName = `${baseName}[${i}]`;
-          this._writeCompositeValue(typedArrays, indexedName, element);
+      if (Array.isArray(uniformType)) {
+        const elementType = uniformType[0];
+        const length = uniformType[1];
+        if (Array.isArray(elementType)) {
+          throw new Error(`Nested arrays are not supported for ${baseName}`);
+        }
+        if (typeof elementType === "string" && isNumberArray(value)) {
+          this._flattenPackedArray(flattenedUniformValues, baseName, elementType, length, value);
+          return;
+        }
+        if (!Array.isArray(value)) {
+          log.warn(`Unsupported uniform array value for ${baseName}:`, value)();
+          return;
+        }
+        for (let index = 0; index < Math.min(value.length, length); index++) {
+          const elementValue = value[index];
+          if (elementValue === void 0) {
+            continue;
+          }
+          this._flattenCompositeValue(
+            flattenedUniformValues,
+            `${baseName}[${index}]`,
+            elementType,
+            elementValue
+          );
         }
         return;
       }
-      if (typeof value === "object" && value !== null) {
+      if (isCompositeShaderTypeStruct(uniformType) && isCompositeUniformObject(value)) {
         for (const [key, subValue] of Object.entries(value)) {
+          if (subValue === void 0) {
+            continue;
+          }
           const nestedName = `${baseName}.${key}`;
-          this._writeCompositeValue(typedArrays, nestedName, subValue);
+          this._flattenCompositeValue(flattenedUniformValues, nestedName, uniformType[key], subValue);
         }
         return;
       }
       log.warn(`Unsupported uniform value for ${baseName}:`, value)();
     }
-    _writeToBuffer(typedArrays, name2, value) {
+    _flattenPackedArray(flattenedUniformValues, baseName, elementType, length, value) {
+      const numericValue = value;
+      const elementLayout = getLeafLayoutInfo(elementType);
+      const packedElementLength = elementLayout.components;
+      for (let index = 0; index < length; index++) {
+        const start = index * packedElementLength;
+        if (start >= numericValue.length) {
+          break;
+        }
+        if (packedElementLength === 1) {
+          flattenedUniformValues[`${baseName}[${index}]`] = Number(numericValue[start]);
+        } else {
+          flattenedUniformValues[`${baseName}[${index}]`] = sliceNumericArray(
+            value,
+            start,
+            start + packedElementLength
+          );
+        }
+      }
+    }
+    _writeLeafValue(typedArrays, name2, value) {
       const layout = this.layout[name2];
       if (!layout) {
         log.warn(`Uniform ${name2} not found in layout`)();
         return;
       }
-      const { type, size, offset } = layout;
+      const { type, components, columns, rows, offset } = layout;
       const array = typedArrays[type];
-      if (size === 1) {
+      if (components === 1) {
         array[offset] = Number(value);
-      } else {
-        array.set(value, offset);
+        return;
+      }
+      const sourceValue = value;
+      if (columns === 1) {
+        for (let componentIndex = 0; componentIndex < components; componentIndex++) {
+          array[offset + componentIndex] = Number(sourceValue[componentIndex] ?? 0);
+        }
+        return;
+      }
+      let sourceIndex = 0;
+      for (let columnIndex = 0; columnIndex < columns; columnIndex++) {
+        const columnOffset = offset + columnIndex * 4;
+        for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
+          array[columnOffset + rowIndex] = Number(sourceValue[sourceIndex++] ?? 0);
+        }
       }
     }
   };
-
-  // ../core/src/utils/is-array.ts
-  function isTypedArray(value) {
-    return ArrayBuffer.isView(value) && !(value instanceof DataView);
+  function getTypeSize(type) {
+    if (typeof type === "string") {
+      return getLeafLayoutInfo(type).size;
+    }
+    if (Array.isArray(type)) {
+      const elementType = type[0];
+      const length = type[1];
+      if (Array.isArray(elementType)) {
+        throw new Error("Nested arrays are not supported");
+      }
+      return alignTo(getTypeSize(elementType), 4) * length;
+    }
+    let size = 0;
+    for (const memberType of Object.values(type)) {
+      const compositeMemberType = memberType;
+      size = alignTo(size, getTypeAlignment(compositeMemberType));
+      size += getTypeSize(compositeMemberType);
+    }
+    return alignTo(size, 4);
   }
-  function isNumberArray(value) {
-    if (Array.isArray(value)) {
-      return value.length === 0 || typeof value[0] === "number";
+  function getTypeAlignment(type) {
+    if (typeof type === "string") {
+      return getLeafLayoutInfo(type).alignment;
     }
-    return isTypedArray(value);
+    if (Array.isArray(type)) {
+      return 4;
+    }
+    return 4;
+  }
+  function getLeafLayoutInfo(type) {
+    const resolvedType = resolveVariableShaderTypeAlias(type);
+    const decodedType = getVariableShaderTypeInfo(resolvedType);
+    const matrixMatch = /^mat(\d)x(\d)<.+>$/.exec(resolvedType);
+    if (matrixMatch) {
+      const columns = Number(matrixMatch[1]);
+      const rows = Number(matrixMatch[2]);
+      return {
+        alignment: 4,
+        size: columns * 4,
+        components: columns * rows,
+        columns,
+        rows,
+        shaderType: resolvedType,
+        type: decodedType.type
+      };
+    }
+    const vectorMatch = /^vec(\d)<.+>$/.exec(resolvedType);
+    if (vectorMatch) {
+      const components = Number(vectorMatch[1]);
+      return {
+        alignment: components === 2 ? 2 : 4,
+        size: components === 3 ? 4 : components,
+        components,
+        columns: 1,
+        rows: components,
+        shaderType: resolvedType,
+        type: decodedType.type
+      };
+    }
+    return {
+      alignment: 1,
+      size: 1,
+      components: 1,
+      columns: 1,
+      rows: 1,
+      shaderType: resolvedType,
+      type: decodedType.type
+    };
+  }
+  function isCompositeShaderTypeStruct(value) {
+    return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+  }
+  function isCompositeUniformObject(value) {
+    return Boolean(value) && typeof value === "object" && !Array.isArray(value) && !ArrayBuffer.isView(value);
+  }
+  function sliceNumericArray(value, start, end) {
+    return Array.prototype.slice.call(value, start, end);
   }
 
   // ../core/src/utils/array-equal.ts
+  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;
@@ -3937,13 +5452,12 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     constructor(blocks) {
       for (const [bufferName, block] of Object.entries(blocks)) {
         const uniformBufferName = bufferName;
-        const uniformBufferLayout = new UniformBufferLayout(
-          block.uniformTypes ?? {},
-          block.uniformSizes ?? {}
-        );
+        const uniformBufferLayout = new UniformBufferLayout(block.uniformTypes ?? {});
         this.uniformBufferLayouts.set(uniformBufferName, uniformBufferLayout);
         const uniformBlock = new UniformBlock({ name: bufferName });
-        uniformBlock.setUniforms(block.defaultUniforms || {});
+        uniformBlock.setUniforms(
+          uniformBufferLayout.getFlatUniformValues(block.defaultUniforms || {})
+        );
         this.uniformBlocks.set(uniformBufferName, uniformBlock);
       }
     }
@@ -3959,7 +5473,12 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
      */
     setUniforms(uniforms) {
       for (const [blockName, uniformValues] of Object.entries(uniforms)) {
-        this.uniformBlocks.get(blockName)?.setUniforms(uniformValues);
+        const uniformBufferName = blockName;
+        const uniformBufferLayout = this.uniformBufferLayouts.get(uniformBufferName);
+        const flattenedUniforms = uniformBufferLayout?.getFlatUniformValues(
+          uniformValues || {}
+        );
+        this.uniformBlocks.get(uniformBufferName)?.setUniforms(flattenedUniforms || {});
       }
       this.updateUniformBuffers();
     }
@@ -4035,7 +5554,7 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     }
   };
 
-  // ../core/src/shadertypes/textures/texture-layout.ts
+  // ../core/src/shadertypes/texture-types/texture-layout.ts
   function getTextureImageView(arrayBuffer2, memoryLayout, format, image = 0) {
     const formatInfo = textureFormatDecoder.getInfo(format);
     const bytesPerComponent = formatInfo.bytesPerPixel / formatInfo.components;
@@ -4073,7 +5592,7 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     typedArray.set(subArray, offset);
   }
 
-  // ../core/src/shadertypes/textures/pixel-utils.ts
+  // ../core/src/shadertypes/texture-types/pixel-utils.ts
   function readPixel(pixelData, x, y, bitsPerChannel) {
     if (x < 0 || x >= pixelData.width || y < 0 || y >= pixelData.height) {
       throw new Error("Coordinates out of bounds.");