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

package/dist/dist.dev.js

@@ -43,39 +43,51 @@ var __exports__ = (() => {
     DeviceFeatures: () => DeviceFeatures,
     DeviceLimits: () => DeviceLimits,
     ExternalTexture: () => ExternalTexture,
+    Fence: () => Fence,
     Framebuffer: () => Framebuffer,
+    PipelineFactory: () => PipelineFactory,
     PipelineLayout: () => PipelineLayout,
+    PresentationContext: () => PresentationContext,
     QuerySet: () => QuerySet,
     RenderPass: () => RenderPass,
     RenderPipeline: () => RenderPipeline,
     Resource: () => Resource,
     Sampler: () => Sampler,
     Shader: () => Shader,
+    ShaderBlockWriter: () => ShaderBlockWriter,
+    ShaderFactory: () => ShaderFactory,
+    SharedRenderPipeline: () => SharedRenderPipeline,
     Texture: () => Texture,
-    TextureFormatDecoder: () => TextureFormatDecoder,
     TextureView: () => TextureView,
     TransformFeedback: () => TransformFeedback,
     UniformBlock: () => UniformBlock,
-    UniformBufferLayout: () => UniformBufferLayout,
     UniformStore: () => UniformStore,
     VertexArray: () => VertexArray,
+    _getDefaultBindGroupFactory: () => _getDefaultBindGroupFactory,
     _getTextureFormatDefinition: () => getTextureFormatDefinition,
     _getTextureFormatTable: () => getTextureFormatTable,
+    assert: () => assert2,
+    assertDefined: () => assertDefined,
+    dataTypeDecoder: () => dataTypeDecoder,
+    flattenBindingsByGroup: () => flattenBindingsByGroup,
     getAttributeInfosFromLayouts: () => getAttributeInfosFromLayouts,
     getAttributeShaderTypeInfo: () => getAttributeShaderTypeInfo,
-    getDataType: () => getDataType,
-    getDataTypeInfo: () => getDataTypeInfo,
-    getNormalizedDataType: () => getNormalizedDataType,
+    getExternalImageSize: () => getExternalImageSize,
     getScratchArray: () => getScratchArray,
+    getShaderLayoutBinding: () => getShaderLayoutBinding,
+    getTextureImageView: () => getTextureImageView,
     getTypedArrayConstructor: () => getTypedArrayConstructor,
     getVariableShaderTypeInfo: () => getVariableShaderTypeInfo,
-    getVertexFormatFromAttribute: () => getVertexFormatFromAttribute,
-    getVertexFormatInfo: () => getVertexFormatInfo,
+    isExternalImage: () => isExternalImage,
     log: () => log,
     luma: () => luma,
-    makeVertexFormat: () => makeVertexFormat,
+    makeShaderBlockLayout: () => makeShaderBlockLayout,
+    normalizeBindingsByGroup: () => normalizeBindingsByGroup,
     readPixel: () => readPixel,
+    setTextureImageData: () => setTextureImageData,
+    shaderTypeDecoder: () => shaderTypeDecoder,
     textureFormatDecoder: () => textureFormatDecoder,
+    vertexFormatDecoder: () => vertexFormatDecoder,
     writePixel: () => writePixel
   });
 
@@ -273,6 +285,24 @@ var __exports__ = (() => {
   };
 
   // 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) {
@@ -282,10 +312,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;
@@ -317,7 +387,139 @@ var __exports__ = (() => {
   }
 
   // ../../node_modules/@probe.gl/env/dist/index.js
-  var VERSION = true ? "4.1.0" : "untranspiled source";
+  var VERSION = true ? "4.1.1" : "untranspiled source";
+
+  // ../../node_modules/@probe.gl/log/dist/utils/assert.js
+  function assert(condition, message) {
+    if (!condition) {
+      throw new Error(message || "Assertion failed");
+    }
+  }
+
+  // ../../node_modules/@probe.gl/log/dist/loggers/log-utils.js
+  function normalizeLogLevel(logLevel) {
+    if (!logLevel) {
+      return 0;
+    }
+    let resolvedLevel;
+    switch (typeof logLevel) {
+      case "number":
+        resolvedLevel = logLevel;
+        break;
+      case "object":
+        resolvedLevel = logLevel.logLevel || logLevel.priority || 0;
+        break;
+      default:
+        return 0;
+    }
+    assert(Number.isFinite(resolvedLevel) && resolvedLevel >= 0);
+    return resolvedLevel;
+  }
+  function normalizeArguments(opts) {
+    const { logLevel, message } = opts;
+    opts.logLevel = normalizeLogLevel(logLevel);
+    const args = opts.args ? Array.from(opts.args) : [];
+    while (args.length && args.shift() !== message) {
+    }
+    switch (typeof logLevel) {
+      case "string":
+      case "function":
+        if (message !== void 0) {
+          args.unshift(message);
+        }
+        opts.message = logLevel;
+        break;
+      case "object":
+        Object.assign(opts, logLevel);
+        break;
+      default:
+    }
+    if (typeof opts.message === "function") {
+      opts.message = opts.message();
+    }
+    const messageType = typeof opts.message;
+    assert(messageType === "string" || messageType === "object");
+    return Object.assign(opts, { args }, opts.opts);
+  }
+
+  // ../../node_modules/@probe.gl/log/dist/loggers/base-log.js
+  var noop = () => {
+  };
+  var BaseLog = class {
+    constructor({ level = 0 } = {}) {
+      this.userData = {};
+      this._onceCache = /* @__PURE__ */ new Set();
+      this._level = level;
+    }
+    set level(newLevel) {
+      this.setLevel(newLevel);
+    }
+    get level() {
+      return this.getLevel();
+    }
+    setLevel(level) {
+      this._level = level;
+      return this;
+    }
+    getLevel() {
+      return this._level;
+    }
+    // Unconditional logging
+    warn(message, ...args) {
+      return this._log("warn", 0, message, args, { once: true });
+    }
+    error(message, ...args) {
+      return this._log("error", 0, message, args);
+    }
+    // Conditional logging
+    log(logLevel, message, ...args) {
+      return this._log("log", logLevel, message, args);
+    }
+    info(logLevel, message, ...args) {
+      return this._log("info", logLevel, message, args);
+    }
+    once(logLevel, message, ...args) {
+      return this._log("once", logLevel, message, args, { once: true });
+    }
+    _log(type, logLevel, message, args, options = {}) {
+      const normalized = normalizeArguments({
+        logLevel,
+        message,
+        args: this._buildArgs(logLevel, message, args),
+        opts: options
+      });
+      return this._createLogFunction(type, normalized, options);
+    }
+    _buildArgs(logLevel, message, args) {
+      return [logLevel, message, ...args];
+    }
+    _createLogFunction(type, normalized, options) {
+      if (!this._shouldLog(normalized.logLevel)) {
+        return noop;
+      }
+      const tag = this._getOnceTag(options.tag ?? normalized.tag ?? normalized.message);
+      if ((options.once || normalized.once) && tag !== void 0) {
+        if (this._onceCache.has(tag)) {
+          return noop;
+        }
+        this._onceCache.add(tag);
+      }
+      return this._emit(type, normalized);
+    }
+    _shouldLog(logLevel) {
+      return this.getLevel() >= normalizeLogLevel(logLevel);
+    }
+    _getOnceTag(tag) {
+      if (tag === void 0) {
+        return void 0;
+      }
+      try {
+        return typeof tag === "string" ? tag : String(tag);
+      } catch {
+        return void 0;
+      }
+    }
+  };
 
   // ../../node_modules/@probe.gl/log/dist/utils/local-storage.js
   function getStorage(type) {
@@ -436,13 +638,6 @@ var __exports__ = (() => {
     }
   }
 
-  // ../../node_modules/@probe.gl/log/dist/utils/assert.js
-  function assert(condition, message) {
-    if (!condition) {
-      throw new Error(message || "Assertion failed");
-    }
-  }
-
   // ../../node_modules/@probe.gl/log/dist/utils/hi-res-timestamp.js
   function getHiResTimestamp2() {
     let timestamp;
@@ -457,7 +652,7 @@ var __exports__ = (() => {
     return timestamp;
   }
 
-  // ../../node_modules/@probe.gl/log/dist/log.js
+  // ../../node_modules/@probe.gl/log/dist/loggers/probe-log.js
   var originalConsole = {
     debug: isBrowser() ? console.debug || console.log : console.log,
     log: console.log,
@@ -469,12 +664,9 @@ var __exports__ = (() => {
     enabled: true,
     level: 0
   };
-  function noop() {
-  }
-  var cache = {};
-  var ONCE = { once: true };
-  var Log = class {
+  var ProbeLog = class extends BaseLog {
     constructor({ id } = { id: "" }) {
+      super({ level: 0 });
       this.VERSION = VERSION;
       this._startTs = getHiResTimestamp2();
       this._deltaTs = getHiResTimestamp2();
@@ -482,22 +674,16 @@ var __exports__ = (() => {
       this.LOG_THROTTLE_TIMEOUT = 0;
       this.id = id;
       this.userData = {};
-      this._storage = new LocalStorage(`__probe-${this.id}__`, DEFAULT_LOG_CONFIGURATION);
+      this._storage = new LocalStorage(`__probe-${this.id}__`, { [this.id]: DEFAULT_LOG_CONFIGURATION });
       this.timeStamp(`${this.id} started`);
       autobind(this);
       Object.seal(this);
     }
-    set level(newLevel) {
-      this.setLevel(newLevel);
-    }
-    get level() {
-      return this.getLevel();
-    }
     isEnabled() {
-      return this._storage.config.enabled;
+      return this._getConfiguration().enabled;
     }
     getLevel() {
-      return this._storage.config.level;
+      return this._getConfiguration().level;
     }
     /** @return milliseconds, with fractions */
     getTotal() {
@@ -521,20 +707,20 @@ var __exports__ = (() => {
     }
     // Configure
     enable(enabled = true) {
-      this._storage.setConfiguration({ enabled });
+      this._updateConfiguration({ enabled });
       return this;
     }
     setLevel(level) {
-      this._storage.setConfiguration({ level });
+      this._updateConfiguration({ level });
       return this;
     }
     /** return the current status of the setting */
     get(setting) {
-      return this._storage.config[setting];
+      return this._getConfiguration()[setting];
     }
     // update the status of the setting
     set(setting, value) {
-      this._storage.setConfiguration({ [setting]: value });
+      this._updateConfiguration({ [setting]: value });
     }
     /** Logs the current settings as a table */
     settings() {
@@ -550,11 +736,16 @@ var __exports__ = (() => {
         throw new Error(message || "Assertion failed");
       }
     }
-    warn(message) {
-      return this._getLogFunction(0, message, originalConsole.warn, arguments, ONCE);
+    warn(message, ...args) {
+      return this._log("warn", 0, message, args, {
+        method: originalConsole.warn,
+        once: true
+      });
     }
-    error(message) {
-      return this._getLogFunction(0, message, originalConsole.error, arguments);
+    error(message, ...args) {
+      return this._log("error", 0, message, args, {
+        method: originalConsole.error
+      });
     }
     /** Print a deprecation warning */
     deprecated(oldUsage, newUsage) {
@@ -564,50 +755,63 @@ var __exports__ = (() => {
     removed(oldUsage, newUsage) {
       return this.error(`\`${oldUsage}\` has been removed. Use \`${newUsage}\` instead`);
     }
-    probe(logLevel, message) {
-      return this._getLogFunction(logLevel, message, originalConsole.log, arguments, {
+    probe(logLevel, message, ...args) {
+      return this._log("log", logLevel, message, args, {
+        method: originalConsole.log,
         time: true,
         once: true
       });
     }
-    log(logLevel, message) {
-      return this._getLogFunction(logLevel, message, originalConsole.debug, arguments);
+    log(logLevel, message, ...args) {
+      return this._log("log", logLevel, message, args, {
+        method: originalConsole.debug
+      });
     }
-    info(logLevel, message) {
-      return this._getLogFunction(logLevel, message, console.info, arguments);
+    info(logLevel, message, ...args) {
+      return this._log("info", logLevel, message, args, { method: console.info });
     }
-    once(logLevel, message) {
-      return this._getLogFunction(logLevel, message, originalConsole.debug || originalConsole.info, arguments, ONCE);
+    once(logLevel, message, ...args) {
+      return this._log("once", logLevel, message, args, {
+        method: originalConsole.debug || originalConsole.info,
+        once: true
+      });
     }
     /** Logs an object as a table */
     table(logLevel, table, columns) {
       if (table) {
-        return this._getLogFunction(logLevel, table, console.table || noop, columns && [columns], {
+        return this._log("table", logLevel, table, columns && [columns] || [], {
+          method: console.table || noop,
           tag: getTableHeader(table)
         });
       }
       return noop;
     }
     time(logLevel, message) {
-      return this._getLogFunction(logLevel, message, console.time ? console.time : console.info);
+      return this._log("time", logLevel, message, [], {
+        method: console.time ? console.time : console.info
+      });
     }
     timeEnd(logLevel, message) {
-      return this._getLogFunction(logLevel, message, console.timeEnd ? console.timeEnd : console.info);
+      return this._log("time", logLevel, message, [], {
+        method: console.timeEnd ? console.timeEnd : console.info
+      });
     }
     timeStamp(logLevel, message) {
-      return this._getLogFunction(logLevel, message, console.timeStamp || noop);
+      return this._log("time", logLevel, message, [], {
+        method: console.timeStamp || noop
+      });
     }
     group(logLevel, message, opts = { collapsed: false }) {
-      const options = normalizeArguments({ logLevel, message, opts });
-      const { collapsed } = opts;
-      options.method = (collapsed ? console.groupCollapsed : console.group) || console.info;
-      return this._getLogFunction(options);
+      const method = (opts.collapsed ? console.groupCollapsed : console.group) || console.info;
+      return this._log("group", logLevel, message, [], { method });
     }
     groupCollapsed(logLevel, message, opts = {}) {
       return this.group(logLevel, message, Object.assign({}, opts, { collapsed: true }));
     }
     groupEnd(logLevel) {
-      return this._getLogFunction(logLevel, "", console.groupEnd || noop);
+      return this._log("groupEnd", logLevel, "", [], {
+        method: console.groupEnd || noop
+      });
     }
     // EXPERIMENTAL
     withGroup(logLevel, message, func) {
@@ -623,78 +827,34 @@ var __exports__ = (() => {
         console.trace();
       }
     }
-    // PRIVATE METHODS
-    /** Deduces log level from a variety of arguments */
     _shouldLog(logLevel) {
-      return this.isEnabled() && this.getLevel() >= normalizeLogLevel(logLevel);
-    }
-    _getLogFunction(logLevel, message, method, args, opts) {
-      if (this._shouldLog(logLevel)) {
-        opts = normalizeArguments({ logLevel, message, args, opts });
-        method = method || opts.method;
-        assert(method);
-        opts.total = this.getTotal();
-        opts.delta = this.getDelta();
-        this._deltaTs = getHiResTimestamp2();
-        const tag = opts.tag || opts.message;
-        if (opts.once && tag) {
-          if (!cache[tag]) {
-            cache[tag] = getHiResTimestamp2();
-          } else {
-            return noop;
-          }
-        }
-        message = decorateMessage(this.id, opts.message, opts);
-        return method.bind(console, message, ...opts.args);
-      }
-      return noop;
+      return this.isEnabled() && super._shouldLog(logLevel);
     }
-  };
-  Log.VERSION = VERSION;
-  function normalizeLogLevel(logLevel) {
-    if (!logLevel) {
-      return 0;
-    }
-    let resolvedLevel;
-    switch (typeof logLevel) {
-      case "number":
-        resolvedLevel = logLevel;
-        break;
-      case "object":
-        resolvedLevel = logLevel.logLevel || logLevel.priority || 0;
-        break;
-      default:
-        return 0;
-    }
-    assert(Number.isFinite(resolvedLevel) && resolvedLevel >= 0);
-    return resolvedLevel;
-  }
-  function normalizeArguments(opts) {
-    const { logLevel, message } = opts;
-    opts.logLevel = normalizeLogLevel(logLevel);
-    const args = opts.args ? Array.from(opts.args) : [];
-    while (args.length && args.shift() !== message) {
+    _emit(_type, normalized) {
+      const method = normalized.method;
+      assert(method);
+      normalized.total = this.getTotal();
+      normalized.delta = this.getDelta();
+      this._deltaTs = getHiResTimestamp2();
+      const message = decorateMessage(this.id, normalized.message, normalized);
+      return method.bind(console, message, ...normalized.args);
     }
-    switch (typeof logLevel) {
-      case "string":
-      case "function":
-        if (message !== void 0) {
-          args.unshift(message);
-        }
-        opts.message = logLevel;
-        break;
-      case "object":
-        Object.assign(opts, logLevel);
-        break;
-      default:
+    _getConfiguration() {
+      if (!this._storage.config[this.id]) {
+        this._updateConfiguration(DEFAULT_LOG_CONFIGURATION);
+      }
+      return this._storage.config[this.id];
     }
-    if (typeof opts.message === "function") {
-      opts.message = opts.message();
+    _updateConfiguration(configuration) {
+      const currentConfiguration = this._storage.config[this.id] || {
+        ...DEFAULT_LOG_CONFIGURATION
+      };
+      this._storage.setConfiguration({
+        [this.id]: { ...currentConfiguration, ...configuration }
+      });
     }
-    const messageType = typeof opts.message;
-    assert(messageType === "string" || messageType === "object");
-    return Object.assign(opts, { args }, opts.opts);
-  }
+  };
+  ProbeLog.VERSION = VERSION;
   function decorateMessage(id, message, opts) {
     if (typeof message === "string") {
       const time = opts.time ? leftPad(formatTime(opts.total)) : "";
@@ -716,10 +876,10 @@ var __exports__ = (() => {
   globalThis.probe = {};
 
   // ../../node_modules/@probe.gl/log/dist/index.js
-  var dist_default = new Log({ id: "@probe.gl/log" });
+  var dist_default = new ProbeLog({ id: "@probe.gl/log" });
 
   // src/utils/log.ts
-  var log = new Log({ id: "luma.gl" });
+  var log = new ProbeLog({ id: "luma.gl" });
 
   // src/utils/uid.ts
   var uidCounters = {};
@@ -730,19 +890,75 @@ var __exports__ = (() => {
   }
 
   // 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}"`;
     }
     /** props.id, for debugging. */
     id;
+    /** The props that this resource was created with */
     props;
+    /** User data object, reserved for the application */
     userData = {};
+    /** The device that this resource is associated with - TODO can we remove this dup? */
     _device;
     /** Whether this resource has been destroyed */
     destroyed = false;
     /** For resources that allocate GPU memory */
     allocatedBytes = 0;
+    /** Stats bucket currently holding the tracked allocation */
+    allocatedBytesName = null;
     /** Attached resources will be destroyed when this resource is destroyed. Tracks auto-created "sub" resources. */
     _attachedResources = /* @__PURE__ */ new Set();
     /**
@@ -764,6 +980,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() */
@@ -802,7 +1021,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();
@@ -810,37 +1029,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 */
@@ -858,6 +1147,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;
+  }
 
   // src/adapter/resources/buffer.ts
   var _Buffer = class extends Resource {
@@ -897,18 +1276,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;
       }
     }
   };
@@ -942,61 +1329,73 @@ var __exports__ = (() => {
     onMapped: void 0
   });
 
-  // src/shadertypes/data-types/decode-data-types.ts
-  function getDataTypeInfo(type) {
-    const [signedType, primitiveType, byteLength] = NORMALIZED_TYPE_MAP[type];
-    const normalized = type.includes("norm");
-    const integer = !normalized && !type.startsWith("float");
-    const signed = type.startsWith("s");
-    return {
-      signedType,
-      primitiveType,
-      byteLength,
-      normalized,
-      integer,
-      signed
-    };
-  }
-  function getNormalizedDataType(signedDataType) {
-    const dataType = signedDataType;
-    switch (dataType) {
-      case "uint8":
-        return "unorm8";
-      case "sint8":
-        return "snorm8";
-      case "uint16":
-        return "unorm16";
-      case "sint16":
-        return "snorm16";
-      default:
-        return dataType;
+  // 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],
@@ -1012,87 +1411,99 @@ var __exports__ = (() => {
     sint32: ["sint32", "i32", 4, false, Int32Array]
   };
 
-  // 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}`;
+  // 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();
 
-  // src/shadertypes/textures/texture-format-table.ts
+  // 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";
@@ -1103,6 +1514,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";
@@ -1136,16 +1548,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": {},
@@ -1248,7 +1660,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 },
@@ -1262,7 +1674,10 @@ var __exports__ = (() => {
     ...TEXTURE_FORMAT_COMPRESSED_TABLE
   };
 
-  // src/shadertypes/textures/texture-format-decoder.ts
+  // 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"];
   var COMPRESSED_TEXTURE_FORMAT_PREFIXES = [
     "bc1",
     "bc2",
@@ -1278,49 +1693,83 @@ var __exports__ = (() => {
     "astc",
     "pvrtc"
   ];
-  var RGB_FORMAT_REGEX = /^(r|rg|rgb|rgba|bgra)([0-9]*)([a-z]*)(-srgb)?(-webgl)?$/;
   var TextureFormatDecoder = class {
-    /** Returns information about a texture format, e.g. attatchment type, components, byte length and flags (integer, signed, normalized) */
-    getInfo(format) {
-      return getTextureFormatInfo(format);
-    }
     /** Checks if a texture format is color */
     isColor(format) {
-      return format.startsWith("rgba") || format.startsWith("bgra") || format.startsWith("rgb");
+      return COLOR_FORMAT_PREFIXES.some((prefix) => format.startsWith(prefix));
     }
     /** Checks if a texture format is depth or stencil */
     isDepthStencil(format) {
-      return format.startsWith("depth") || format.startsWith("stencil");
+      return DEPTH_FORMAT_PREFIXES.some((prefix) => format.startsWith(prefix));
     }
     /** Checks if a texture format is compressed */
     isCompressed(format) {
       return COMPRESSED_TEXTURE_FORMAT_PREFIXES.some((prefix) => format.startsWith(prefix));
     }
-    /**
-     * Returns the "static" capabilities of a texture format.
-     * @note Needs to be checked against current device
-     */
+    /** Returns information about a texture format, e.g. attachment type, components, byte length and flags (integer, signed, normalized) */
+    getInfo(format) {
+      return getTextureFormatInfo(format);
+    }
+    /**  "static" capabilities of a texture format. @note Needs to be adjusted against current device */
     getCapabilities(format) {
-      const info = getTextureFormatDefinition(format);
-      const formatCapabilities = {
-        format,
-        create: info.f ?? true,
-        render: info.render ?? true,
-        filter: info.filter ?? true,
-        blend: info.blend ?? true,
-        store: info.store ?? true
-      };
-      const formatInfo = getTextureFormatInfo(format);
-      const isDepthStencil = format.startsWith("depth") || format.startsWith("stencil");
-      const isSigned = formatInfo?.signed;
-      const isInteger = formatInfo?.integer;
-      const isWebGLSpecific = formatInfo?.webgl;
-      formatCapabilities.render &&= !isSigned;
-      formatCapabilities.filter &&= !isDepthStencil && !isSigned && !isInteger && !isWebGLSpecific;
-      return formatCapabilities;
+      return getTextureFormatCapabilities(format);
+    }
+    /** Computes the memory layout for a texture, in particular including row byte alignment */
+    computeMemoryLayout(opts) {
+      return computeTextureMemoryLayout(opts);
     }
   };
   var textureFormatDecoder = new TextureFormatDecoder();
+  function computeTextureMemoryLayout({
+    format,
+    width,
+    height,
+    depth,
+    byteAlignment
+  }) {
+    const formatInfo = textureFormatDecoder.getInfo(format);
+    const {
+      bytesPerPixel,
+      bytesPerBlock = bytesPerPixel,
+      blockWidth = 1,
+      blockHeight = 1,
+      compressed = false
+    } = formatInfo;
+    const blockColumns = compressed ? Math.ceil(width / blockWidth) : width;
+    const blockRows = compressed ? Math.ceil(height / blockHeight) : height;
+    const unpaddedBytesPerRow = blockColumns * bytesPerBlock;
+    const bytesPerRow = Math.ceil(unpaddedBytesPerRow / byteAlignment) * byteAlignment;
+    const rowsPerImage = blockRows;
+    const byteLength = bytesPerRow * rowsPerImage * depth;
+    return {
+      bytesPerPixel,
+      bytesPerRow,
+      rowsPerImage,
+      depthOrArrayLayers: depth,
+      bytesPerImage: bytesPerRow * rowsPerImage,
+      byteLength
+    };
+  }
+  function getTextureFormatCapabilities(format) {
+    const info = getTextureFormatDefinition(format);
+    const formatCapabilities = {
+      format,
+      create: info.f ?? true,
+      render: info.render ?? true,
+      filter: info.filter ?? true,
+      blend: info.blend ?? true,
+      store: info.store ?? true
+    };
+    const formatInfo = getTextureFormatInfo(format);
+    const isDepthStencil = format.startsWith("depth") || format.startsWith("stencil");
+    const isSigned = formatInfo?.signed;
+    const isInteger = formatInfo?.integer;
+    const isWebGLSpecific = formatInfo?.webgl;
+    const isCompressed = Boolean(formatInfo?.compressed);
+    formatCapabilities.render &&= !isDepthStencil && !isCompressed;
+    formatCapabilities.filter &&= !isDepthStencil && !isSigned && !isInteger && !isWebGLSpecific;
+    return formatCapabilities;
+  }
   function getTextureFormatInfo(format) {
     let formatInfo = getTextureFormatInfoUsingTable(format);
     if (textureFormatDecoder.isCompressed(format)) {
@@ -1329,19 +1778,20 @@ 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;
+      const components = channels?.length ?? 1;
       const bitsPerChannel = [
         bits,
         components >= 2 ? bits : 0,
@@ -1358,7 +1808,7 @@ var __exports__ = (() => {
         signed: decodedType.signed,
         normalized: decodedType.normalized,
         bitsPerChannel,
-        bytesPerPixel: decodedType.byteLength * channels.length,
+        bytesPerPixel: decodedType.byteLength * components,
         packed: formatInfo.packed,
         srgb: formatInfo.srgb
       };
@@ -1414,10 +1864,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;
+  }
 
-  // src/image-utils/image-types.ts
+  // 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;
   }
@@ -1440,6 +1911,52 @@ var __exports__ = (() => {
   // 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;
@@ -1469,19 +1986,24 @@ 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) */
     _reused = false;
     /** Used by other luma.gl modules to store data on the device */
-    _lumaData = {};
+    _moduleData = {};
     _textureCaps = {};
+    /** Internal timestamp query set used when GPU timing collection is enabled for this device. */
+    _debugGPUTimeQuery = null;
     constructor(props) {
       this.props = { ..._Device.defaultProps, ...props };
       this.id = this.props.id || uid(this[Symbol.toStringTag].toLowerCase());
     }
+    // TODO - just expose the shadertypes decoders?
     getVertexFormatInfo(format) {
-      return getVertexFormatInfo(format);
+      return vertexFormatDecoder.getVertexFormatInfo(format);
     }
     isVertexFormatSupported(format) {
       return true;
@@ -1529,6 +2051,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);
@@ -1571,7 +2103,13 @@ var __exports__ = (() => {
     reportError(error, context, ...args) {
       const isHandled = this.props.onError(error, context);
       if (!isHandled) {
-        return log.error(error.message, context, ...args);
+        const logArguments = formatErrorLogArguments(context, args);
+        return log.error(
+          this.type === "webgl" ? "%cWebGL" : "%cWebGPU",
+          "color: white; background: red; padding: 2px 6px; border-radius: 3px;",
+          error.message,
+          ...logArguments
+        );
       }
       return () => {
       };
@@ -1593,6 +2131,10 @@ or create a device with the 'debug: true' prop.`;
       }
       return this.canvasContext;
     }
+    /** Create a fence sync object */
+    createFence() {
+      throw new Error("createFence() not implemented");
+    }
     /** Create a RenderPass using the default CommandEncoder */
     beginRenderPass(props) {
       return this.commandEncoder.beginRenderPass(props);
@@ -1601,6 +2143,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() {
@@ -1636,6 +2250,12 @@ or create a device with the 'debug: true' prop.`;
     resetWebGL() {
       throw new Error("not implemented");
     }
+    // INTERNAL LUMA.GL METHODS
+    getModuleData(moduleName) {
+      this._moduleData[moduleName] ||= {};
+      return this._moduleData[moduleName];
+    }
+    // INTERNAL HELPERS
     // IMPLEMENTATION
     /** Helper to get the canvas context props */
     static _getCanvasContextProps(props) {
@@ -1702,7 +2322,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")),
@@ -1713,9 +2334,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: {
@@ -1724,6 +2347,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"];
+  }
 
   // src/adapter/luma.ts
   var STARTUP_MESSAGE = "set luma.log.level=1 (or higher) to trace rendering";
@@ -1901,6 +2543,100 @@ or create a device with the 'debug: true' prop.`;
     return pageLoadPromise;
   }
 
+  // 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);
+    }
+  };
+
   // src/utils/promise-utils.ts
   function withResolvers() {
     let resolve;
@@ -1912,8 +2648,21 @@ or create a device with the 'debug: true' prop.`;
     return { promise, resolve, reject };
   }
 
-  // src/adapter/canvas-context.ts
-  var _CanvasContext = class {
+  // src/utils/assert.ts
+  function assert2(condition, message) {
+    if (!condition) {
+      const error = new Error(message ?? "luma.gl assertion failed.");
+      Error.captureStackTrace?.(error, assert2);
+      throw error;
+    }
+  }
+  function assertDefined(value, message) {
+    assert2(value, message);
+    return value;
+  }
+
+  // src/adapter/canvas-surface.ts
+  var _CanvasSurface = class {
     static isHTMLCanvas(canvas) {
       return typeof HTMLCanvasElement !== "undefined" && canvas instanceof HTMLCanvasElement;
     }
@@ -1947,16 +2696,20 @@ or create a device with the 'debug: true' prop.`;
     drawingBufferWidth;
     /** Height of drawing buffer: automatically tracks this.pixelHeight if props.autoResize is true */
     drawingBufferHeight;
+    /** Resolves when the canvas is initialized, i.e. when the ResizeObserver has updated the pixel size */
     _initializedResolvers = withResolvers();
-    _resizeObserver;
-    _intersectionObserver;
-    _position;
+    _canvasObserver;
+    /** Position of the canvas in the document, updated by a timer */
+    _position = [0, 0];
+    /** Whether this canvas context has been destroyed */
     destroyed = false;
+    /** Whether the drawing buffer size needs to be resized (deferred resizing to avoid flicker) */
+    _needsDrawingBufferResize = true;
     toString() {
       return `${this[Symbol.toStringTag]}(${this.id})`;
     }
     constructor(props) {
-      this.props = { ..._CanvasContext.defaultProps, ...props };
+      this.props = { ..._CanvasSurface.defaultProps, ...props };
       props = this.props;
       this.initialized = this._initializedResolvers.promise;
       if (!isBrowser()) {
@@ -1968,11 +2721,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;
@@ -1988,25 +2741,21 @@ 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" });
-        }
-        setTimeout(() => this._observeDevicePixelRatio(), 0);
-        if (this.props.trackPosition) {
-          this._trackPosition();
-        }
-      }
+      this._canvasObserver = new CanvasObserver({
+        canvas: this.htmlCanvas,
+        trackPosition: this.props.trackPosition,
+        onResize: (entries) => this._handleResize(entries),
+        onIntersection: (entries) => this._handleIntersection(entries),
+        onDevicePixelRatioChange: () => this._observeDevicePixelRatio(),
+        onPositionChange: () => this.updatePosition()
+      });
     }
     destroy() {
-      this.destroyed = true;
+      if (!this.destroyed) {
+        this.destroyed = true;
+        this._stopObservers();
+        this.device = null;
+      }
     }
     setProps(props) {
       if ("useDevicePixels" in props) {
@@ -2015,55 +2764,41 @@ or create a device with the 'debug: true' prop.`;
       }
       return this;
     }
-    // SIZE METHODS
-    /**
-     * Returns the size covered by the canvas in CSS pixels
-     * @note This can be different from the actual device pixel size of a canvas due to DPR scaling, and rounding to integer pixels
-     * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
-     */
+    /** Returns a framebuffer with properly resized current 'swap chain' textures */
+    getCurrentFramebuffer(options) {
+      this._resizeDrawingBufferIfNeeded();
+      return this._getCurrentFramebuffer(options);
+    }
     getCSSSize() {
       return [this.cssWidth, this.cssHeight];
     }
     getPosition() {
       return this._position;
     }
-    /**
-     * Returns the size covered by the canvas in actual device pixels.
-     * @note This can be different from the 'CSS' size of a canvas due to DPR scaling, and rounding to integer pixels
-     * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
-     */
     getDevicePixelSize() {
       return [this.devicePixelWidth, this.devicePixelHeight];
     }
-    /** Get the drawing buffer size (number of pixels GPU is rendering into, can be different from CSS size) */
     getDrawingBufferSize() {
       return [this.drawingBufferWidth, this.drawingBufferHeight];
     }
-    /** Returns the biggest allowed framebuffer size. @todo Allow the application to limit this? */
     getMaxDrawingBufferSize() {
       const maxTextureDimension = this.device.limits.maxTextureDimension2D;
       return [maxTextureDimension, maxTextureDimension];
     }
-    /** Update the canvas drawing buffer size. Called automatically if props.autoResize is true. */
     setDrawingBufferSize(width, height) {
-      this.canvas.width = width;
-      this.canvas.height = height;
+      width = Math.floor(width);
+      height = Math.floor(height);
+      if (this.drawingBufferWidth === width && this.drawingBufferHeight === height) {
+        return;
+      }
       this.drawingBufferWidth = width;
       this.drawingBufferHeight = height;
+      this._needsDrawingBufferResize = true;
     }
-    /**
-     * Returns the current DPR (number of physical pixels per CSS pixel), if props.useDevicePixels is true
-     * @note This can be a fractional (non-integer) number, e.g. when the user zooms in the browser.
-     * @note This function handles the non-HTML canvas cases
-     */
     getDevicePixelRatio() {
-      const dpr = typeof window !== "undefined" && window.devicePixelRatio;
-      return dpr || 1;
+      const devicePixelRatio2 = typeof window !== "undefined" && window.devicePixelRatio;
+      return devicePixelRatio2 || 1;
     }
-    // DEPRECATED METHODS
-    /**
-     * Maps CSS pixel position to device pixel position
-     */
     cssToDevicePixels(cssPixel, yInvert = true) {
       const ratio = this.cssToDeviceRatio();
       const [width, height] = this.getDrawingBufferSize();
@@ -2073,10 +2808,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() {
@@ -2092,18 +2827,40 @@ 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;
+      }
       const entry = entries.find((entry_) => entry_.target === this.canvas);
       if (!entry) {
         return;
@@ -2114,21 +2871,20 @@ 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;
+      }
       const entry = entries.find((entry_) => entry_.target === this.canvas);
       if (!entry) {
         return;
       }
-      this.cssWidth = entry.contentBoxSize[0].inlineSize;
-      this.cssHeight = entry.contentBoxSize[0].blockSize;
+      const contentBoxSize = assertDefined(entry.contentBoxSize?.[0]);
+      this.cssWidth = contentBoxSize.inlineSize;
+      this.cssHeight = contentBoxSize.blockSize;
       const oldPixelSize = this.getDevicePixelSize();
-      const devicePixelWidth = entry.devicePixelContentBoxSize?.[0].inlineSize || entry.contentBoxSize[0].inlineSize * devicePixelRatio;
-      const devicePixelHeight = entry.devicePixelContentBoxSize?.[0].blockSize || entry.contentBoxSize[0].blockSize * devicePixelRatio;
+      const devicePixelWidth = entry.devicePixelContentBoxSize?.[0]?.inlineSize || contentBoxSize.inlineSize * devicePixelRatio;
+      const devicePixelHeight = entry.devicePixelContentBoxSize?.[0]?.blockSize || contentBoxSize.blockSize * devicePixelRatio;
       const [maxDevicePixelWidth, maxDevicePixelHeight] = this.getMaxDrawingBufferSize();
       this.devicePixelWidth = Math.max(1, Math.min(devicePixelWidth, maxDevicePixelWidth));
       this.devicePixelHeight = Math.max(1, Math.min(devicePixelHeight, maxDevicePixelHeight));
@@ -2138,47 +2894,47 @@ or create a device with the 'debug: true' prop.`;
     _updateDrawingBufferSize() {
       if (this.props.autoResize) {
         if (typeof this.props.useDevicePixels === "number") {
-          const dpr = this.props.useDevicePixels;
-          this.setDrawingBufferSize(this.cssWidth * dpr, this.cssHeight * dpr);
+          const devicePixelRatio2 = this.props.useDevicePixels;
+          this.setDrawingBufferSize(
+            this.cssWidth * devicePixelRatio2,
+            this.cssHeight * devicePixelRatio2
+          );
         } else if (this.props.useDevicePixels) {
           this.setDrawingBufferSize(this.devicePixelWidth, this.devicePixelHeight);
         } else {
           this.setDrawingBufferSize(this.cssWidth, this.cssHeight);
         }
-        this._updateDevice();
       }
       this._initializedResolvers.resolve();
       this.isInitialized = true;
       this.updatePosition();
     }
-    /** Monitor DPR changes */
+    _resizeDrawingBufferIfNeeded() {
+      if (this._needsDrawingBufferResize) {
+        this._needsDrawingBufferResize = false;
+        const sizeChanged = this.drawingBufferWidth !== this.canvas.width || this.drawingBufferHeight !== this.canvas.height;
+        if (sizeChanged) {
+          this.canvas.width = this.drawingBufferWidth;
+          this.canvas.height = this.drawingBufferHeight;
+          this._configureDevice();
+        }
+      }
+    }
     _observeDevicePixelRatio() {
+      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;
+      }
       const newRect = this.htmlCanvas?.getBoundingClientRect();
       if (newRect) {
         const position = [newRect.left, newRect.top];
@@ -2187,13 +2943,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,
@@ -2221,7 +2979,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;
@@ -2245,33 +3003,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);
   }
 
+  // src/adapter/canvas-context.ts
+  var CanvasContext = class extends CanvasSurface {
+  };
+  __publicField(CanvasContext, "defaultProps", CanvasSurface.defaultProps);
+
+  // src/adapter/presentation-context.ts
+  var PresentationContext = class extends CanvasSurface {
+  };
+
   // src/adapter/resources/sampler.ts
   var _Sampler = class extends Resource {
     get [Symbol.toStringTag]() {
@@ -2326,7 +3091,15 @@ or create a device with the 'debug: true' prop.`;
     depth;
     /** mip levels in this texture */
     mipLevels;
-    /** "Time" of last update. Monotonically increasing timestamp. TODO move to AsyncTexture? */
+    /** sample count */
+    samples;
+    /** Rows are multiples of this length, padded with extra bytes if needed */
+    byteAlignment;
+    /** The ready promise is always resolved. It is provided for type compatibility with DynamicTexture. */
+    ready = Promise.resolve(this);
+    /** isReady is always true. It is provided for type compatibility with DynamicTexture. */
+    isReady = true;
+    /** "Time" of last update. Monotonically increasing timestamp. TODO move to DynamicTexture? */
     updateTimestamp;
     get [Symbol.toStringTag]() {
       return "Texture";
@@ -2335,7 +3108,7 @@ or create a device with the 'debug: true' prop.`;
       return `Texture(${this.id},${this.format},${this.width}x${this.height})`;
     }
     /** Do not use directly. Create with device.createTexture() */
-    constructor(device, props) {
+    constructor(device, props, backendProps) {
       props = _Texture.normalizeProps(device, props);
       super(device, props, _Texture.defaultProps);
       this.dimension = this.props.dimension;
@@ -2345,6 +3118,10 @@ 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;
+      }
       if (this.props.width === void 0 || this.props.height === void 0) {
         if (device.isExternalImage(props.data)) {
           const size = device.getExternalImageSize(props.data);
@@ -2355,17 +3132,14 @@ or create a device with the 'debug: true' prop.`;
           this.height = 1;
           if (this.props.width === void 0 || this.props.height === void 0) {
             log.warn(
-              `${this} created with undefined width or height. This is deprecated. Use AsyncTexture instead.`
+              `${this} created with undefined width or height. This is deprecated. Use DynamicTexture instead.`
             )();
           }
         }
       }
+      this.byteAlignment = backendProps?.byteAlignment || 1;
       this.updateTimestamp = device.incrementTimestamp();
     }
-    /** Set sampler props associated with this texture */
-    setSampler(sampler) {
-      this.sampler = sampler instanceof Sampler ? sampler : this.device.createSampler(sampler);
-    }
     /**
      * Create a new texture with the same parameters and optionally a different size
      * @note Textures are immutable and cannot be resized after creation, but we can create a similar texture with the same parameters but a new size.
@@ -2374,6 +3148,105 @@ or create a device with the 'debug: true' prop.`;
     clone(size) {
       return this.device.createTexture({ ...this.props, ...size });
     }
+    /** Set sampler props associated with this texture */
+    setSampler(sampler) {
+      this.sampler = sampler instanceof Sampler ? sampler : this.device.createSampler(sampler);
+    }
+    /**
+     * Copy raw image data (bytes) into the texture.
+     *
+     * @note Deprecated compatibility wrapper over {@link writeData}.
+     * @note Uses the same layout defaults and alignment rules as {@link writeData}.
+     * @note Tightly packed CPU uploads can omit `bytesPerRow` and `rowsPerImage`.
+     * @note If the CPU source rows are padded, pass explicit `bytesPerRow` and `rowsPerImage`.
+     * @deprecated Use writeData()
+     */
+    copyImageData(options) {
+      const { data, depth, ...writeOptions } = options;
+      this.writeData(data, {
+        ...writeOptions,
+        depthOrArrayLayers: writeOptions.depthOrArrayLayers ?? depth
+      });
+    }
+    /**
+     * Calculates the memory layout of the texture, required when reading and writing data.
+     * @return the backend-aligned linear layout, in particular bytesPerRow which includes any required padding for buffer copy/read paths
+     */
+    computeMemoryLayout(options_ = {}) {
+      const options = this._normalizeTextureReadOptions(options_);
+      const { width = this.width, height = this.height, depthOrArrayLayers = this.depth } = options;
+      const { format, byteAlignment } = this;
+      return textureFormatDecoder.computeMemoryLayout({
+        format,
+        width,
+        height,
+        depth: depthOrArrayLayers,
+        byteAlignment
+      });
+    }
+    /**
+     * Read the contents of a texture into a GPU Buffer.
+     * @returns A Buffer containing the texture data.
+     *
+     * @note The memory layout of the texture data is determined by the texture format and dimensions.
+     * @note The application can call Texture.computeMemoryLayout() to compute the backend-aligned layout.
+     * @note The application can call Buffer.readAsync() to read the returned buffer on the CPU.
+     * @note The destination buffer must be supplied by the caller and must be large enough for the requested region.
+     * @note On WebGPU this corresponds to a texture-to-buffer copy and uses buffer-copy alignment rules.
+     * @note On WebGL, luma.gl emulates the same logical readback behavior.
+     */
+    readBuffer(options, buffer) {
+      throw new Error("readBuffer not implemented");
+    }
+    /**
+     * Reads data from a texture into an ArrayBuffer.
+     * @returns An ArrayBuffer containing the texture data.
+     *
+     * @note The memory layout of the texture data is determined by the texture format and dimensions.
+     * @note The application can call Texture.computeMemoryLayout() to compute the layout.
+     * @deprecated Use Texture.readBuffer() with an explicit destination buffer, or DynamicTexture.readAsync() for convenience readback.
+     */
+    readDataAsync(options) {
+      throw new Error("readBuffer not implemented");
+    }
+    /**
+     * Writes a GPU Buffer into a texture.
+     *
+     * @param buffer - Source GPU buffer.
+     * @param options - Destination subresource, extent, and source layout options.
+     * @note The memory layout of the texture data is determined by the texture format and dimensions.
+     * @note The application can call Texture.computeMemoryLayout() to compute the backend-aligned layout.
+     * @note On WebGPU this corresponds to a buffer-to-texture copy and uses buffer-copy alignment rules.
+     * @note On WebGL, luma.gl emulates the same destination and layout semantics.
+     */
+    writeBuffer(buffer, options) {
+      throw new Error("readBuffer not implemented");
+    }
+    /**
+     * Writes an array buffer into a texture.
+     *
+     * @param data - Source texel data.
+     * @param options - Destination subresource, extent, and source layout options.
+     * @note If `bytesPerRow` and `rowsPerImage` are omitted, luma.gl computes a tightly packed CPU-memory layout for the requested region.
+     * @note On WebGPU this corresponds to `GPUQueue.writeTexture()` and does not implicitly pad rows to 256 bytes.
+     * @note On WebGL, padded CPU data is supported via the same `bytesPerRow` and `rowsPerImage` options.
+     */
+    writeData(data, options) {
+      throw new Error("readBuffer not implemented");
+    }
+    // IMPLEMENTATION SPECIFIC
+    /**
+     * WebGL can read data synchronously.
+     * @note While it is convenient, the performance penalty is very significant
+     */
+    readDataSyncWebGL(options) {
+      throw new Error("readDataSyncWebGL not available");
+    }
+    /** Generate mipmaps (WebGL only) */
+    generateMipmapsWebGL() {
+      throw new Error("generateMipmapsWebGL not available");
+    }
+    // HELPERS
     /** Ensure we have integer coordinates */
     static normalizeProps(device, props) {
       const newProps = { ...props };
@@ -2386,7 +3259,6 @@ or create a device with the 'debug: true' prop.`;
       }
       return newProps;
     }
-    // HELPERS
     /** Initialize texture with supplied props */
     // eslint-disable-next-line max-statements
     _initializeData(data) {
@@ -2420,23 +3292,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 optionsWithoutUndefined = _Texture._omitUndefined(options_);
+      const mipLevel = optionsWithoutUndefined.mipLevel ?? 0;
+      const mipLevelSize = this._getMipLevelSize(mipLevel);
+      const options = {
+        ..._Texture.defaultTextureReadOptions,
+        ...mipLevelSize,
+        ...optionsWithoutUndefined
+      };
+      options.width = Math.min(options.width, mipLevelSize.width - options.x);
+      options.height = Math.min(options.height, mipLevelSize.height - options.y);
+      options.depthOrArrayLayers = Math.min(
+        options.depthOrArrayLayers,
+        mipLevelSize.depthOrArrayLayers - options.z
+      );
       return options;
     }
+    /**
+     * Normalizes a texture read request and validates the color-only readback contract used by the
+     * current texture read APIs. Supported dimensions are `2d`, `cube`, `cube-array`,
+     * `2d-array`, and `3d`.
+     *
+     * @throws if the texture format, aspect, or dimension is not supported by the first-pass
+     * color-read implementation.
+     */
+    _getSupportedColorReadOptions(options_) {
+      const options = this._normalizeTextureReadOptions(options_);
+      const formatInfo = textureFormatDecoder.getInfo(this.format);
+      this._validateColorReadAspect(options);
+      this._validateColorReadFormat(formatInfo);
+      switch (this.dimension) {
+        case "2d":
+        case "cube":
+        case "cube-array":
+        case "2d-array":
+        case "3d":
+          return options;
+        default:
+          throw new Error(`${this} color readback does not support ${this.dimension} textures`);
+      }
+    }
+    /** Validates that a read request targets the full color aspect of the texture. */
+    _validateColorReadAspect(options) {
+      if (options.aspect !== "all") {
+        throw new Error(`${this} color readback only supports aspect 'all'`);
+      }
+    }
+    /** Validates that a read request targets an uncompressed color-renderable texture format. */
+    _validateColorReadFormat(formatInfo) {
+      if (formatInfo.compressed) {
+        throw new Error(
+          `${this} color readback does not support compressed formats (${this.format})`
+        );
+      }
+      switch (formatInfo.attachment) {
+        case "color":
+          return;
+        case "depth":
+          throw new Error(`${this} color readback does not support depth formats (${this.format})`);
+        case "stencil":
+          throw new Error(`${this} color readback does not support stencil formats (${this.format})`);
+        case "depth-stencil":
+          throw new Error(
+            `${this} color readback does not support depth-stencil formats (${this.format})`
+          );
+        default:
+          throw new Error(`${this} color readback does not support format ${this.format}`);
+      }
+    }
+    _normalizeTextureWriteOptions(options_) {
+      const optionsWithoutUndefined = _Texture._omitUndefined(options_);
+      const mipLevel = optionsWithoutUndefined.mipLevel ?? 0;
+      const mipLevelSize = this._getMipLevelSize(mipLevel);
+      const options = {
+        ..._Texture.defaultTextureWriteOptions,
+        ...mipLevelSize,
+        ...optionsWithoutUndefined
+      };
+      options.width = Math.min(options.width, mipLevelSize.width - options.x);
+      options.height = Math.min(options.height, mipLevelSize.height - options.y);
+      options.depthOrArrayLayers = Math.min(
+        options.depthOrArrayLayers,
+        mipLevelSize.depthOrArrayLayers - options.z
+      );
+      const layout = textureFormatDecoder.computeMemoryLayout({
+        format: this.format,
+        width: options.width,
+        height: options.height,
+        depth: options.depthOrArrayLayers,
+        byteAlignment: this.byteAlignment
+      });
+      const minimumBytesPerRow = layout.bytesPerPixel * options.width;
+      options.bytesPerRow = optionsWithoutUndefined.bytesPerRow ?? layout.bytesPerRow;
+      options.rowsPerImage = optionsWithoutUndefined.rowsPerImage ?? options.height;
+      if (options.bytesPerRow < minimumBytesPerRow) {
+        throw new Error(
+          `bytesPerRow (${options.bytesPerRow}) must be at least ${minimumBytesPerRow} for ${this.format}`
+        );
+      }
+      if (options.rowsPerImage < options.height) {
+        throw new Error(
+          `rowsPerImage (${options.rowsPerImage}) must be at least ${options.height} for ${this.format}`
+        );
+      }
+      const bytesPerPixel = this.device.getTextureFormatInfo(this.format).bytesPerPixel;
+      if (bytesPerPixel && options.bytesPerRow % bytesPerPixel !== 0) {
+        throw new Error(
+          `bytesPerRow (${options.bytesPerRow}) must be a multiple of bytesPerPixel (${bytesPerPixel}) for ${this.format}`
+        );
+      }
+      return options;
+    }
+    _getMipLevelSize(mipLevel) {
+      const width = Math.max(1, this.width >> mipLevel);
+      const height = this.baseDimension === "1d" ? 1 : Math.max(1, this.height >> mipLevel);
+      const depthOrArrayLayers = this.dimension === "3d" ? Math.max(1, this.depth >> mipLevel) : this.depth;
+      return { width, height, depthOrArrayLayers };
+    }
+    getAllocatedByteLength() {
+      let allocatedByteLength = 0;
+      for (let mipLevel = 0; mipLevel < this.mipLevels; mipLevel++) {
+        const { width, height, depthOrArrayLayers } = this._getMipLevelSize(mipLevel);
+        allocatedByteLength += textureFormatDecoder.computeMemoryLayout({
+          format: this.format,
+          width,
+          height,
+          depth: depthOrArrayLayers,
+          byteAlignment: 1
+        }).byteLength;
+      }
+      return allocatedByteLength * this.samples;
+    }
+    static _omitUndefined(options) {
+      return Object.fromEntries(
+        Object.entries(options).filter(([, value]) => value !== void 0)
+      );
+    }
   };
   var Texture = _Texture;
   /** The texture can be bound for use as a sampled texture in a shader */
@@ -2453,13 +3468,12 @@ or create a device with the 'debug: true' prop.`;
   __publicField(Texture, "TEXTURE", 4);
   /** @deprecated Use Texture.RENDER */
   __publicField(Texture, "RENDER_ATTACHMENT", 16);
-  /** Default options */
   __publicField(Texture, "defaultProps", {
     ...Resource.defaultProps,
     data: null,
     dimension: "2d",
     format: "rgba8unorm",
-    usage: _Texture.TEXTURE | _Texture.RENDER_ATTACHMENT | _Texture.COPY_DST,
+    usage: _Texture.SAMPLE | _Texture.RENDER | _Texture.COPY_DST,
     width: void 0,
     height: void 0,
     depth: 1,
@@ -2473,6 +3487,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,
@@ -2496,6 +3514,29 @@ or create a device with the 'debug: true' prop.`;
     premultipliedAlpha: false,
     flipY: false
   });
+  __publicField(Texture, "defaultTextureReadOptions", {
+    x: 0,
+    y: 0,
+    z: 0,
+    width: void 0,
+    height: void 0,
+    depthOrArrayLayers: 1,
+    mipLevel: 0,
+    aspect: "all"
+  });
+  __publicField(Texture, "defaultTextureWriteOptions", {
+    byteOffset: 0,
+    bytesPerRow: void 0,
+    rowsPerImage: void 0,
+    x: 0,
+    y: 0,
+    z: 0,
+    width: void 0,
+    height: void 0,
+    depthOrArrayLayers: 1,
+    mipLevel: 0,
+    aspect: "all"
+  });
 
   // src/adapter/resources/texture-view.ts
   var _TextureView = class extends Resource {
@@ -2542,24 +3583,32 @@ or create a device with the 'debug: true' prop.`;
     const log2 = shaderLog.slice().sort((a, b) => a.lineNum - b.lineNum);
     switch (options?.showSourceCode || "no") {
       case "all":
-        let currentMessage = 0;
+        let currentMessageIndex = 0;
         for (let lineNum = 1; lineNum <= lines.length; lineNum++) {
-          formattedLog += getNumberedLine(lines[lineNum - 1], lineNum, options);
-          while (log2.length > currentMessage && log2[currentMessage].lineNum === lineNum) {
-            const message = log2[currentMessage++];
-            formattedLog += formatCompilerMessage(message, lines, message.lineNum, {
+          const line = lines[lineNum - 1];
+          const currentMessage = log2[currentMessageIndex];
+          if (line && currentMessage) {
+            formattedLog += getNumberedLine(line, lineNum, options);
+          }
+          while (log2.length > currentMessageIndex && currentMessage.lineNum === lineNum) {
+            const message = log2[currentMessageIndex++];
+            if (message) {
+              formattedLog += formatCompilerMessage(message, lines, message.lineNum, {
+                ...options,
+                inlineSource: false
+              });
+            }
+          }
+        }
+        while (log2.length > currentMessageIndex) {
+          const message = log2[currentMessageIndex++];
+          if (message) {
+            formattedLog += formatCompilerMessage(message, [], 0, {
               ...options,
               inlineSource: false
             });
           }
         }
-        while (log2.length > currentMessage) {
-          const message = log2[currentMessage++];
-          formattedLog += formatCompilerMessage(message, [], 0, {
-            ...options,
-            inlineSource: false
-          });
-        }
         return formattedLog;
       case "issues":
       case "no":
@@ -2581,8 +3630,8 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
 
 `;
     }
-    const color = message.type === "error" ? "red" : "#8B4000";
-    return options?.html ? `<div class='luma-compiler-log-error' style="color:${color};"><b> ${message.type.toUpperCase()}: ${message.message}</b></div>` : `${message.type.toUpperCase()}: ${message.message}`;
+    const color = message.type === "error" ? "red" : "orange";
+    return options?.html ? `<div class='luma-compiler-log-${message.type}' style="color:${color};"><b> ${message.type.toUpperCase()}: ${message.message}</b></div>` : `${message.type.toUpperCase()}: ${message.message}`;
   }
   function getNumberedLines(lines, lineNum, options) {
     let numberedLines = "";
@@ -2668,29 +3717,34 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
       }
       const shaderName = shaderId;
       const shaderTitle = `${this.stage} shader "${shaderName}"`;
-      let htmlLog = formatCompilerLog(messages, this.source, { showSourceCode: "all", html: true });
+      const htmlLog = formatCompilerLog(messages, this.source, { showSourceCode: "all", html: true });
       const translatedSource = this.getTranslatedSource();
+      const container = document.createElement("div");
+      container.innerHTML = `<h1>Compilation error in ${shaderTitle}</h1>
+<div style="display:flex;position:fixed;top:10px;right:20px;gap:2px;">
+<button id="copy">Copy source</button><br/>
+<button id="close">Close</button>
+</div>
+<code><pre>${htmlLog}</pre></code>`;
       if (translatedSource) {
-        htmlLog += `<br /><br /><h1>Translated Source</h1><br /><br /><code style="user-select:text;"><pre>${translatedSource}</pre></code>`;
-      }
-      const button = document.createElement("Button");
-      button.innerHTML = `
-<h1>Compilation error in ${shaderTitle}</h1><br /><br />
-<code style="user-select:text;"><pre>
-${htmlLog}
-</pre></code>`;
-      button.style.top = "10px";
-      button.style.left = "10px";
-      button.style.position = "absolute";
-      button.style.zIndex = "9999";
-      button.style.width = "100%";
-      button.style.textAlign = "left";
-      document.body.appendChild(button);
-      const errors = document.getElementsByClassName("luma-compiler-log-error");
-      errors[0]?.scrollIntoView();
-      button.onclick = () => {
-        const dataURI = `data:text/plain,${encodeURIComponent(this.source)}`;
-        navigator.clipboard.writeText(dataURI);
+        container.innerHTML += `<br /><h1>Translated Source</h1><br /><br /><code><pre>${translatedSource}</pre></code>`;
+      }
+      container.style.top = "0";
+      container.style.left = "0";
+      container.style.background = "white";
+      container.style.position = "fixed";
+      container.style.zIndex = "9999";
+      container.style.maxWidth = "100vw";
+      container.style.maxHeight = "100vh";
+      container.style.overflowY = "auto";
+      document.body.appendChild(container);
+      const error = container.querySelector(".luma-compiler-log-error");
+      error?.scrollIntoView();
+      container.querySelector("button#close").onclick = () => {
+        container.remove();
+      };
+      container.querySelector("button#copy").onclick = () => {
+        navigator.clipboard.writeText(this.source);
       };
     }
   };
@@ -2710,7 +3764,7 @@ ${htmlLog}
   function getShaderName(shader, defaultName = "unnamed") {
     const SHADER_NAME_REGEXP = /#define[\s*]SHADER_NAME[\s*]([A-Za-z0-9_-]+)[\s*]/;
     const match = SHADER_NAME_REGEXP.exec(shader);
-    return match ? match[1] : defaultName;
+    return match?.[1] ?? defaultName;
   }
 
   // src/adapter/resources/framebuffer.ts
@@ -2736,7 +3790,12 @@ ${htmlLog}
         (colorAttachment) => colorAttachment.texture.clone(size)
       );
       const depthStencilAttachment = this.depthStencilAttachment && this.depthStencilAttachment.texture.clone(size);
-      return this.device.createFramebuffer({ ...this.props, colorAttachments, depthStencilAttachment });
+      return this.device.createFramebuffer({
+        ...this.props,
+        ...size,
+        colorAttachments,
+        depthStencilAttachment
+      });
     }
     resize(size) {
       let updateSize = !size;
@@ -2811,17 +3870,15 @@ ${htmlLog}
      * and destroys existing textures if owned
      */
     resizeAttachments(width, height) {
-      for (let i = 0; i < this.colorAttachments.length; ++i) {
-        if (this.colorAttachments[i]) {
-          const resizedTexture = this.colorAttachments[i].texture.clone({
-            width,
-            height
-          });
-          this.destroyAttachedResource(this.colorAttachments[i]);
-          this.colorAttachments[i] = resizedTexture.view;
-          this.attachResource(resizedTexture.view);
-        }
-      }
+      this.colorAttachments.forEach((colorAttachment, i) => {
+        const resizedTexture = colorAttachment.texture.clone({
+          width,
+          height
+        });
+        this.destroyAttachedResource(colorAttachment);
+        this.colorAttachments[i] = resizedTexture.view;
+        this.attachResource(resizedTexture.view);
+      });
       if (this.depthStencilAttachment) {
         const resizedTexture = this.depthStencilAttachment.texture.clone({
           width,
@@ -2858,30 +3915,538 @@ ${htmlLog}
     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;
+  __publicField(RenderPipeline, "defaultProps", {
+    ...Resource.defaultProps,
+    vs: null,
+    vertexEntryPoint: "vertexMain",
+    vsConstants: {},
+    fs: null,
+    fragmentEntryPoint: "fragmentMain",
+    fsConstants: {},
+    shaderLayout: null,
+    bufferLayout: [],
+    topology: "triangle-list",
+    colorAttachmentFormats: void 0,
+    depthStencilAttachmentFormat: void 0,
+    parameters: {},
+    varyings: void 0,
+    bufferMode: void 0,
+    disableWarnings: false,
+    _sharedRenderPipeline: void 0,
+    bindings: void 0,
+    bindGroups: void 0
+  });
+
+  // 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
+      });
+    }
+  };
+
+  // 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
+  });
+
+  // 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 });
+
+  // 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 });
+
+  // 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));
+  }
+
+  // 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;
     }
   };
-  var RenderPipeline = _RenderPipeline;
-  __publicField(RenderPipeline, "defaultProps", {
-    ...Resource.defaultProps,
-    vs: null,
-    vertexEntryPoint: "vertexMain",
-    vsConstants: {},
-    fs: null,
-    fragmentEntryPoint: "fragmentMain",
-    fsConstants: {},
-    shaderLayout: null,
-    bufferLayout: [],
-    topology: "triangle-list",
-    colorAttachmentFormats: void 0,
-    depthStencilAttachmentFormat: void 0,
-    parameters: {},
-    bindings: {},
-    uniforms: {}
-  });
+  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);
+  }
 
   // src/adapter/resources/render-pass.ts
   var _RenderPass = class extends Resource {
@@ -2921,28 +4486,6 @@ ${htmlLog}
     endTimestampIndex: void 0
   });
 
-  // 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
-  });
-
   // src/adapter/resources/compute-pass.ts
   var _ComputePass = class extends Resource {
     constructor(device, props) {
@@ -2965,8 +4508,69 @@ ${htmlLog}
     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;
@@ -2975,7 +4579,8 @@ ${htmlLog}
   // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
   __publicField(CommandEncoder, "defaultProps", {
     ...Resource.defaultProps,
-    measureExecutionTime: void 0
+    measureExecutionTime: void 0,
+    timeProfilingQuerySet: void 0
   });
 
   // src/adapter/resources/command-buffer.ts
@@ -2992,13 +4597,22 @@ ${htmlLog}
     ...Resource.defaultProps
   });
 
-  // src/shadertypes/data-types/decode-shader-types.ts
+  // 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;
@@ -3010,6 +4624,33 @@ ${htmlLog}
       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,
@@ -3106,7 +4747,18 @@ ${htmlLog}
     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>",
@@ -3173,10 +4825,10 @@ ${htmlLog}
     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,
@@ -3244,7 +4896,7 @@ ${htmlLog}
       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;
         }
       }
@@ -3332,6 +4984,20 @@ ${htmlLog}
     count: void 0
   });
 
+  // src/adapter/resources/fence.ts
+  var _Fence = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "Fence";
+    }
+    constructor(device, props = {}) {
+      super(device, props, _Fence.defaultProps);
+    }
+  };
+  var Fence = _Fence;
+  __publicField(Fence, "defaultProps", {
+    ...Resource.defaultProps
+  });
+
   // src/adapter/resources/pipeline-layout.ts
   var _PipelineLayout = class extends Resource {
     get [Symbol.toStringTag]() {
@@ -3350,6 +5016,200 @@ ${htmlLog}
     }
   });
 
+  // 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]
+  };
+
+  // src/shadertypes/shader-types/shader-block-layout.ts
+  function makeShaderBlockLayout(uniformTypes, options = {}) {
+    const copiedUniformTypes = { ...uniformTypes };
+    const layout = options.layout ?? "std140";
+    const fields = {};
+    let size = 0;
+    for (const [key, uniformType] of Object.entries(copiedUniformTypes)) {
+      size = addToLayout(fields, key, uniformType, size, layout);
+    }
+    size = alignTo(size, getTypeAlignment(copiedUniformTypes, layout));
+    return {
+      layout,
+      byteLength: size * 4,
+      uniformTypes: copiedUniformTypes,
+      fields
+    };
+  }
+  function getLeafLayoutInfo(type, layout) {
+    const resolvedType = resolveVariableShaderTypeAlias(type);
+    const decodedType = getVariableShaderTypeInfo(resolvedType);
+    const matrixMatch = /^mat(\d)x(\d)<.+>$/.exec(resolvedType);
+    if (matrixMatch) {
+      const columns = Number(matrixMatch[1]);
+      const rows = Number(matrixMatch[2]);
+      const columnInfo = getVectorLayoutInfo(
+        rows,
+        resolvedType,
+        decodedType.type,
+        layout
+      );
+      const columnStride = getMatrixColumnStride(columnInfo.size, columnInfo.alignment, layout);
+      return {
+        alignment: columnInfo.alignment,
+        size: columns * columnStride,
+        components: columns * rows,
+        columns,
+        rows,
+        columnStride,
+        shaderType: resolvedType,
+        type: decodedType.type
+      };
+    }
+    const vectorMatch = /^vec(\d)<.+>$/.exec(resolvedType);
+    if (vectorMatch) {
+      return getVectorLayoutInfo(
+        Number(vectorMatch[1]),
+        resolvedType,
+        decodedType.type,
+        layout
+      );
+    }
+    return {
+      alignment: 1,
+      size: 1,
+      components: 1,
+      columns: 1,
+      rows: 1,
+      columnStride: 1,
+      shaderType: resolvedType,
+      type: decodedType.type
+    };
+  }
+  function isCompositeShaderTypeStruct(value) {
+    return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+  }
+  function addToLayout(fields, name2, type, offset, layout) {
+    if (typeof type === "string") {
+      const info = getLeafLayoutInfo(type, layout);
+      const alignedOffset = alignTo(offset, info.alignment);
+      fields[name2] = {
+        offset: alignedOffset,
+        ...info
+      };
+      return alignedOffset + info.size;
+    }
+    if (Array.isArray(type)) {
+      if (Array.isArray(type[0])) {
+        throw new Error(`Nested arrays are not supported for ${name2}`);
+      }
+      const elementType = type[0];
+      const length = type[1];
+      const stride = getArrayStride(elementType, layout);
+      const arrayOffset = alignTo(offset, getTypeAlignment(type, layout));
+      for (let i = 0; i < length; i++) {
+        addToLayout(fields, `${name2}[${i}]`, elementType, arrayOffset + i * stride, layout);
+      }
+      return arrayOffset + stride * length;
+    }
+    if (isCompositeShaderTypeStruct(type)) {
+      const structAlignment = getTypeAlignment(type, layout);
+      let structOffset = alignTo(offset, structAlignment);
+      for (const [memberName, memberType] of Object.entries(type)) {
+        structOffset = addToLayout(fields, `${name2}.${memberName}`, memberType, structOffset, layout);
+      }
+      return alignTo(structOffset, structAlignment);
+    }
+    throw new Error(`Unsupported CompositeShaderType for ${name2}`);
+  }
+  function getTypeSize(type, layout) {
+    if (typeof type === "string") {
+      return getLeafLayoutInfo(type, layout).size;
+    }
+    if (Array.isArray(type)) {
+      const elementType = type[0];
+      const length = type[1];
+      if (Array.isArray(elementType)) {
+        throw new Error("Nested arrays are not supported");
+      }
+      return getArrayStride(elementType, layout) * length;
+    }
+    let size = 0;
+    for (const memberType of Object.values(type)) {
+      const compositeMemberType = memberType;
+      size = alignTo(size, getTypeAlignment(compositeMemberType, layout));
+      size += getTypeSize(compositeMemberType, layout);
+    }
+    return alignTo(size, getTypeAlignment(type, layout));
+  }
+  function getTypeAlignment(type, layout) {
+    if (typeof type === "string") {
+      return getLeafLayoutInfo(type, layout).alignment;
+    }
+    if (Array.isArray(type)) {
+      const elementType = type[0];
+      const elementAlignment = getTypeAlignment(elementType, layout);
+      return uses16ByteArrayAlignment(layout) ? Math.max(elementAlignment, 4) : elementAlignment;
+    }
+    let maxAlignment = 1;
+    for (const memberType of Object.values(type)) {
+      const memberAlignment = getTypeAlignment(memberType, layout);
+      maxAlignment = Math.max(maxAlignment, memberAlignment);
+    }
+    return uses16ByteStructAlignment(layout) ? Math.max(maxAlignment, 4) : maxAlignment;
+  }
+  function getVectorLayoutInfo(components, shaderType, type, layout) {
+    return {
+      alignment: components === 2 ? 2 : 4,
+      size: components === 3 ? 3 : components,
+      components,
+      columns: 1,
+      rows: components,
+      columnStride: components === 3 ? 3 : components,
+      shaderType,
+      type
+    };
+  }
+  function getArrayStride(elementType, layout) {
+    const elementSize = getTypeSize(elementType, layout);
+    const elementAlignment = getTypeAlignment(elementType, layout);
+    return getArrayLikeStride(elementSize, elementAlignment, layout);
+  }
+  function getArrayLikeStride(size, alignment, layout) {
+    return alignTo(size, uses16ByteArrayAlignment(layout) ? 4 : alignment);
+  }
+  function getMatrixColumnStride(size, alignment, layout) {
+    return layout === "std140" ? 4 : alignTo(size, alignment);
+  }
+  function uses16ByteArrayAlignment(layout) {
+    return layout === "std140" || layout === "wgsl-uniform";
+  }
+  function uses16ByteStructAlignment(layout) {
+    return layout === "std140" || layout === "wgsl-uniform";
+  }
+
   // src/utils/array-utils-flat.ts
   var arrayBuffer;
   function getScratchArrayBuffer(byteLength) {
@@ -3374,92 +5234,201 @@ ${htmlLog}
     return isTypedArray(value);
   }
 
-  // src/portable/uniform-buffer-layout.ts
-  var minBufferSize = 1024;
-  var UniformBufferLayout = class {
-    layout = {};
-    /** number of bytes needed for buffer allocation */
-    byteLength;
-    /** Create a new UniformBufferLayout given a map of attributes. */
-    constructor(uniformTypes, uniformSizes = {}) {
-      let size = 0;
-      for (const [key, uniformType] of Object.entries(uniformTypes)) {
-        const typeAndComponents = getVariableShaderTypeInfo(uniformType);
-        const { type, components } = typeAndComponents;
-        const count = components * (uniformSizes?.[key] ?? 1);
-        size = alignTo(size, count);
-        const offset = size;
-        size += count;
-        this.layout[key] = { type, size: count, offset };
-      }
-      size += (4 - size % 4) % 4;
-      const actualByteLength = size * 4;
-      this.byteLength = Math.max(actualByteLength, minBufferSize);
-    }
-    /** Get the data for the complete buffer */
+  // src/portable/shader-block-writer.ts
+  var ShaderBlockWriter = class {
+    /** Layout metadata used to flatten and serialize values. */
+    layout;
+    /**
+     * Creates a writer for a precomputed shader-block layout.
+     */
+    constructor(layout) {
+      this.layout = layout;
+    }
+    /**
+     * Returns `true` if the flattened layout contains the given field.
+     */
+    has(name2) {
+      return Boolean(this.layout.fields[name2]);
+    }
+    /**
+     * Returns offset and size metadata for a flattened field.
+     */
+    get(name2) {
+      const entry = this.layout.fields[name2];
+      return entry ? { offset: entry.offset, size: entry.size } : void 0;
+    }
+    /**
+     * Flattens nested composite values into leaf-path values understood by {@link UniformBlock}.
+     *
+     * Top-level values may be supplied either in nested object form matching the
+     * declared composite shader types or as already-flattened leaf-path values.
+     */
+    getFlatUniformValues(uniformValues) {
+      const flattenedUniformValues = {};
+      for (const [name2, value] of Object.entries(uniformValues)) {
+        const uniformType = this.layout.uniformTypes[name2];
+        if (uniformType) {
+          this._flattenCompositeValue(flattenedUniformValues, name2, uniformType, value);
+        } else if (this.layout.fields[name2]) {
+          flattenedUniformValues[name2] = value;
+        }
+      }
+      return flattenedUniformValues;
+    }
+    /**
+     * Serializes the supplied values into buffer-backed binary data.
+     *
+     * The returned view length matches {@link ShaderBlockLayout.byteLength}, which
+     * is the exact packed size of the block.
+     */
     getData(uniformValues) {
-      const arrayBuffer2 = getScratchArrayBuffer(this.byteLength);
+      const buffer = getScratchArrayBuffer(this.layout.byteLength);
+      new Uint8Array(buffer, 0, this.layout.byteLength).fill(0);
       const typedArrays = {
-        i32: new Int32Array(arrayBuffer2),
-        u32: new Uint32Array(arrayBuffer2),
-        f32: new Float32Array(arrayBuffer2),
-        // TODO not implemented
-        f16: new Uint16Array(arrayBuffer2)
+        i32: new Int32Array(buffer),
+        u32: new Uint32Array(buffer),
+        f32: new Float32Array(buffer),
+        f16: new Uint16Array(buffer)
       };
-      for (const [name2, value] of Object.entries(uniformValues)) {
-        const uniformLayout = this.layout[name2];
-        if (!uniformLayout) {
-          log.warn(`Supplied uniform value ${name2} not present in uniform block layout`)();
-          continue;
+      const flattenedUniformValues = this.getFlatUniformValues(uniformValues);
+      for (const [name2, value] of Object.entries(flattenedUniformValues)) {
+        this._writeLeafValue(typedArrays, name2, value);
+      }
+      return new Uint8Array(buffer, 0, this.layout.byteLength);
+    }
+    /**
+     * Recursively flattens nested values using the declared composite shader type.
+     */
+    _flattenCompositeValue(flattenedUniformValues, baseName, uniformType, value) {
+      if (value === void 0) {
+        return;
+      }
+      if (typeof uniformType === "string" || this.layout.fields[baseName]) {
+        flattenedUniformValues[baseName] = value;
+        return;
+      }
+      if (Array.isArray(uniformType)) {
+        const elementType = uniformType[0];
+        const length = uniformType[1];
+        if (Array.isArray(elementType)) {
+          throw new Error(`Nested arrays are not supported for ${baseName}`);
         }
-        const { type, size, offset } = uniformLayout;
-        const typedArray = typedArrays[type];
-        if (size === 1) {
-          if (typeof value !== "number" && typeof value !== "boolean") {
-            log.warn(
-              `Supplied value for single component uniform ${name2} is not a number: ${value}`
-            )();
+        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;
           }
-          typedArray[offset] = Number(value);
-        } else {
-          if (!isNumberArray(value)) {
-            log.warn(
-              `Supplied value for multi component / array uniform ${name2} is not a numeric array: ${value}`
-            )();
+          this._flattenCompositeValue(
+            flattenedUniformValues,
+            `${baseName}[${index}]`,
+            elementType,
+            elementValue
+          );
+        }
+        return;
+      }
+      if (isCompositeShaderTypeStruct(uniformType) && isCompositeUniformObject(value)) {
+        for (const [key, subValue] of Object.entries(value)) {
+          if (subValue === void 0) {
             continue;
           }
-          typedArray.set(value, offset);
+          const nestedName = `${baseName}.${key}`;
+          this._flattenCompositeValue(flattenedUniformValues, nestedName, uniformType[key], subValue);
         }
+        return;
       }
-      return new Uint8Array(arrayBuffer2, 0, this.byteLength);
+      log.warn(`Unsupported uniform value for ${baseName}:`, value)();
     }
-    /** Does this layout have a field with specified name */
-    has(name2) {
-      return Boolean(this.layout[name2]);
+    /**
+     * Expands tightly packed numeric arrays into per-element leaf fields.
+     */
+    _flattenPackedArray(flattenedUniformValues, baseName, elementType, length, value) {
+      const numericValue = value;
+      const elementLayout = getLeafLayoutInfo(elementType, this.layout.layout);
+      const packedElementLength = elementLayout.components;
+      for (let index = 0; index < length; index++) {
+        const start = index * packedElementLength;
+        if (start >= numericValue.length) {
+          break;
+        }
+        if (packedElementLength === 1) {
+          flattenedUniformValues[`${baseName}[${index}]`] = Number(numericValue[start]);
+        } else {
+          flattenedUniformValues[`${baseName}[${index}]`] = sliceNumericArray(
+            value,
+            start,
+            start + packedElementLength
+          );
+        }
+      }
     }
-    /** Get offset and size for a field with specified name */
-    get(name2) {
-      const layout = this.layout[name2];
-      return layout;
+    /**
+     * Writes one flattened leaf value into its typed-array view.
+     */
+    _writeLeafValue(typedArrays, name2, value) {
+      const entry = this.layout.fields[name2];
+      if (!entry) {
+        log.warn(`Uniform ${name2} not found in layout`)();
+        return;
+      }
+      const { type, components, columns, rows, offset, columnStride } = entry;
+      const array = typedArrays[type];
+      if (components === 1) {
+        array[offset] = Number(value);
+        return;
+      }
+      const sourceValue = value;
+      if (columns === 1) {
+        for (let componentIndex = 0; componentIndex < components; componentIndex++) {
+          array[offset + componentIndex] = Number(sourceValue[componentIndex] ?? 0);
+        }
+        return;
+      }
+      let sourceIndex = 0;
+      for (let columnIndex = 0; columnIndex < columns; columnIndex++) {
+        const columnOffset = offset + columnIndex * columnStride;
+        for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
+          array[columnOffset + rowIndex] = Number(sourceValue[sourceIndex++] ?? 0);
+        }
+      }
     }
   };
+  function isCompositeUniformObject(value) {
+    return Boolean(value) && typeof value === "object" && !Array.isArray(value) && !ArrayBuffer.isView(value);
+  }
+  function sliceNumericArray(value, start, end) {
+    return Array.prototype.slice.call(value, start, end);
+  }
 
   // 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;
@@ -3524,27 +5493,33 @@ ${htmlLog}
   };
 
   // src/portable/uniform-store.ts
+  var minUniformBufferSize = 1024;
   var UniformStore = class {
+    /** Device used to infer layout and allocate buffers. */
+    device;
     /** Stores the uniform values for each uniform block */
     uniformBlocks = /* @__PURE__ */ new Map();
-    /** Can generate data for a uniform buffer for each block from data */
-    uniformBufferLayouts = /* @__PURE__ */ new Map();
+    /** Flattened layout metadata for each block. */
+    shaderBlockLayouts = /* @__PURE__ */ new Map();
+    /** Serializers for block-backed uniform data. */
+    shaderBlockWriters = /* @__PURE__ */ new Map();
     /** Actual buffer for the blocks */
     uniformBuffers = /* @__PURE__ */ new Map();
     /**
-     * Create a new UniformStore instance
-     * @param blocks
+     * Creates a new {@link UniformStore} for the supplied device and block definitions.
      */
-    constructor(blocks) {
+    constructor(device, blocks) {
+      this.device = device;
       for (const [bufferName, block] of Object.entries(blocks)) {
         const uniformBufferName = bufferName;
-        const uniformBufferLayout = new UniformBufferLayout(
-          block.uniformTypes ?? {},
-          block.uniformSizes ?? {}
-        );
-        this.uniformBufferLayouts.set(uniformBufferName, uniformBufferLayout);
+        const shaderBlockLayout = makeShaderBlockLayout(block.uniformTypes ?? {}, {
+          layout: block.layout ?? getDefaultUniformBufferLayout(device)
+        });
+        const shaderBlockWriter = new ShaderBlockWriter(shaderBlockLayout);
+        this.shaderBlockLayouts.set(uniformBufferName, shaderBlockLayout);
+        this.shaderBlockWriters.set(uniformBufferName, shaderBlockWriter);
         const uniformBlock = new UniformBlock({ name: bufferName });
-        uniformBlock.setUniforms(block.defaultUniforms || {});
+        uniformBlock.setUniforms(shaderBlockWriter.getFlatUniformValues(block.defaultUniforms || {}));
         this.uniformBlocks.set(uniformBufferName, uniformBlock);
       }
     }
@@ -3556,33 +5531,51 @@ ${htmlLog}
     }
     /**
      * Set uniforms
-     * Makes all properties partial
+     *
+     * Makes all group properties partial and eagerly propagates changes to any
+     * managed GPU buffers.
      */
     setUniforms(uniforms) {
       for (const [blockName, uniformValues] of Object.entries(uniforms)) {
-        this.uniformBlocks.get(blockName)?.setUniforms(uniformValues);
+        const uniformBufferName = blockName;
+        const shaderBlockWriter = this.shaderBlockWriters.get(uniformBufferName);
+        const flattenedUniforms = shaderBlockWriter?.getFlatUniformValues(
+          uniformValues || {}
+        );
+        this.uniformBlocks.get(uniformBufferName)?.setUniforms(flattenedUniforms || {});
       }
       this.updateUniformBuffers();
     }
-    /** Get the required minimum length of the uniform buffer */
+    /**
+     * Returns the allocation size for the named uniform buffer.
+     *
+     * This may exceed the packed layout size because minimum buffer-size policy is
+     * applied at the store layer.
+     */
     getUniformBufferByteLength(uniformBufferName) {
-      return this.uniformBufferLayouts.get(uniformBufferName)?.byteLength || 0;
+      const packedByteLength = this.shaderBlockLayouts.get(uniformBufferName)?.byteLength || 0;
+      return Math.max(packedByteLength, minUniformBufferSize);
     }
-    /** Get formatted binary memory that can be uploaded to a buffer */
+    /**
+     * Returns packed binary data that can be uploaded to the named uniform buffer.
+     *
+     * The returned view length matches the packed block size and is not padded to
+     * the store's minimum allocation size.
+     */
     getUniformBufferData(uniformBufferName) {
       const uniformValues = this.uniformBlocks.get(uniformBufferName)?.getAllUniforms() || {};
-      return this.uniformBufferLayouts.get(uniformBufferName)?.getData(uniformValues);
+      const shaderBlockWriter = this.shaderBlockWriters.get(uniformBufferName);
+      return shaderBlockWriter?.getData(uniformValues) || new Uint8Array(0);
     }
     /**
-     * Creates an unmanaged uniform buffer (umnanaged means that application is responsible for destroying it)
-     * The new buffer is initialized with current / supplied values
+     * Creates an unmanaged uniform buffer initialized with the current or supplied values.
      */
-    createUniformBuffer(device, uniformBufferName, uniforms) {
+    createUniformBuffer(uniformBufferName, uniforms) {
       if (uniforms) {
         this.setUniforms(uniforms);
       }
       const byteLength = this.getUniformBufferByteLength(uniformBufferName);
-      const uniformBuffer = device.createBuffer({
+      const uniformBuffer = this.device.createBuffer({
         usage: Buffer2.UNIFORM | Buffer2.COPY_DST,
         byteLength
       });
@@ -3590,11 +5583,11 @@ ${htmlLog}
       uniformBuffer.write(uniformBufferData);
       return uniformBuffer;
     }
-    /** Get the managed uniform buffer. "managed" resources are destroyed when the uniformStore is destroyed. */
-    getManagedUniformBuffer(device, uniformBufferName) {
+    /** Returns the managed uniform buffer for the named block. */
+    getManagedUniformBuffer(uniformBufferName) {
       if (!this.uniformBuffers.get(uniformBufferName)) {
         const byteLength = this.getUniformBufferByteLength(uniformBufferName);
-        const uniformBuffer = device.createBuffer({
+        const uniformBuffer = this.device.createBuffer({
           usage: Buffer2.UNIFORM | Buffer2.COPY_DST,
           byteLength
         });
@@ -3602,7 +5595,11 @@ ${htmlLog}
       }
       return this.uniformBuffers.get(uniformBufferName);
     }
-    /** Updates all uniform buffers where values have changed */
+    /**
+     * Updates every managed uniform buffer whose source uniforms have changed.
+     *
+     * @returns The first redraw reason encountered, or `false` if nothing changed.
+     */
     updateUniformBuffers() {
       let reason = false;
       for (const uniformBufferName of this.uniformBlocks.keys()) {
@@ -3614,7 +5611,11 @@ ${htmlLog}
       }
       return reason;
     }
-    /** Update one uniform buffer. Only updates if values have changed */
+    /**
+     * Updates one managed uniform buffer if its corresponding block is dirty.
+     *
+     * @returns The redraw reason for the update, or `false` if no write occurred.
+     */
     updateUniformBuffer(uniformBufferName) {
       const uniformBlock = this.uniformBlocks.get(uniformBufferName);
       let uniformBuffer = this.uniformBuffers.get(uniformBufferName);
@@ -3635,8 +5636,49 @@ ${htmlLog}
       return reason;
     }
   };
+  function getDefaultUniformBufferLayout(device) {
+    return device.type === "webgpu" ? "wgsl-uniform" : "std140";
+  }
+
+  // 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;
+    const { bytesPerImage } = memoryLayout;
+    const offset = bytesPerImage * image;
+    const totalPixels = memoryLayout.bytesPerImage / bytesPerComponent;
+    switch (format) {
+      case "rgba8unorm":
+      case "bgra8unorm":
+      case "rgba8uint":
+        return new Uint8Array(arrayBuffer2, offset, totalPixels);
+      case "r8unorm":
+        return new Uint8Array(arrayBuffer2, offset, totalPixels);
+      case "r16uint":
+      case "rgba16uint":
+        return new Uint16Array(arrayBuffer2, offset, totalPixels);
+      case "r32uint":
+      case "rgba32uint":
+        return new Uint32Array(arrayBuffer2, offset, totalPixels);
+      case "r32float":
+        return new Float32Array(arrayBuffer2, offset, totalPixels);
+      case "rgba16float":
+        return new Uint16Array(arrayBuffer2, offset, totalPixels);
+      case "rgba32float":
+        return new Float32Array(arrayBuffer2, offset, totalPixels);
+      default:
+        throw new Error(`Unsupported format: ${format}`);
+    }
+  }
+  function setTextureImageData(arrayBuffer2, memoryLayout, format, data, image = 0) {
+    const offset = 0;
+    const totalPixels = memoryLayout.bytesPerImage / memoryLayout.bytesPerPixel;
+    const subArray = data.subarray(0, totalPixels);
+    const typedArray = getTextureImageView(arrayBuffer2, memoryLayout, format, image);
+    typedArray.set(subArray, offset);
+  }
 
-  // src/shadertypes/textures/pixel-utils.ts
+  // 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.");
@@ -3646,7 +5688,7 @@ ${htmlLog}
     let bitOffsetWithinPixel = 0;
     const channels = [];
     for (let i = 0; i < 4; i++) {
-      const bits = bitsPerChannel[i];
+      const bits = bitsPerChannel[i] ?? 0;
       if (bits <= 0) {
         channels.push(0);
       } else {
@@ -3655,14 +5697,14 @@ ${htmlLog}
         bitOffsetWithinPixel += bits;
       }
     }
-    return [channels[0], channels[1], channels[2], channels[3]];
+    return [channels[0] ?? 0, channels[1] ?? 0, channels[2] ?? 0, channels[3] ?? 0];
   }
   function writePixel(dataView, bitOffset, bitsPerChannel, pixel) {
     let currentBitOffset = bitOffset;
     for (let channel = 0; channel < 4; channel++) {
-      const bits = bitsPerChannel[channel];
+      const bits = bitsPerChannel[channel] ?? 0;
       const maxValue = (1 << bits) - 1;
-      const channelValue = pixel[channel] & maxValue;
+      const channelValue = (pixel[channel] ?? 0) & maxValue;
       writeBitsToDataView(dataView, currentBitOffset, bits, channelValue);
       currentBitOffset += bits;
     }