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

package/dist/index.cjs

@@ -39,12 +39,14 @@ __export(dist_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,
@@ -55,6 +57,8 @@ __export(dist_exports, {
   VertexArray: () => VertexArray,
   _getTextureFormatDefinition: () => getTextureFormatDefinition,
   _getTextureFormatTable: () => getTextureFormatTable,
+  assert: () => assert,
+  assertDefined: () => assertDefined,
   getAttributeInfosFromLayouts: () => getAttributeInfosFromLayouts,
   getAttributeShaderTypeInfo: () => getAttributeShaderTypeInfo,
   getDataType: () => getDataType,
@@ -80,6 +84,24 @@ module.exports = __toCommonJS(dist_exports);
 
 // dist/utils/stats-manager.js
 var import_stats = require("@probe.gl/stats");
+var GPU_TIME_AND_MEMORY_STATS = "GPU Time and Memory";
+var GPU_TIME_AND_MEMORY_STAT_ORDER = [
+  "Adapter",
+  "GPU",
+  "GPU Type",
+  "GPU Backend",
+  "Frame Rate",
+  "CPU Time",
+  "GPU Time",
+  "GPU Memory",
+  "Buffer Memory",
+  "Texture Memory",
+  "Referenced Buffer Memory",
+  "Referenced Texture Memory",
+  "Swap Chain Texture"
+];
+var ORDERED_STATS_CACHE = /* @__PURE__ */ new WeakMap();
+var ORDERED_STAT_NAME_SET_CACHE = /* @__PURE__ */ new WeakMap();
 var StatsManager = class {
   stats = /* @__PURE__ */ new Map();
   getStats(name2) {
@@ -89,10 +111,50 @@ var StatsManager = class {
     if (!this.stats.has(name2)) {
       this.stats.set(name2, new import_stats.Stats({ id: name2 }));
     }
-    return this.stats.get(name2);
+    const stats = this.stats.get(name2);
+    if (name2 === GPU_TIME_AND_MEMORY_STATS) {
+      initializeStats(stats, GPU_TIME_AND_MEMORY_STAT_ORDER);
+    }
+    return stats;
   }
 };
 var lumaStats = new StatsManager();
+function initializeStats(stats, orderedStatNames) {
+  const statsMap = stats.stats;
+  let addedOrderedStat = false;
+  for (const statName of orderedStatNames) {
+    if (!statsMap[statName]) {
+      stats.get(statName);
+      addedOrderedStat = true;
+    }
+  }
+  const statCount = Object.keys(statsMap).length;
+  const cachedStats = ORDERED_STATS_CACHE.get(stats);
+  if (!addedOrderedStat && (cachedStats == null ? void 0 : cachedStats.orderedStatNames) === orderedStatNames && cachedStats.statCount === statCount) {
+    return;
+  }
+  const reorderedStats = {};
+  let orderedStatNamesSet = ORDERED_STAT_NAME_SET_CACHE.get(orderedStatNames);
+  if (!orderedStatNamesSet) {
+    orderedStatNamesSet = new Set(orderedStatNames);
+    ORDERED_STAT_NAME_SET_CACHE.set(orderedStatNames, orderedStatNamesSet);
+  }
+  for (const statName of orderedStatNames) {
+    if (statsMap[statName]) {
+      reorderedStats[statName] = statsMap[statName];
+    }
+  }
+  for (const [statName, stat] of Object.entries(statsMap)) {
+    if (!orderedStatNamesSet.has(statName)) {
+      reorderedStats[statName] = stat;
+    }
+  }
+  for (const statName of Object.keys(statsMap)) {
+    delete statsMap[statName];
+  }
+  Object.assign(statsMap, reorderedStats);
+  ORDERED_STATS_CACHE.set(stats, { orderedStatNames, statCount });
+}
 
 // dist/utils/log.js
 var import_log = require("@probe.gl/log");
@@ -107,6 +169,57 @@ function uid(id = "id") {
 }
 
 // dist/adapter/resources/resource.js
+var CPU_HOTSPOT_PROFILER_MODULE = "cpu-hotspot-profiler";
+var RESOURCE_COUNTS_STATS = "GPU Resource Counts";
+var LEGACY_RESOURCE_COUNTS_STATS = "Resource Counts";
+var GPU_TIME_AND_MEMORY_STATS2 = "GPU Time and Memory";
+var BASE_RESOURCE_COUNT_ORDER = [
+  "Resources",
+  "Buffers",
+  "Textures",
+  "Samplers",
+  "TextureViews",
+  "Framebuffers",
+  "QuerySets",
+  "Shaders",
+  "RenderPipelines",
+  "ComputePipelines",
+  "PipelineLayouts",
+  "VertexArrays",
+  "RenderPasss",
+  "ComputePasss",
+  "CommandEncoders",
+  "CommandBuffers"
+];
+var WEBGL_RESOURCE_COUNT_ORDER = [
+  "Resources",
+  "Buffers",
+  "Textures",
+  "Samplers",
+  "TextureViews",
+  "Framebuffers",
+  "QuerySets",
+  "Shaders",
+  "RenderPipelines",
+  "SharedRenderPipelines",
+  "ComputePipelines",
+  "PipelineLayouts",
+  "VertexArrays",
+  "RenderPasss",
+  "ComputePasss",
+  "CommandEncoders",
+  "CommandBuffers"
+];
+var BASE_RESOURCE_COUNT_STAT_ORDER = BASE_RESOURCE_COUNT_ORDER.flatMap((resourceType) => [
+  `${resourceType} Created`,
+  `${resourceType} Active`
+]);
+var WEBGL_RESOURCE_COUNT_STAT_ORDER = WEBGL_RESOURCE_COUNT_ORDER.flatMap((resourceType) => [
+  `${resourceType} Created`,
+  `${resourceType} Active`
+]);
+var ORDERED_STATS_CACHE2 = /* @__PURE__ */ new WeakMap();
+var ORDERED_STAT_NAME_SET_CACHE2 = /* @__PURE__ */ new WeakMap();
 var Resource = class {
   toString() {
     return `${this[Symbol.toStringTag] || this.constructor.name}:"${this.id}"`;
@@ -123,6 +236,8 @@ var Resource = class {
   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();
   /**
@@ -144,6 +259,9 @@ var Resource = class {
    * destroy can be called on any resource to release it before it is garbage collected.
    */
   destroy() {
+    if (this.destroyed) {
+      return;
+    }
     this.destroyResource();
   }
   /** @deprecated Use destroy() */
@@ -182,7 +300,7 @@ var Resource = class {
   }
   /** Destroy all owned resources. Make sure the resources are no longer needed before calling. */
   destroyAttachedResources() {
-    for (const resource of Object.values(this._attachedResources)) {
+    for (const resource of this._attachedResources) {
       resource.destroy();
     }
     this._attachedResources = /* @__PURE__ */ new Set();
@@ -190,37 +308,107 @@ var Resource = class {
   // PROTECTED METHODS
   /** Perform all destroy steps. Can be called by derived resources when overriding destroy() */
   destroyResource() {
+    if (this.destroyed) {
+      return;
+    }
     this.destroyAttachedResources();
     this.removeStats();
     this.destroyed = true;
   }
   /** Called by .destroy() to track object destruction. Subclass must call if overriding destroy() */
   removeStats() {
-    const stats = this._device.statsManager.getStats("Resource Counts");
-    const name2 = this[Symbol.toStringTag];
-    stats.get(`${name2}s Active`).decrementCount();
+    const profiler = getCpuHotspotProfiler(this._device);
+    const startTime = profiler ? getTimestamp() : 0;
+    const statsObjects = [
+      this._device.statsManager.getStats(RESOURCE_COUNTS_STATS),
+      this._device.statsManager.getStats(LEGACY_RESOURCE_COUNTS_STATS)
+    ];
+    const orderedStatNames = getResourceCountStatOrder(this._device);
+    for (const stats of statsObjects) {
+      initializeStats2(stats, orderedStatNames);
+    }
+    const name2 = this.getStatsName();
+    for (const stats of statsObjects) {
+      stats.get("Resources Active").decrementCount();
+      stats.get(`${name2}s Active`).decrementCount();
+    }
+    if (profiler) {
+      profiler.statsBookkeepingCalls = (profiler.statsBookkeepingCalls || 0) + 1;
+      profiler.statsBookkeepingTimeMs = (profiler.statsBookkeepingTimeMs || 0) + (getTimestamp() - startTime);
+    }
   }
   /** Called by subclass to track memory allocations */
-  trackAllocatedMemory(bytes, name2 = this[Symbol.toStringTag]) {
-    const stats = this._device.statsManager.getStats("Resource Counts");
+  trackAllocatedMemory(bytes, name2 = this.getStatsName()) {
+    const profiler = getCpuHotspotProfiler(this._device);
+    const startTime = profiler ? getTimestamp() : 0;
+    const stats = this._device.statsManager.getStats(GPU_TIME_AND_MEMORY_STATS2);
+    if (this.allocatedBytes > 0 && this.allocatedBytesName) {
+      stats.get("GPU Memory").subtractCount(this.allocatedBytes);
+      stats.get(`${this.allocatedBytesName} Memory`).subtractCount(this.allocatedBytes);
+    }
     stats.get("GPU Memory").addCount(bytes);
     stats.get(`${name2} Memory`).addCount(bytes);
+    if (profiler) {
+      profiler.statsBookkeepingCalls = (profiler.statsBookkeepingCalls || 0) + 1;
+      profiler.statsBookkeepingTimeMs = (profiler.statsBookkeepingTimeMs || 0) + (getTimestamp() - startTime);
+    }
     this.allocatedBytes = bytes;
+    this.allocatedBytesName = name2;
+  }
+  /** Called by subclass to track handle-backed memory allocations separately from owned allocations */
+  trackReferencedMemory(bytes, name2 = this.getStatsName()) {
+    this.trackAllocatedMemory(bytes, `Referenced ${name2}`);
   }
   /** Called by subclass to track memory deallocations */
-  trackDeallocatedMemory(name2 = this[Symbol.toStringTag]) {
-    const stats = this._device.statsManager.getStats("Resource Counts");
+  trackDeallocatedMemory(name2 = this.getStatsName()) {
+    if (this.allocatedBytes === 0) {
+      this.allocatedBytesName = null;
+      return;
+    }
+    const profiler = getCpuHotspotProfiler(this._device);
+    const startTime = profiler ? getTimestamp() : 0;
+    const stats = this._device.statsManager.getStats(GPU_TIME_AND_MEMORY_STATS2);
     stats.get("GPU Memory").subtractCount(this.allocatedBytes);
-    stats.get(`${name2} Memory`).subtractCount(this.allocatedBytes);
+    stats.get(`${this.allocatedBytesName || name2} Memory`).subtractCount(this.allocatedBytes);
+    if (profiler) {
+      profiler.statsBookkeepingCalls = (profiler.statsBookkeepingCalls || 0) + 1;
+      profiler.statsBookkeepingTimeMs = (profiler.statsBookkeepingTimeMs || 0) + (getTimestamp() - startTime);
+    }
     this.allocatedBytes = 0;
+    this.allocatedBytesName = null;
+  }
+  /** Called by subclass to deallocate handle-backed memory tracked via trackReferencedMemory() */
+  trackDeallocatedReferencedMemory(name2 = this.getStatsName()) {
+    this.trackDeallocatedMemory(`Referenced ${name2}`);
   }
   /** Called by resource constructor to track object creation */
   addStats() {
-    const stats = this._device.statsManager.getStats("Resource Counts");
-    const name2 = this[Symbol.toStringTag];
-    stats.get("Resources Created").incrementCount();
-    stats.get(`${name2}s Created`).incrementCount();
-    stats.get(`${name2}s Active`).incrementCount();
+    const name2 = this.getStatsName();
+    const profiler = getCpuHotspotProfiler(this._device);
+    const startTime = profiler ? getTimestamp() : 0;
+    const statsObjects = [
+      this._device.statsManager.getStats(RESOURCE_COUNTS_STATS),
+      this._device.statsManager.getStats(LEGACY_RESOURCE_COUNTS_STATS)
+    ];
+    const orderedStatNames = getResourceCountStatOrder(this._device);
+    for (const stats of statsObjects) {
+      initializeStats2(stats, orderedStatNames);
+    }
+    for (const stats of statsObjects) {
+      stats.get("Resources Created").incrementCount();
+      stats.get("Resources Active").incrementCount();
+      stats.get(`${name2}s Created`).incrementCount();
+      stats.get(`${name2}s Active`).incrementCount();
+    }
+    if (profiler) {
+      profiler.statsBookkeepingCalls = (profiler.statsBookkeepingCalls || 0) + 1;
+      profiler.statsBookkeepingTimeMs = (profiler.statsBookkeepingTimeMs || 0) + (getTimestamp() - startTime);
+    }
+    recordTransientCanvasResourceCreate(this._device, name2);
+  }
+  /** Canonical resource name used for stats buckets. */
+  getStatsName() {
+    return getCanonicalResourceName(this);
   }
 };
 /** Default properties for resource */
@@ -238,6 +426,97 @@ function selectivelyMerge(props, defaultProps) {
   }
   return mergedProps;
 }
+function initializeStats2(stats, orderedStatNames) {
+  const statsMap = stats.stats;
+  let addedOrderedStat = false;
+  for (const statName of orderedStatNames) {
+    if (!statsMap[statName]) {
+      stats.get(statName);
+      addedOrderedStat = true;
+    }
+  }
+  const statCount = Object.keys(statsMap).length;
+  const cachedStats = ORDERED_STATS_CACHE2.get(stats);
+  if (!addedOrderedStat && (cachedStats == null ? void 0 : cachedStats.orderedStatNames) === orderedStatNames && cachedStats.statCount === statCount) {
+    return;
+  }
+  const reorderedStats = {};
+  let orderedStatNamesSet = ORDERED_STAT_NAME_SET_CACHE2.get(orderedStatNames);
+  if (!orderedStatNamesSet) {
+    orderedStatNamesSet = new Set(orderedStatNames);
+    ORDERED_STAT_NAME_SET_CACHE2.set(orderedStatNames, orderedStatNamesSet);
+  }
+  for (const statName of orderedStatNames) {
+    if (statsMap[statName]) {
+      reorderedStats[statName] = statsMap[statName];
+    }
+  }
+  for (const [statName, stat] of Object.entries(statsMap)) {
+    if (!orderedStatNamesSet.has(statName)) {
+      reorderedStats[statName] = stat;
+    }
+  }
+  for (const statName of Object.keys(statsMap)) {
+    delete statsMap[statName];
+  }
+  Object.assign(statsMap, reorderedStats);
+  ORDERED_STATS_CACHE2.set(stats, { orderedStatNames, statCount });
+}
+function getResourceCountStatOrder(device) {
+  return device.type === "webgl" ? WEBGL_RESOURCE_COUNT_STAT_ORDER : BASE_RESOURCE_COUNT_STAT_ORDER;
+}
+function getCpuHotspotProfiler(device) {
+  const profiler = device.userData[CPU_HOTSPOT_PROFILER_MODULE];
+  return (profiler == null ? void 0 : profiler.enabled) ? profiler : null;
+}
+function getTimestamp() {
+  var _a, _b;
+  return ((_b = (_a = globalThis.performance) == null ? void 0 : _a.now) == null ? void 0 : _b.call(_a)) ?? Date.now();
+}
+function recordTransientCanvasResourceCreate(device, name2) {
+  const profiler = getCpuHotspotProfiler(device);
+  if (!profiler || !profiler.activeDefaultFramebufferAcquireDepth) {
+    return;
+  }
+  profiler.transientCanvasResourceCreates = (profiler.transientCanvasResourceCreates || 0) + 1;
+  switch (name2) {
+    case "Texture":
+      profiler.transientCanvasTextureCreates = (profiler.transientCanvasTextureCreates || 0) + 1;
+      break;
+    case "TextureView":
+      profiler.transientCanvasTextureViewCreates = (profiler.transientCanvasTextureViewCreates || 0) + 1;
+      break;
+    case "Sampler":
+      profiler.transientCanvasSamplerCreates = (profiler.transientCanvasSamplerCreates || 0) + 1;
+      break;
+    case "Framebuffer":
+      profiler.transientCanvasFramebufferCreates = (profiler.transientCanvasFramebufferCreates || 0) + 1;
+      break;
+    default:
+      break;
+  }
+}
+function getCanonicalResourceName(resource) {
+  let prototype = Object.getPrototypeOf(resource);
+  while (prototype) {
+    const parentPrototype = Object.getPrototypeOf(prototype);
+    if (!parentPrototype || parentPrototype === Resource.prototype) {
+      return getPrototypeToStringTag(prototype) || resource[Symbol.toStringTag] || resource.constructor.name;
+    }
+    prototype = parentPrototype;
+  }
+  return resource[Symbol.toStringTag] || resource.constructor.name;
+}
+function getPrototypeToStringTag(prototype) {
+  const descriptor = Object.getOwnPropertyDescriptor(prototype, Symbol.toStringTag);
+  if (typeof (descriptor == null ? void 0 : descriptor.get) === "function") {
+    return descriptor.get.call(prototype);
+  }
+  if (typeof (descriptor == null ? void 0 : descriptor.value) === "string") {
+    return descriptor.value;
+  }
+  return null;
+}
 
 // dist/adapter/resources/buffer.js
 var _Buffer = class extends Resource {
@@ -277,15 +556,23 @@ var _Buffer = class extends Resource {
   /** A partial CPU-side copy of the data in this buffer, for debugging purposes */
   debugData = new ArrayBuffer(0);
   /** This doesn't handle partial non-zero offset updates correctly */
-  _setDebugData(data, byteOffset, byteLength) {
-    const arrayBuffer2 = ArrayBuffer.isView(data) ? data.buffer : data;
+  _setDebugData(data, _byteOffset, byteLength) {
+    let arrayBufferView = null;
+    let arrayBuffer2;
+    if (ArrayBuffer.isView(data)) {
+      arrayBufferView = data;
+      arrayBuffer2 = data.buffer;
+    } else {
+      arrayBuffer2 = data;
+    }
     const debugDataLength = Math.min(data ? data.byteLength : byteLength, _Buffer.DEBUG_DATA_MAX_LENGTH);
     if (arrayBuffer2 === null) {
       this.debugData = new ArrayBuffer(debugDataLength);
-    } else if (byteOffset === 0 && byteLength === arrayBuffer2.byteLength) {
-      this.debugData = arrayBuffer2.slice(0, debugDataLength);
     } else {
-      this.debugData = arrayBuffer2.slice(byteOffset, byteOffset + debugDataLength);
+      const sourceByteOffset = Math.min((arrayBufferView == null ? void 0 : arrayBufferView.byteOffset) || 0, arrayBuffer2.byteLength);
+      const availableByteLength = Math.max(0, arrayBuffer2.byteLength - sourceByteOffset);
+      const copyByteLength = Math.min(debugDataLength, availableByteLength);
+      this.debugData = new Uint8Array(arrayBuffer2, sourceByteOffset, copyByteLength).slice().buffer;
     }
   }
 };
@@ -481,6 +768,7 @@ var float32_renderable = "float32-renderable-webgl";
 var float16_renderable = "float16-renderable-webgl";
 var rgb9e5ufloat_renderable = "rgb9e5ufloat-renderable-webgl";
 var snorm8_renderable = "snorm8-renderable-webgl";
+var norm16_webgl = "norm16-webgl";
 var norm16_renderable = "norm16-renderable-webgl";
 var snorm16_renderable = "snorm16-renderable-webgl";
 var float32_filterable = "float32-filterable";
@@ -514,16 +802,16 @@ var TEXTURE_FORMAT_COLOR_DEPTH_TABLE = {
   "rgba8sint": {},
   "bgra8unorm": {},
   "bgra8unorm-srgb": {},
-  "r16unorm": { f: norm16_renderable },
-  "rg16unorm": { render: norm16_renderable },
-  "rgb16unorm-webgl": { f: norm16_renderable },
+  "r16unorm": { f: norm16_webgl, render: norm16_renderable },
+  "rg16unorm": { f: norm16_webgl, render: norm16_renderable },
+  "rgb16unorm-webgl": { f: norm16_webgl, render: false },
   // rgb not renderable
-  "rgba16unorm": { render: norm16_renderable },
-  "r16snorm": { f: snorm16_renderable },
-  "rg16snorm": { render: snorm16_renderable },
-  "rgb16snorm-webgl": { f: norm16_renderable },
+  "rgba16unorm": { f: norm16_webgl, render: norm16_renderable },
+  "r16snorm": { f: norm16_webgl, render: snorm16_renderable },
+  "rg16snorm": { f: norm16_webgl, render: snorm16_renderable },
+  "rgb16snorm-webgl": { f: norm16_webgl, render: false },
   // rgb not renderable
-  "rgba16snorm": { render: snorm16_renderable },
+  "rgba16snorm": { f: norm16_webgl, render: snorm16_renderable },
   "r16uint": {},
   "rg16uint": {},
   "rgba16uint": {},
@@ -626,7 +914,7 @@ var TEXTURE_FORMAT_COMPRESSED_TABLE = {
   // WEBGL_compressed_texture_pvrtc
   "pvrtc-rgb4unorm-webgl": { f: texture_compression_pvrtc_webgl },
   "pvrtc-rgba4unorm-webgl": { f: texture_compression_pvrtc_webgl },
-  "pvrtc-rbg2unorm-webgl": { f: texture_compression_pvrtc_webgl },
+  "pvrtc-rgb2unorm-webgl": { f: texture_compression_pvrtc_webgl },
   "pvrtc-rgba2unorm-webgl": { f: texture_compression_pvrtc_webgl },
   // WEBGL_compressed_texture_etc1
   "etc1-rbg-unorm-webgl": { f: texture_compression_etc1_webgl },
@@ -687,10 +975,13 @@ var TextureFormatDecoder = class {
 };
 var textureFormatDecoder = new TextureFormatDecoder();
 function computeTextureMemoryLayout({ format, width, height, 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,
@@ -716,7 +1007,8 @@ function getTextureFormatCapabilities(format) {
   const isSigned = formatInfo == null ? void 0 : formatInfo.signed;
   const isInteger = formatInfo == null ? void 0 : formatInfo.integer;
   const isWebGLSpecific = formatInfo == null ? void 0 : formatInfo.webgl;
-  formatCapabilities.render &&= !isSigned;
+  const isCompressed = Boolean(formatInfo == null ? void 0 : formatInfo.compressed);
+  formatCapabilities.render &&= !isDepthStencil && !isCompressed;
   formatCapabilities.filter &&= !isDepthStencil && !isSigned && !isInteger && !isWebGLSpecific;
   return formatCapabilities;
 }
@@ -728,6 +1020,7 @@ function getTextureFormatInfo(format) {
     formatInfo.bytesPerPixel = 1;
     formatInfo.srgb = false;
     formatInfo.compressed = true;
+    formatInfo.bytesPerBlock = getCompressedTextureBlockByteLength(format);
     const blockSize = getCompressedTextureBlockSize(format);
     if (blockSize) {
       formatInfo.blockWidth = blockSize.blockWidth;
@@ -740,7 +1033,7 @@ function getTextureFormatInfo(format) {
     const dataType = `${type}${length}`;
     const decodedType = getDataTypeInfo(dataType);
     const bits = decodedType.byteLength * 8;
-    const components = channels.length;
+    const components = (channels == null ? void 0 : channels.length) ?? 1;
     const bitsPerChannel = [
       bits,
       components >= 2 ? bits : 0,
@@ -757,7 +1050,7 @@ function getTextureFormatInfo(format) {
       signed: decodedType.signed,
       normalized: decodedType.normalized,
       bitsPerChannel,
-      bytesPerPixel: decodedType.byteLength * channels.length,
+      bytesPerPixel: decodedType.byteLength * components,
       packed: formatInfo.packed,
       srgb: formatInfo.srgb
     };
@@ -814,8 +1107,29 @@ function getCompressedTextureBlockSize(format) {
     const [, blockWidth, blockHeight] = matches;
     return { blockWidth: Number(blockWidth), blockHeight: Number(blockHeight) };
   }
+  if (format.startsWith("bc") || format.startsWith("etc1") || format.startsWith("etc2") || format.startsWith("eac") || format.startsWith("atc")) {
+    return { blockWidth: 4, blockHeight: 4 };
+  }
+  if (format.startsWith("pvrtc-rgb4") || format.startsWith("pvrtc-rgba4")) {
+    return { blockWidth: 4, blockHeight: 4 };
+  }
+  if (format.startsWith("pvrtc-rgb2") || format.startsWith("pvrtc-rgba2")) {
+    return { blockWidth: 8, blockHeight: 4 };
+  }
   return null;
 }
+function getCompressedTextureBlockByteLength(format) {
+  if (format.startsWith("bc1") || format.startsWith("bc4") || format.startsWith("etc1") || format.startsWith("etc2-rgb8") || format.startsWith("etc2-rgb8a1") || format.startsWith("eac-r11") || format === "atc-rgb-unorm-webgl") {
+    return 8;
+  }
+  if (format.startsWith("bc2") || format.startsWith("bc3") || format.startsWith("bc5") || format.startsWith("bc6h") || format.startsWith("bc7") || format.startsWith("etc2-rgba8") || format.startsWith("eac-rg11") || format.startsWith("astc") || format === "atc-rgba-unorm-webgl" || format === "atc-rgbai-unorm-webgl") {
+    return 16;
+  }
+  if (format.startsWith("pvrtc")) {
+    return 8;
+  }
+  return 16;
+}
 
 // dist/image-utils/image-types.js
 function isExternalImage(data) {
@@ -877,6 +1191,8 @@ var _Device = class {
   /** 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());
@@ -930,6 +1246,16 @@ var _Device = class {
   isTextureFormatCompressed(format) {
     return textureFormatDecoder.isCompressed(format);
   }
+  /** Returns the compressed texture formats that can be created and sampled on this device */
+  getSupportedCompressedTextureFormats() {
+    const supportedFormats = [];
+    for (const format of Object.keys(getTextureFormatTable())) {
+      if (this.isTextureFormatCompressed(format) && this.isTextureFormatSupported(format)) {
+        supportedFormats.push(format);
+      }
+    }
+    return supportedFormats;
+  }
   // DEBUG METHODS
   pushDebugGroup(groupLabel) {
     this.commandEncoder.pushDebugGroup(groupLabel);
@@ -1008,6 +1334,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() {
@@ -1115,7 +1505,8 @@ __publicField(Device, "defaultProps", {
   onVisibilityChange: (context) => log.log(1, `${context} Visibility changed ${context.isVisible}`)(),
   onDevicePixelRatioChange: (context, info) => log.log(1, `${context} DPR changed ${info.oldRatio} => ${context.devicePixelRatio}`)(),
   // Debug flags
-  debug: log.get("debug") || void 0,
+  debug: getDefaultDebugValue(),
+  debugGPUTime: false,
   debugShaders: log.get("debug-shaders") || void 0,
   debugFramebuffers: Boolean(log.get("debug-framebuffers")),
   debugFactories: Boolean(log.get("debug-factories")),
@@ -1126,9 +1517,11 @@ __publicField(Device, "defaultProps", {
   // Experimental
   _reuseDevices: false,
   _requestMaxLimits: true,
-  _cacheShaders: false,
-  _cachePipelines: false,
-  _cacheDestroyPolicy: "unused",
+  _cacheShaders: true,
+  _destroyShaders: false,
+  _cachePipelines: true,
+  _sharePipelines: true,
+  _destroyPipelines: false,
   // TODO - Change these after confirming things work as expected
   _initializeFeatures: true,
   _disabledFeatures: {
@@ -1137,6 +1530,25 @@ __publicField(Device, "defaultProps", {
   // INTERNAL
   _handle: void 0
 });
+function _getDefaultDebugValue(logDebugValue, nodeEnv) {
+  if (logDebugValue !== void 0 && logDebugValue !== null) {
+    return Boolean(logDebugValue);
+  }
+  if (nodeEnv !== void 0) {
+    return nodeEnv !== "production";
+  }
+  return false;
+}
+function getDefaultDebugValue() {
+  return _getDefaultDebugValue(log.get("debug"), getNodeEnv());
+}
+function getNodeEnv() {
+  const processObject = globalThis.process;
+  if (!(processObject == null ? void 0 : processObject.env)) {
+    return void 0;
+  }
+  return processObject.env["NODE_ENV"];
+}
 
 // dist/adapter/luma.js
 var STARTUP_MESSAGE = "set luma.log.level=1 (or higher) to trace rendering";
@@ -1156,7 +1568,7 @@ var _Luma = class {
   VERSION = (
     // Version detection using build plugin
     // @ts-expect-error no-undef
-    true ? "9.3.0-alpha.2" : "running from source"
+    true ? "9.3.0-alpha.6" : "running from source"
   );
   spector;
   preregisteredAdapters = /* @__PURE__ */ new Map();
@@ -1321,9 +1733,91 @@ function getPageLoadPromise() {
   return pageLoadPromise;
 }
 
-// dist/adapter/canvas-context.js
+// dist/adapter/canvas-surface.js
 var import_env2 = require("@probe.gl/env");
 
+// dist/adapter/canvas-observer.js
+var CanvasObserver = class {
+  props;
+  _resizeObserver;
+  _intersectionObserver;
+  _observeDevicePixelRatioTimeout = null;
+  _observeDevicePixelRatioMediaQuery = null;
+  _handleDevicePixelRatioChange = () => this._refreshDevicePixelRatio();
+  _trackPositionInterval = null;
+  _started = false;
+  get started() {
+    return this._started;
+  }
+  constructor(props) {
+    this.props = props;
+  }
+  start() {
+    if (this._started || !this.props.canvas) {
+      return;
+    }
+    this._started = true;
+    this._intersectionObserver ||= new IntersectionObserver((entries) => this.props.onIntersection(entries));
+    this._resizeObserver ||= new ResizeObserver((entries) => this.props.onResize(entries));
+    this._intersectionObserver.observe(this.props.canvas);
+    try {
+      this._resizeObserver.observe(this.props.canvas, { box: "device-pixel-content-box" });
+    } catch {
+      this._resizeObserver.observe(this.props.canvas, { box: "content-box" });
+    }
+    this._observeDevicePixelRatioTimeout = setTimeout(() => this._refreshDevicePixelRatio(), 0);
+    if (this.props.trackPosition) {
+      this._trackPosition();
+    }
+  }
+  stop() {
+    var _a, _b;
+    if (!this._started) {
+      return;
+    }
+    this._started = false;
+    if (this._observeDevicePixelRatioTimeout) {
+      clearTimeout(this._observeDevicePixelRatioTimeout);
+      this._observeDevicePixelRatioTimeout = null;
+    }
+    if (this._observeDevicePixelRatioMediaQuery) {
+      this._observeDevicePixelRatioMediaQuery.removeEventListener("change", this._handleDevicePixelRatioChange);
+      this._observeDevicePixelRatioMediaQuery = null;
+    }
+    if (this._trackPositionInterval) {
+      clearInterval(this._trackPositionInterval);
+      this._trackPositionInterval = null;
+    }
+    (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
+    (_b = this._intersectionObserver) == null ? void 0 : _b.disconnect();
+  }
+  _refreshDevicePixelRatio() {
+    var _a;
+    if (!this._started) {
+      return;
+    }
+    this.props.onDevicePixelRatioChange();
+    (_a = this._observeDevicePixelRatioMediaQuery) == null ? void 0 : _a.removeEventListener("change", this._handleDevicePixelRatioChange);
+    this._observeDevicePixelRatioMediaQuery = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+    this._observeDevicePixelRatioMediaQuery.addEventListener("change", this._handleDevicePixelRatioChange, { once: true });
+  }
+  _trackPosition(intervalMs = 100) {
+    if (this._trackPositionInterval) {
+      return;
+    }
+    this._trackPositionInterval = setInterval(() => {
+      if (!this._started) {
+        if (this._trackPositionInterval) {
+          clearInterval(this._trackPositionInterval);
+          this._trackPositionInterval = null;
+        }
+      } else {
+        this.props.onPositionChange();
+      }
+    }, intervalMs);
+  }
+};
+
 // dist/utils/promise-utils.js
 function withResolvers() {
   let resolve;
@@ -1335,8 +1829,22 @@ function withResolvers() {
   return { promise, resolve, reject };
 }
 
-// dist/adapter/canvas-context.js
-var _CanvasContext = class {
+// dist/utils/assert.js
+function assert(condition, message) {
+  var _a;
+  if (!condition) {
+    const error = new Error(message ?? "luma.gl assertion failed.");
+    (_a = Error.captureStackTrace) == null ? void 0 : _a.call(Error, error, assert);
+    throw error;
+  }
+}
+function assertDefined(value, message) {
+  assert(value, message);
+  return value;
+}
+
+// dist/adapter/canvas-surface.js
+var _CanvasSurface = class {
   static isHTMLCanvas(canvas) {
     return typeof HTMLCanvasElement !== "undefined" && canvas instanceof HTMLCanvasElement;
   }
@@ -1372,10 +1880,7 @@ var _CanvasContext = class {
   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 */
@@ -1387,7 +1892,7 @@ var _CanvasContext = class {
   }
   constructor(props) {
     var _a, _b;
-    this.props = { ..._CanvasContext.defaultProps, ...props };
+    this.props = { ..._CanvasSurface.defaultProps, ...props };
     props = this.props;
     this.initialized = this._initializedResolvers.promise;
     if (!(0, import_env2.isBrowser)()) {
@@ -1399,11 +1904,11 @@ var _CanvasContext = class {
     } else {
       this.canvas = props.canvas;
     }
-    if (_CanvasContext.isHTMLCanvas(this.canvas)) {
+    if (_CanvasSurface.isHTMLCanvas(this.canvas)) {
       this.id = props.id || this.canvas.id;
       this.type = "html-canvas";
       this.htmlCanvas = this.canvas;
-    } else if (_CanvasContext.isOffscreenCanvas(this.canvas)) {
+    } else if (_CanvasSurface.isOffscreenCanvas(this.canvas)) {
       this.id = props.id || "offscreen-canvas";
       this.type = "offscreen-canvas";
       this.offscreenCanvas = this.canvas;
@@ -1419,23 +1924,21 @@ var _CanvasContext = class {
     this.drawingBufferHeight = this.canvas.height;
     this.devicePixelRatio = globalThis.devicePixelRatio || 1;
     this._position = [0, 0];
-    if (_CanvasContext.isHTMLCanvas(this.canvas)) {
-      this._intersectionObserver = new IntersectionObserver((entries) => this._handleIntersection(entries));
-      this._intersectionObserver.observe(this.canvas);
-      this._resizeObserver = new ResizeObserver((entries) => this._handleResize(entries));
-      try {
-        this._resizeObserver.observe(this.canvas, { box: "device-pixel-content-box" });
-      } catch {
-        this._resizeObserver.observe(this.canvas, { box: "content-box" });
-      }
-      setTimeout(() => this._observeDevicePixelRatio(), 0);
-      if (this.props.trackPosition) {
-        this._trackPosition();
-      }
-    }
+    this._canvasObserver = new CanvasObserver({
+      canvas: this.htmlCanvas,
+      trackPosition: this.props.trackPosition,
+      onResize: (entries) => this._handleResize(entries),
+      onIntersection: (entries) => this._handleIntersection(entries),
+      onDevicePixelRatioChange: () => this._observeDevicePixelRatio(),
+      onPositionChange: () => this.updatePosition()
+    });
   }
   destroy() {
-    this.destroyed = true;
+    if (!this.destroyed) {
+      this.destroyed = true;
+      this._stopObservers();
+      this.device = null;
+    }
   }
   setProps(props) {
     if ("useDevicePixels" in props) {
@@ -1449,59 +1952,36 @@ var _CanvasContext = class {
     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();
@@ -1511,10 +1991,10 @@ var _CanvasContext = class {
   getPixelSize() {
     return this.getDevicePixelSize();
   }
-  /** @deprecated - TODO which values should we use for aspect */
+  /** @deprecated Use the current drawing buffer size for projection setup. */
   getAspect() {
-    const [width, height] = this.getDevicePixelSize();
-    return width / height;
+    const [width, height] = this.getDrawingBufferSize();
+    return width > 0 && height > 0 ? width / height : 1;
   }
   /** @deprecated Returns multiplier need to convert CSS size to Device size */
   cssToDeviceRatio() {
@@ -1530,19 +2010,41 @@ var _CanvasContext = class {
   resize(size) {
     this.setDrawingBufferSize(size.width, size.height);
   }
-  // IMPLEMENTATION
-  /**
-   * Allows subclass constructor to override the canvas id for auto created canvases.
-   * This can really help when debugging DOM in apps that create multiple devices
-   */
   _setAutoCreatedCanvasId(id) {
     var _a;
     if (((_a = this.htmlCanvas) == null ? void 0 : _a.id) === "lumagl-auto-created-canvas") {
       this.htmlCanvas.id = id;
     }
   }
-  /** reacts to an observed intersection */
+  /**
+   * Starts DOM observation after the derived context and its device are fully initialized.
+   *
+   * `CanvasSurface` construction runs before subclasses can assign `this.device`, and the
+   * default WebGL canvas context is created before `WebGLDevice` has initialized `limits`,
+   * `features`, and the rest of its runtime state. Deferring observer startup avoids early
+   * `ResizeObserver` and DPR callbacks running against a partially initialized device.
+   */
+  _startObservers() {
+    if (this.destroyed) {
+      return;
+    }
+    this._canvasObserver.start();
+  }
+  /**
+   * Stops all DOM observation and timers associated with a canvas surface.
+   *
+   * This pairs with `_startObservers()` so teardown uses the same lifecycle whether a context is
+   * explicitly destroyed, abandoned during device reuse, or temporarily has not started observing
+   * yet. Centralizing shutdown here keeps resize/DPR/position watchers from surviving past the
+   * lifetime of the owning device.
+   */
+  _stopObservers() {
+    this._canvasObserver.stop();
+  }
   _handleIntersection(entries) {
+    if (this.destroyed) {
+      return;
+    }
     const entry = entries.find((entry_) => entry_.target === this.canvas);
     if (!entry) {
       return;
@@ -1553,34 +2055,32 @@ var _CanvasContext = class {
       this.device.props.onVisibilityChange(this);
     }
   }
-  /**
-   * Reacts to an observed resize by using the most accurate pixel size information the browser can provide
-   * @see https://web.dev/articles/device-pixel-content-box
-   * @see https://webgpufundamentals.org/webgpu/lessons/webgpu-resizing-the-canvas.html
-   */
   _handleResize(entries) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
+    if (this.destroyed) {
+      return;
+    }
     const entry = entries.find((entry_) => entry_.target === this.canvas);
     if (!entry) {
       return;
     }
-    this.cssWidth = entry.contentBoxSize[0].inlineSize;
-    this.cssHeight = entry.contentBoxSize[0].blockSize;
+    const contentBoxSize = assertDefined((_a = entry.contentBoxSize) == null ? void 0 : _a[0]);
+    this.cssWidth = contentBoxSize.inlineSize;
+    this.cssHeight = contentBoxSize.blockSize;
     const oldPixelSize = this.getDevicePixelSize();
-    const devicePixelWidth = ((_a = entry.devicePixelContentBoxSize) == null ? void 0 : _a[0].inlineSize) || entry.contentBoxSize[0].inlineSize * devicePixelRatio;
-    const devicePixelHeight = ((_b = entry.devicePixelContentBoxSize) == null ? void 0 : _b[0].blockSize) || entry.contentBoxSize[0].blockSize * devicePixelRatio;
+    const devicePixelWidth = ((_c = (_b = entry.devicePixelContentBoxSize) == null ? void 0 : _b[0]) == null ? void 0 : _c.inlineSize) || contentBoxSize.inlineSize * devicePixelRatio;
+    const devicePixelHeight = ((_e = (_d = entry.devicePixelContentBoxSize) == null ? void 0 : _d[0]) == null ? void 0 : _e.blockSize) || contentBoxSize.blockSize * devicePixelRatio;
     const [maxDevicePixelWidth, maxDevicePixelHeight] = this.getMaxDrawingBufferSize();
     this.devicePixelWidth = Math.max(1, Math.min(devicePixelWidth, maxDevicePixelWidth));
     this.devicePixelHeight = Math.max(1, Math.min(devicePixelHeight, maxDevicePixelHeight));
     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 {
@@ -1591,7 +2091,6 @@ var _CanvasContext = class {
     this.isInitialized = true;
     this.updatePosition();
   }
-  /** Perform a deferred resize of the drawing buffer if needed */
   _resizeDrawingBufferIfNeeded() {
     if (this._needsDrawingBufferResize) {
       this._needsDrawingBufferResize = false;
@@ -1603,31 +2102,23 @@ var _CanvasContext = class {
       }
     }
   }
-  /** Monitor DPR changes */
   _observeDevicePixelRatio() {
+    var _a, _b;
+    if (this.destroyed || !this._canvasObserver.started) {
+      return;
+    }
     const oldRatio = this.devicePixelRatio;
     this.devicePixelRatio = window.devicePixelRatio;
     this.updatePosition();
-    this.device.props.onDevicePixelRatioChange(this, { oldRatio });
-    matchMedia(`(resolution: ${this.devicePixelRatio}dppx)`).addEventListener("change", () => this._observeDevicePixelRatio(), { once: true });
-  }
-  /** Start tracking positions with a timer */
-  _trackPosition(intervalMs = 100) {
-    const intervalId = setInterval(() => {
-      if (this.destroyed) {
-        clearInterval(intervalId);
-      } else {
-        this.updatePosition();
-      }
-    }, intervalMs);
+    (_b = (_a = this.device.props).onDevicePixelRatioChange) == null ? void 0 : _b.call(_a, this, {
+      oldRatio
+    });
   }
-  /**
-   * Calculated the absolute position of the canvas
-   * @note - getBoundingClientRect() is normally cheap but can be expensive
-   * if called before browser has finished a reflow. Should not be the case here.
-   */
   updatePosition() {
     var _a, _b, _c;
+    if (this.destroyed) {
+      return;
+    }
     const newRect = (_a = this.htmlCanvas) == null ? void 0 : _a.getBoundingClientRect();
     if (newRect) {
       const position = [newRect.left, newRect.top];
@@ -1636,13 +2127,15 @@ var _CanvasContext = class {
       if (positionChanged) {
         const oldPosition = this._position;
         this._position = position;
-        (_c = (_b = this.device.props).onPositionChange) == null ? void 0 : _c.call(_b, this, { oldPosition });
+        (_c = (_b = this.device.props).onPositionChange) == null ? void 0 : _c.call(_b, this, {
+          oldPosition
+        });
       }
     }
   }
 };
-var CanvasContext = _CanvasContext;
-__publicField(CanvasContext, "defaultProps", {
+var CanvasSurface = _CanvasSurface;
+__publicField(CanvasSurface, "defaultProps", {
   id: void 0,
   canvas: null,
   width: 800,
@@ -1670,7 +2163,7 @@ function getContainer(container) {
 }
 function getCanvasFromDOM(canvasId) {
   const canvas = document.getElementById(canvasId);
-  if (!CanvasContext.isHTMLCanvas(canvas)) {
+  if (!CanvasSurface.isHTMLCanvas(canvas)) {
     throw new Error("Object is not a canvas element");
   }
   return canvas;
@@ -1694,33 +2187,40 @@ function scalePixels(pixel, ratio, width, height, yInvert) {
   const point = pixel;
   const x = scaleX(point[0], ratio, width);
   let y = scaleY(point[1], ratio, height, yInvert);
-  let t = scaleX(point[0] + 1, ratio, width);
-  const xHigh = t === width - 1 ? t : t - 1;
-  t = scaleY(point[1] + 1, ratio, height, yInvert);
+  let temporary = scaleX(point[0] + 1, ratio, width);
+  const xHigh = temporary === width - 1 ? temporary : temporary - 1;
+  temporary = scaleY(point[1] + 1, ratio, height, yInvert);
   let yHigh;
   if (yInvert) {
-    t = t === 0 ? t : t + 1;
+    temporary = temporary === 0 ? temporary : temporary + 1;
     yHigh = y;
-    y = t;
+    y = temporary;
   } else {
-    yHigh = t === height - 1 ? t : t - 1;
+    yHigh = temporary === height - 1 ? temporary : temporary - 1;
   }
   return {
     x,
     y,
-    // when ratio < 1, current css pixel and next css pixel may point to same device pixel, set width/height to 1 in those cases.
     width: Math.max(xHigh - x + 1, 1),
     height: Math.max(yHigh - y + 1, 1)
   };
 }
 function scaleX(x, ratio, width) {
-  const r = Math.min(Math.round(x * ratio), width - 1);
-  return r;
+  return Math.min(Math.round(x * ratio), width - 1);
 }
 function scaleY(y, ratio, height, yInvert) {
   return yInvert ? Math.max(0, height - 1 - Math.round(y * ratio)) : Math.min(Math.round(y * ratio), height - 1);
 }
 
+// dist/adapter/canvas-context.js
+var CanvasContext = class extends CanvasSurface {
+};
+__publicField(CanvasContext, "defaultProps", CanvasSurface.defaultProps);
+
+// dist/adapter/presentation-context.js
+var PresentationContext = class extends CanvasSurface {
+};
+
 // dist/adapter/resources/sampler.js
 var _Sampler = class extends Resource {
   get [Symbol.toStringTag]() {
@@ -1775,6 +2275,8 @@ var _Texture = class extends Resource {
   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. */
@@ -1800,6 +2302,7 @@ var _Texture = class extends Resource {
     this.height = this.props.height;
     this.depth = this.props.depth;
     this.mipLevels = this.props.mipLevels;
+    this.samples = this.props.samples || 1;
     if (this.dimension === "cube") {
       this.depth = 6;
     }
@@ -1831,9 +2334,25 @@ var _Texture = class extends Resource {
   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_);
@@ -1852,9 +2371,11 @@ var _Texture = class extends Resource {
    * @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");
@@ -1870,10 +2391,14 @@ var _Texture = class extends Resource {
     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");
@@ -1881,8 +2406,11 @@ var _Texture = class extends Resource {
   /**
    * 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");
@@ -1945,37 +2473,148 @@ var _Texture = class extends Resource {
     }
   }
   _normalizeCopyImageDataOptions(options_) {
-    const { width, height, depth } = this;
-    const options = { ..._Texture.defaultCopyDataOptions, width, height, depth, ...options_ };
-    const info = this.device.getTextureFormatInfo(this.format);
-    if (!options_.bytesPerRow && !info.bytesPerPixel) {
-      throw new Error(`bytesPerRow must be provided for texture format ${this.format}`);
-    }
-    options.bytesPerRow = options_.bytesPerRow || width * (info.bytesPerPixel || 4);
-    options.rowsPerImage = options_.rowsPerImage || height;
-    return options;
+    const { data, depth, ...writeOptions } = options_;
+    const options = this._normalizeTextureWriteOptions({
+      ...writeOptions,
+      depthOrArrayLayers: writeOptions.depthOrArrayLayers ?? depth
+    });
+    return { data, depth: options.depthOrArrayLayers, ...options };
   }
   _normalizeCopyExternalImageOptions(options_) {
+    const optionsWithoutUndefined = _Texture._omitUndefined(options_);
+    const mipLevel = optionsWithoutUndefined.mipLevel ?? 0;
+    const mipLevelSize = this._getMipLevelSize(mipLevel);
     const size = this.device.getExternalImageSize(options_.image);
-    const options = { ..._Texture.defaultCopyExternalImageOptions, ...size, ...options_ };
-    options.width = Math.min(options.width, this.width - options.x);
-    options.height = Math.min(options.height, this.height - options.y);
+    const options = {
+      ..._Texture.defaultCopyExternalImageOptions,
+      ...mipLevelSize,
+      ...size,
+      ...optionsWithoutUndefined
+    };
+    options.width = Math.min(options.width, mipLevelSize.width - options.x);
+    options.height = Math.min(options.height, mipLevelSize.height - options.y);
+    options.depth = Math.min(options.depth, mipLevelSize.depthOrArrayLayers - options.z);
     return options;
   }
   _normalizeTextureReadOptions(options_) {
-    const { 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 */
@@ -2011,6 +2650,10 @@ __publicField(Texture, "defaultCopyDataOptions", {
   byteOffset: 0,
   bytesPerRow: void 0,
   rowsPerImage: void 0,
+  width: void 0,
+  height: void 0,
+  depthOrArrayLayers: void 0,
+  depth: 1,
   mipLevel: 0,
   x: 0,
   y: 0,
@@ -2044,6 +2687,19 @@ __publicField(Texture, "defaultTextureReadOptions", {
   mipLevel: 0,
   aspect: "all"
 });
+__publicField(Texture, "defaultTextureWriteOptions", {
+  byteOffset: 0,
+  bytesPerRow: void 0,
+  rowsPerImage: void 0,
+  x: 0,
+  y: 0,
+  z: 0,
+  width: void 0,
+  height: void 0,
+  depthOrArrayLayers: 1,
+  mipLevel: 0,
+  aspect: "all"
+});
 
 // dist/adapter/resources/texture-view.js
 var _TextureView = class extends Resource {
@@ -2090,24 +2746,32 @@ function formatCompilerLog(shaderLog, source, options) {
   const log2 = shaderLog.slice().sort((a, b) => a.lineNum - b.lineNum);
   switch ((options == null ? void 0 : options.showSourceCode) || "no") {
     case "all":
-      let currentMessage = 0;
+      let currentMessageIndex = 0;
       for (let lineNum = 1; lineNum <= lines.length; lineNum++) {
-        formattedLog += getNumberedLine(lines[lineNum - 1], lineNum, options);
-        while (log2.length > currentMessage && log2[currentMessage].lineNum === lineNum) {
-          const message = log2[currentMessage++];
-          formattedLog += formatCompilerMessage(message, lines, message.lineNum, {
+        const line = lines[lineNum - 1];
+        const currentMessage = log2[currentMessageIndex];
+        if (line && currentMessage) {
+          formattedLog += getNumberedLine(line, lineNum, options);
+        }
+        while (log2.length > currentMessageIndex && currentMessage.lineNum === lineNum) {
+          const message = log2[currentMessageIndex++];
+          if (message) {
+            formattedLog += formatCompilerMessage(message, lines, message.lineNum, {
+              ...options,
+              inlineSource: false
+            });
+          }
+        }
+      }
+      while (log2.length > currentMessageIndex) {
+        const message = log2[currentMessageIndex++];
+        if (message) {
+          formattedLog += formatCompilerMessage(message, [], 0, {
             ...options,
             inlineSource: false
           });
         }
       }
-      while (log2.length > currentMessage) {
-        const message = log2[currentMessage++];
-        formattedLog += formatCompilerMessage(message, [], 0, {
-          ...options,
-          inlineSource: false
-        });
-      }
       return formattedLog;
     case "issues":
     case "no":
@@ -2129,8 +2793,8 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
 
 `;
   }
-  const color = message.type === "error" ? "red" : "#8B4000";
-  return (options == null ? void 0 : options.html) ? `<div class='luma-compiler-log-error' style="color:${color};"><b> ${message.type.toUpperCase()}: ${message.message}</b></div>` : `${message.type.toUpperCase()}: ${message.message}`;
+  const color = message.type === "error" ? "red" : "orange";
+  return (options == null ? void 0 : options.html) ? `<div class='luma-compiler-log-${message.type}' style="color:${color};"><b> ${message.type.toUpperCase()}: ${message.message}</b></div>` : `${message.type.toUpperCase()}: ${message.message}`;
 }
 function getNumberedLines(lines, lineNum, options) {
   let numberedLines = "";
@@ -2211,35 +2875,39 @@ var _Shader = class extends Resource {
    * TODO - this HTML formatting code should not be in Device, should be pluggable
    */
   _displayShaderLog(messages, shaderId) {
-    var _a;
     if (typeof document === "undefined" || !(document == null ? void 0 : document.createElement)) {
       return;
     }
     const shaderName = shaderId;
     const shaderTitle = `${this.stage} shader "${shaderName}"`;
-    let htmlLog = formatCompilerLog(messages, this.source, { showSourceCode: "all", html: true });
+    const htmlLog = formatCompilerLog(messages, this.source, { showSourceCode: "all", html: true });
     const translatedSource = this.getTranslatedSource();
+    const container = document.createElement("div");
+    container.innerHTML = `<h1>Compilation error in ${shaderTitle}</h1>
+<div style="display:flex;position:fixed;top:10px;right:20px;gap:2px;">
+<button id="copy">Copy source</button><br/>
+<button id="close">Close</button>
+</div>
+<code><pre>${htmlLog}</pre></code>`;
     if (translatedSource) {
-      htmlLog += `<br /><br /><h1>Translated Source</h1><br /><br /><code style="user-select:text;"><pre>${translatedSource}</pre></code>`;
-    }
-    const button = document.createElement("Button");
-    button.innerHTML = `
-<h1>Compilation error in ${shaderTitle}</h1><br /><br />
-<code style="user-select:text;"><pre>
-${htmlLog}
-</pre></code>`;
-    button.style.top = "10px";
-    button.style.left = "10px";
-    button.style.position = "absolute";
-    button.style.zIndex = "9999";
-    button.style.width = "100%";
-    button.style.textAlign = "left";
-    document.body.appendChild(button);
-    const errors = document.getElementsByClassName("luma-compiler-log-error");
-    (_a = errors[0]) == null ? void 0 : _a.scrollIntoView();
-    button.onclick = () => {
-      const dataURI = `data:text/plain,${encodeURIComponent(this.source)}`;
-      navigator.clipboard.writeText(dataURI);
+      container.innerHTML += `<br /><h1>Translated Source</h1><br /><br /><code><pre>${translatedSource}</pre></code>`;
+    }
+    container.style.top = "0";
+    container.style.left = "0";
+    container.style.background = "white";
+    container.style.position = "fixed";
+    container.style.zIndex = "9999";
+    container.style.maxWidth = "100vw";
+    container.style.maxHeight = "100vh";
+    container.style.overflowY = "auto";
+    document.body.appendChild(container);
+    const error = container.querySelector(".luma-compiler-log-error");
+    error == null ? void 0 : error.scrollIntoView();
+    container.querySelector("button#close").onclick = () => {
+      container.remove();
+    };
+    container.querySelector("button#copy").onclick = () => {
+      navigator.clipboard.writeText(this.source);
     };
   }
 };
@@ -2259,7 +2927,7 @@ function getShaderIdFromProps(props) {
 function getShaderName(shader, defaultName = "unnamed") {
   const SHADER_NAME_REGEXP = /#define[\s*]SHADER_NAME[\s*]([A-Za-z0-9_-]+)[\s*]/;
   const match = SHADER_NAME_REGEXP.exec(shader);
-  return match ? match[1] : defaultName;
+  return (match == null ? void 0 : match[1]) ?? defaultName;
 }
 
 // dist/adapter/resources/framebuffer.js
@@ -2363,17 +3031,15 @@ var _Framebuffer = class extends Resource {
    * and destroys existing textures if owned
    */
   resizeAttachments(width, height) {
-    for (let i = 0; i < this.colorAttachments.length; ++i) {
-      if (this.colorAttachments[i]) {
-        const resizedTexture = this.colorAttachments[i].texture.clone({
-          width,
-          height
-        });
-        this.destroyAttachedResource(this.colorAttachments[i]);
-        this.colorAttachments[i] = resizedTexture.view;
-        this.attachResource(resizedTexture.view);
-      }
-    }
+    this.colorAttachments.forEach((colorAttachment, i) => {
+      const resizedTexture = colorAttachment.texture.clone({
+        width,
+        height
+      });
+      this.destroyAttachedResource(colorAttachment);
+      this.colorAttachments[i] = resizedTexture.view;
+      this.attachResource(resizedTexture.view);
+    });
     if (this.depthStencilAttachment) {
       const resizedTexture = this.depthStencilAttachment.texture.clone({
         width,
@@ -2410,10 +3076,23 @@ var _RenderPipeline = class extends Resource {
   linkStatus = "pending";
   /** The hash of the pipeline */
   hash = "";
+  /** Optional shared backend implementation */
+  sharedRenderPipeline = null;
+  /** Whether shader or pipeline compilation/linking is still in progress */
+  get isPending() {
+    var _a;
+    return this.linkStatus === "pending" || this.vs.compilationStatus === "pending" || ((_a = this.fs) == null ? void 0 : _a.compilationStatus) === "pending";
+  }
+  /** Whether shader or pipeline compilation/linking has failed */
+  get isErrored() {
+    var _a;
+    return this.linkStatus === "error" || this.vs.compilationStatus === "error" || ((_a = this.fs) == null ? void 0 : _a.compilationStatus) === "error";
+  }
   constructor(device, props) {
     super(device, props, _RenderPipeline.defaultProps);
     this.shaderLayout = this.props.shaderLayout;
     this.bufferLayout = this.props.bufferLayout || [];
+    this.sharedRenderPipeline = this.props._sharedRenderPipeline || null;
   }
 };
 var RenderPipeline = _RenderPipeline;
@@ -2431,10 +3110,30 @@ __publicField(RenderPipeline, "defaultProps", {
   colorAttachmentFormats: void 0,
   depthStencilAttachmentFormat: void 0,
   parameters: {},
-  bindings: {},
-  uniforms: {}
+  varyings: void 0,
+  bufferMode: void 0,
+  disableWarnings: false,
+  _sharedRenderPipeline: void 0,
+  bindings: void 0
 });
 
+// dist/adapter/resources/shared-render-pipeline.js
+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
+    });
+  }
+};
+
 // dist/adapter/resources/render-pass.js
 var _RenderPass = class extends Resource {
   get [Symbol.toStringTag]() {
@@ -2517,8 +3216,69 @@ var _CommandEncoder = class extends Resource {
   get [Symbol.toStringTag]() {
     return "CommandEncoder";
   }
+  _timeProfilingQuerySet = null;
+  _timeProfilingSlotCount = 0;
+  _gpuTimeMs;
   constructor(device, props) {
     super(device, props, _CommandEncoder.defaultProps);
+    this._timeProfilingQuerySet = props.timeProfilingQuerySet ?? null;
+    this._timeProfilingSlotCount = 0;
+    this._gpuTimeMs = void 0;
+  }
+  /**
+   * Reads all resolved timestamp pairs on the current profiler query set and caches the sum
+   * as milliseconds on this encoder.
+   */
+  async resolveTimeProfilingQuerySet() {
+    this._gpuTimeMs = void 0;
+    if (!this._timeProfilingQuerySet) {
+      return;
+    }
+    const pairCount = Math.floor(this._timeProfilingSlotCount / 2);
+    if (pairCount <= 0) {
+      return;
+    }
+    const queryCount = pairCount * 2;
+    const results = await this._timeProfilingQuerySet.readResults({
+      firstQuery: 0,
+      queryCount
+    });
+    let totalDurationNanoseconds = 0n;
+    for (let queryIndex = 0; queryIndex < queryCount; queryIndex += 2) {
+      totalDurationNanoseconds += results[queryIndex + 1] - results[queryIndex];
+    }
+    this._gpuTimeMs = Number(totalDurationNanoseconds) / 1e6;
+  }
+  /** Returns the number of query slots consumed by automatic pass profiling on this encoder. */
+  getTimeProfilingSlotCount() {
+    return this._timeProfilingSlotCount;
+  }
+  getTimeProfilingQuerySet() {
+    return this._timeProfilingQuerySet;
+  }
+  /** Internal helper for auto-assigning timestamp slots to render/compute passes on this encoder. */
+  _applyTimeProfilingToPassProps(props) {
+    const passProps = props || {};
+    if (!this._supportsTimestampQueries() || !this._timeProfilingQuerySet) {
+      return passProps;
+    }
+    if (passProps.timestampQuerySet !== void 0 || passProps.beginTimestampIndex !== void 0 || passProps.endTimestampIndex !== void 0) {
+      return passProps;
+    }
+    const beginTimestampIndex = this._timeProfilingSlotCount;
+    if (beginTimestampIndex + 1 >= this._timeProfilingQuerySet.props.count) {
+      return passProps;
+    }
+    this._timeProfilingSlotCount += 2;
+    return {
+      ...passProps,
+      timestampQuerySet: this._timeProfilingQuerySet,
+      beginTimestampIndex,
+      endTimestampIndex: beginTimestampIndex + 1
+    };
+  }
+  _supportsTimestampQueries() {
+    return this.device.features.has("timestamp-query");
   }
 };
 var CommandEncoder = _CommandEncoder;
@@ -2527,7 +3287,8 @@ var CommandEncoder = _CommandEncoder;
 // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
 __publicField(CommandEncoder, "defaultProps", {
   ...Resource.defaultProps,
-  measureExecutionTime: void 0
+  measureExecutionTime: void 0,
+  timeProfilingQuerySet: void 0
 });
 
 // dist/adapter/resources/command-buffer.js
@@ -2546,11 +3307,20 @@ __publicField(CommandBuffer, "defaultProps", {
 
 // dist/shadertypes/data-types/decode-shader-types.js
 function getVariableShaderTypeInfo(format) {
-  const decoded = UNIFORM_FORMATS[format];
+  const resolvedFormat = resolveVariableShaderTypeAlias(format);
+  const decoded = UNIFORM_FORMATS[resolvedFormat];
+  if (!decoded) {
+    throw new Error(`Unsupported variable shader type: ${format}`);
+  }
   return decoded;
 }
 function getAttributeShaderTypeInfo(attributeType) {
-  const [primitiveType, components] = TYPE_INFO[attributeType];
+  const resolvedAttributeType = resolveAttributeShaderTypeAlias(attributeType);
+  const decoded = TYPE_INFO[resolvedAttributeType];
+  if (!decoded) {
+    throw new Error(`Unsupported attribute shader type: ${attributeType}`);
+  }
+  const [primitiveType, components] = decoded;
   const integer = primitiveType === "i32" || primitiveType === "u32";
   const signed = primitiveType !== "u32";
   const byteLength = PRIMITIVE_TYPE_SIZES[primitiveType] * components;
@@ -2562,6 +3332,12 @@ function getAttributeShaderTypeInfo(attributeType) {
     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,
@@ -2880,7 +3656,9 @@ __publicField(QuerySet, "defaultProps", {
 
 // dist/adapter/resources/fence.js
 var _Fence = class extends Resource {
-  [Symbol.toStringTag] = "WEBGLFence";
+  get [Symbol.toStringTag]() {
+    return "Fence";
+  }
   constructor(device, props = {}) {
     super(device, props, _Fence.defaultProps);
   }
@@ -3040,20 +3818,26 @@ function isNumberArray(value) {
 }
 
 // dist/utils/array-equal.js
+var MAX_ELEMENTWISE_ARRAY_COMPARE_LENGTH = 128;
 function arrayEqual(a, b, limit = 16) {
-  if (a !== b) {
-    return false;
+  if (a === b) {
+    return true;
   }
   const arrayA = a;
   const arrayB = b;
-  if (!isNumberArray(arrayA)) {
+  if (!isNumberArray(arrayA) || !isNumberArray(arrayB)) {
     return false;
   }
-  if (isNumberArray(arrayB) && arrayA.length === arrayB.length) {
-    for (let i = 0; i < arrayA.length; ++i) {
-      if (arrayB[i] !== arrayA[i]) {
-        return false;
-      }
+  if (arrayA.length !== arrayB.length) {
+    return false;
+  }
+  const maxCompareLength = Math.min(limit, MAX_ELEMENTWISE_ARRAY_COMPARE_LENGTH);
+  if (arrayA.length > maxCompareLength) {
+    return false;
+  }
+  for (let i = 0; i < arrayA.length; ++i) {
+    if (arrayB[i] !== arrayA[i]) {
+      return false;
     }
   }
   return true;
@@ -3273,7 +4057,7 @@ function readPixel(pixelData, x, y, bitsPerChannel) {
   let bitOffsetWithinPixel = 0;
   const channels = [];
   for (let i = 0; i < 4; i++) {
-    const bits = bitsPerChannel[i];
+    const bits = bitsPerChannel[i] ?? 0;
     if (bits <= 0) {
       channels.push(0);
     } else {
@@ -3282,14 +4066,14 @@ function readPixel(pixelData, x, y, bitsPerChannel) {
       bitOffsetWithinPixel += bits;
     }
   }
-  return [channels[0], channels[1], channels[2], channels[3]];
+  return [channels[0] ?? 0, channels[1] ?? 0, channels[2] ?? 0, channels[3] ?? 0];
 }
 function writePixel(dataView, bitOffset, bitsPerChannel, pixel) {
   let currentBitOffset = bitOffset;
   for (let channel = 0; channel < 4; channel++) {
-    const bits = bitsPerChannel[channel];
+    const bits = bitsPerChannel[channel] ?? 0;
     const maxValue = (1 << bits) - 1;
-    const channelValue = pixel[channel] & maxValue;
+    const channelValue = (pixel[channel] ?? 0) & maxValue;
     writeBitsToDataView(dataView, currentBitOffset, bits, channelValue);
     currentBitOffset += bits;
   }