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

package/dist/dist.dev.js

@@ -46,12 +46,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,
@@ -280,6 +282,24 @@ var __exports__ = (() => {
   };
 
   // src/utils/stats-manager.ts
+  var GPU_TIME_AND_MEMORY_STATS = "GPU Time and Memory";
+  var GPU_TIME_AND_MEMORY_STAT_ORDER = [
+    "Adapter",
+    "GPU",
+    "GPU Type",
+    "GPU Backend",
+    "Frame Rate",
+    "CPU Time",
+    "GPU Time",
+    "GPU Memory",
+    "Buffer Memory",
+    "Texture Memory",
+    "Referenced Buffer Memory",
+    "Referenced Texture Memory",
+    "Swap Chain Texture"
+  ];
+  var ORDERED_STATS_CACHE = /* @__PURE__ */ new WeakMap();
+  var ORDERED_STAT_NAME_SET_CACHE = /* @__PURE__ */ new WeakMap();
   var StatsManager = class {
     stats = /* @__PURE__ */ new Map();
     getStats(name2) {
@@ -289,10 +309,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;
@@ -827,6 +887,57 @@ var __exports__ = (() => {
   }
 
   // src/adapter/resources/resource.ts
+  var CPU_HOTSPOT_PROFILER_MODULE = "cpu-hotspot-profiler";
+  var RESOURCE_COUNTS_STATS = "GPU Resource Counts";
+  var LEGACY_RESOURCE_COUNTS_STATS = "Resource Counts";
+  var GPU_TIME_AND_MEMORY_STATS2 = "GPU Time and Memory";
+  var BASE_RESOURCE_COUNT_ORDER = [
+    "Resources",
+    "Buffers",
+    "Textures",
+    "Samplers",
+    "TextureViews",
+    "Framebuffers",
+    "QuerySets",
+    "Shaders",
+    "RenderPipelines",
+    "ComputePipelines",
+    "PipelineLayouts",
+    "VertexArrays",
+    "RenderPasss",
+    "ComputePasss",
+    "CommandEncoders",
+    "CommandBuffers"
+  ];
+  var WEBGL_RESOURCE_COUNT_ORDER = [
+    "Resources",
+    "Buffers",
+    "Textures",
+    "Samplers",
+    "TextureViews",
+    "Framebuffers",
+    "QuerySets",
+    "Shaders",
+    "RenderPipelines",
+    "SharedRenderPipelines",
+    "ComputePipelines",
+    "PipelineLayouts",
+    "VertexArrays",
+    "RenderPasss",
+    "ComputePasss",
+    "CommandEncoders",
+    "CommandBuffers"
+  ];
+  var BASE_RESOURCE_COUNT_STAT_ORDER = BASE_RESOURCE_COUNT_ORDER.flatMap((resourceType) => [
+    `${resourceType} Created`,
+    `${resourceType} Active`
+  ]);
+  var WEBGL_RESOURCE_COUNT_STAT_ORDER = WEBGL_RESOURCE_COUNT_ORDER.flatMap((resourceType) => [
+    `${resourceType} Created`,
+    `${resourceType} Active`
+  ]);
+  var ORDERED_STATS_CACHE2 = /* @__PURE__ */ new WeakMap();
+  var ORDERED_STAT_NAME_SET_CACHE2 = /* @__PURE__ */ new WeakMap();
   var Resource = class {
     toString() {
       return `${this[Symbol.toStringTag] || this.constructor.name}:"${this.id}"`;
@@ -843,6 +954,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();
     /**
@@ -864,6 +977,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() */
@@ -902,7 +1018,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();
@@ -910,37 +1026,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 */
@@ -958,6 +1144,96 @@ var __exports__ = (() => {
     }
     return mergedProps;
   }
+  function initializeStats2(stats, orderedStatNames) {
+    const statsMap = stats.stats;
+    let addedOrderedStat = false;
+    for (const statName of orderedStatNames) {
+      if (!statsMap[statName]) {
+        stats.get(statName);
+        addedOrderedStat = true;
+      }
+    }
+    const statCount = Object.keys(statsMap).length;
+    const cachedStats = ORDERED_STATS_CACHE2.get(stats);
+    if (!addedOrderedStat && cachedStats?.orderedStatNames === orderedStatNames && cachedStats.statCount === statCount) {
+      return;
+    }
+    const reorderedStats = {};
+    let orderedStatNamesSet = ORDERED_STAT_NAME_SET_CACHE2.get(orderedStatNames);
+    if (!orderedStatNamesSet) {
+      orderedStatNamesSet = new Set(orderedStatNames);
+      ORDERED_STAT_NAME_SET_CACHE2.set(orderedStatNames, orderedStatNamesSet);
+    }
+    for (const statName of orderedStatNames) {
+      if (statsMap[statName]) {
+        reorderedStats[statName] = statsMap[statName];
+      }
+    }
+    for (const [statName, stat] of Object.entries(statsMap)) {
+      if (!orderedStatNamesSet.has(statName)) {
+        reorderedStats[statName] = stat;
+      }
+    }
+    for (const statName of Object.keys(statsMap)) {
+      delete statsMap[statName];
+    }
+    Object.assign(statsMap, reorderedStats);
+    ORDERED_STATS_CACHE2.set(stats, { orderedStatNames, statCount });
+  }
+  function getResourceCountStatOrder(device) {
+    return device.type === "webgl" ? WEBGL_RESOURCE_COUNT_STAT_ORDER : BASE_RESOURCE_COUNT_STAT_ORDER;
+  }
+  function getCpuHotspotProfiler(device) {
+    const profiler = device.userData[CPU_HOTSPOT_PROFILER_MODULE];
+    return profiler?.enabled ? profiler : null;
+  }
+  function getTimestamp() {
+    return globalThis.performance?.now?.() ?? Date.now();
+  }
+  function recordTransientCanvasResourceCreate(device, name2) {
+    const profiler = getCpuHotspotProfiler(device);
+    if (!profiler || !profiler.activeDefaultFramebufferAcquireDepth) {
+      return;
+    }
+    profiler.transientCanvasResourceCreates = (profiler.transientCanvasResourceCreates || 0) + 1;
+    switch (name2) {
+      case "Texture":
+        profiler.transientCanvasTextureCreates = (profiler.transientCanvasTextureCreates || 0) + 1;
+        break;
+      case "TextureView":
+        profiler.transientCanvasTextureViewCreates = (profiler.transientCanvasTextureViewCreates || 0) + 1;
+        break;
+      case "Sampler":
+        profiler.transientCanvasSamplerCreates = (profiler.transientCanvasSamplerCreates || 0) + 1;
+        break;
+      case "Framebuffer":
+        profiler.transientCanvasFramebufferCreates = (profiler.transientCanvasFramebufferCreates || 0) + 1;
+        break;
+      default:
+        break;
+    }
+  }
+  function getCanonicalResourceName(resource) {
+    let prototype = Object.getPrototypeOf(resource);
+    while (prototype) {
+      const parentPrototype = Object.getPrototypeOf(prototype);
+      if (!parentPrototype || parentPrototype === Resource.prototype) {
+        return getPrototypeToStringTag(prototype) || resource[Symbol.toStringTag] || resource.constructor.name;
+      }
+      prototype = parentPrototype;
+    }
+    return resource[Symbol.toStringTag] || resource.constructor.name;
+  }
+  function getPrototypeToStringTag(prototype) {
+    const descriptor = Object.getOwnPropertyDescriptor(prototype, Symbol.toStringTag);
+    if (typeof descriptor?.get === "function") {
+      return descriptor.get.call(prototype);
+    }
+    if (typeof descriptor?.value === "string") {
+      return descriptor.value;
+    }
+    return null;
+  }
 
   // src/adapter/resources/buffer.ts
   var _Buffer = class extends Resource {
@@ -997,18 +1273,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;
       }
     }
   };
@@ -1204,6 +1488,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";
@@ -1237,16 +1522,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": {},
@@ -1349,7 +1634,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 },
@@ -1416,10 +1701,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,
@@ -1445,7 +1739,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;
   }
@@ -1457,6 +1752,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;
@@ -1542,8 +1838,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;
+  }
 
   // src/image-utils/image-types.ts
   function isExternalImage(data) {
@@ -1604,6 +1921,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());
@@ -1657,6 +1976,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);
@@ -1739,6 +2068,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() {
@@ -1846,7 +2239,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")),
@@ -1857,9 +2251,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: {
@@ -1868,6 +2264,25 @@ or create a device with the 'debug: true' prop.`;
     // INTERNAL
     _handle: void 0
   });
+  function _getDefaultDebugValue(logDebugValue, nodeEnv) {
+    if (logDebugValue !== void 0 && logDebugValue !== null) {
+      return Boolean(logDebugValue);
+    }
+    if (nodeEnv !== void 0) {
+      return nodeEnv !== "production";
+    }
+    return false;
+  }
+  function getDefaultDebugValue() {
+    return _getDefaultDebugValue(log.get("debug"), getNodeEnv());
+  }
+  function getNodeEnv() {
+    const processObject = globalThis.process;
+    if (!processObject?.env) {
+      return void 0;
+    }
+    return processObject.env["NODE_ENV"];
+  }
 
   // src/adapter/luma.ts
   var STARTUP_MESSAGE = "set luma.log.level=1 (or higher) to trace rendering";
@@ -2045,6 +2460,100 @@ or create a device with the 'debug: true' prop.`;
     return pageLoadPromise;
   }
 
+  // src/adapter/canvas-observer.ts
+  var CanvasObserver = class {
+    props;
+    _resizeObserver;
+    _intersectionObserver;
+    _observeDevicePixelRatioTimeout = null;
+    _observeDevicePixelRatioMediaQuery = null;
+    _handleDevicePixelRatioChange = () => this._refreshDevicePixelRatio();
+    _trackPositionInterval = null;
+    _started = false;
+    get started() {
+      return this._started;
+    }
+    constructor(props) {
+      this.props = props;
+    }
+    start() {
+      if (this._started || !this.props.canvas) {
+        return;
+      }
+      this._started = true;
+      this._intersectionObserver ||= new IntersectionObserver(
+        (entries) => this.props.onIntersection(entries)
+      );
+      this._resizeObserver ||= new ResizeObserver((entries) => this.props.onResize(entries));
+      this._intersectionObserver.observe(this.props.canvas);
+      try {
+        this._resizeObserver.observe(this.props.canvas, { box: "device-pixel-content-box" });
+      } catch {
+        this._resizeObserver.observe(this.props.canvas, { box: "content-box" });
+      }
+      this._observeDevicePixelRatioTimeout = setTimeout(() => this._refreshDevicePixelRatio(), 0);
+      if (this.props.trackPosition) {
+        this._trackPosition();
+      }
+    }
+    stop() {
+      if (!this._started) {
+        return;
+      }
+      this._started = false;
+      if (this._observeDevicePixelRatioTimeout) {
+        clearTimeout(this._observeDevicePixelRatioTimeout);
+        this._observeDevicePixelRatioTimeout = null;
+      }
+      if (this._observeDevicePixelRatioMediaQuery) {
+        this._observeDevicePixelRatioMediaQuery.removeEventListener(
+          "change",
+          this._handleDevicePixelRatioChange
+        );
+        this._observeDevicePixelRatioMediaQuery = null;
+      }
+      if (this._trackPositionInterval) {
+        clearInterval(this._trackPositionInterval);
+        this._trackPositionInterval = null;
+      }
+      this._resizeObserver?.disconnect();
+      this._intersectionObserver?.disconnect();
+    }
+    _refreshDevicePixelRatio() {
+      if (!this._started) {
+        return;
+      }
+      this.props.onDevicePixelRatioChange();
+      this._observeDevicePixelRatioMediaQuery?.removeEventListener(
+        "change",
+        this._handleDevicePixelRatioChange
+      );
+      this._observeDevicePixelRatioMediaQuery = matchMedia(
+        `(resolution: ${window.devicePixelRatio}dppx)`
+      );
+      this._observeDevicePixelRatioMediaQuery.addEventListener(
+        "change",
+        this._handleDevicePixelRatioChange,
+        { once: true }
+      );
+    }
+    _trackPosition(intervalMs = 100) {
+      if (this._trackPositionInterval) {
+        return;
+      }
+      this._trackPositionInterval = setInterval(() => {
+        if (!this._started) {
+          if (this._trackPositionInterval) {
+            clearInterval(this._trackPositionInterval);
+            this._trackPositionInterval = null;
+          }
+        } else {
+          this.props.onPositionChange();
+        }
+      }, intervalMs);
+    }
+  };
+
   // src/utils/promise-utils.ts
   function withResolvers() {
     let resolve;
@@ -2069,8 +2578,8 @@ or create a device with the 'debug: true' prop.`;
     return value;
   }
 
-  // src/adapter/canvas-context.ts
-  var _CanvasContext = class {
+  // src/adapter/canvas-surface.ts
+  var _CanvasSurface = class {
     static isHTMLCanvas(canvas) {
       return typeof HTMLCanvasElement !== "undefined" && canvas instanceof HTMLCanvasElement;
     }
@@ -2106,11 +2615,7 @@ or create a device with the 'debug: true' prop.`;
     drawingBufferHeight;
     /** Resolves when the canvas is initialized, i.e. when the ResizeObserver has updated the pixel size */
     _initializedResolvers = withResolvers();
-    /** ResizeObserver to track canvas size changes */
-    _resizeObserver;
-    /** IntersectionObserver to track canvas visibility changes */
-    _intersectionObserver;
-    _observeDevicePixelRatioTimeout = null;
+    _canvasObserver;
     /** Position of the canvas in the document, updated by a timer */
     _position = [0, 0];
     /** Whether this canvas context has been destroyed */
@@ -2121,7 +2626,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()) {
@@ -2133,11 +2638,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;
@@ -2153,33 +2658,20 @@ or create a device with the 'debug: true' prop.`;
       this.drawingBufferHeight = this.canvas.height;
       this.devicePixelRatio = globalThis.devicePixelRatio || 1;
       this._position = [0, 0];
-      if (_CanvasContext.isHTMLCanvas(this.canvas)) {
-        this._intersectionObserver = new IntersectionObserver(
-          (entries) => this._handleIntersection(entries)
-        );
-        this._intersectionObserver.observe(this.canvas);
-        this._resizeObserver = new ResizeObserver((entries) => this._handleResize(entries));
-        try {
-          this._resizeObserver.observe(this.canvas, { box: "device-pixel-content-box" });
-        } catch {
-          this._resizeObserver.observe(this.canvas, { box: "content-box" });
-        }
-        this._observeDevicePixelRatioTimeout = setTimeout(() => this._observeDevicePixelRatio(), 0);
-        if (this.props.trackPosition) {
-          this._trackPosition();
-        }
-      }
+      this._canvasObserver = new CanvasObserver({
+        canvas: this.htmlCanvas,
+        trackPosition: this.props.trackPosition,
+        onResize: (entries) => this._handleResize(entries),
+        onIntersection: (entries) => this._handleIntersection(entries),
+        onDevicePixelRatioChange: () => this._observeDevicePixelRatio(),
+        onPositionChange: () => this.updatePosition()
+      });
     }
     destroy() {
       if (!this.destroyed) {
         this.destroyed = true;
-        if (this._observeDevicePixelRatioTimeout) {
-          clearTimeout(this._observeDevicePixelRatioTimeout);
-          this._observeDevicePixelRatioTimeout = null;
-        }
+        this._stopObservers();
         this.device = null;
-        this._resizeObserver?.disconnect();
-        this._intersectionObserver?.disconnect();
       }
     }
     setProps(props) {
@@ -2194,41 +2686,22 @@ or create a device with the 'debug: true' prop.`;
       this._resizeDrawingBufferIfNeeded();
       return this._getCurrentFramebuffer(options);
     }
-    // SIZE METHODS
-    /**
-     * Returns the size covered by the canvas in CSS pixels
-     * @note This can be different from the actual device pixel size of a canvas due to DPR scaling, and rounding to integer pixels
-     * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
-     */
     getCSSSize() {
       return [this.cssWidth, this.cssHeight];
     }
     getPosition() {
       return this._position;
     }
-    /**
-     * Returns the size covered by the canvas in actual device pixels.
-     * @note This can be different from the 'CSS' size of a canvas due to DPR scaling, and rounding to integer pixels
-     * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
-     */
     getDevicePixelSize() {
       return [this.devicePixelWidth, this.devicePixelHeight];
     }
-    /** Get the drawing buffer size (number of pixels GPU is rendering into, can be different from CSS size) */
     getDrawingBufferSize() {
       return [this.drawingBufferWidth, this.drawingBufferHeight];
     }
-    /** Returns the biggest allowed framebuffer size. @todo Allow the application to limit this? */
     getMaxDrawingBufferSize() {
       const maxTextureDimension = this.device.limits.maxTextureDimension2D;
       return [maxTextureDimension, maxTextureDimension];
     }
-    /**
-     * Update the canvas drawing buffer size.
-     * @note - Called automatically if props.autoResize is true.
-     * @note - Defers update of drawing buffer size until framebuffer is requested to avoid flicker
-     * (resizing clears the drawing buffer)!
-     */
     setDrawingBufferSize(width, height) {
       width = Math.floor(width);
       height = Math.floor(height);
@@ -2239,19 +2712,10 @@ or create a device with the 'debug: true' prop.`;
       this.drawingBufferHeight = height;
       this._needsDrawingBufferResize = true;
     }
-    /**
-     * Returns the current DPR (number of physical pixels per CSS pixel), if props.useDevicePixels is true
-     * @note This can be a fractional (non-integer) number, e.g. when the user zooms in the browser.
-     * @note This function handles the non-HTML canvas cases
-     */
     getDevicePixelRatio() {
-      const dpr = typeof window !== "undefined" && window.devicePixelRatio;
-      return dpr || 1;
+      const devicePixelRatio2 = typeof window !== "undefined" && window.devicePixelRatio;
+      return devicePixelRatio2 || 1;
     }
-    // DEPRECATED METHODS
-    /**
-     * Maps CSS pixel position to device pixel position
-     */
     cssToDevicePixels(cssPixel, yInvert = true) {
       const ratio = this.cssToDeviceRatio();
       const [width, height] = this.getDrawingBufferSize();
@@ -2261,10 +2725,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() {
@@ -2280,17 +2744,36 @@ or create a device with the 'debug: true' prop.`;
     resize(size) {
       this.setDrawingBufferSize(size.width, size.height);
     }
-    // IMPLEMENTATION
-    /**
-     * Allows subclass constructor to override the canvas id for auto created canvases.
-     * This can really help when debugging DOM in apps that create multiple devices
-     */
     _setAutoCreatedCanvasId(id) {
       if (this.htmlCanvas?.id === "lumagl-auto-created-canvas") {
         this.htmlCanvas.id = id;
       }
     }
-    /** reacts to an observed intersection */
+    /**
+     * Starts DOM observation after the derived context and its device are fully initialized.
+     *
+     * `CanvasSurface` construction runs before subclasses can assign `this.device`, and the
+     * default WebGL canvas context is created before `WebGLDevice` has initialized `limits`,
+     * `features`, and the rest of its runtime state. Deferring observer startup avoids early
+     * `ResizeObserver` and DPR callbacks running against a partially initialized device.
+     */
+    _startObservers() {
+      if (this.destroyed) {
+        return;
+      }
+      this._canvasObserver.start();
+    }
+    /**
+     * Stops all DOM observation and timers associated with a canvas surface.
+     *
+     * This pairs with `_startObservers()` so teardown uses the same lifecycle whether a context is
+     * explicitly destroyed, abandoned during device reuse, or temporarily has not started observing
+     * yet. Centralizing shutdown here keeps resize/DPR/position watchers from surviving past the
+     * lifetime of the owning device.
+     */
+    _stopObservers() {
+      this._canvasObserver.stop();
+    }
     _handleIntersection(entries) {
       if (this.destroyed) {
         return;
@@ -2305,11 +2788,6 @@ or create a device with the 'debug: true' prop.`;
         this.device.props.onVisibilityChange(this);
       }
     }
-    /**
-     * Reacts to an observed resize by using the most accurate pixel size information the browser can provide
-     * @see https://web.dev/articles/device-pixel-content-box
-     * @see https://webgpufundamentals.org/webgpu/lessons/webgpu-resizing-the-canvas.html
-     */
     _handleResize(entries) {
       if (this.destroyed) {
         return;
@@ -2330,12 +2808,14 @@ or create a device with the 'debug: true' prop.`;
       this._updateDrawingBufferSize();
       this.device.props.onResize(this, { oldPixelSize });
     }
-    /** Initiate a deferred update for the canvas drawing buffer size */
     _updateDrawingBufferSize() {
       if (this.props.autoResize) {
         if (typeof this.props.useDevicePixels === "number") {
-          const dpr = this.props.useDevicePixels;
-          this.setDrawingBufferSize(this.cssWidth * dpr, this.cssHeight * dpr);
+          const devicePixelRatio2 = this.props.useDevicePixels;
+          this.setDrawingBufferSize(
+            this.cssWidth * devicePixelRatio2,
+            this.cssHeight * devicePixelRatio2
+          );
         } else if (this.props.useDevicePixels) {
           this.setDrawingBufferSize(this.devicePixelWidth, this.devicePixelHeight);
         } else {
@@ -2346,7 +2826,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;
@@ -2358,36 +2837,17 @@ or create a device with the 'debug: true' prop.`;
         }
       }
     }
-    /** Monitor DPR changes */
     _observeDevicePixelRatio() {
-      if (this.destroyed) {
+      if (this.destroyed || !this._canvasObserver.started) {
         return;
       }
       const oldRatio = this.devicePixelRatio;
       this.devicePixelRatio = window.devicePixelRatio;
       this.updatePosition();
-      this.device.props.onDevicePixelRatioChange?.(this, { oldRatio });
-      matchMedia(`(resolution: ${this.devicePixelRatio}dppx)`).addEventListener(
-        "change",
-        () => this._observeDevicePixelRatio(),
-        { once: true }
-      );
-    }
-    /** Start tracking positions with a timer */
-    _trackPosition(intervalMs = 100) {
-      const intervalId = setInterval(() => {
-        if (this.destroyed) {
-          clearInterval(intervalId);
-        } else {
-          this.updatePosition();
-        }
-      }, intervalMs);
+      this.device.props.onDevicePixelRatioChange?.(this, {
+        oldRatio
+      });
     }
-    /**
-     * Calculated the absolute position of the canvas
-     * @note - getBoundingClientRect() is normally cheap but can be expensive
-     * if called before browser has finished a reflow. Should not be the case here.
-     */
     updatePosition() {
       if (this.destroyed) {
         return;
@@ -2400,13 +2860,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,
@@ -2434,7 +2896,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;
@@ -2458,33 +2920,40 @@ or create a device with the 'debug: true' prop.`;
     const point = pixel;
     const x = scaleX(point[0], ratio, width);
     let y = scaleY(point[1], ratio, height, yInvert);
-    let t = scaleX(point[0] + 1, ratio, width);
-    const xHigh = t === width - 1 ? t : t - 1;
-    t = scaleY(point[1] + 1, ratio, height, yInvert);
+    let temporary = scaleX(point[0] + 1, ratio, width);
+    const xHigh = temporary === width - 1 ? temporary : temporary - 1;
+    temporary = scaleY(point[1] + 1, ratio, height, yInvert);
     let yHigh;
     if (yInvert) {
-      t = t === 0 ? t : t + 1;
+      temporary = temporary === 0 ? temporary : temporary + 1;
       yHigh = y;
-      y = t;
+      y = temporary;
     } else {
-      yHigh = t === height - 1 ? t : t - 1;
+      yHigh = temporary === height - 1 ? temporary : temporary - 1;
     }
     return {
       x,
       y,
-      // when ratio < 1, current css pixel and next css pixel may point to same device pixel, set width/height to 1 in those cases.
       width: Math.max(xHigh - x + 1, 1),
       height: Math.max(yHigh - y + 1, 1)
     };
   }
   function scaleX(x, ratio, width) {
-    const r = Math.min(Math.round(x * ratio), width - 1);
-    return r;
+    return Math.min(Math.round(x * ratio), width - 1);
   }
   function scaleY(y, ratio, height, yInvert) {
     return yInvert ? Math.max(0, height - 1 - Math.round(y * ratio)) : Math.min(Math.round(y * ratio), height - 1);
   }
 
+  // src/adapter/canvas-context.ts
+  var CanvasContext = class extends CanvasSurface {
+  };
+  __publicField(CanvasContext, "defaultProps", CanvasSurface.defaultProps);
+
+  // src/adapter/presentation-context.ts
+  var PresentationContext = class extends CanvasSurface {
+  };
+
   // src/adapter/resources/sampler.ts
   var _Sampler = class extends Resource {
     get [Symbol.toStringTag]() {
@@ -2539,6 +3008,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. */
@@ -2564,6 +3035,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;
       }
@@ -2597,9 +3069,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_);
@@ -2618,9 +3106,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");
@@ -2636,10 +3126,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");
@@ -2647,8 +3141,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");
@@ -2711,37 +3208,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 */
@@ -2777,6 +3403,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,
@@ -2810,6 +3440,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"
+  });
 
   // src/adapter/resources/texture-view.ts
   var _TextureView = class extends Resource {
@@ -3188,10 +3831,21 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     linkStatus = "pending";
     /** The hash of the pipeline */
     hash = "";
+    /** Optional shared backend implementation */
+    sharedRenderPipeline = null;
+    /** Whether shader or pipeline compilation/linking is still in progress */
+    get isPending() {
+      return this.linkStatus === "pending" || this.vs.compilationStatus === "pending" || this.fs?.compilationStatus === "pending";
+    }
+    /** Whether shader or pipeline compilation/linking has failed */
+    get isErrored() {
+      return this.linkStatus === "error" || this.vs.compilationStatus === "error" || this.fs?.compilationStatus === "error";
+    }
     constructor(device, props) {
       super(device, props, _RenderPipeline.defaultProps);
       this.shaderLayout = this.props.shaderLayout;
       this.bufferLayout = this.props.bufferLayout || [];
+      this.sharedRenderPipeline = this.props._sharedRenderPipeline || null;
     }
   };
   var RenderPipeline = _RenderPipeline;
@@ -3209,10 +3863,30 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     colorAttachmentFormats: void 0,
     depthStencilAttachmentFormat: void 0,
     parameters: {},
-    bindings: {},
-    uniforms: {}
+    varyings: void 0,
+    bufferMode: void 0,
+    disableWarnings: false,
+    _sharedRenderPipeline: void 0,
+    bindings: void 0
   });
 
+  // src/adapter/resources/shared-render-pipeline.ts
+  var SharedRenderPipeline = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "SharedRenderPipeline";
+    }
+    constructor(device, props) {
+      super(device, props, {
+        ...Resource.defaultProps,
+        handle: void 0,
+        vs: void 0,
+        fs: void 0,
+        varyings: void 0,
+        bufferMode: void 0
+      });
+    }
+  };
+
   // src/adapter/resources/render-pass.ts
   var _RenderPass = class extends Resource {
     get [Symbol.toStringTag]() {
@@ -3295,8 +3969,69 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     get [Symbol.toStringTag]() {
       return "CommandEncoder";
     }
+    _timeProfilingQuerySet = null;
+    _timeProfilingSlotCount = 0;
+    _gpuTimeMs;
     constructor(device, props) {
       super(device, props, _CommandEncoder.defaultProps);
+      this._timeProfilingQuerySet = props.timeProfilingQuerySet ?? null;
+      this._timeProfilingSlotCount = 0;
+      this._gpuTimeMs = void 0;
+    }
+    /**
+     * Reads all resolved timestamp pairs on the current profiler query set and caches the sum
+     * as milliseconds on this encoder.
+     */
+    async resolveTimeProfilingQuerySet() {
+      this._gpuTimeMs = void 0;
+      if (!this._timeProfilingQuerySet) {
+        return;
+      }
+      const pairCount = Math.floor(this._timeProfilingSlotCount / 2);
+      if (pairCount <= 0) {
+        return;
+      }
+      const queryCount = pairCount * 2;
+      const results = await this._timeProfilingQuerySet.readResults({
+        firstQuery: 0,
+        queryCount
+      });
+      let totalDurationNanoseconds = 0n;
+      for (let queryIndex = 0; queryIndex < queryCount; queryIndex += 2) {
+        totalDurationNanoseconds += results[queryIndex + 1] - results[queryIndex];
+      }
+      this._gpuTimeMs = Number(totalDurationNanoseconds) / 1e6;
+    }
+    /** Returns the number of query slots consumed by automatic pass profiling on this encoder. */
+    getTimeProfilingSlotCount() {
+      return this._timeProfilingSlotCount;
+    }
+    getTimeProfilingQuerySet() {
+      return this._timeProfilingQuerySet;
+    }
+    /** Internal helper for auto-assigning timestamp slots to render/compute passes on this encoder. */
+    _applyTimeProfilingToPassProps(props) {
+      const passProps = props || {};
+      if (!this._supportsTimestampQueries() || !this._timeProfilingQuerySet) {
+        return passProps;
+      }
+      if (passProps.timestampQuerySet !== void 0 || passProps.beginTimestampIndex !== void 0 || passProps.endTimestampIndex !== void 0) {
+        return passProps;
+      }
+      const beginTimestampIndex = this._timeProfilingSlotCount;
+      if (beginTimestampIndex + 1 >= this._timeProfilingQuerySet.props.count) {
+        return passProps;
+      }
+      this._timeProfilingSlotCount += 2;
+      return {
+        ...passProps,
+        timestampQuerySet: this._timeProfilingQuerySet,
+        beginTimestampIndex,
+        endTimestampIndex: beginTimestampIndex + 1
+      };
+    }
+    _supportsTimestampQueries() {
+      return this.device.features.has("timestamp-query");
     }
   };
   var CommandEncoder = _CommandEncoder;
@@ -3305,7 +4040,8 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
   // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
   __publicField(CommandEncoder, "defaultProps", {
     ...Resource.defaultProps,
-    measureExecutionTime: void 0
+    measureExecutionTime: void 0,
+    timeProfilingQuerySet: void 0
   });
 
   // src/adapter/resources/command-buffer.ts
@@ -3324,11 +4060,20 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
 
   // 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;
@@ -3340,6 +4085,12 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
       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,
@@ -3664,7 +4415,9 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
 
   // 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);
     }
@@ -3824,20 +4577,26 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
   }
 
   // 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;