@luma.gl/effects 9.3.0-alpha.2 → 9.3.0-alpha.6

package/dist/dist.dev.js

@@ -67,12 +67,14 @@ var __exports__ = (() => {
     Fence: () => Fence,
     Framebuffer: () => Framebuffer,
     PipelineLayout: () => PipelineLayout,
+    PresentationContext: () => PresentationContext,
     QuerySet: () => QuerySet,
     RenderPass: () => RenderPass,
     RenderPipeline: () => RenderPipeline,
     Resource: () => Resource,
     Sampler: () => Sampler,
     Shader: () => Shader,
+    SharedRenderPipeline: () => SharedRenderPipeline,
     Texture: () => Texture,
     TextureFormatDecoder: () => TextureFormatDecoder,
     TextureView: () => TextureView,
@@ -83,6 +85,8 @@ var __exports__ = (() => {
     VertexArray: () => VertexArray,
     _getTextureFormatDefinition: () => getTextureFormatDefinition,
     _getTextureFormatTable: () => getTextureFormatTable,
+    assert: () => assert2,
+    assertDefined: () => assertDefined,
     getAttributeInfosFromLayouts: () => getAttributeInfosFromLayouts,
     getAttributeShaderTypeInfo: () => getAttributeShaderTypeInfo,
     getDataType: () => getDataType,
@@ -299,6 +303,24 @@ var __exports__ = (() => {
   };
 
   // ../core/src/utils/stats-manager.ts
+  var GPU_TIME_AND_MEMORY_STATS = "GPU Time and Memory";
+  var GPU_TIME_AND_MEMORY_STAT_ORDER = [
+    "Adapter",
+    "GPU",
+    "GPU Type",
+    "GPU Backend",
+    "Frame Rate",
+    "CPU Time",
+    "GPU Time",
+    "GPU Memory",
+    "Buffer Memory",
+    "Texture Memory",
+    "Referenced Buffer Memory",
+    "Referenced Texture Memory",
+    "Swap Chain Texture"
+  ];
+  var ORDERED_STATS_CACHE = /* @__PURE__ */ new WeakMap();
+  var ORDERED_STAT_NAME_SET_CACHE = /* @__PURE__ */ new WeakMap();
   var StatsManager = class {
     stats = /* @__PURE__ */ new Map();
     getStats(name2) {
@@ -308,10 +330,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;
@@ -343,7 +405,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) {
@@ -462,13 +656,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;
@@ -483,7 +670,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,
@@ -495,12 +682,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();
@@ -508,22 +692,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() {
@@ -547,20 +725,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() {
@@ -576,11 +754,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) {
@@ -590,50 +773,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) {
@@ -649,78 +845,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;
-    }
-  };
-  Log.VERSION = VERSION;
-  function normalizeLogLevel(logLevel) {
-    if (!logLevel) {
-      return 0;
+      return this.isEnabled() && super._shouldLog(logLevel);
     }
-    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)) : "";
@@ -742,10 +894,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" });
 
   // ../core/src/utils/log.ts
-  var log = new Log({ id: "luma.gl" });
+  var log = new ProbeLog({ id: "luma.gl" });
 
   // ../core/src/utils/uid.ts
   var uidCounters = {};
@@ -756,6 +908,57 @@ var __exports__ = (() => {
   }
 
   // ../core/src/adapter/resources/resource.ts
+  var CPU_HOTSPOT_PROFILER_MODULE = "cpu-hotspot-profiler";
+  var RESOURCE_COUNTS_STATS = "GPU Resource Counts";
+  var LEGACY_RESOURCE_COUNTS_STATS = "Resource Counts";
+  var GPU_TIME_AND_MEMORY_STATS2 = "GPU Time and Memory";
+  var BASE_RESOURCE_COUNT_ORDER = [
+    "Resources",
+    "Buffers",
+    "Textures",
+    "Samplers",
+    "TextureViews",
+    "Framebuffers",
+    "QuerySets",
+    "Shaders",
+    "RenderPipelines",
+    "ComputePipelines",
+    "PipelineLayouts",
+    "VertexArrays",
+    "RenderPasss",
+    "ComputePasss",
+    "CommandEncoders",
+    "CommandBuffers"
+  ];
+  var WEBGL_RESOURCE_COUNT_ORDER = [
+    "Resources",
+    "Buffers",
+    "Textures",
+    "Samplers",
+    "TextureViews",
+    "Framebuffers",
+    "QuerySets",
+    "Shaders",
+    "RenderPipelines",
+    "SharedRenderPipelines",
+    "ComputePipelines",
+    "PipelineLayouts",
+    "VertexArrays",
+    "RenderPasss",
+    "ComputePasss",
+    "CommandEncoders",
+    "CommandBuffers"
+  ];
+  var BASE_RESOURCE_COUNT_STAT_ORDER = BASE_RESOURCE_COUNT_ORDER.flatMap((resourceType) => [
+    `${resourceType} Created`,
+    `${resourceType} Active`
+  ]);
+  var WEBGL_RESOURCE_COUNT_STAT_ORDER = WEBGL_RESOURCE_COUNT_ORDER.flatMap((resourceType) => [
+    `${resourceType} Created`,
+    `${resourceType} Active`
+  ]);
+  var ORDERED_STATS_CACHE2 = /* @__PURE__ */ new WeakMap();
+  var ORDERED_STAT_NAME_SET_CACHE2 = /* @__PURE__ */ new WeakMap();
   var Resource = class {
     toString() {
       return `${this[Symbol.toStringTag] || this.constructor.name}:"${this.id}"`;
@@ -772,6 +975,8 @@ var __exports__ = (() => {
     destroyed = false;
     /** For resources that allocate GPU memory */
     allocatedBytes = 0;
+    /** Stats bucket currently holding the tracked allocation */
+    allocatedBytesName = null;
     /** Attached resources will be destroyed when this resource is destroyed. Tracks auto-created "sub" resources. */
     _attachedResources = /* @__PURE__ */ new Set();
     /**
@@ -793,6 +998,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() */
@@ -831,7 +1039,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();
@@ -839,37 +1047,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 */
@@ -887,6 +1165,96 @@ var __exports__ = (() => {
     }
     return mergedProps;
   }
+  function initializeStats2(stats, orderedStatNames) {
+    const statsMap = stats.stats;
+    let addedOrderedStat = false;
+    for (const statName of orderedStatNames) {
+      if (!statsMap[statName]) {
+        stats.get(statName);
+        addedOrderedStat = true;
+      }
+    }
+    const statCount = Object.keys(statsMap).length;
+    const cachedStats = ORDERED_STATS_CACHE2.get(stats);
+    if (!addedOrderedStat && cachedStats?.orderedStatNames === orderedStatNames && cachedStats.statCount === statCount) {
+      return;
+    }
+    const reorderedStats = {};
+    let orderedStatNamesSet = ORDERED_STAT_NAME_SET_CACHE2.get(orderedStatNames);
+    if (!orderedStatNamesSet) {
+      orderedStatNamesSet = new Set(orderedStatNames);
+      ORDERED_STAT_NAME_SET_CACHE2.set(orderedStatNames, orderedStatNamesSet);
+    }
+    for (const statName of orderedStatNames) {
+      if (statsMap[statName]) {
+        reorderedStats[statName] = statsMap[statName];
+      }
+    }
+    for (const [statName, stat] of Object.entries(statsMap)) {
+      if (!orderedStatNamesSet.has(statName)) {
+        reorderedStats[statName] = stat;
+      }
+    }
+    for (const statName of Object.keys(statsMap)) {
+      delete statsMap[statName];
+    }
+    Object.assign(statsMap, reorderedStats);
+    ORDERED_STATS_CACHE2.set(stats, { orderedStatNames, statCount });
+  }
+  function getResourceCountStatOrder(device) {
+    return device.type === "webgl" ? WEBGL_RESOURCE_COUNT_STAT_ORDER : BASE_RESOURCE_COUNT_STAT_ORDER;
+  }
+  function getCpuHotspotProfiler(device) {
+    const profiler = device.userData[CPU_HOTSPOT_PROFILER_MODULE];
+    return profiler?.enabled ? profiler : null;
+  }
+  function getTimestamp() {
+    return globalThis.performance?.now?.() ?? Date.now();
+  }
+  function recordTransientCanvasResourceCreate(device, name2) {
+    const profiler = getCpuHotspotProfiler(device);
+    if (!profiler || !profiler.activeDefaultFramebufferAcquireDepth) {
+      return;
+    }
+    profiler.transientCanvasResourceCreates = (profiler.transientCanvasResourceCreates || 0) + 1;
+    switch (name2) {
+      case "Texture":
+        profiler.transientCanvasTextureCreates = (profiler.transientCanvasTextureCreates || 0) + 1;
+        break;
+      case "TextureView":
+        profiler.transientCanvasTextureViewCreates = (profiler.transientCanvasTextureViewCreates || 0) + 1;
+        break;
+      case "Sampler":
+        profiler.transientCanvasSamplerCreates = (profiler.transientCanvasSamplerCreates || 0) + 1;
+        break;
+      case "Framebuffer":
+        profiler.transientCanvasFramebufferCreates = (profiler.transientCanvasFramebufferCreates || 0) + 1;
+        break;
+      default:
+        break;
+    }
+  }
+  function getCanonicalResourceName(resource) {
+    let prototype = Object.getPrototypeOf(resource);
+    while (prototype) {
+      const parentPrototype = Object.getPrototypeOf(prototype);
+      if (!parentPrototype || parentPrototype === Resource.prototype) {
+        return getPrototypeToStringTag(prototype) || resource[Symbol.toStringTag] || resource.constructor.name;
+      }
+      prototype = parentPrototype;
+    }
+    return resource[Symbol.toStringTag] || resource.constructor.name;
+  }
+  function getPrototypeToStringTag(prototype) {
+    const descriptor = Object.getOwnPropertyDescriptor(prototype, Symbol.toStringTag);
+    if (typeof descriptor?.get === "function") {
+      return descriptor.get.call(prototype);
+    }
+    if (typeof descriptor?.value === "string") {
+      return descriptor.value;
+    }
+    return null;
+  }
 
   // ../core/src/adapter/resources/buffer.ts
   var _Buffer = class extends Resource {
@@ -926,18 +1294,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;
       }
     }
   };
@@ -1133,6 +1509,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";
@@ -1166,16 +1543,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": {},
@@ -1278,7 +1655,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 },
@@ -1345,10 +1722,19 @@ var __exports__ = (() => {
     depth,
     byteAlignment
   }) {
-    const { bytesPerPixel } = textureFormatDecoder.getInfo(format);
-    const unpaddedBytesPerRow = width * bytesPerPixel;
+    const formatInfo = textureFormatDecoder.getInfo(format);
+    const {
+      bytesPerPixel,
+      bytesPerBlock = bytesPerPixel,
+      blockWidth = 1,
+      blockHeight = 1,
+      compressed = false
+    } = formatInfo;
+    const blockColumns = compressed ? Math.ceil(width / blockWidth) : width;
+    const blockRows = compressed ? Math.ceil(height / blockHeight) : height;
+    const unpaddedBytesPerRow = blockColumns * bytesPerBlock;
     const bytesPerRow = Math.ceil(unpaddedBytesPerRow / byteAlignment) * byteAlignment;
-    const rowsPerImage = height;
+    const rowsPerImage = blockRows;
     const byteLength = bytesPerRow * rowsPerImage * depth;
     return {
       bytesPerPixel,
@@ -1374,7 +1760,8 @@ var __exports__ = (() => {
     const isSigned = formatInfo?.signed;
     const isInteger = formatInfo?.integer;
     const isWebGLSpecific = formatInfo?.webgl;
-    formatCapabilities.render &&= !isSigned;
+    const isCompressed = Boolean(formatInfo?.compressed);
+    formatCapabilities.render &&= !isDepthStencil && !isCompressed;
     formatCapabilities.filter &&= !isDepthStencil && !isSigned && !isInteger && !isWebGLSpecific;
     return formatCapabilities;
   }
@@ -1386,6 +1773,7 @@ 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;
@@ -1398,7 +1786,7 @@ var __exports__ = (() => {
       const dataType = `${type}${length}`;
       const decodedType = getDataTypeInfo(dataType);
       const bits = decodedType.byteLength * 8;
-      const components = channels.length;
+      const components = channels?.length ?? 1;
       const bitsPerChannel = [
         bits,
         components >= 2 ? bits : 0,
@@ -1415,7 +1803,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
       };
@@ -1471,8 +1859,29 @@ var __exports__ = (() => {
       const [, blockWidth, blockHeight] = matches;
       return { blockWidth: Number(blockWidth), blockHeight: Number(blockHeight) };
     }
+    if (format.startsWith("bc") || format.startsWith("etc1") || format.startsWith("etc2") || format.startsWith("eac") || format.startsWith("atc")) {
+      return { blockWidth: 4, blockHeight: 4 };
+    }
+    if (format.startsWith("pvrtc-rgb4") || format.startsWith("pvrtc-rgba4")) {
+      return { blockWidth: 4, blockHeight: 4 };
+    }
+    if (format.startsWith("pvrtc-rgb2") || format.startsWith("pvrtc-rgba2")) {
+      return { blockWidth: 8, blockHeight: 4 };
+    }
     return null;
   }
+  function getCompressedTextureBlockByteLength(format) {
+    if (format.startsWith("bc1") || format.startsWith("bc4") || format.startsWith("etc1") || format.startsWith("etc2-rgb8") || format.startsWith("etc2-rgb8a1") || format.startsWith("eac-r11") || format === "atc-rgb-unorm-webgl") {
+      return 8;
+    }
+    if (format.startsWith("bc2") || format.startsWith("bc3") || format.startsWith("bc5") || format.startsWith("bc6h") || format.startsWith("bc7") || format.startsWith("etc2-rgba8") || format.startsWith("eac-rg11") || format.startsWith("astc") || format === "atc-rgba-unorm-webgl" || format === "atc-rgbai-unorm-webgl") {
+      return 16;
+    }
+    if (format.startsWith("pvrtc")) {
+      return 8;
+    }
+    return 16;
+  }
 
   // ../core/src/image-utils/image-types.ts
   function isExternalImage(data) {
@@ -1533,6 +1942,8 @@ var __exports__ = (() => {
     /** Used by other luma.gl modules to store data on the device */
     _moduleData = {};
     _textureCaps = {};
+    /** Internal timestamp query set used when GPU timing collection is enabled for this device. */
+    _debugGPUTimeQuery = null;
     constructor(props) {
       this.props = { ..._Device.defaultProps, ...props };
       this.id = this.props.id || uid(this[Symbol.toStringTag].toLowerCase());
@@ -1586,6 +1997,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);
@@ -1668,6 +2089,70 @@ 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 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() {
@@ -1775,7 +2260,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")),
@@ -1786,9 +2272,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: {
@@ -1797,6 +2285,25 @@ or create a device with the 'debug: true' prop.`;
     // INTERNAL
     _handle: void 0
   });
+  function _getDefaultDebugValue(logDebugValue, nodeEnv) {
+    if (logDebugValue !== void 0 && logDebugValue !== null) {
+      return Boolean(logDebugValue);
+    }
+    if (nodeEnv !== void 0) {
+      return nodeEnv !== "production";
+    }
+    return false;
+  }
+  function getDefaultDebugValue() {
+    return _getDefaultDebugValue(log.get("debug"), getNodeEnv());
+  }
+  function getNodeEnv() {
+    const processObject = globalThis.process;
+    if (!processObject?.env) {
+      return void 0;
+    }
+    return processObject.env["NODE_ENV"];
+  }
 
   // ../core/src/adapter/luma.ts
   var STARTUP_MESSAGE = "set luma.log.level=1 (or higher) to trace rendering";
@@ -1974,6 +2481,100 @@ or create a device with the 'debug: true' prop.`;
     return pageLoadPromise;
   }
 
+  // ../core/src/adapter/canvas-observer.ts
+  var CanvasObserver = class {
+    props;
+    _resizeObserver;
+    _intersectionObserver;
+    _observeDevicePixelRatioTimeout = null;
+    _observeDevicePixelRatioMediaQuery = null;
+    _handleDevicePixelRatioChange = () => this._refreshDevicePixelRatio();
+    _trackPositionInterval = null;
+    _started = false;
+    get started() {
+      return this._started;
+    }
+    constructor(props) {
+      this.props = props;
+    }
+    start() {
+      if (this._started || !this.props.canvas) {
+        return;
+      }
+      this._started = true;
+      this._intersectionObserver ||= new IntersectionObserver(
+        (entries) => this.props.onIntersection(entries)
+      );
+      this._resizeObserver ||= new ResizeObserver((entries) => this.props.onResize(entries));
+      this._intersectionObserver.observe(this.props.canvas);
+      try {
+        this._resizeObserver.observe(this.props.canvas, { box: "device-pixel-content-box" });
+      } catch {
+        this._resizeObserver.observe(this.props.canvas, { box: "content-box" });
+      }
+      this._observeDevicePixelRatioTimeout = setTimeout(() => this._refreshDevicePixelRatio(), 0);
+      if (this.props.trackPosition) {
+        this._trackPosition();
+      }
+    }
+    stop() {
+      if (!this._started) {
+        return;
+      }
+      this._started = false;
+      if (this._observeDevicePixelRatioTimeout) {
+        clearTimeout(this._observeDevicePixelRatioTimeout);
+        this._observeDevicePixelRatioTimeout = null;
+      }
+      if (this._observeDevicePixelRatioMediaQuery) {
+        this._observeDevicePixelRatioMediaQuery.removeEventListener(
+          "change",
+          this._handleDevicePixelRatioChange
+        );
+        this._observeDevicePixelRatioMediaQuery = null;
+      }
+      if (this._trackPositionInterval) {
+        clearInterval(this._trackPositionInterval);
+        this._trackPositionInterval = null;
+      }
+      this._resizeObserver?.disconnect();
+      this._intersectionObserver?.disconnect();
+    }
+    _refreshDevicePixelRatio() {
+      if (!this._started) {
+        return;
+      }
+      this.props.onDevicePixelRatioChange();
+      this._observeDevicePixelRatioMediaQuery?.removeEventListener(
+        "change",
+        this._handleDevicePixelRatioChange
+      );
+      this._observeDevicePixelRatioMediaQuery = matchMedia(
+        `(resolution: ${window.devicePixelRatio}dppx)`
+      );
+      this._observeDevicePixelRatioMediaQuery.addEventListener(
+        "change",
+        this._handleDevicePixelRatioChange,
+        { once: true }
+      );
+    }
+    _trackPosition(intervalMs = 100) {
+      if (this._trackPositionInterval) {
+        return;
+      }
+      this._trackPositionInterval = setInterval(() => {
+        if (!this._started) {
+          if (this._trackPositionInterval) {
+            clearInterval(this._trackPositionInterval);
+            this._trackPositionInterval = null;
+          }
+        } else {
+          this.props.onPositionChange();
+        }
+      }, intervalMs);
+    }
+  };
+
   // ../core/src/utils/promise-utils.ts
   function withResolvers() {
     let resolve;
@@ -1985,8 +2586,21 @@ or create a device with the 'debug: true' prop.`;
     return { promise, resolve, reject };
   }
 
-  // ../core/src/adapter/canvas-context.ts
-  var _CanvasContext = class {
+  // ../core/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;
+  }
+
+  // ../core/src/adapter/canvas-surface.ts
+  var _CanvasSurface = class {
     static isHTMLCanvas(canvas) {
       return typeof HTMLCanvasElement !== "undefined" && canvas instanceof HTMLCanvasElement;
     }
@@ -2022,10 +2636,7 @@ or create a device with the 'debug: true' prop.`;
     drawingBufferHeight;
     /** Resolves when the canvas is initialized, i.e. when the ResizeObserver has updated the pixel size */
     _initializedResolvers = withResolvers();
-    /** ResizeObserver to track canvas size changes */
-    _resizeObserver;
-    /** IntersectionObserver to track canvas visibility changes */
-    _intersectionObserver;
+    _canvasObserver;
     /** Position of the canvas in the document, updated by a timer */
     _position = [0, 0];
     /** Whether this canvas context has been destroyed */
@@ -2036,7 +2647,7 @@ or create a device with the 'debug: true' prop.`;
       return `${this[Symbol.toStringTag]}(${this.id})`;
     }
     constructor(props) {
-      this.props = { ..._CanvasContext.defaultProps, ...props };
+      this.props = { ..._CanvasSurface.defaultProps, ...props };
       props = this.props;
       this.initialized = this._initializedResolvers.promise;
       if (!isBrowser()) {
@@ -2048,11 +2659,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;
@@ -2068,25 +2679,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) {
@@ -2100,59 +2707,36 @@ or create a device with the 'debug: true' prop.`;
       this._resizeDrawingBufferIfNeeded();
       return this._getCurrentFramebuffer(options);
     }
-    // SIZE METHODS
-    /**
-     * Returns the size covered by the canvas in CSS pixels
-     * @note This can be different from the actual device pixel size of a canvas due to DPR scaling, and rounding to integer pixels
-     * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
-     */
     getCSSSize() {
       return [this.cssWidth, this.cssHeight];
     }
     getPosition() {
       return this._position;
     }
-    /**
-     * Returns the size covered by the canvas in actual device pixels.
-     * @note This can be different from the 'CSS' size of a canvas due to DPR scaling, and rounding to integer pixels
-     * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
-     */
     getDevicePixelSize() {
       return [this.devicePixelWidth, this.devicePixelHeight];
     }
-    /** Get the drawing buffer size (number of pixels GPU is rendering into, can be different from CSS size) */
     getDrawingBufferSize() {
       return [this.drawingBufferWidth, this.drawingBufferHeight];
     }
-    /** Returns the biggest allowed framebuffer size. @todo Allow the application to limit this? */
     getMaxDrawingBufferSize() {
       const maxTextureDimension = this.device.limits.maxTextureDimension2D;
       return [maxTextureDimension, maxTextureDimension];
     }
-    /**
-     * Update the canvas drawing buffer size.
-     * @note - Called automatically if props.autoResize is true.
-     * @note - Defers update of drawing buffer size until framebuffer is requested to avoid flicker
-     * (resizing clears the drawing buffer)!
-     */
     setDrawingBufferSize(width, height) {
-      this.drawingBufferWidth = Math.floor(width);
-      this.drawingBufferHeight = Math.floor(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();
@@ -2162,10 +2746,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() {
@@ -2181,18 +2765,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;
@@ -2203,33 +2809,34 @@ 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));
       this._updateDrawingBufferSize();
       this.device.props.onResize(this, { oldPixelSize });
     }
-    /** Initiate a deferred update for the canvas drawing buffer size */
     _updateDrawingBufferSize() {
       if (this.props.autoResize) {
         if (typeof this.props.useDevicePixels === "number") {
-          const dpr = this.props.useDevicePixels;
-          this.setDrawingBufferSize(this.cssWidth * dpr, this.cssHeight * dpr);
+          const devicePixelRatio2 = this.props.useDevicePixels;
+          this.setDrawingBufferSize(
+            this.cssWidth * devicePixelRatio2,
+            this.cssHeight * devicePixelRatio2
+          );
         } else if (this.props.useDevicePixels) {
           this.setDrawingBufferSize(this.devicePixelWidth, this.devicePixelHeight);
         } else {
@@ -2240,7 +2847,6 @@ or create a device with the 'debug: true' prop.`;
       this.isInitialized = true;
       this.updatePosition();
     }
-    /** Perform a deferred resize of the drawing buffer if needed */
     _resizeDrawingBufferIfNeeded() {
       if (this._needsDrawingBufferResize) {
         this._needsDrawingBufferResize = false;
@@ -2252,34 +2858,21 @@ or create a device with the 'debug: true' prop.`;
         }
       }
     }
-    /** Monitor DPR changes */
     _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];
@@ -2288,13 +2881,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,
@@ -2322,7 +2917,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;
@@ -2346,33 +2941,40 @@ or create a device with the 'debug: true' prop.`;
     const point = pixel;
     const x = scaleX(point[0], ratio, width);
     let y = scaleY(point[1], ratio, height, yInvert);
-    let t = scaleX(point[0] + 1, ratio, width);
-    const xHigh = t === width - 1 ? t : t - 1;
-    t = scaleY(point[1] + 1, ratio, height, yInvert);
+    let temporary = scaleX(point[0] + 1, ratio, width);
+    const xHigh = temporary === width - 1 ? temporary : temporary - 1;
+    temporary = scaleY(point[1] + 1, ratio, height, yInvert);
     let yHigh;
     if (yInvert) {
-      t = t === 0 ? t : t + 1;
+      temporary = temporary === 0 ? temporary : temporary + 1;
       yHigh = y;
-      y = t;
+      y = temporary;
     } else {
-      yHigh = t === height - 1 ? t : t - 1;
+      yHigh = temporary === height - 1 ? temporary : temporary - 1;
     }
     return {
       x,
       y,
-      // when ratio < 1, current css pixel and next css pixel may point to same device pixel, set width/height to 1 in those cases.
       width: Math.max(xHigh - x + 1, 1),
       height: Math.max(yHigh - y + 1, 1)
     };
   }
   function scaleX(x, ratio, width) {
-    const r = Math.min(Math.round(x * ratio), width - 1);
-    return r;
+    return Math.min(Math.round(x * ratio), width - 1);
   }
   function scaleY(y, ratio, height, yInvert) {
     return yInvert ? Math.max(0, height - 1 - Math.round(y * ratio)) : Math.min(Math.round(y * ratio), height - 1);
   }
 
+  // ../core/src/adapter/canvas-context.ts
+  var CanvasContext = class extends CanvasSurface {
+  };
+  __publicField(CanvasContext, "defaultProps", CanvasSurface.defaultProps);
+
+  // ../core/src/adapter/presentation-context.ts
+  var PresentationContext = class extends CanvasSurface {
+  };
+
   // ../core/src/adapter/resources/sampler.ts
   var _Sampler = class extends Resource {
     get [Symbol.toStringTag]() {
@@ -2427,6 +3029,8 @@ or create a device with the 'debug: true' prop.`;
     depth;
     /** mip levels in this texture */
     mipLevels;
+    /** sample count */
+    samples;
     /** Rows are multiples of this length, padded with extra bytes if needed */
     byteAlignment;
     /** The ready promise is always resolved. It is provided for type compatibility with DynamicTexture. */
@@ -2452,6 +3056,7 @@ or create a device with the 'debug: true' prop.`;
       this.height = this.props.height;
       this.depth = this.props.depth;
       this.mipLevels = this.props.mipLevels;
+      this.samples = this.props.samples || 1;
       if (this.dimension === "cube") {
         this.depth = 6;
       }
@@ -2485,9 +3090,25 @@ or create a device with the 'debug: true' prop.`;
     setSampler(sampler) {
       this.sampler = sampler instanceof Sampler ? sampler : this.device.createSampler(sampler);
     }
+    /**
+     * Copy raw image data (bytes) into the texture.
+     *
+     * @note Deprecated compatibility wrapper over {@link writeData}.
+     * @note Uses the same layout defaults and alignment rules as {@link writeData}.
+     * @note Tightly packed CPU uploads can omit `bytesPerRow` and `rowsPerImage`.
+     * @note If the CPU source rows are padded, pass explicit `bytesPerRow` and `rowsPerImage`.
+     * @deprecated Use writeData()
+     */
+    copyImageData(options) {
+      const { data, depth, ...writeOptions } = options;
+      this.writeData(data, {
+        ...writeOptions,
+        depthOrArrayLayers: writeOptions.depthOrArrayLayers ?? depth
+      });
+    }
     /**
      * Calculates the memory layout of the texture, required when reading and writing data.
-     * @return the memory layout of the texture, in particular bytesPerRow which includes required padding
+     * @return the backend-aligned linear layout, in particular bytesPerRow which includes any required padding for buffer copy/read paths
      */
     computeMemoryLayout(options_ = {}) {
       const options = this._normalizeTextureReadOptions(options_);
@@ -2506,9 +3127,11 @@ or create a device with the 'debug: true' prop.`;
      * @returns A Buffer containing the texture data.
      *
      * @note The memory layout of the texture data is determined by the texture format and dimensions.
-     * @note The application can call Texture.computeMemoryLayout() to compute the layout.
+     * @note The application can call Texture.computeMemoryLayout() to compute the backend-aligned layout.
      * @note The application can call Buffer.readAsync()
      * @note If not supplied a buffer will be created and the application needs to call Buffer.destroy
+     * @note 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");
@@ -2524,10 +3147,14 @@ or create a device with the 'debug: true' prop.`;
       throw new Error("readBuffer not implemented");
     }
     /**
-     * Writes an GPU Buffer into a texture.
+     * Writes a GPU Buffer into a texture.
      *
+     * @param buffer - Source GPU buffer.
+     * @param options - Destination subresource, extent, and source layout options.
      * @note The memory layout of the texture data is determined by the texture format and dimensions.
-     * @note The application can call Texture.computeMemoryLayout() to compute the layout.
+     * @note The application can call Texture.computeMemoryLayout() to compute the backend-aligned layout.
+     * @note On WebGPU this corresponds to a buffer-to-texture copy and uses buffer-copy alignment rules.
+     * @note On WebGL, luma.gl emulates the same destination and layout semantics.
      */
     writeBuffer(buffer, options) {
       throw new Error("readBuffer not implemented");
@@ -2535,8 +3162,11 @@ or create a device with the 'debug: true' prop.`;
     /**
      * Writes an array buffer into a texture.
      *
-     * @note The memory layout of the texture data is determined by the texture format and dimensions.
-     * @note The application can call Texture.computeMemoryLayout() to compute the layout.
+     * @param data - Source texel data.
+     * @param options - Destination subresource, extent, and source layout options.
+     * @note If `bytesPerRow` and `rowsPerImage` are omitted, luma.gl computes a tightly packed CPU-memory layout for the requested region.
+     * @note On WebGPU this corresponds to `GPUQueue.writeTexture()` and does not implicitly pad rows to 256 bytes.
+     * @note On WebGL, padded CPU data is supported via the same `bytesPerRow` and `rowsPerImage` options.
      */
     writeData(data, options) {
       throw new Error("readBuffer not implemented");
@@ -2599,37 +3229,166 @@ or create a device with the 'debug: true' prop.`;
       }
     }
     _normalizeCopyImageDataOptions(options_) {
-      const { width, height, depth } = this;
-      const options = { ..._Texture.defaultCopyDataOptions, width, height, depth, ...options_ };
-      const info = this.device.getTextureFormatInfo(this.format);
-      if (!options_.bytesPerRow && !info.bytesPerPixel) {
-        throw new Error(`bytesPerRow must be provided for texture format ${this.format}`);
-      }
-      options.bytesPerRow = options_.bytesPerRow || width * (info.bytesPerPixel || 4);
-      options.rowsPerImage = options_.rowsPerImage || height;
-      return options;
+      const { data, depth, ...writeOptions } = options_;
+      const options = this._normalizeTextureWriteOptions({
+        ...writeOptions,
+        depthOrArrayLayers: writeOptions.depthOrArrayLayers ?? depth
+      });
+      return { data, depth: options.depthOrArrayLayers, ...options };
     }
     _normalizeCopyExternalImageOptions(options_) {
+      const optionsWithoutUndefined = _Texture._omitUndefined(options_);
+      const mipLevel = optionsWithoutUndefined.mipLevel ?? 0;
+      const mipLevelSize = this._getMipLevelSize(mipLevel);
       const size = this.device.getExternalImageSize(options_.image);
-      const options = { ..._Texture.defaultCopyExternalImageOptions, ...size, ...options_ };
-      options.width = Math.min(options.width, this.width - options.x);
-      options.height = Math.min(options.height, this.height - options.y);
+      const options = {
+        ..._Texture.defaultCopyExternalImageOptions,
+        ...mipLevelSize,
+        ...size,
+        ...optionsWithoutUndefined
+      };
+      options.width = Math.min(options.width, mipLevelSize.width - options.x);
+      options.height = Math.min(options.height, mipLevelSize.height - options.y);
+      options.depth = Math.min(options.depth, mipLevelSize.depthOrArrayLayers - options.z);
       return options;
     }
     _normalizeTextureReadOptions(options_) {
-      const { width, height } = this;
-      const options = { ..._Texture.defaultTextureReadOptions, width, height, ...options_ };
-      options.width = Math.min(options.width, this.width - options.x);
-      options.height = Math.min(options.height, this.height - options.y);
+      const optionsWithoutUndefined = _Texture._omitUndefined(options_);
+      const mipLevel = optionsWithoutUndefined.mipLevel ?? 0;
+      const mipLevelSize = this._getMipLevelSize(mipLevel);
+      const options = {
+        ..._Texture.defaultTextureReadOptions,
+        ...mipLevelSize,
+        ...optionsWithoutUndefined
+      };
+      options.width = Math.min(options.width, mipLevelSize.width - options.x);
+      options.height = Math.min(options.height, mipLevelSize.height - options.y);
+      options.depthOrArrayLayers = Math.min(
+        options.depthOrArrayLayers,
+        mipLevelSize.depthOrArrayLayers - options.z
+      );
       return options;
     }
+    /**
+     * Normalizes a texture read request and validates the color-only readback contract used by the
+     * current texture read APIs. Supported dimensions are `2d`, `cube`, `cube-array`,
+     * `2d-array`, and `3d`.
+     *
+     * @throws if the texture format, aspect, or dimension is not supported by the first-pass
+     * color-read implementation.
+     */
+    _getSupportedColorReadOptions(options_) {
+      const options = this._normalizeTextureReadOptions(options_);
+      const formatInfo = textureFormatDecoder.getInfo(this.format);
+      this._validateColorReadAspect(options);
+      this._validateColorReadFormat(formatInfo);
+      switch (this.dimension) {
+        case "2d":
+        case "cube":
+        case "cube-array":
+        case "2d-array":
+        case "3d":
+          return options;
+        default:
+          throw new Error(`${this} color readback does not support ${this.dimension} textures`);
+      }
+    }
+    /** Validates that a read request targets the full color aspect of the texture. */
+    _validateColorReadAspect(options) {
+      if (options.aspect !== "all") {
+        throw new Error(`${this} color readback only supports aspect 'all'`);
+      }
+    }
+    /** Validates that a read request targets an uncompressed color-renderable texture format. */
+    _validateColorReadFormat(formatInfo) {
+      if (formatInfo.compressed) {
+        throw new Error(
+          `${this} color readback does not support compressed formats (${this.format})`
+        );
+      }
+      switch (formatInfo.attachment) {
+        case "color":
+          return;
+        case "depth":
+          throw new Error(`${this} color readback does not support depth formats (${this.format})`);
+        case "stencil":
+          throw new Error(`${this} color readback does not support stencil formats (${this.format})`);
+        case "depth-stencil":
+          throw new Error(
+            `${this} color readback does not support depth-stencil formats (${this.format})`
+          );
+        default:
+          throw new Error(`${this} color readback does not support format ${this.format}`);
+      }
+    }
     _normalizeTextureWriteOptions(options_) {
-      const { width, height } = this;
-      const options = { ..._Texture.defaultTextureReadOptions, width, height, ...options_ };
-      options.width = Math.min(options.width, this.width - options.x);
-      options.height = Math.min(options.height, this.height - options.y);
+      const optionsWithoutUndefined = _Texture._omitUndefined(options_);
+      const mipLevel = optionsWithoutUndefined.mipLevel ?? 0;
+      const mipLevelSize = this._getMipLevelSize(mipLevel);
+      const options = {
+        ..._Texture.defaultTextureWriteOptions,
+        ...mipLevelSize,
+        ...optionsWithoutUndefined
+      };
+      options.width = Math.min(options.width, mipLevelSize.width - options.x);
+      options.height = Math.min(options.height, mipLevelSize.height - options.y);
+      options.depthOrArrayLayers = Math.min(
+        options.depthOrArrayLayers,
+        mipLevelSize.depthOrArrayLayers - options.z
+      );
+      const layout = textureFormatDecoder.computeMemoryLayout({
+        format: this.format,
+        width: options.width,
+        height: options.height,
+        depth: options.depthOrArrayLayers,
+        byteAlignment: this.byteAlignment
+      });
+      const minimumBytesPerRow = layout.bytesPerPixel * options.width;
+      options.bytesPerRow = optionsWithoutUndefined.bytesPerRow ?? layout.bytesPerRow;
+      options.rowsPerImage = optionsWithoutUndefined.rowsPerImage ?? options.height;
+      if (options.bytesPerRow < minimumBytesPerRow) {
+        throw new Error(
+          `bytesPerRow (${options.bytesPerRow}) must be at least ${minimumBytesPerRow} for ${this.format}`
+        );
+      }
+      if (options.rowsPerImage < options.height) {
+        throw new Error(
+          `rowsPerImage (${options.rowsPerImage}) must be at least ${options.height} for ${this.format}`
+        );
+      }
+      const bytesPerPixel = this.device.getTextureFormatInfo(this.format).bytesPerPixel;
+      if (bytesPerPixel && options.bytesPerRow % bytesPerPixel !== 0) {
+        throw new Error(
+          `bytesPerRow (${options.bytesPerRow}) must be a multiple of bytesPerPixel (${bytesPerPixel}) for ${this.format}`
+        );
+      }
       return options;
     }
+    _getMipLevelSize(mipLevel) {
+      const width = Math.max(1, this.width >> mipLevel);
+      const height = this.baseDimension === "1d" ? 1 : Math.max(1, this.height >> mipLevel);
+      const depthOrArrayLayers = this.dimension === "3d" ? Math.max(1, this.depth >> mipLevel) : this.depth;
+      return { width, height, depthOrArrayLayers };
+    }
+    getAllocatedByteLength() {
+      let allocatedByteLength = 0;
+      for (let mipLevel = 0; mipLevel < this.mipLevels; mipLevel++) {
+        const { width, height, depthOrArrayLayers } = this._getMipLevelSize(mipLevel);
+        allocatedByteLength += textureFormatDecoder.computeMemoryLayout({
+          format: this.format,
+          width,
+          height,
+          depth: depthOrArrayLayers,
+          byteAlignment: 1
+        }).byteLength;
+      }
+      return allocatedByteLength * this.samples;
+    }
+    static _omitUndefined(options) {
+      return Object.fromEntries(
+        Object.entries(options).filter(([, value]) => value !== void 0)
+      );
+    }
   };
   var Texture = _Texture;
   /** The texture can be bound for use as a sampled texture in a shader */
@@ -2665,6 +3424,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,
@@ -2698,6 +3461,19 @@ or create a device with the 'debug: true' prop.`;
     mipLevel: 0,
     aspect: "all"
   });
+  __publicField(Texture, "defaultTextureWriteOptions", {
+    byteOffset: 0,
+    bytesPerRow: void 0,
+    rowsPerImage: void 0,
+    x: 0,
+    y: 0,
+    z: 0,
+    width: void 0,
+    height: void 0,
+    depthOrArrayLayers: 1,
+    mipLevel: 0,
+    aspect: "all"
+  });
 
   // ../core/src/adapter/resources/texture-view.ts
   var _TextureView = class extends Resource {
@@ -2744,24 +3520,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":
@@ -2783,8 +3567,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 = "";
@@ -2870,29 +3654,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);
       };
     }
   };
@@ -2912,7 +3701,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;
   }
 
   // ../core/src/adapter/resources/framebuffer.ts
@@ -3018,17 +3807,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,
@@ -3065,10 +3852,21 @@ ${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;
@@ -3086,10 +3884,30 @@ ${htmlLog}
     colorAttachmentFormats: void 0,
     depthStencilAttachmentFormat: void 0,
     parameters: {},
-    bindings: {},
-    uniforms: {}
+    varyings: void 0,
+    bufferMode: void 0,
+    disableWarnings: false,
+    _sharedRenderPipeline: void 0,
+    bindings: void 0
   });
 
+  // ../core/src/adapter/resources/shared-render-pipeline.ts
+  var SharedRenderPipeline = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "SharedRenderPipeline";
+    }
+    constructor(device, props) {
+      super(device, props, {
+        ...Resource.defaultProps,
+        handle: void 0,
+        vs: void 0,
+        fs: void 0,
+        varyings: void 0,
+        bufferMode: void 0
+      });
+    }
+  };
+
   // ../core/src/adapter/resources/render-pass.ts
   var _RenderPass = class extends Resource {
     get [Symbol.toStringTag]() {
@@ -3172,8 +3990,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;
@@ -3182,7 +4061,8 @@ ${htmlLog}
   // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
   __publicField(CommandEncoder, "defaultProps", {
     ...Resource.defaultProps,
-    measureExecutionTime: void 0
+    measureExecutionTime: void 0,
+    timeProfilingQuerySet: void 0
   });
 
   // ../core/src/adapter/resources/command-buffer.ts
@@ -3201,11 +4081,20 @@ ${htmlLog}
 
   // ../core/src/shadertypes/data-types/decode-shader-types.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;
@@ -3217,6 +4106,12 @@ ${htmlLog}
       signed
     };
   }
+  function resolveAttributeShaderTypeAlias(alias) {
+    return WGSL_ATTRIBUTE_TYPE_ALIAS_MAP[alias] || alias;
+  }
+  function resolveVariableShaderTypeAlias(alias) {
+    return WGSL_VARIABLE_TYPE_ALIAS_MAP[alias] || alias;
+  }
   var PRIMITIVE_TYPE_SIZES = {
     f32: 4,
     f16: 2,
@@ -3541,7 +4436,9 @@ ${htmlLog}
 
   // ../core/src/adapter/resources/fence.ts
   var _Fence = class extends Resource {
-    [Symbol.toStringTag] = "WEBGLFence";
+    get [Symbol.toStringTag]() {
+      return "Fence";
+    }
     constructor(device, props = {}) {
       super(device, props, _Fence.defaultProps);
     }
@@ -3701,20 +4598,26 @@ ${htmlLog}
   }
 
   // ../core/src/utils/array-equal.ts
+  var MAX_ELEMENTWISE_ARRAY_COMPARE_LENGTH = 128;
   function arrayEqual(a, b, limit = 16) {
-    if (a !== b) {
-      return false;
+    if (a === b) {
+      return true;
     }
     const arrayA = a;
     const arrayB = b;
-    if (!isNumberArray(arrayA)) {
+    if (!isNumberArray(arrayA) || !isNumberArray(arrayB)) {
       return false;
     }
-    if (isNumberArray(arrayB) && arrayA.length === arrayB.length) {
-      for (let i = 0; i < arrayA.length; ++i) {
-        if (arrayB[i] !== arrayA[i]) {
-          return false;
-        }
+    if (arrayA.length !== arrayB.length) {
+      return false;
+    }
+    const maxCompareLength = Math.min(limit, MAX_ELEMENTWISE_ARRAY_COMPARE_LENGTH);
+    if (arrayA.length > maxCompareLength) {
+      return false;
+    }
+    for (let i = 0; i < arrayA.length; ++i) {
+      if (arrayB[i] !== arrayA[i]) {
+        return false;
       }
     }
     return true;
@@ -3939,7 +4842,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 {
@@ -3948,14 +4851,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;
     }