ice3 0.1.0 → 0.2.0

package/dist/index.js

@@ -532,11 +532,12 @@ var ICENode = class extends ICEEventDispatcher {
   position;
   rotation;
   scale;
-  visible = true;
   _parent = null;
   _children = [];
   worldMatrix = new ICEMatrix4();
   localMatrixOverride = null;
+  _visible = true;
+  _revision = 0;
   constructor(options) {
     super();
     if (!options.id.trim()) {
@@ -560,6 +561,18 @@ var ICENode = class extends ICEEventDispatcher {
   get typeId() {
     return "ice3:Node";
   }
+  get visible() {
+    return this._visible;
+  }
+  set visible(value) {
+    if (value === this._visible)
+      return;
+    this._visible = value;
+    this.markSceneChanged();
+  }
+  get revision() {
+    return this.getRoot()._revision;
+  }
   get parent() {
     return this._parent;
   }
@@ -582,6 +595,7 @@ var ICENode = class extends ICEEventDispatcher {
     }
     node._parent = this;
     this._children.push(node);
+    this.markSceneChanged();
     return this;
   }
   removeChild(node, options) {
@@ -591,6 +605,7 @@ var ICENode = class extends ICEEventDispatcher {
     }
     this._children.splice(index, 1);
     node._parent = null;
+    this.markSceneChanged();
     if (options?.dispose) {
       node.dispose();
     }
@@ -624,10 +639,14 @@ var ICENode = class extends ICEEventDispatcher {
       throw new TypeError("ICE local matrix must contain 16 finite values");
     }
     this.localMatrixOverride = new Float32Array(matrix);
+    this.markSceneChanged();
     return this;
   }
   clearLocalMatrix() {
+    if (this.localMatrixOverride === null)
+      return this;
     this.localMatrixOverride = null;
+    this.markSceneChanged();
     return this;
   }
   toJSON() {
@@ -658,6 +677,9 @@ var ICENode = class extends ICEEventDispatcher {
     }
     return current;
   }
+  markSceneChanged() {
+    this.getRoot()._revision += 1;
+  }
   isAncestorOf(node) {
     let current = node;
     while (current) {
@@ -839,7 +861,28 @@ function deserializeScene(value, registry) {
   return { scene, report: { errors } };
 }
 
-// packages/renderer/dist/WebGL2RenderBatch.js
+// packages/renderer/dist/Renderables.js
+var visit = (node, parentVisible, output) => {
+  const visible = parentVisible && node.visible;
+  if (visible && node instanceof ICEMesh) {
+    output.push({
+      id: node.id,
+      mesh: node,
+      worldMatrix: node.updateWorldMatrix().elements
+    });
+  }
+  for (const child of node.children) {
+    visit(child, visible, output);
+  }
+};
+function collectRenderables(scene, output = []) {
+  output.length = 0;
+  visit(scene, true, output);
+  return output;
+}
+var selectionIdentity = (mesh) => mesh.selectionId;
+
+// packages/renderer/dist/RenderBatch.js
 function collectRenderBatches(scene, output = []) {
   output.length = 0;
   const visit2 = (node, parentVisible) => {
@@ -865,27 +908,6 @@ function isRenderBatch(node) {
   return Boolean(candidate.geometry && candidate.material && candidate.semanticIds && candidate.semanticNodeIds && candidate.semanticSelectionIds && typeof candidate.materialKey === "string");
 }
 
-// packages/renderer/dist/WebGL2GeometryBatch.js
-var visit = (node, parentVisible, output) => {
-  const visible = parentVisible && node.visible;
-  if (visible && node instanceof ICEMesh) {
-    output.push({
-      id: node.id,
-      mesh: node,
-      worldMatrix: node.updateWorldMatrix().elements
-    });
-  }
-  for (const child of node.children) {
-    visit(child, visible, output);
-  }
-};
-function collectRenderables(scene, output = []) {
-  output.length = 0;
-  visit(scene, true, output);
-  return output;
-}
-var selectionIdentity = (mesh) => mesh.selectionId;
-
 // packages/renderer/dist/WebGL2Program.js
 var VERTEX_SOURCE = `
 attribute vec3 a_position;
@@ -1026,6 +1048,42 @@ var WebGL2Program = class _WebGL2Program {
   }
 };
 
+// packages/renderer/dist/InstanceBatch.js
+function collectInstanceBatches(renderables, output = []) {
+  output.length = 0;
+  const byGeometry = /* @__PURE__ */ new Map();
+  for (const renderable of renderables) {
+    const byMaterial = byGeometry.get(renderable.mesh.geometry) ?? /* @__PURE__ */ new Map();
+    const group = byMaterial.get(renderable.mesh.material) ?? [];
+    group.push(renderable);
+    byMaterial.set(renderable.mesh.material, group);
+    byGeometry.set(renderable.mesh.geometry, byMaterial);
+  }
+  for (const [geometry, byMaterial] of byGeometry) {
+    for (const [material, group] of byMaterial) {
+      if (group.length < 2)
+        continue;
+      const instanceMatrices = new Float32Array(group.length * 16);
+      const semanticIndices = new Uint32Array(group.length);
+      for (let index = 0; index < group.length; index += 1) {
+        instanceMatrices.set(group[index].worldMatrix, index * 16);
+        semanticIndices[index] = index;
+      }
+      output.push({
+        id: `instance:${group[0].id}`,
+        geometry,
+        material,
+        instanceMatrices,
+        semanticIds: group.map((renderable) => renderable.mesh.selectionId),
+        semanticIndices,
+        meshIds: group.map((renderable) => renderable.id),
+        materialKey: `${material.color}:${material.edgeColor ?? ""}`
+      });
+    }
+  }
+  return output;
+}
+
 // packages/renderer/dist/WebGL2InstanceBatch.js
 var WebGL2InstanceCache = class {
   entries = /* @__PURE__ */ new Map();
@@ -1135,40 +1193,6 @@ var WebGL2InstanceCache = class {
     this.gl.deleteVertexArray(entry.vertexArray);
   }
 };
-function collectInstanceBatches(renderables, output = []) {
-  output.length = 0;
-  const byGeometry = /* @__PURE__ */ new Map();
-  for (const renderable of renderables) {
-    const byMaterial = byGeometry.get(renderable.mesh.geometry) ?? /* @__PURE__ */ new Map();
-    const group = byMaterial.get(renderable.mesh.material) ?? [];
-    group.push(renderable);
-    byMaterial.set(renderable.mesh.material, group);
-    byGeometry.set(renderable.mesh.geometry, byMaterial);
-  }
-  for (const [geometry, byMaterial] of byGeometry) {
-    for (const [material, group] of byMaterial) {
-      if (group.length < 2)
-        continue;
-      const instanceMatrices = new Float32Array(group.length * 16);
-      const semanticIndices = new Uint32Array(group.length);
-      for (let index = 0; index < group.length; index += 1) {
-        instanceMatrices.set(group[index].worldMatrix, index * 16);
-        semanticIndices[index] = index;
-      }
-      output.push({
-        id: `instance:${group[0].id}`,
-        geometry,
-        material,
-        instanceMatrices,
-        semanticIds: group.map((renderable) => renderable.mesh.selectionId),
-        semanticIndices,
-        meshIds: group.map((renderable) => renderable.id),
-        materialKey: `${material.color}:${material.edgeColor ?? ""}`
-      });
-    }
-  }
-  return output;
-}
 
 // packages/renderer/dist/WebGL2GeometryCache.js
 var WebGL2GeometryCache = class {
@@ -1682,16 +1706,7 @@ var WebGL2Picker = class {
   }
 };
 
-// packages/renderer/dist/WebGL2RendererBackend.js
-var EDGE_PIXEL_OFFSETS = [
-  [0, 0],
-  [-1, 0],
-  [1, 0],
-  [0, -1],
-  [0, 1]
-];
-var SELECTION_RGBA = [255 / 255, 208 / 255, 0];
-var SELECTION_TINT_ALPHA = 0.65;
+// packages/renderer/dist/Color.js
 var COLOR_CACHE_LIMIT = 128;
 var COLOR_CACHE = /* @__PURE__ */ new Map();
 function colorToRgba(color) {
@@ -1718,6 +1733,54 @@ function colorToRgba(color) {
   COLOR_CACHE.set(key, rgba);
   return rgba;
 }
+
+// packages/renderer/dist/RendererProfiler.js
+var RendererProfiler = class {
+  enabled = false;
+  cursor = 0;
+  marks = /* @__PURE__ */ new Map();
+  enable(value) {
+    this.enabled = value;
+    this.marks.clear();
+  }
+  get isEnabled() {
+    return this.enabled;
+  }
+  begin() {
+    if (!this.enabled)
+      return;
+    this.cursor = performance.now();
+    this.marks.clear();
+  }
+  mark(stage) {
+    if (!this.enabled)
+      return;
+    const now = performance.now();
+    this.marks.set(stage, Math.max(0, now - this.cursor));
+    this.cursor = now;
+  }
+  end() {
+    if (!this.enabled)
+      return null;
+    return {
+      collectMs: this.marks.get("collect") ?? 0,
+      prepareAndUploadMs: this.marks.get("prepareAndUpload") ?? 0,
+      encodeMs: this.marks.get("encode") ?? 0,
+      submitMs: this.marks.get("submit") ?? Math.max(0, performance.now() - this.cursor)
+    };
+  }
+};
+
+// packages/renderer/dist/WebGL2RendererBackend.js
+var EDGE_PIXEL_OFFSETS = [
+  [0, 0],
+  [-1, 0],
+  [1, 0],
+  [0, -1],
+  [0, 1]
+];
+var SELECTION_RGBA = [255 / 255, 208 / 255, 0];
+var SELECTION_TINT_ALPHA = 0.65;
 var WebGL2RendererBackend = class {
   capabilities = {
     backend: "webgl2",
@@ -1741,6 +1804,8 @@ var WebGL2RendererBackend = class {
   batchesScratch = [];
   instancesScratch = [];
   instancedMeshIds = /* @__PURE__ */ new Set();
+  profiler = new RendererProfiler();
+  lastFrameProfile = null;
   backgroundRgba = [
     0.035,
     0.055,
@@ -1830,6 +1895,8 @@ var WebGL2RendererBackend = class {
     if (!this.gl || !this.program || !this.geometryCache) {
       throw new ICEEngineError("ICE3_ENGINE_NOT_READY", "Renderer is not initialized");
     }
+    this.profiler.begin();
+    this.lastFrameProfile = null;
     const gl = this.gl;
     gl.clearColor(...this.backgroundRgba);
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
@@ -1855,7 +1922,10 @@ var WebGL2RendererBackend = class {
     const clipPixelY = 2 / Math.max(1, frame.viewport.height * frame.dpr);
     const renderables = collectRenderables(frame.scene, this.renderablesScratch);
     const instances = collectInstanceBatches(renderables, this.instancesScratch);
+    const batches = collectRenderBatches(frame.scene, this.batchesScratch);
+    this.profiler.mark("collect");
     this.program.setInstancing(true);
+    this.profiler.mark("prepareAndUpload");
     for (const batch of instances) {
       const instance = this.instanceCache.retain(gl, this.geometryCache, batch);
       if (!instance)
@@ -1883,7 +1953,6 @@ var WebGL2RendererBackend = class {
     }
     this.program.setInstancing(false);
     this.program.setClipOffset(0, 0);
-    const batches = collectRenderBatches(frame.scene, this.batchesScratch);
     for (const draw of batches) {
       this.program.setClipOffset(0, 0);
       mvp.elements.set(viewProjection.elements);
@@ -2031,14 +2100,40 @@ var WebGL2RendererBackend = class {
     this.frameStats.gpuUploads = this.geometryCache.uploadCount;
     this.frameStats.gpuEvictions = this.geometryCache.evictionCount;
     this.frameStats.gpuBytes = this.geometryCache.totalBytes + this.instanceCache.totalBytes;
+    this.profiler.mark("encode");
+    this.profiler.mark("submit");
+    this.lastFrameProfile = this.profiler.end();
+  }
+  enableProfiling(enabled) {
+    this.profiler.enable(enabled);
+    this.lastFrameProfile = null;
   }
-  pick(frame, point) {
+  get frameProfile() {
+    return this.lastFrameProfile;
+  }
+  async pick(frame, point) {
     if (!this.picker || !this.geometryCache) {
       throw new ICEEngineError("ICE3_PICK_UNAVAILABLE", "ICE3_PICK_UNAVAILABLE: picker is not initialized");
     }
     const renderables = collectRenderables(frame.scene, this.renderablesScratch);
     return this.picker.pick({ ...frame, point }, this.geometryCache, renderables, collectRenderBatches(frame.scene, this.batchesScratch), collectInstanceBatches(renderables, this.instancesScratch), this.instanceCache);
   }
+  async capture() {
+    if (!this.canvas) {
+      throw new ICEEngineError("ICE3_ENGINE_NOT_READY", "Renderer is not initialized");
+    }
+    return new Promise((resolve, reject) => {
+      this.canvas.toBlob((blob) => {
+        if (blob)
+          resolve(blob);
+        else
+          reject(new Error("ICE3_CAPTURE_UNAVAILABLE: PNG encoding failed"));
+      }, "image/png");
+    });
+  }
+  async finish() {
+    this.gl?.finish();
+  }
   dispose() {
     if (this.canvas) {
       this.canvas.removeEventListener("webglcontextlost", this.handleContextLost);
@@ -2081,73 +2176,2983 @@ var WebGL2RendererBackend = class {
   }
 };
 
-// packages/renderer/dist/ICEWebGL2BatchGenerationUploader.js
-function queueBatchGeneration(buffers, options) {
-  if (!Number.isInteger(options.generation) || options.generation < 0 || !Number.isInteger(options.bytesPerFrame) || options.bytesPerFrame < 1 || buffers.some((buffer) => !Number.isInteger(buffer.byteLength) || buffer.byteLength < 1 || buffer.byteLength > options.bytesPerFrame)) {
-    fail(options, new Error("ICE3_RENDER_BATCH_UPLOAD_INVALID: upload options are invalid"));
-    return { cancel: () => void 0 };
-  }
-  const schedule = options.schedule ?? globalThis.requestAnimationFrame;
-  const cancelSchedule = options.cancelSchedule ?? globalThis.cancelAnimationFrame;
-  const upload = options.upload ?? ((buffer) => buffer);
-  const release = options.release ?? (() => void 0);
-  const resources = [];
-  let next = 0;
-  let frame;
-  let settled = false;
-  const cleanup = () => {
-    if (frame !== void 0) {
-      cancelSchedule(frame);
-      frame = void 0;
+// packages/renderer/dist/WebGPUProbe.js
+var WEBGPU_TIMEOUT_MS = 3e3;
+var REQUIRED_LIMITS = [
+  ["maxTextureDimension2D", 4096],
+  ["maxBufferSize", 268435456],
+  ["maxVertexBuffers", 2],
+  ["maxBindGroups", 2]
+];
+var PROBE_SHADER = `
+@vertex
+fn vertexMain(@builtin(vertex_index) index: u32) -> @builtin(position) vec4<f32> {
+  var positions = array<vec2<f32>, 3>(
+    vec2<f32>(-1.0, -1.0),
+    vec2<f32>(3.0, -1.0),
+    vec2<f32>(-1.0, 3.0),
+  );
+  return vec4<f32>(positions[index], 0.0, 1.0);
+}
+
+@fragment
+fn fragmentMain() -> @location(0) vec4<f32> {
+  return vec4<f32>(0.0, 0.0, 0.0, 1.0);
+}
+`;
+var successfulProbes = /* @__PURE__ */ new WeakMap();
+function probeWebGPU(options = {}) {
+  const gpu = options.gpu ?? (typeof navigator === "undefined" ? void 0 : navigator.gpu);
+  if (!gpu) {
+    return Promise.resolve(failure("api-unavailable", "navigator.gpu is unavailable"));
+  }
+  const featureKey = [...options.optionalFeatures ?? []].sort().join("|");
+  const probes = successfulProbes.get(gpu);
+  const cached = probes?.get(featureKey);
+  if (cached)
+    return cached;
+  const probe = executeProbe(gpu, options).then((result) => result.supported ? {
+    ...result,
+    release: () => {
+      const current = successfulProbes.get(gpu);
+      current?.delete(featureKey);
+      if (current?.size === 0)
+        successfulProbes.delete(gpu);
+    }
+  } : result);
+  const featureProbes = probes ?? /* @__PURE__ */ new Map();
+  featureProbes.set(featureKey, probe);
+  successfulProbes.set(gpu, featureProbes);
+  void probe.then((result) => {
+    if (!result.supported) {
+      featureProbes.delete(featureKey);
+      if (featureProbes.size === 0)
+        successfulProbes.delete(gpu);
     }
-    for (const resource of resources.splice(0))
-      release(resource);
-  };
-  const current = () => options.isCurrent?.() ?? true;
-  const failNow = (error) => {
-    if (settled)
-      return;
-    settled = true;
-    cleanup();
-    options.onFailed(options.generation, error);
-  };
-  const pump = () => {
-    frame = void 0;
-    if (settled)
-      return;
-    if (!current()) {
-      settled = true;
-      cleanup();
-      return;
+  });
+  return probe;
+}
+async function executeProbe(gpu, options) {
+  const timeoutMs = options.timeoutMs ?? WEBGPU_TIMEOUT_MS;
+  const timeout = /* @__PURE__ */ Symbol("timeout");
+  let timeoutId;
+  let adapter;
+  try {
+    adapter = await Promise.race([
+      gpu.requestAdapter({ powerPreference: "high-performance" }),
+      new Promise((resolve) => {
+        timeoutId = setTimeout(() => resolve(timeout), timeoutMs);
+      })
+    ]);
+  } catch (error) {
+    if (timeoutId !== void 0)
+      clearTimeout(timeoutId);
+    return failure("adapter-unavailable", errorMessage(error));
+  }
+  if (timeoutId !== void 0)
+    clearTimeout(timeoutId);
+  if (adapter === timeout) {
+    return failure("adapter-timeout", `Adapter lookup exceeded ${timeoutMs}ms`);
+  }
+  if (!adapter) {
+    return failure("adapter-unavailable", "requestAdapter returned null");
+  }
+  for (const [name, minimum] of REQUIRED_LIMITS) {
+    const value = adapter.limits[name];
+    if (typeof value !== "number" || value < minimum) {
+      return failure("limit-too-low", `${name} requires at least ${minimum}; received ${String(value)}`);
     }
-    let bytes = 0;
-    try {
-      while (next < buffers.length) {
-        const buffer = buffers[next];
-        if (resources.length > 0 && bytes + buffer.byteLength > options.bytesPerFrame) {
-          break;
-        }
-        bytes += buffer.byteLength;
-        next += 1;
-        resources.push(upload(buffer));
-      }
-    } catch (error) {
-      failNow(error);
-      return;
+  }
+  let device;
+  try {
+    const features = (options.optionalFeatures ?? []).filter((feature) => adapter.features.has(feature));
+    device = await adapter.requestDevice({
+      ...features.length > 0 ? { requiredFeatures: features } : {}
+    });
+  } catch (error) {
+    return failure("device-failed", errorMessage(error));
+  }
+  const canvas = createProbeCanvas(options.createCanvas);
+  if (!canvas) {
+    device.destroy();
+    return failure("document-unavailable", "No Canvas implementation is available");
+  }
+  let context;
+  try {
+    context = canvas.getContext("webgpu");
+  } catch (error) {
+    device.destroy();
+    return failure("context-failed", errorMessage(error));
+  }
+  if (!context) {
+    device.destroy();
+    return failure("context-failed", "WebGPU canvas context is unavailable");
+  }
+  try {
+    const format = gpu.getPreferredCanvasFormat();
+    context.configure({
+      device,
+      format,
+      alphaMode: "premultiplied"
+    });
+    const module = device.createShaderModule({ code: PROBE_SHADER });
+    const pipeline = await device.createRenderPipelineAsync({
+      layout: "auto",
+      vertex: {
+        module,
+        entryPoint: "vertexMain"
+      },
+      fragment: {
+        module,
+        entryPoint: "fragmentMain",
+        targets: [{ format }]
+      },
+      primitive: { topology: "triangle-list" }
+    });
+    const texture = context.getCurrentTexture();
+    const encoder = device.createCommandEncoder();
+    const pass = encoder.beginRenderPass({
+      colorAttachments: [{
+        view: texture.createView(),
+        clearValue: { r: 0, g: 0, b: 0, a: 1 },
+        loadOp: "clear",
+        storeOp: "store"
+      }]
+    });
+    pass.setPipeline(pipeline);
+    pass.draw(3);
+    pass.end();
+    device.queue.submit([encoder.finish()]);
+    const lost = await Promise.race([
+      device.lost.then((info) => info.message || info.reason),
+      new Promise((resolve) => {
+        setTimeout(() => resolve(false), 0);
+      })
+    ]);
+    if (lost) {
+      device.destroy();
+      return failure("device-lost", lost);
     }
-    if (next >= buffers.length) {
-      if (!current()) {
-        settled = true;
-        cleanup();
-        return;
-      }
-      try {
-        options.onActivate?.(options.generation, resources);
-      } catch (error) {
-        failNow(error);
-        return;
-      }
-      settled = true;
+    return {
+      supported: true,
+      adapter,
+      device,
+      format,
+      enabledFeatures: new Set(Array.from(device.features)),
+      release: () => void 0
+    };
+  } catch (error) {
+    device.destroy();
+    return failure("pipeline-failed", errorMessage(error));
+  }
+}
+function createProbeCanvas(createCanvas) {
+  if (createCanvas)
+    return createCanvas();
+  if (typeof OffscreenCanvas !== "undefined") {
+    return new OffscreenCanvas(64, 64);
+  }
+  if (typeof document !== "undefined") {
+    const canvas = document.createElement("canvas");
+    canvas.width = 64;
+    canvas.height = 64;
+    return canvas;
+  }
+  return void 0;
+}
+function failure(reason, detail) {
+  return {
+    supported: false,
+    reason,
+    ...detail ? { detail } : {}
+  };
+}
+function errorMessage(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+
+// packages/renderer/dist/WebGPUResources.js
+var WEBGPU_BUFFER_USAGE = {
+  vertex: 32 | 8,
+  index: 16 | 8
+};
+function alignToFourBytes(value) {
+  return Math.ceil(value / 4) * 4;
+}
+function createGPUDataBuffer(device, data, usage, label) {
+  const byteLength = alignToFourBytes(data.byteLength);
+  let buffer;
+  try {
+    buffer = device.createBuffer({
+      label,
+      size: byteLength,
+      usage,
+      mappedAtCreation: false
+    });
+    const upload = data.byteLength === byteLength ? data : copyAndPad(data, byteLength);
+    device.queue.writeBuffer(buffer, 0, upload);
+    return buffer;
+  } catch (error) {
+    buffer?.destroy();
+    throw new ICEEngineError("ICE3_GPU_RESOURCE_FAILED", `ICE3_GPU_RESOURCE_FAILED: ${label}`, { cause: error });
+  }
+}
+function createEmptyGPUDataBuffer(device, byteLength, usage, label) {
+  try {
+    return device.createBuffer({
+      label,
+      size: Math.max(4, alignToFourBytes(byteLength)),
+      usage,
+      mappedAtCreation: false
+    });
+  } catch (error) {
+    throw new ICEEngineError("ICE3_GPU_RESOURCE_FAILED", `ICE3_GPU_RESOURCE_FAILED: ${label}`, { cause: error });
+  }
+}
+function writeGPUData(device, buffer, data) {
+  try {
+    device.queue.writeBuffer(buffer, 0, data);
+  } catch (error) {
+    throw new ICEEngineError("ICE3_GPU_RESOURCE_FAILED", "ICE3_GPU_RESOURCE_FAILED: buffer upload failed", { cause: error });
+  }
+}
+function copyAndPad(data, byteLength) {
+  const output = new Uint8Array(byteLength);
+  output.set(new Uint8Array(data.buffer, data.byteOffset, data.byteLength));
+  return output;
+}
+
+// packages/renderer/dist/WebGPUGeometryCache.js
+var WebGPUGeometryCache = class {
+  device;
+  entries = /* @__PURE__ */ new Map();
+  active = /* @__PURE__ */ new Set();
+  pinned = /* @__PURE__ */ new Set();
+  inactiveGraceFrames;
+  maxBytes;
+  uploads = 0;
+  evictions = 0;
+  frameId = 0;
+  resourceGeneration = 0;
+  constructor(options) {
+    this.device = options.device;
+    this.inactiveGraceFrames = options.inactiveGraceFrames ?? 60;
+    this.maxBytes = options.maxBytes ?? 768 * 1024 * 1024;
+    if (!Number.isInteger(this.inactiveGraceFrames) || this.inactiveGraceFrames < 0 || !Number.isInteger(this.maxBytes) || this.maxBytes < 1) {
+      throw new Error("ICE3_GPU_CACHE_INVALID: cache options are invalid");
+    }
+  }
+  retain(geometry) {
+    this.active.add(geometry);
+    const existing = this.entries.get(geometry);
+    if (existing) {
+      existing.lastUsedFrame = this.frameId;
+      return existing;
+    }
+    const buffers = [];
+    try {
+      const vertexCount = geometry.positions.length / 3;
+      const vertices = new Float32Array(vertexCount * 6);
+      const colorStride = geometry.colors ? geometry.colors.length / vertexCount : 0;
+      for (let index = 0; index < vertexCount; index += 1) {
+        vertices[index * 6] = geometry.positions[index * 3];
+        vertices[index * 6 + 1] = geometry.positions[index * 3 + 1];
+        vertices[index * 6 + 2] = geometry.positions[index * 3 + 2];
+        vertices[index * 6 + 3] = geometry.colors?.[index * colorStride] ?? 1;
+        vertices[index * 6 + 4] = geometry.colors?.[index * colorStride + 1] ?? 1;
+        vertices[index * 6 + 5] = geometry.colors?.[index * colorStride + 2] ?? 1;
+      }
+      const vertexBuffer = createGPUDataBuffer(this.device, vertices, WEBGPU_BUFFER_USAGE.vertex, `${geometry.typeId}:vertices`);
+      buffers.push(vertexBuffer);
+      const triangleIndexBuffer = createGPUDataBuffer(this.device, geometry.indices, WEBGPU_BUFFER_USAGE.index, `${geometry.typeId}:triangle-indices`);
+      buffers.push(triangleIndexBuffer);
+      const edgeIndexBuffer = geometry.edgeIndices ? createGPUDataBuffer(this.device, geometry.edgeIndices, WEBGPU_BUFFER_USAGE.index, `${geometry.typeId}:edge-indices`) : null;
+      if (edgeIndexBuffer)
+        buffers.push(edgeIndexBuffer);
+      const semanticBuffer = geometry.semanticIndices ? createGPUDataBuffer(this.device, geometry.semanticIndices, WEBGPU_BUFFER_USAGE.vertex, `${geometry.typeId}:semantic`) : null;
+      if (semanticBuffer)
+        buffers.push(semanticBuffer);
+      const entry = {
+        vertexBuffer,
+        triangleIndexBuffer,
+        edgeIndexBuffer,
+        semanticBuffer,
+        triangleCount: geometry.indices.length,
+        edgeCount: geometry.edgeIndices?.length ?? 0,
+        indexFormat: geometry.indices instanceof Uint16Array ? "uint16" : "uint32",
+        vertexCount,
+        bytes: buffers.reduce((sum, buffer) => sum + buffer.size, 0),
+        lastUsedFrame: this.frameId
+      };
+      this.entries.set(geometry, entry);
+      this.uploads += buffers.length;
+      this.resourceGeneration += 1;
+      return entry;
+    } catch (error) {
+      for (const buffer of buffers)
+        buffer.destroy();
+      if (error instanceof ICEEngineError)
+        throw error;
+      throw new ICEEngineError("ICE3_GPU_RESOURCE_FAILED", "ICE3_GPU_RESOURCE_FAILED: geometry upload failed", { cause: error });
+    }
+  }
+  pin(geometry) {
+    this.pinned.add(geometry);
+    const entry = this.retain(geometry);
+    this.enforceBudget();
+    if (this.totalBytes > this.maxBytes) {
+      this.pinned.delete(geometry);
+      this.deleteEntry(geometry, entry);
+      throw new ICEEngineError("ICE3_GPU_RESOURCE_FAILED", "ICE3_GPU_RESOURCE_FAILED: geometry exceeds the GPU residency budget");
+    }
+    return entry;
+  }
+  unpin(geometry) {
+    this.pinned.delete(geometry);
+  }
+  beginFrame() {
+    this.frameId += 1;
+    this.active = /* @__PURE__ */ new Set();
+  }
+  endFrame() {
+    for (const [geometry, entry] of this.entries) {
+      if (this.active.has(geometry) || this.pinned.has(geometry))
+        continue;
+      if (this.frameId - entry.lastUsedFrame < this.inactiveGraceFrames) {
+        continue;
+      }
+      this.deleteEntry(geometry, entry);
+    }
+    this.enforceBudget();
+  }
+  clear() {
+    for (const [geometry, entry] of this.entries) {
+      this.deleteEntry(geometry, entry);
+    }
+    this.active.clear();
+    this.pinned.clear();
+  }
+  dispose() {
+    this.clear();
+  }
+  get totalBytes() {
+    return [...this.entries.values()].reduce((sum, entry) => sum + entry.bytes, 0);
+  }
+  get uploadCount() {
+    return this.uploads;
+  }
+  get evictionCount() {
+    return this.evictions;
+  }
+  get generation() {
+    return this.resourceGeneration;
+  }
+  enforceBudget() {
+    let total = this.totalBytes;
+    if (total <= this.maxBytes)
+      return;
+    const candidates = [...this.entries].filter(([geometry]) => !this.pinned.has(geometry)).sort((left, right) => left[1].lastUsedFrame - right[1].lastUsedFrame);
+    for (const [geometry, entry] of candidates) {
+      if (total <= this.maxBytes)
+        break;
+      this.deleteEntry(geometry, entry);
+      total -= entry.bytes;
+    }
+  }
+  deleteEntry(geometry, entry) {
+    entry.vertexBuffer.destroy();
+    entry.triangleIndexBuffer.destroy();
+    entry.edgeIndexBuffer?.destroy();
+    entry.semanticBuffer?.destroy();
+    this.entries.delete(geometry);
+    this.evictions += 1;
+    this.resourceGeneration += 1;
+  }
+};
+
+// packages/renderer/dist/WebGPUInstanceCache.js
+var WebGPUInstanceCache = class {
+  device;
+  entries = /* @__PURE__ */ new Map();
+  active = /* @__PURE__ */ new Set();
+  bufferGeneration = 0;
+  constructor(device) {
+    this.device = device;
+  }
+  retain(batch) {
+    this.active.add(batch.id);
+    const matrixSize = batch.instanceMatrices.byteLength;
+    const semanticSize = batch.semanticIndices.byteLength;
+    let entry = this.entries.get(batch.id);
+    if (!entry || entry.matrixCapacity < matrixSize || entry.semanticCapacity < semanticSize) {
+      if (entry)
+        this.deleteEntry(entry);
+      entry = {
+        matrixBuffer: createEmptyGPUDataBuffer(this.device, matrixSize, WEBGPU_BUFFER_USAGE.vertex, `${batch.id}:matrices`),
+        semanticBuffer: createEmptyGPUDataBuffer(this.device, semanticSize, WEBGPU_BUFFER_USAGE.vertex, `${batch.id}:semantic`),
+        instanceCount: batch.semanticIds.length,
+        bytes: Math.ceil(matrixSize / 4) * 4 + Math.ceil(semanticSize / 4) * 4,
+        generation: ++this.bufferGeneration,
+        matrixCapacity: Math.max(4, Math.ceil(matrixSize / 4) * 4),
+        semanticCapacity: Math.max(4, Math.ceil(semanticSize / 4) * 4)
+      };
+      this.entries.set(batch.id, entry);
+    }
+    if (entry.matrixSource !== batch.instanceMatrices) {
+      const matrixBytes = toBytes(batch.instanceMatrices);
+      if (!entry.matrixBytes || !sameBytes(entry.matrixBytes, matrixBytes)) {
+        writeGPUData(this.device, entry.matrixBuffer, batch.instanceMatrices);
+      }
+      entry.matrixBytes = matrixBytes;
+      entry.matrixSource = batch.instanceMatrices;
+    }
+    if (entry.semanticSource !== batch.semanticIndices) {
+      const semanticBytes = toBytes(batch.semanticIndices);
+      if (!entry.semanticBytes || !sameBytes(entry.semanticBytes, semanticBytes)) {
+        writeGPUData(this.device, entry.semanticBuffer, batch.semanticIndices);
+      }
+      entry.semanticBytes = semanticBytes;
+      entry.semanticSource = batch.semanticIndices;
+    }
+    entry.instanceCount = batch.semanticIds.length;
+    return entry;
+  }
+  beginFrame() {
+    this.active = /* @__PURE__ */ new Set();
+  }
+  endFrame() {
+    for (const [id, entry] of this.entries) {
+      if (this.active.has(id))
+        continue;
+      this.deleteEntry(entry);
+      this.entries.delete(id);
+    }
+  }
+  clear() {
+    for (const entry of this.entries.values()) {
+      this.deleteEntry(entry);
+    }
+    this.active.clear();
+  }
+  dispose() {
+    this.clear();
+  }
+  get totalBytes() {
+    return [...this.entries.values()].reduce((sum, entry) => sum + entry.bytes, 0);
+  }
+  get generation() {
+    return this.bufferGeneration;
+  }
+  deleteEntry(entry) {
+    entry.matrixBuffer.destroy();
+    entry.semanticBuffer.destroy();
+    this.bufferGeneration += 1;
+  }
+};
+function toBytes(data) {
+  return new Uint8Array(data.buffer, data.byteOffset, data.byteLength).slice();
+}
+function sameBytes(left, right) {
+  if (left.byteLength !== right.byteLength)
+    return false;
+  for (let index = 0; index < left.byteLength; index += 1) {
+    if (left[index] !== right[index])
+      return false;
+  }
+  return true;
+}
+
+// packages/renderer/dist/WebGPURenderPipeline.js
+var WEBGPU_UNIFORM_STRIDE = 256;
+var WEBGPU_UNIFORM_BYTES = 128;
+var SHADER_SOURCE = (selectionMask, storageInstances, indirectInstances) => `
+struct FrameUniforms {
+  worldViewProjection: mat4x4<f32>,
+  color: vec4<f32>,
+  clipOffset: vec2<f32>,
+  useVertexColor: f32,
+  useInstancing: f32,
+  highlightSemantic: f32,
+  useSemantic: f32,
+  pickMode: f32,
+  pickBase: f32,
+  selectionBase: f32,
+  useSelectionMask: f32,
+  pageBase: f32,
+  useIndirect: f32,
+}
+
+${storageInstances ? `
+struct InstanceRecord {
+  transform: mat4x4<f32>,
+  bounds: vec4<f32>,
+  semantic: u32,
+  pad0: u32,
+  pad1: u32,
+  pad2: u32,
+}` : ""}
+
+struct VertexOutput {
+  @builtin(position) position: vec4<f32>,
+  @location(0) color: vec4<f32>,
+  @location(1) @interpolate(flat) semantic: u32,
+}
+
+@group(0) @binding(0) var<uniform> frame: FrameUniforms;
+${selectionMask ? "@group(0) @binding(1) var<storage, read> selection: array<u32>;" : ""}
+${storageInstances ? "@group(0) @binding(2) var<storage, read> instances: array<InstanceRecord>;" : ""}
+${indirectInstances ? "@group(0) @binding(3) var<storage, read> visibleIndices: array<u32>;" : ""}
+
+@vertex
+fn vertexMain(
+  @location(0) position: vec3<f32>,
+  @location(1) color: vec3<f32>,
+  ${storageInstances ? `
+  @builtin(instance_index) instanceIndex: u32,
+  @location(2) vertexSemantic: u32,
+` : `
+  @location(2) instanceColumn0: vec4<f32>,
+  @location(3) instanceColumn1: vec4<f32>,
+  @location(4) instanceColumn2: vec4<f32>,
+  @location(5) instanceColumn3: vec4<f32>,
+  @location(6) instanceSemantic: u32,
+  @location(7) vertexSemantic: u32,
+`}
+) -> VertexOutput {
+  ${storageInstances ? `
+  let visibleIndex = ${indirectInstances ? "visibleIndices[instanceIndex]" : "instanceIndex - u32(frame.pageBase)"};
+  let recordIndex = visibleIndex;
+  let record = instances[recordIndex];
+  let instanceMatrix = record.transform;
+  let instanceSemantic = record.semantic;
+  let localPosition = vec4<f32>(position, 1.0);
+  let worldPosition = instanceMatrix * localPosition;
+` : `
+  let instanceMatrix = mat4x4<f32>(
+    instanceColumn0,
+    instanceColumn1,
+    instanceColumn2,
+    instanceColumn3
+  );
+  let localPosition = vec4<f32>(position, 1.0);
+  let worldPosition = mix(
+    localPosition,
+    instanceMatrix * localPosition,
+    frame.useInstancing
+  );
+`}
+  var output: VertexOutput;
+  output.position = frame.worldViewProjection * worldPosition;
+  output.position.xy += frame.clipOffset * output.position.w;
+  output.color = vec4<f32>(
+    mix(vec3<f32>(1.0), color, frame.useVertexColor) * frame.color.rgb,
+    frame.color.a
+  );
+  output.semantic = select(
+    vertexSemantic,
+    instanceSemantic,
+    ${storageInstances ? "true" : "frame.useInstancing > 0.5"}
+  );
+  return output;
+}
+
+@fragment
+fn fragmentMain(input: VertexOutput) -> @location(0) vec4<f32> {
+  if (frame.pickMode > 0.5) {
+    let id = u32(frame.pickBase) + input.semantic + 1u;
+    return vec4<f32>(
+      f32(id & 255u),
+      f32((id >> 8u) & 255u),
+      f32((id >> 16u) & 255u),
+      255.0
+    ) / 255.0;
+  }
+  if (
+    frame.useSemantic > 0.5
+    && abs(f32(input.semantic) - frame.highlightSemantic) > 0.1
+  ) {
+    discard;
+  }
+  ${selectionMask ? `
+  let isSelected =
+    selection[u32(frame.selectionBase) + input.semantic] != 0u;
+  if (frame.useSelectionMask > 0.5) {
+    if (frame.useSemantic > 0.5 && !isSelected) {
+      discard;
+    }
+    if (isSelected) {
+      return vec4<f32>(
+        mix(
+          input.color.rgb,
+          vec3<f32>(1.0, 208.0 / 255.0, 0.0),
+          0.65
+        ),
+        1.0
+      );
+    }
+  }` : ""}
+  return input.color;
+}
+`;
+var VERTEX_LAYOUT = [
+  {
+    arrayStride: 24,
+    stepMode: "vertex",
+    attributes: [
+      { shaderLocation: 0, offset: 0, format: "float32x3" },
+      { shaderLocation: 1, offset: 12, format: "float32x3" }
+    ]
+  },
+  {
+    arrayStride: 80,
+    stepMode: "instance",
+    attributes: [
+      { shaderLocation: 2, offset: 0, format: "float32x4" },
+      { shaderLocation: 3, offset: 16, format: "float32x4" },
+      { shaderLocation: 4, offset: 32, format: "float32x4" },
+      { shaderLocation: 5, offset: 48, format: "float32x4" },
+      { shaderLocation: 6, offset: 64, format: "uint32" }
+    ]
+  },
+  {
+    arrayStride: 4,
+    stepMode: "vertex",
+    attributes: [
+      { shaderLocation: 7, offset: 0, format: "uint32" }
+    ]
+  }
+];
+var STORAGE_VERTEX_LAYOUT = [
+  VERTEX_LAYOUT[0],
+  {
+    arrayStride: 4,
+    stepMode: "vertex",
+    attributes: [
+      { shaderLocation: 2, offset: 0, format: "uint32" }
+    ]
+  }
+];
+var WebGPURenderPipeline = class _WebGPURenderPipeline {
+  device;
+  format;
+  bindGroupLayout;
+  pipelineLayout;
+  triangle;
+  line;
+  selectionTriangle;
+  selectionLine;
+  selectionMask;
+  storageInstances;
+  indirectInstances;
+  constructor(device, format, bindGroupLayout, pipelineLayout, triangle, line, selectionTriangle, selectionLine, selectionMask, storageInstances, indirectInstances) {
+    this.device = device;
+    this.format = format;
+    this.bindGroupLayout = bindGroupLayout;
+    this.pipelineLayout = pipelineLayout;
+    this.triangle = triangle;
+    this.line = line;
+    this.selectionTriangle = selectionTriangle;
+    this.selectionLine = selectionLine;
+    this.selectionMask = selectionMask;
+    this.storageInstances = storageInstances;
+    this.indirectInstances = indirectInstances;
+  }
+  static async create(device, format, options = {}) {
+    try {
+      const storageInstances = Boolean(options.storageInstances);
+      const indirectInstances = storageInstances && Boolean(options.indirectInstances);
+      const selectionMask = Boolean(options.selectionMask || storageInstances);
+      const bindGroupEntries = [{
+        binding: 0,
+        visibility: 3,
+        buffer: {
+          type: "uniform",
+          hasDynamicOffset: true,
+          minBindingSize: WEBGPU_UNIFORM_BYTES
+        }
+      }];
+      if (selectionMask) {
+        bindGroupEntries.push({
+          binding: 1,
+          visibility: 2,
+          buffer: {
+            type: "read-only-storage",
+            minBindingSize: 4
+          }
+        });
+      }
+      if (storageInstances) {
+        bindGroupEntries.push({
+          binding: 2,
+          visibility: 1,
+          buffer: {
+            type: "read-only-storage",
+            minBindingSize: 96
+          }
+        });
+      }
+      if (indirectInstances) {
+        bindGroupEntries.push({
+          binding: 3,
+          visibility: 1,
+          buffer: {
+            type: "read-only-storage",
+            minBindingSize: 4
+          }
+        });
+      }
+      const bindGroupLayout = device.createBindGroupLayout({
+        entries: bindGroupEntries
+      });
+      const pipelineLayout = device.createPipelineLayout({
+        bindGroupLayouts: [bindGroupLayout]
+      });
+      const module = device.createShaderModule({
+        code: SHADER_SOURCE(selectionMask, storageInstances, indirectInstances)
+      });
+      const createPipeline = (label, topology, selection = false) => device.createRenderPipelineAsync({
+        label: indirectInstances ? `${label}:storage:indirect` : storageInstances ? `${label}:storage` : label,
+        layout: pipelineLayout,
+        vertex: {
+          module,
+          entryPoint: "vertexMain",
+          buffers: storageInstances ? STORAGE_VERTEX_LAYOUT : VERTEX_LAYOUT
+        },
+        fragment: {
+          module,
+          entryPoint: "fragmentMain",
+          targets: [{
+            format,
+            ...selection ? {
+              blend: {
+                color: {
+                  srcFactor: "src-alpha",
+                  dstFactor: "one-minus-src-alpha",
+                  operation: "add"
+                },
+                alpha: {
+                  srcFactor: "one",
+                  dstFactor: "one-minus-src-alpha",
+                  operation: "add"
+                }
+              }
+            } : {}
+          }]
+        },
+        primitive: {
+          topology,
+          cullMode: "none"
+        },
+        depthStencil: {
+          format: "depth24plus",
+          depthCompare: "less-equal",
+          depthWriteEnabled: !selection
+        },
+        multisample: { count: 1 }
+      });
+      const [triangle, line, selectionTriangle, selectionLine] = await Promise.all([
+        createPipeline("main:triangle", "triangle-list"),
+        createPipeline("main:line", "line-list"),
+        createPipeline("selection:triangle", "triangle-list", true),
+        createPipeline("selection:line", "line-list", true)
+      ]);
+      return new _WebGPURenderPipeline(device, format, bindGroupLayout, pipelineLayout, triangle, line, selectionTriangle, selectionLine, selectionMask, storageInstances, indirectInstances);
+    } catch (error) {
+      throw new ICEEngineError("ICE3_WEBGPU_PIPELINE_FAILED", "ICE3_WEBGPU_PIPELINE_FAILED: render pipelines are unavailable", { cause: error });
+    }
+  }
+};
+
+// packages/renderer/dist/WebGPUTimestampProfiler.js
+var WebGPUTimestampProfiler = class {
+  device;
+  slots;
+  pending = [];
+  reason;
+  disposed = false;
+  constructor(device, slotCount = 64) {
+    this.device = device;
+    if (!Number.isInteger(slotCount) || slotCount < 1) {
+      throw new Error("ICE3_TIMESTAMP_INVALID: slot count must be positive");
+    }
+    this.slots = Array.from({ length: slotCount }, (_, index) => ({
+      querySet: device.createQuerySet({
+        label: `ice3:timestamp:${index}`,
+        type: "timestamp",
+        count: 2
+      }),
+      buffer: device.createBuffer({
+        label: `ice3:timestamp-resolve:${index}`,
+        size: 256,
+        usage: 512 | 8 | 1
+      }),
+      pending: false
+    }));
+  }
+  get unavailableReason() {
+    return this.reason;
+  }
+  querySetFor(frameId) {
+    return this.slotFor(frameId).querySet;
+  }
+  resolveFrame(encoder, frameId) {
+    const slot = this.slotFor(frameId);
+    if (slot.pending) {
+      throw new Error("ICE3_TIMESTAMP_SLOT_BUSY");
+    }
+    encoder.resolveQuerySet(slot.querySet, 0, 2, slot.buffer, 0);
+    this.pending.push(this.slotIndex(frameId));
+    slot.pending = true;
+  }
+  async drain() {
+    if (this.disposed)
+      return [];
+    const samples = [];
+    for (const index of [...this.pending]) {
+      const slot = this.slots[index];
+      let mapped = false;
+      try {
+        await slot.buffer.mapAsync(1);
+        mapped = true;
+        const values = new BigUint64Array(slot.buffer.getMappedRange(), 0, 2);
+        const start = values[0];
+        const end = values[1];
+        if (end <= start) {
+          this.reason = "invalid-timestamp";
+        } else {
+          samples.push(Number(end - start) / 1e6);
+        }
+      } catch {
+        this.reason = "map-failed";
+      } finally {
+        if (mapped)
+          slot.buffer.unmap();
+        slot.pending = false;
+        const pendingIndex = this.pending.indexOf(index);
+        if (pendingIndex >= 0)
+          this.pending.splice(pendingIndex, 1);
+      }
+    }
+    return samples;
+  }
+  dispose() {
+    if (this.disposed)
+      return;
+    this.disposed = true;
+    for (const slot of this.slots) {
+      slot.querySet.destroy();
+      slot.buffer.destroy();
+      slot.pending = false;
+    }
+    this.pending.length = 0;
+  }
+  slotFor(frameId) {
+    if (this.disposed) {
+      throw new Error("ICE3_ENGINE_DESTROYED: timestamp profiler");
+    }
+    if (!Number.isSafeInteger(frameId) || frameId < 0) {
+      throw new Error("ICE3_TIMESTAMP_INVALID: frame ID");
+    }
+    return this.slots[this.slotIndex(frameId)];
+  }
+  slotIndex(frameId) {
+    return frameId % this.slots.length;
+  }
+};
+
+// packages/renderer/dist/WebGPUSelectionMask.js
+var STORAGE_USAGE = 128 | 8;
+function buildSelectionMask(ranges, selection) {
+  const selected = new Set(selection);
+  const bases = [];
+  let count = 0;
+  for (const range of ranges) {
+    bases.push(count);
+    count += range.length;
+  }
+  const words = new Uint32Array(Math.max(1, count));
+  ranges.forEach((range, rangeIndex) => {
+    const base = bases[rangeIndex];
+    range.forEach((id, index) => {
+      words[base + index] = selected.has(id) ? 1 : 0;
+    });
+  });
+  return { words, bases };
+}
+var WebGPUSelectionMaskBuffer = class {
+  device;
+  maskBuffer = null;
+  previous = null;
+  maskGeneration = 0;
+  constructor(device) {
+    this.device = device;
+  }
+  get buffer() {
+    return this.maskBuffer;
+  }
+  get generation() {
+    return this.maskGeneration;
+  }
+  get totalBytes() {
+    return this.maskBuffer?.size ?? 0;
+  }
+  update(words) {
+    if (this.maskBuffer && this.maskBuffer.size < words.byteLength) {
+      this.maskBuffer.destroy();
+      this.maskBuffer = null;
+      this.previous = null;
+    }
+    if (!this.maskBuffer) {
+      this.maskBuffer = createEmptyGPUDataBuffer(this.device, words.byteLength, STORAGE_USAGE, "ice3:selection-mask");
+      this.maskGeneration += 1;
+    }
+    const bytes = new Uint8Array(words.buffer, words.byteOffset, words.byteLength).slice();
+    if (this.previous && sameBytes2(this.previous, bytes))
+      return;
+    writeGPUData(this.device, this.maskBuffer, words);
+    this.previous = bytes;
+  }
+  dispose() {
+    this.maskBuffer?.destroy();
+    this.maskBuffer = null;
+    this.previous = null;
+  }
+};
+function sameBytes2(left, right) {
+  if (left.byteLength !== right.byteLength)
+    return false;
+  for (let index = 0; index < left.byteLength; index += 1) {
+    if (left[index] !== right[index])
+      return false;
+  }
+  return true;
+}
+
+// packages/renderer/dist/WebGPUDrawStorage.js
+var FLOATS_PER_DRAW = WEBGPU_UNIFORM_STRIDE / 4;
+var WebGPUDrawStorage = class {
+  minimumCapacity;
+  uniformBuffer;
+  capacity;
+  generationValue = 0;
+  count = 0;
+  constructor(minimumCapacity = 64) {
+    this.minimumCapacity = minimumCapacity;
+    if (!Number.isInteger(minimumCapacity) || minimumCapacity < 1) {
+      throw new Error("ICE3_DRAW_STORAGE_INVALID");
+    }
+    this.capacity = drawCountPowerOfTwo(minimumCapacity);
+    this.uniformBuffer = new Float32Array(this.capacity * FLOATS_PER_DRAW);
+  }
+  begin(requiredDraws) {
+    this.ensureCapacity(requiredDraws);
+    this.count = 0;
+  }
+  append(draw) {
+    if (this.count >= this.capacity) {
+      this.ensureCapacity(this.count + 1);
+    }
+    const index = this.count;
+    const offset = index * FLOATS_PER_DRAW;
+    this.uniformBuffer.set(draw.matrix, offset);
+    this.uniformBuffer.set(draw.color, offset + 16);
+    this.uniformBuffer[offset + 20] = 0;
+    this.uniformBuffer[offset + 21] = 0;
+    this.uniformBuffer[offset + 22] = draw.useVertexColor ? 1 : 0;
+    this.uniformBuffer[offset + 23] = draw.useInstancing ? 1 : 0;
+    this.uniformBuffer[offset + 24] = draw.semanticHighlight ?? 0;
+    this.uniformBuffer[offset + 25] = draw.useSemantic ? 1 : 0;
+    this.uniformBuffer[offset + 26] = 0;
+    this.uniformBuffer[offset + 27] = 0;
+    this.uniformBuffer[offset + 28] = draw.selectionBase;
+    this.uniformBuffer[offset + 29] = draw.useSelectionMask ? 1 : 0;
+    this.uniformBuffer[offset + 30] = draw.pageBase ?? 0;
+    this.uniformBuffer[offset + 31] = draw.useIndirect ? 1 : 0;
+    this.count += 1;
+    return index;
+  }
+  get uniformData() {
+    return this.uniformBuffer;
+  }
+  get drawCount() {
+    return this.count;
+  }
+  get generation() {
+    return this.generationValue;
+  }
+  ensureCapacity(requiredDraws) {
+    const next = Math.max(this.minimumCapacity, drawCountPowerOfTwo(requiredDraws));
+    if (next === this.capacity)
+      return;
+    this.capacity = next;
+    this.uniformBuffer = new Float32Array(next * FLOATS_PER_DRAW);
+    this.generationValue += 1;
+  }
+};
+function drawCountPowerOfTwo(value) {
+  let result = 1;
+  while (result < Math.max(1, value))
+    result *= 2;
+  return result;
+}
+
+// packages/renderer/dist/WebGPURenderPlan.js
+var WebGPURenderPlanCache = class {
+  scene = null;
+  current = null;
+  renderablesScratch = [];
+  instancesScratch = [];
+  batchesScratch = [];
+  get(scene) {
+    if (this.current && this.scene === scene && this.current.revision === scene.revision) {
+      return this.current;
+    }
+    const renderables = collectRenderables(scene, this.renderablesScratch);
+    const instances = collectInstanceBatches(renderables, this.instancesScratch);
+    const batches = collectRenderBatches(scene, this.batchesScratch);
+    const instancedMeshIds = /* @__PURE__ */ new Set();
+    for (const instance of instances) {
+      for (const id of instance.meshIds)
+        instancedMeshIds.add(id);
+    }
+    this.scene = scene;
+    this.current = Object.freeze({
+      scene,
+      revision: scene.revision,
+      renderables: Object.freeze([...renderables]),
+      instances: Object.freeze([...instances]),
+      batches: Object.freeze([...batches]),
+      instancedMeshIds
+    });
+    return this.current;
+  }
+  invalidate() {
+    this.scene = null;
+    this.current = null;
+    this.renderablesScratch.length = 0;
+    this.instancesScratch.length = 0;
+    this.batchesScratch.length = 0;
+  }
+  dispose() {
+    this.invalidate();
+  }
+};
+
+// packages/renderer/dist/WebGPUBundleCache.js
+var WebGPUBundleCache = class {
+  device;
+  format;
+  key = null;
+  bundle = null;
+  recreations = 0;
+  constructor(device, format) {
+    this.device = device;
+    this.format = format;
+  }
+  get(key, record3) {
+    if (this.key === key && this.bundle)
+      return this.bundle;
+    const encoder = this.device.createRenderBundleEncoder({
+      label: `ice3:bundle:${key}`,
+      colorFormats: [this.format],
+      depthStencilFormat: "depth24plus"
+    });
+    record3(encoder);
+    const bundle = encoder.finish();
+    this.key = key;
+    this.bundle = bundle;
+    this.recreations += 1;
+    return bundle;
+  }
+  get current() {
+    return this.bundle;
+  }
+  get bundleRecreations() {
+    return this.recreations;
+  }
+  invalidate() {
+    this.key = null;
+    this.bundle = null;
+  }
+  dispose() {
+    this.invalidate();
+  }
+};
+
+// packages/renderer/dist/WebGPUCapabilities.js
+var WEBGPU_STORAGE_DEFAULT = false;
+var WEBGPU_GPU_DRIVEN_DEFAULT = false;
+var WEBGPU_INSTANCE_VISIBILITY_THRESHOLD = 1024;
+function detectWebGPUAcceleration(device) {
+  const maxBindingBytes = device.limits.maxStorageBufferBindingSize ?? 0;
+  const maxBuffers = device.limits.maxStorageBuffersPerShaderStage ?? 0;
+  const alignment = device.limits.minStorageBufferOffsetAlignment ?? 256;
+  const storage = maxBindingBytes >= 256 && maxBuffers >= 2 && alignment >= 4 && Number.isInteger(alignment);
+  const visibility = storage && maxBuffers >= 3;
+  return {
+    tier: visibility ? "gpu-driven" : storage ? "storage" : "baseline",
+    storage,
+    visibility,
+    maxStorageBufferBindingSize: maxBindingBytes,
+    minStorageBufferOffsetAlignment: alignment
+  };
+}
+
+// packages/renderer/dist/WebGPUInstanceStorage.js
+var STORAGE_USAGE2 = 128 | 8;
+var INSTANCE_RECORD_BYTES = 96;
+var WebGPUInstanceStorage = class {
+  device;
+  entries = /* @__PURE__ */ new Map();
+  active = /* @__PURE__ */ new Set();
+  resourceGeneration = 0;
+  uploadBytes = 0;
+  maxBindingBytes;
+  minOffsetAlignment;
+  constructor(device, options) {
+    this.device = device;
+    this.maxBindingBytes = options?.maxBindingBytes ?? device.limits.maxStorageBufferBindingSize ?? 0;
+    this.minOffsetAlignment = options?.minOffsetAlignment ?? device.limits.minStorageBufferOffsetAlignment ?? 256;
+    if (this.maxBindingBytes < INSTANCE_RECORD_BYTES || this.minOffsetAlignment < 4) {
+      throw new Error("ICE3_STORAGE_INVALID: limits are too low");
+    }
+  }
+  plan(instanceCount, recordBytes = INSTANCE_RECORD_BYTES) {
+    if (!Number.isInteger(instanceCount) || instanceCount < 0 || !Number.isInteger(recordBytes) || recordBytes < 1) {
+      throw new Error("ICE3_STORAGE_INVALID: page input");
+    }
+    if (instanceCount === 0)
+      return [];
+    const stride = Math.ceil(recordBytes / 16) * 16;
+    const perPage = Math.max(1, Math.floor(this.maxBindingBytes / stride));
+    const pages = [];
+    for (let first = 0; first < instanceCount; first += perPage) {
+      pages.push({
+        firstInstance: first,
+        instanceCount: Math.min(perPage, instanceCount - first)
+      });
+    }
+    return pages;
+  }
+  retain(batch, geometry) {
+    this.active.add(batch.id);
+    const existing = this.entries.get(batch.id);
+    if (existing && existing.geometry === geometry && existing.matrixSource === batch.instanceMatrices && existing.semanticSource === batch.semanticIndices) {
+      return existing;
+    }
+    if (existing)
+      this.delete(existing);
+    const bounds = geometry.getBounds();
+    const radius = Math.hypot(bounds.max[0] - bounds.min[0], bounds.max[1] - bounds.min[1], bounds.max[2] - bounds.min[2]) / 2;
+    const center = [
+      (bounds.min[0] + bounds.max[0]) / 2,
+      (bounds.min[1] + bounds.max[1]) / 2,
+      (bounds.min[2] + bounds.max[2]) / 2
+    ];
+    const plans = this.plan(batch.semanticIds.length);
+    const pages = plans.map((page) => {
+      const data = new ArrayBuffer(page.instanceCount * INSTANCE_RECORD_BYTES);
+      const floats = new Float32Array(data);
+      const words = new Uint32Array(data);
+      for (let local = 0; local < page.instanceCount; local += 1) {
+        const source = page.firstInstance + local;
+        const offset = local * 24;
+        floats.set(batch.instanceMatrices.subarray(source * 16, source * 16 + 16), offset);
+        floats.set([
+          center[0],
+          center[1],
+          center[2],
+          radius
+        ], offset + 16);
+        words[offset + 20] = batch.semanticIndices[source] ?? source;
+      }
+      const buffer = createEmptyGPUDataBuffer(this.device, data.byteLength, STORAGE_USAGE2, `ice3:instance-records:${batch.id}:${page.firstInstance}`);
+      writeGPUData(this.device, buffer, floats);
+      this.uploadBytes += data.byteLength;
+      return { ...page, buffer };
+    });
+    const entry = {
+      pages,
+      generation: ++this.resourceGeneration,
+      bytes: pages.reduce((sum, page) => sum + page.buffer.size, 0),
+      geometry,
+      matrixSource: batch.instanceMatrices,
+      semanticSource: batch.semanticIndices
+    };
+    this.entries.set(batch.id, entry);
+    return entry;
+  }
+  beginFrame() {
+    this.active = /* @__PURE__ */ new Set();
+  }
+  endFrame() {
+    for (const [id, entry] of this.entries) {
+      if (this.active.has(id))
+        continue;
+      this.delete(entry);
+      this.entries.delete(id);
+    }
+  }
+  get generation() {
+    return this.resourceGeneration;
+  }
+  get totalBytes() {
+    return [...this.entries.values()].reduce((sum, entry) => sum + entry.bytes, 0);
+  }
+  get totalUploadBytes() {
+    return this.uploadBytes;
+  }
+  dispose() {
+    for (const entry of this.entries.values())
+      this.delete(entry);
+    this.entries.clear();
+    this.active.clear();
+  }
+  delete(entry) {
+    for (const page of entry.pages)
+      page.buffer.destroy();
+    this.resourceGeneration += 1;
+  }
+};
+
+// packages/renderer/dist/WebGPUVisibility.js
+var STORAGE_USAGE3 = 128 | 8;
+var INDIRECT_USAGE = 256 | 128 | 8 | 4;
+function createIndirectArguments(indexCount, firstIndex, baseVertex) {
+  if (!Number.isInteger(indexCount) || indexCount < 0 || !Number.isInteger(firstIndex) || firstIndex < 0 || !Number.isInteger(baseVertex) || baseVertex < 0) {
+    return void 0;
+  }
+  return new Uint32Array([
+    indexCount,
+    0,
+    firstIndex,
+    baseVertex,
+    0
+  ]);
+}
+var COMPUTE_SHADER = `
+struct FrameUniforms {
+  worldViewProjection: mat4x4<f32>,
+}
+
+struct InstanceRecord {
+  transform: mat4x4<f32>,
+  bounds: vec4<f32>,
+  semantic: u32,
+  pad0: u32,
+  pad1: u32,
+  pad2: u32,
+}
+
+struct IndirectArguments {
+  indexCount: u32,
+  instanceCount: atomic<u32>,
+  firstIndex: u32,
+  baseVertex: i32,
+  firstInstance: u32,
+}
+
+@group(0) @binding(0) var<uniform> frame: FrameUniforms;
+@group(0) @binding(1) var<storage, read> instances: array<InstanceRecord>;
+@group(0) @binding(2) var<storage, read_write> visible: array<u32>;
+@group(0) @binding(3) var<storage, read_write> arguments: IndirectArguments;
+
+@compute @workgroup_size(64)
+fn computeMain(@builtin(global_invocation_id) id: vec3<u32>) {
+  let index = id.x;
+  if (index >= arrayLength(&instances)) {
+    return;
+  }
+  let instance = instances[index];
+  let radius = instance.bounds.w;
+  let localMin = instance.bounds.xyz - vec3<f32>(radius);
+  let localMax = instance.bounds.xyz + vec3<f32>(radius);
+  var worldMin = vec3<f32>(1e30);
+  var worldMax = vec3<f32>(-1e30);
+  for (var cornerIndex = 0u; cornerIndex < 8u; cornerIndex += 1u) {
+    let corner = vec3<f32>(
+      select(localMin.x, localMax.x, (cornerIndex & 1u) != 0u),
+      select(localMin.y, localMax.y, (cornerIndex & 2u) != 0u),
+      select(localMin.z, localMax.z, (cornerIndex & 4u) != 0u)
+    );
+    let world = (instance.transform * vec4<f32>(corner, 1.0)).xyz;
+    worldMin = min(worldMin, world);
+    worldMax = max(worldMax, world);
+  }
+  let r0 = vec4<f32>(
+    frame.worldViewProjection[0][0],
+    frame.worldViewProjection[1][0],
+    frame.worldViewProjection[2][0],
+    frame.worldViewProjection[3][0]
+  );
+  let r1 = vec4<f32>(
+    frame.worldViewProjection[0][1],
+    frame.worldViewProjection[1][1],
+    frame.worldViewProjection[2][1],
+    frame.worldViewProjection[3][1]
+  );
+  let r2 = vec4<f32>(
+    frame.worldViewProjection[0][2],
+    frame.worldViewProjection[1][2],
+    frame.worldViewProjection[2][2],
+    frame.worldViewProjection[3][2]
+  );
+  let r3 = vec4<f32>(
+    frame.worldViewProjection[0][3],
+    frame.worldViewProjection[1][3],
+    frame.worldViewProjection[2][3],
+    frame.worldViewProjection[3][3]
+  );
+  let planes = array<vec4<f32>, 6>(
+    r3 + r0,
+    r3 - r0,
+    r3 + r1,
+    r3 - r1,
+    r3 + r2,
+    r3 - r2
+  );
+  var culled = false;
+  for (var planeIndex = 0u; planeIndex < 6u; planeIndex += 1u) {
+    let plane = planes[planeIndex];
+    let positive = select(worldMin, worldMax, plane.xyz >= vec3<f32>(0.0));
+    if (dot(plane.xyz, positive) + plane.w < 0.0) {
+      culled = true;
+      break;
+    }
+  }
+  if (culled) {
+    return;
+  }
+  let slot = atomicAdd(&arguments.instanceCount, 1u);
+  visible[slot] = index;
+}
+`;
+var WebGPUVisibilityEncoder = class _WebGPUVisibilityEncoder {
+  device;
+  bindGroupLayout;
+  pipeline;
+  entries = /* @__PURE__ */ new Map();
+  constructor(device, bindGroupLayout, pipeline) {
+    this.device = device;
+    this.bindGroupLayout = bindGroupLayout;
+    this.pipeline = pipeline;
+  }
+  static async create(device) {
+    const bindGroupLayout = device.createBindGroupLayout({
+      entries: [
+        {
+          binding: 0,
+          visibility: 4,
+          buffer: {
+            type: "uniform",
+            hasDynamicOffset: true,
+            minBindingSize: 64
+          }
+        },
+        {
+          binding: 1,
+          visibility: 4,
+          buffer: { type: "read-only-storage", minBindingSize: 96 }
+        },
+        {
+          binding: 2,
+          visibility: 4,
+          buffer: { type: "storage", minBindingSize: 4 }
+        },
+        {
+          binding: 3,
+          visibility: 4,
+          buffer: { type: "storage", minBindingSize: 20 }
+        }
+      ]
+    });
+    const layout = device.createPipelineLayout({
+      bindGroupLayouts: [bindGroupLayout]
+    });
+    const module = device.createShaderModule({ code: COMPUTE_SHADER });
+    const pipeline = await device.createComputePipelineAsync({
+      label: "ice3:visibility",
+      layout,
+      compute: { module, entryPoint: "computeMain" }
+    });
+    return new _WebGPUVisibilityEncoder(device, bindGroupLayout, pipeline);
+  }
+  retain(page, indexCount) {
+    const byIndexCount = this.entries.get(page.buffer);
+    const existing = byIndexCount?.get(indexCount);
+    if (existing) {
+      return existing;
+    }
+    const visibleBuffer = createEmptyGPUDataBuffer(this.device, page.instanceCount * 4, STORAGE_USAGE3, "ice3:visible-instances");
+    const indirectBuffer = createEmptyGPUDataBuffer(this.device, 256, INDIRECT_USAGE, "ice3:indirect-arguments");
+    writeGPUData(this.device, indirectBuffer, createIndirectArguments(indexCount, 0, 0));
+    const entry = {
+      visibleBuffer,
+      indirectBuffer,
+      instanceCount: page.instanceCount
+    };
+    const entries = byIndexCount ?? /* @__PURE__ */ new Map();
+    entries.set(indexCount, entry);
+    this.entries.set(page.buffer, entries);
+    return entry;
+  }
+  encode(encoder, entry, page, uniformBuffer, uniformOffset) {
+    encoder.clearBuffer(entry.indirectBuffer, 4, 4);
+    const bindGroup = this.device.createBindGroup({
+      label: "ice3:visibility-bindings",
+      layout: this.bindGroupLayout,
+      entries: [
+        {
+          binding: 0,
+          resource: { buffer: uniformBuffer, offset: 0, size: 112 }
+        },
+        {
+          binding: 1,
+          resource: { buffer: page.buffer, offset: 0, size: page.buffer.size }
+        },
+        {
+          binding: 2,
+          resource: {
+            buffer: entry.visibleBuffer,
+            offset: 0,
+            size: entry.visibleBuffer.size
+          }
+        },
+        {
+          binding: 3,
+          resource: {
+            buffer: entry.indirectBuffer,
+            offset: 0,
+            size: entry.indirectBuffer.size
+          }
+        }
+      ]
+    });
+    const pass = encoder.beginComputePass({ label: "ice3:visibility-pass" });
+    pass.setPipeline(this.pipeline);
+    pass.setBindGroup(0, bindGroup, [uniformOffset]);
+    pass.dispatchWorkgroups(Math.ceil(page.instanceCount / 64));
+    pass.end();
+  }
+  async readStats(entry, page) {
+    const readback = this.device.createBuffer({
+      label: "ice3:visibility-stats",
+      size: 4,
+      usage: 1 | 8
+    });
+    const encoder = this.device.createCommandEncoder();
+    encoder.copyBufferToBuffer(entry.indirectBuffer, 4, readback, 0, 4);
+    this.device.queue.submit([encoder.finish()]);
+    try {
+      await readback.mapAsync(1);
+      const visibleInstances = new Uint32Array(readback.getMappedRange())[0];
+      return {
+        visibleInstances,
+        culledInstances: page.instanceCount - visibleInstances,
+        dispatchCount: Math.ceil(page.instanceCount / 64)
+      };
+    } finally {
+      readback.unmap();
+      readback.destroy();
+    }
+  }
+  dispose() {
+    for (const entries of this.entries.values()) {
+      for (const entry of entries.values())
+        this.destroy(entry);
+    }
+    this.entries.clear();
+  }
+  destroy(entry) {
+    entry.visibleBuffer.destroy();
+    entry.indirectBuffer.destroy();
+  }
+};
+
+// packages/renderer/dist/WebGPUPicker.js
+var VERTEX_USAGE = 32 | 8;
+var UNIFORM_USAGE = 64 | 8;
+var PICK_TEXTURE_USAGE = 16 | 1;
+var DEPTH_USAGE = 16;
+var MAP_READ = 1;
+var COPY_DST = 8;
+var PICK_FORMAT = "rgba8unorm";
+var WebGPUPicker = class {
+  device;
+  pipelinePromise;
+  instanceCache;
+  identityInstances;
+  zeroSemantics;
+  renderPlan = new WebGPURenderPlanCache();
+  target = null;
+  depth = null;
+  uniformBuffer = null;
+  width = 0;
+  height = 0;
+  disposed = false;
+  constructor(device, format) {
+    this.device = device;
+    void format;
+    this.pipelinePromise = WebGPURenderPipeline.create(device, PICK_FORMAT);
+    this.instanceCache = new WebGPUInstanceCache(device);
+    this.identityInstances = device.createBuffer({
+      label: "ice3:pick-identity-instances",
+      size: 80,
+      usage: VERTEX_USAGE
+    });
+    const identity = new Float32Array(20);
+    identity.set([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+    device.queue.writeBuffer(this.identityInstances, 0, identity);
+    this.zeroSemantics = device.createBuffer({
+      label: "ice3:pick-zero-semantic",
+      size: 4,
+      usage: VERTEX_USAGE
+    });
+    device.queue.writeBuffer(this.zeroSemantics, 0, new Uint32Array([0]));
+  }
+  async pick(frame, geometryCache, pickIds) {
+    if (this.disposed) {
+      throw new ICEEngineError("ICE3_ENGINE_DESTROYED", "WebGPU picker is disposed");
+    }
+    const width = Math.max(1, Math.round(frame.viewport.width * frame.dpr));
+    const height = Math.max(1, Math.round(frame.viewport.height * frame.dpr));
+    this.ensureTarget(width, height);
+    const pipeline = await this.pipelinePromise;
+    this.instanceCache.beginFrame();
+    geometryCache.beginFrame();
+    const plan = this.renderPlan.get(frame.scene);
+    const renderables = plan.renderables;
+    const instances = plan.instances;
+    const batches = plan.batches;
+    const instancedIds = /* @__PURE__ */ new Set();
+    const idBySelection = /* @__PURE__ */ new Map();
+    for (const [key, value] of Object.entries(pickIds)) {
+      idBySelection.set(value, Number(key));
+    }
+    const aspect = frame.viewport.width / Math.max(frame.viewport.height, 1);
+    const viewProjection = frame.camera.getViewProjectionMatrix(aspect);
+    const mvp = new ICEMatrix4();
+    const world = new ICEMatrix4();
+    const draws = [];
+    const matrixFor = (matrix) => {
+      mvp.elements.set(viewProjection.elements);
+      world.elements.set(matrix);
+      mvp.multiply(world);
+      return new Float32Array(mvp.elements);
+    };
+    for (const batch of instances) {
+      const ids = batch.semanticIds.map((id) => idBySelection.get(id)).filter((id) => id !== void 0);
+      if (ids.length === 0)
+        continue;
+      const instance = this.instanceCache.retain(batch);
+      for (const id of batch.meshIds)
+        instancedIds.add(id);
+      draws.push({
+        matrix: new Float32Array(viewProjection.elements),
+        base: Math.min(...ids) - 1,
+        useInstancing: true,
+        instanceCount: instance.instanceCount,
+        geometry: geometryCache.retain(batch.geometry),
+        instanceBuffer: instance.matrixBuffer,
+        semanticBuffer: instance.semanticBuffer
+      });
+    }
+    for (const draw of batches) {
+      const ids = draw.batch.semanticSelectionIds.map((id) => idBySelection.get(id)).filter((id) => id !== void 0);
+      if (ids.length === 0)
+        continue;
+      draws.push({
+        matrix: matrixFor(draw.worldMatrix),
+        base: Math.min(...ids) - 1,
+        useInstancing: false,
+        instanceCount: 1,
+        geometry: geometryCache.retain(draw.batch.geometry),
+        instanceBuffer: this.identityInstances,
+        semanticBuffer: geometryCache.retain(draw.batch.geometry).semanticBuffer ?? this.zeroSemantics
+      });
+    }
+    for (const renderable of renderables) {
+      if (instancedIds.has(renderable.id))
+        continue;
+      const id = idBySelection.get(renderable.mesh.selectionId);
+      if (id === void 0)
+        continue;
+      draws.push({
+        matrix: matrixFor(renderable.worldMatrix),
+        base: id - 1,
+        useInstancing: false,
+        instanceCount: 1,
+        geometry: geometryCache.retain(renderable.mesh.geometry),
+        instanceBuffer: this.identityInstances,
+        semanticBuffer: this.zeroSemantics
+      });
+    }
+    this.ensureUniformBuffer(draws.length);
+    const uniforms = new Float32Array(draws.length * 64);
+    for (let index2 = 0; index2 < draws.length; index2 += 1) {
+      const draw = draws[index2];
+      const offset = index2 * 64;
+      uniforms.set(draw.matrix, offset);
+      uniforms[offset + 16] = 1;
+      uniforms[offset + 17] = 1;
+      uniforms[offset + 18] = 1;
+      uniforms[offset + 19] = 1;
+      uniforms[offset + 23] = draw.useInstancing ? 1 : 0;
+      uniforms[offset + 26] = 1;
+      uniforms[offset + 27] = draw.base;
+    }
+    if (uniforms.length > 0) {
+      this.device.queue.writeBuffer(this.uniformBuffer, 0, uniforms);
+    }
+    const bindGroup = this.device.createBindGroup({
+      layout: pipeline.bindGroupLayout,
+      entries: [{
+        binding: 0,
+        resource: {
+          buffer: this.uniformBuffer,
+          offset: 0,
+          size: WEBGPU_UNIFORM_BYTES
+        }
+      }]
+    });
+    const encoder = this.device.createCommandEncoder();
+    const pass = encoder.beginRenderPass({
+      colorAttachments: [{
+        view: this.target.createView(),
+        clearValue: { r: 0, g: 0, b: 0, a: 1 },
+        loadOp: "clear",
+        storeOp: "store"
+      }],
+      depthStencilAttachment: {
+        view: this.depth.createView(),
+        depthClearValue: 1,
+        depthLoadOp: "clear",
+        depthStoreOp: "store"
+      }
+    });
+    pass.setPipeline(pipeline.triangle);
+    for (let index2 = 0; index2 < draws.length; index2 += 1) {
+      const draw = draws[index2];
+      pass.setBindGroup(0, bindGroup, [index2 * WEBGPU_UNIFORM_STRIDE]);
+      pass.setVertexBuffer(0, draw.geometry.vertexBuffer);
+      pass.setVertexBuffer(1, draw.instanceBuffer);
+      pass.setVertexBuffer(2, draw.semanticBuffer);
+      pass.setIndexBuffer(draw.geometry.triangleIndexBuffer, draw.geometry.indexFormat);
+      pass.drawIndexed(draw.geometry.triangleCount, draw.instanceCount);
+    }
+    pass.end();
+    const pixelX = Math.max(0, Math.min(this.width - 1, Math.floor(frame.point.x * frame.dpr)));
+    const pixelY = Math.max(0, Math.min(this.height - 1, Math.floor(frame.point.y * frame.dpr)));
+    const readback = this.device.createBuffer({
+      label: "ice3:pick-readback",
+      size: 256,
+      usage: COPY_DST | MAP_READ
+    });
+    encoder.copyTextureToBuffer({
+      texture: this.target,
+      origin: {
+        x: pixelX,
+        y: pixelY,
+        z: 0
+      }
+    }, {
+      buffer: readback,
+      bytesPerRow: 256,
+      rowsPerImage: 1
+    }, { width: 1, height: 1, depthOrArrayLayers: 1 });
+    this.device.queue.submit([encoder.finish()]);
+    let pixel;
+    try {
+      await readback.mapAsync(MAP_READ);
+      pixel = new Uint8Array(readback.getMappedRange(), 0, 4).slice();
+    } catch (error) {
+      throw new ICEEngineError("ICE3_WEBGPU_PICK_UNAVAILABLE", "ICE3_WEBGPU_PICK_UNAVAILABLE: readback failed", { cause: error });
+    } finally {
+      readback.unmap();
+      readback.destroy();
+      this.instanceCache.endFrame();
+      geometryCache.endFrame();
+    }
+    const index = pixel ? decodeSelectionIndex(pixel) : void 0;
+    return index === void 0 ? void 0 : pickIds[index];
+  }
+  resize(width, height) {
+    this.ensureTarget(width, height);
+  }
+  dispose() {
+    if (this.disposed)
+      return;
+    this.disposed = true;
+    this.target?.destroy();
+    this.depth?.destroy();
+    this.uniformBuffer?.destroy();
+    this.identityInstances.destroy();
+    this.zeroSemantics.destroy();
+    this.instanceCache.dispose();
+    this.renderPlan.dispose();
+    this.target = null;
+    this.depth = null;
+    this.uniformBuffer = null;
+  }
+  ensureTarget(width, height) {
+    if (this.target && this.depth && this.width === width && this.height === height) {
+      return;
+    }
+    this.target?.destroy();
+    this.depth?.destroy();
+    this.target = this.device.createTexture({
+      label: "ice3:pick-target",
+      size: [width, height],
+      format: PICK_FORMAT,
+      usage: PICK_TEXTURE_USAGE
+    });
+    this.depth = this.device.createTexture({
+      label: "ice3:pick-depth",
+      size: [width, height],
+      format: "depth24plus",
+      usage: DEPTH_USAGE
+    });
+    this.width = width;
+    this.height = height;
+  }
+  ensureUniformBuffer(draws) {
+    const capacity = Math.max(1, draws);
+    if (capacity <= this.uniformBufferDraws())
+      return;
+    this.uniformBuffer?.destroy();
+    this.uniformBuffer = this.device.createBuffer({
+      label: "ice3:pick-uniforms",
+      size: capacity * WEBGPU_UNIFORM_STRIDE,
+      usage: UNIFORM_USAGE
+    });
+    this.uniformBufferCapacity = capacity;
+  }
+  uniformBufferCapacity = 0;
+  uniformBufferDraws() {
+    return this.uniformBufferCapacity;
+  }
+};
+function collectWebGPUPickIds(frame) {
+  const pickIds = {};
+  const seen = /* @__PURE__ */ new Set();
+  let next = 1;
+  const add2 = (id) => {
+    if (seen.has(id))
+      return;
+    seen.add(id);
+    pickIds[next] = id;
+    next += 1;
+  };
+  const renderables = collectRenderables(frame.scene);
+  const instances = collectInstanceBatches(renderables);
+  for (const instance of instances) {
+    for (const id of instance.semanticIds)
+      add2(id);
+  }
+  const instancedIds = new Set(instances.flatMap((item) => item.meshIds));
+  for (const batch of collectRenderBatches(frame.scene)) {
+    for (const id of batch.batch.semanticSelectionIds)
+      add2(id);
+  }
+  for (const renderable of renderables) {
+    if (!instancedIds.has(renderable.id))
+      add2(renderable.mesh.selectionId);
+  }
+  return pickIds;
+}
+
+// packages/renderer/dist/WebGPURendererBackend.js
+var VERTEX_USAGE2 = 32 | 8;
+var UNIFORM_USAGE2 = 64 | 8;
+var RENDER_ATTACHMENT_USAGE = 16;
+var UNIFORM_BUFFER_INITIAL_DRAWS = 64;
+var SELECTION_RGBA2 = [1, 208 / 255, 0, 1];
+var SELECTION_TINT_RGBA = [1, 208 / 255, 0, 0.65];
+var EMPTY_SELECTION = new Uint32Array([0]);
+var EDGE_PIXEL_OFFSETS2 = [
+  [0, 0],
+  [-1, 0],
+  [1, 0],
+  [0, -1],
+  [0, 1]
+];
+var WebGPURendererBackend = class _WebGPURendererBackend {
+  capabilities = {
+    backend: "webgpu",
+    maxTextureSize: 0,
+    picking: true
+  };
+  adapter;
+  device;
+  format;
+  pipeline;
+  storagePipeline;
+  gpuDrivenPipeline;
+  visibilityEncoder;
+  storageCache;
+  acceleration;
+  forceStoragePath;
+  forceGpuDriven;
+  releaseProbe;
+  onContextLost;
+  onContextRestored;
+  onError;
+  disposing = false;
+  canvas = null;
+  context = null;
+  geometryCache = null;
+  instanceCache = null;
+  picker = null;
+  selectionMaskBuffer = null;
+  timestampProfiler = null;
+  timestampProfilingEnabled = false;
+  bundleCache;
+  bundleActive = true;
+  frameBindGroup = null;
+  frameBindGroupKey = "";
+  storageBindGroups = /* @__PURE__ */ new Map();
+  uniformBufferGeneration = 0;
+  optimizationWarnings = /* @__PURE__ */ new Set();
+  identityInstances = null;
+  zeroSemantics = null;
+  uniformBuffer = null;
+  depthTexture = null;
+  uniformCapacity = UNIFORM_BUFFER_INITIAL_DRAWS;
+  viewport = { x: 0, y: 0, width: 1, height: 1 };
+  dpr = 1;
+  backgroundRgba = [
+    0.035,
+    0.055,
+    0.09,
+    1
+  ];
+  frameStats = {
+    drawCalls: 0,
+    renderedMeshes: 0,
+    renderedBatches: 0,
+    instancingFallbacks: 0,
+    gpuUploads: 0,
+    gpuEvictions: 0,
+    gpuBytes: 0
+  };
+  lastFrame = null;
+  captureRequest = null;
+  renderPlan = new WebGPURenderPlanCache();
+  drawListScratch = [];
+  selected = /* @__PURE__ */ new Set();
+  drawStorage = new WebGPUDrawStorage();
+  lastVisibilityEntries = [];
+  mvpScratch = new ICEMatrix4();
+  worldScratch = new ICEMatrix4();
+  profiler = new RendererProfiler();
+  lastFrameProfile = null;
+  optimizationFailureReason = null;
+  storageFailureReason = null;
+  visibilityFailureReason = null;
+  constructor(context, pipeline, storagePipeline, gpuDrivenPipeline, visibilityEncoder, storageCache, acceleration, forceStoragePath, forceGpuDriven, selectionMaskBuffer, optimizationFailureReason, storageFailureReason, visibilityFailureReason) {
+    this.adapter = context.adapter;
+    this.device = context.device;
+    this.format = context.format;
+    this.pipeline = pipeline;
+    this.storagePipeline = storagePipeline;
+    this.gpuDrivenPipeline = gpuDrivenPipeline;
+    this.visibilityEncoder = visibilityEncoder;
+    this.storageCache = storageCache;
+    this.acceleration = acceleration;
+    this.forceStoragePath = forceStoragePath;
+    this.forceGpuDriven = forceGpuDriven;
+    this.bundleCache = new WebGPUBundleCache(context.device, context.format);
+    this.selectionMaskBuffer = selectionMaskBuffer;
+    this.optimizationFailureReason = optimizationFailureReason;
+    this.storageFailureReason = storageFailureReason;
+    this.visibilityFailureReason = visibilityFailureReason;
+    this.releaseProbe = context.release;
+    this.watchDevice(this.device);
+  }
+  static async create(context, options = {}) {
+    let selectionMaskBuffer = null;
+    let optimizationFailureReason = null;
+    let pipeline;
+    try {
+      selectionMaskBuffer = new WebGPUSelectionMaskBuffer(context.device);
+      selectionMaskBuffer.update(new Uint32Array([0]));
+      pipeline = await WebGPURenderPipeline.create(context.device, context.format, { selectionMask: true });
+    } catch {
+      selectionMaskBuffer?.dispose();
+      selectionMaskBuffer = null;
+      optimizationFailureReason = "selection-mask";
+      pipeline = await WebGPURenderPipeline.create(context.device, context.format);
+    }
+    const acceleration = detectWebGPUAcceleration(context.device);
+    const forceStoragePath = options.forceStoragePath ?? WEBGPU_STORAGE_DEFAULT;
+    const forceGpuDriven = options.forceGpuDriven ?? WEBGPU_GPU_DRIVEN_DEFAULT;
+    let storagePipeline = null;
+    let gpuDrivenPipeline = null;
+    let visibilityEncoder = null;
+    let storageCache = null;
+    let storageFailureReason = null;
+    let visibilityFailureReason = null;
+    if (forceStoragePath || forceGpuDriven) {
+      if (!acceleration.storage) {
+        storageFailureReason = "limit-too-low";
+      } else {
+        try {
+          storagePipeline = await WebGPURenderPipeline.create(context.device, context.format, {
+            selectionMask: true,
+            storageInstances: true
+          });
+          storageCache = new WebGPUInstanceStorage(context.device);
+        } catch {
+          storagePipeline = null;
+          storageCache?.dispose();
+          storageCache = null;
+          storageFailureReason = "pipeline-failed";
+        }
+      }
+    }
+    if (forceGpuDriven) {
+      if (!storagePipeline || !storageCache) {
+        visibilityFailureReason = storageFailureReason ?? "limit-too-low";
+      } else if (!acceleration.visibility) {
+        visibilityFailureReason = "limit-too-low";
+      } else {
+        try {
+          gpuDrivenPipeline = await WebGPURenderPipeline.create(context.device, context.format, {
+            selectionMask: true,
+            storageInstances: true,
+            indirectInstances: true
+          });
+          visibilityEncoder = await WebGPUVisibilityEncoder.create(context.device);
+        } catch {
+          gpuDrivenPipeline = null;
+          visibilityEncoder?.dispose();
+          visibilityEncoder = null;
+          visibilityFailureReason = "pipeline-failed";
+        }
+      }
+    }
+    return new _WebGPURendererBackend(context, pipeline, storagePipeline, gpuDrivenPipeline, visibilityEncoder, storageCache, acceleration, forceStoragePath, forceGpuDriven, selectionMaskBuffer, optimizationFailureReason, storageFailureReason, visibilityFailureReason);
+  }
+  initialize(options) {
+    const context = options.canvas.getContext("webgpu");
+    if (!context) {
+      throw new ICEEngineError("ICE3_WEBGPU_UNAVAILABLE", "ICE3_WEBGPU_UNAVAILABLE: WebGPU canvas context is unavailable");
+    }
+    context.configure({
+      device: this.device,
+      format: this.format,
+      alphaMode: "premultiplied",
+      usage: RENDER_ATTACHMENT_USAGE | 1
+    });
+    this.canvas = options.canvas;
+    this.context = context;
+    this.onContextLost = options.onContextLost;
+    this.onContextRestored = options.onContextRestored;
+    this.onError = options.onError;
+    if (this.optimizationFailureReason) {
+      const reason = this.optimizationFailureReason;
+      this.optimizationFailureReason = null;
+      this.reportOptimizationFailure("selection-mask", reason);
+    }
+    if (this.storageFailureReason) {
+      const reason = this.storageFailureReason;
+      this.storageFailureReason = null;
+      this.reportOptimizationFailure("storage", reason);
+    }
+    if (this.visibilityFailureReason) {
+      const reason = this.visibilityFailureReason;
+      this.visibilityFailureReason = null;
+      this.reportOptimizationFailure("visibility", reason);
+    }
+    this.geometryCache = new WebGPUGeometryCache({ device: this.device });
+    this.instanceCache = new WebGPUInstanceCache(this.device);
+    this.picker = new WebGPUPicker(this.device, this.format);
+    this.timestampProfiler = this.device.features.has("timestamp-query") ? new WebGPUTimestampProfiler(this.device) : null;
+    this.capabilities = {
+      backend: "webgpu",
+      maxTextureSize: this.device.limits.maxTextureDimension2D,
+      picking: true
+    };
+    this.identityInstances = this.device.createBuffer({
+      label: "ice3:identity-instances",
+      size: 80,
+      usage: VERTEX_USAGE2
+    });
+    const identity = new Float32Array(20);
+    identity.set([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+    this.device.queue.writeBuffer(this.identityInstances, 0, identity);
+    this.zeroSemantics = this.device.createBuffer({
+      label: "ice3:zero-semantic",
+      size: 4,
+      usage: VERTEX_USAGE2
+    });
+    this.device.queue.writeBuffer(this.zeroSemantics, 0, new Uint32Array([0]));
+    this.ensureUniformCapacity(UNIFORM_BUFFER_INITIAL_DRAWS);
+  }
+  resize(viewport, dpr) {
+    if (!this.canvas || !this.device) {
+      throw new ICEEngineError("ICE3_ENGINE_NOT_READY", "Renderer is not initialized");
+    }
+    this.viewport = { ...viewport };
+    this.dpr = dpr;
+    this.canvas.width = Math.max(1, Math.round(viewport.width * dpr));
+    this.canvas.height = Math.max(1, Math.round(viewport.height * dpr));
+    this.bundleCache.invalidate();
+    this.frameBindGroup = null;
+    this.depthTexture?.destroy();
+    this.depthTexture = this.device.createTexture({
+      label: "ice3:depth",
+      size: [this.canvas.width, this.canvas.height],
+      format: "depth24plus",
+      usage: RENDER_ATTACHMENT_USAGE
+    });
+    this.picker?.resize(this.canvas.width, this.canvas.height);
+  }
+  setBackgroundColor(color) {
+    this.backgroundRgba = colorToRgba(color);
+  }
+  prepareBatchGeometry(geometry) {
+    this.requireGeometryCache().pin(geometry);
+  }
+  releaseBatchGeometry(geometry) {
+    this.geometryCache?.unpin(geometry);
+  }
+  render(frame) {
+    this.profiler.begin();
+    this.lastFrameProfile = null;
+    this.lastFrame = frame;
+    const context = this.context;
+    const cache = this.requireGeometryCache();
+    const instanceCache = this.instanceCache;
+    if (!context || !this.depthTexture || !this.identityInstances || !this.zeroSemantics || !instanceCache) {
+      throw new ICEEngineError("ICE3_ENGINE_NOT_READY", "Renderer is not initialized");
+    }
+    this.frameStats = {
+      drawCalls: 0,
+      renderedMeshes: 0,
+      renderedBatches: 0,
+      instancingFallbacks: 0,
+      gpuUploads: 0,
+      gpuEvictions: 0,
+      gpuBytes: 0
+    };
+    cache.beginFrame();
+    instanceCache.beginFrame();
+    this.storageCache?.beginFrame();
+    const plan = this.renderPlan.get(frame.scene);
+    const renderables = plan.renderables;
+    const instances = plan.instances;
+    const batches = plan.batches;
+    this.profiler.mark("collect");
+    const aspect = frame.viewport.width / Math.max(frame.viewport.height, 1);
+    const viewProjection = frame.camera.getViewProjectionMatrix(aspect);
+    const world = this.worldScratch;
+    const mvp = this.mvpScratch;
+    const drawList = this.drawListScratch;
+    drawList.length = 0;
+    this.lastVisibilityEntries.length = 0;
+    this.drawStorage.begin(0);
+    const instancedMeshIds = plan.instancedMeshIds;
+    const selected = this.selected;
+    selected.clear();
+    for (const id of frame.selection)
+      selected.add(id);
+    const selectionMaskActive = this.selectionMaskBuffer !== null;
+    const selectionMaskEnabled = selectionMaskActive && frame.selection.length > 0;
+    let selectionEntryCount = 0;
+    const selectionOverlays = [];
+    const pushDraw = (draw, matrix, selectionIds) => {
+      const selectionBase = selectionMaskEnabled ? selectionEntryCount : 0;
+      this.drawStorage.append({
+        ...draw,
+        matrix,
+        selectionBase,
+        useSelectionMask: Boolean(draw.useSelectionMask),
+        pageBase: draw.storagePage?.firstInstance ?? 0,
+        useIndirect: Boolean(draw.visibilityEntry)
+      });
+      drawList.push({
+        ...draw,
+        ...selectionIds ? { selectionIds } : {},
+        selectionBase
+      });
+      if (selectionMaskEnabled && selectionIds) {
+        selectionEntryCount += selectionIds.length;
+      }
+    };
+    const matrixFor = (source) => {
+      mvp.elements.set(viewProjection.elements);
+      world.elements.set(source);
+      mvp.multiply(world);
+      return mvp.elements;
+    };
+    const pushEdgeDraws = (geometry, instance, matrix, color, pipeline, selection) => {
+      if (!geometry.edgeIndexBuffer || geometry.edgeCount === 0)
+        return;
+      if (selection)
+        selectionOverlays.push(selection.selectionScope);
+      const clipPixelX = 2 / Math.max(1, this.viewport.width * this.dpr);
+      const clipPixelY = 2 / Math.max(1, this.viewport.height * this.dpr);
+      for (const [offsetX, offsetY] of EDGE_PIXEL_OFFSETS2) {
+        pushDraw({
+          geometry,
+          instanceBuffer: instance?.matrixBuffer ?? this.identityInstances,
+          semanticBuffer: instance?.semanticBuffer ?? this.zeroSemantics,
+          instanceCount: instance?.instanceCount ?? 1,
+          color,
+          useVertexColor: false,
+          useInstancing: instance !== null,
+          pipeline,
+          clipOffset: [offsetX * clipPixelX, offsetY * clipPixelY],
+          edge: true,
+          ...selection ?? {},
+          ...instance?.storagePage ? { storagePage: instance.storagePage } : {},
+          ...instance?.storagePage && this.gpuDrivenActive && instance.storagePage.instanceCount >= WEBGPU_INSTANCE_VISIBILITY_THRESHOLD ? {
+            visibilityEntry: this.visibilityEncoder.retain(instance.storagePage, pipeline === this.gpuDrivenPipeline?.line || pipeline === this.gpuDrivenPipeline?.selectionLine ? geometry.edgeCount : geometry.triangleCount)
+          } : {}
+        }, matrix, selection?.selectionIds);
+      }
+    };
+    for (const batch of instances) {
+      const geometry = cache.retain(batch.geometry);
+      if (this.storageActive && this.storageCache && this.storagePipeline) {
+        const storage = this.storageCache.retain(batch, batch.geometry);
+        for (const page of storage.pages) {
+          const useVisibility = this.gpuDrivenActive && page.instanceCount >= WEBGPU_INSTANCE_VISIBILITY_THRESHOLD;
+          const pagePipeline = useVisibility ? this.gpuDrivenPipeline : this.storagePipeline;
+          const visibilityEntry = useVisibility ? this.visibilityEncoder.retain(page, geometry.triangleCount) : void 0;
+          if (visibilityEntry) {
+            this.lastVisibilityEntries.push({
+              entry: visibilityEntry,
+              page
+            });
+          }
+          const instance = {
+            matrixBuffer: this.identityInstances,
+            semanticBuffer: geometry.semanticBuffer ?? this.zeroSemantics,
+            instanceCount: page.instanceCount,
+            storagePage: page
+          };
+          pushDraw({
+            geometry,
+            instanceBuffer: instance.matrixBuffer,
+            semanticBuffer: instance.semanticBuffer,
+            instanceCount: instance.instanceCount,
+            color: colorToRgba(batch.material.color),
+            useVertexColor: Boolean(batch.geometry.colors),
+            useInstancing: true,
+            pipeline: pagePipeline.triangle,
+            useSelectionMask: selectionMaskEnabled,
+            storagePage: page,
+            ...visibilityEntry ? { visibilityEntry } : {}
+          }, viewProjection.elements, batch.semanticIds);
+          if (batch.material.edgeColor) {
+            pushEdgeDraws(geometry, instance, viewProjection.elements, colorToRgba(batch.material.edgeColor), pagePipeline.line);
+          }
+          if (selectionMaskEnabled && batch.material.edgeColor && batch.semanticIds.some((id) => selected.has(id))) {
+            pushEdgeDraws(geometry, instance, viewProjection.elements, SELECTION_RGBA2, pagePipeline.selectionLine, {
+              selectionIds: batch.semanticIds,
+              useSelectionMask: true,
+              useSemantic: true,
+              selectionScope: batch.id
+            });
+          }
+        }
+      } else {
+        const instance = instanceCache.retain(batch);
+        pushDraw({
+          geometry,
+          instanceBuffer: instance.matrixBuffer,
+          semanticBuffer: instance.semanticBuffer,
+          instanceCount: instance.instanceCount,
+          color: colorToRgba(batch.material.color),
+          useVertexColor: Boolean(batch.geometry.colors),
+          useInstancing: true,
+          pipeline: this.pipeline.triangle,
+          useSelectionMask: selectionMaskEnabled
+        }, viewProjection.elements, batch.semanticIds);
+        if (batch.material.edgeColor) {
+          pushEdgeDraws(geometry, instance, viewProjection.elements, colorToRgba(batch.material.edgeColor), this.pipeline.line);
+        }
+        if (selectionMaskEnabled && batch.material.edgeColor && batch.semanticIds.some((id) => selected.has(id))) {
+          pushEdgeDraws(geometry, instance, viewProjection.elements, SELECTION_RGBA2, this.pipeline.selectionLine, {
+            selectionIds: batch.semanticIds,
+            useSelectionMask: true,
+            useSemantic: true,
+            selectionScope: batch.id
+          });
+        } else if (!selectionMaskEnabled) {
+          for (let semanticIndex = 0; semanticIndex < batch.semanticIds.length; semanticIndex += 1) {
+            if (!selected.has(batch.semanticIds[semanticIndex]))
+              continue;
+            pushDraw({
+              geometry,
+              instanceBuffer: instance.matrixBuffer,
+              semanticBuffer: instance.semanticBuffer,
+              instanceCount: instance.instanceCount,
+              color: [...SELECTION_RGBA2],
+              useVertexColor: false,
+              useInstancing: true,
+              pipeline: this.pipeline.selectionTriangle,
+              semanticHighlight: semanticIndex,
+              useSemantic: true
+            }, viewProjection.elements);
+          }
+        }
+      }
+    }
+    for (const draw of batches) {
+      const geometry = cache.retain(draw.batch.geometry);
+      const matrix = matrixFor(draw.worldMatrix);
+      pushDraw({
+        geometry,
+        instanceBuffer: this.identityInstances,
+        semanticBuffer: geometry.semanticBuffer ?? this.zeroSemantics,
+        instanceCount: 1,
+        color: colorToRgba(draw.batch.material.color),
+        useVertexColor: Boolean(draw.batch.geometry.colors),
+        useInstancing: false,
+        pipeline: this.pipeline.triangle,
+        useSelectionMask: selectionMaskEnabled
+      }, matrix, draw.batch.semanticSelectionIds);
+      this.frameStats.renderedBatches += 1;
+      if (draw.batch.material.edgeColor) {
+        pushEdgeDraws(geometry, null, matrix, colorToRgba(draw.batch.material.edgeColor), this.pipeline.line);
+      }
+      if (selectionMaskEnabled && draw.batch.material.edgeColor && draw.batch.semanticSelectionIds.some((id) => selected.has(id))) {
+        pushEdgeDraws(geometry, null, matrix, SELECTION_RGBA2, this.pipeline.selectionLine, {
+          selectionIds: draw.batch.semanticSelectionIds,
+          useSelectionMask: true,
+          useSemantic: true,
+          selectionScope: draw.id
+        });
+      } else if (!selectionMaskEnabled) {
+        for (let semanticIndex = 0; semanticIndex < draw.batch.semanticSelectionIds.length; semanticIndex += 1) {
+          if (!selected.has(draw.batch.semanticSelectionIds[semanticIndex])) {
+            continue;
+          }
+          pushDraw({
+            geometry,
+            instanceBuffer: this.identityInstances,
+            semanticBuffer: geometry.semanticBuffer ?? this.zeroSemantics,
+            instanceCount: 1,
+            color: [...SELECTION_RGBA2],
+            useVertexColor: false,
+            useInstancing: false,
+            pipeline: this.pipeline.selectionTriangle,
+            semanticHighlight: semanticIndex,
+            useSemantic: true
+          }, matrix);
+        }
+      }
+    }
+    for (const renderable of renderables) {
+      if (instancedMeshIds.has(renderable.id))
+        continue;
+      const geometry = cache.retain(renderable.mesh.geometry);
+      const matrix = matrixFor(renderable.worldMatrix);
+      pushDraw({
+        geometry,
+        instanceBuffer: this.identityInstances,
+        semanticBuffer: this.zeroSemantics,
+        instanceCount: 1,
+        color: colorToRgba(renderable.mesh.material.color),
+        useVertexColor: Boolean(renderable.mesh.geometry.colors),
+        useInstancing: false,
+        pipeline: this.pipeline.triangle,
+        useSelectionMask: selectionMaskEnabled
+      }, matrix, [renderable.mesh.selectionId]);
+      this.frameStats.renderedMeshes += 1;
+      if (renderable.mesh.material.edgeColor) {
+        pushEdgeDraws(geometry, null, matrix, colorToRgba(renderable.mesh.material.edgeColor), this.pipeline.line);
+      }
+      if (selected.has(renderable.mesh.selectionId)) {
+        if (!selectionMaskEnabled) {
+          pushDraw({
+            geometry,
+            instanceBuffer: this.identityInstances,
+            semanticBuffer: this.zeroSemantics,
+            instanceCount: 1,
+            color: [...SELECTION_TINT_RGBA],
+            useVertexColor: false,
+            useInstancing: false,
+            pipeline: this.pipeline.selectionTriangle
+          }, matrix);
+        }
+        pushEdgeDraws(geometry, null, matrix, SELECTION_RGBA2, this.pipeline.selectionLine, selectionMaskEnabled ? {
+          selectionIds: [renderable.mesh.selectionId],
+          useSelectionMask: true,
+          useSemantic: true,
+          selectionScope: renderable.id
+        } : void 0);
+      }
+    }
+    const selectionLayout = selectionMaskEnabled ? buildSelectionMask(drawList.map((draw) => draw.selectionIds ?? []), frame.selection) : { words: EMPTY_SELECTION, bases: [] };
+    this.selectionMaskBuffer?.update(selectionLayout.words);
+    this.ensureUniformCapacity(this.drawStorage.drawCount);
+    const uniforms = this.drawStorage.uniformData.subarray(0, this.drawStorage.drawCount * 64);
+    if (uniforms.length > 0) {
+      this.device.queue.writeBuffer(this.uniformBuffer, 0, uniforms);
+    }
+    this.profiler.mark("prepareAndUpload");
+    const bindGroupKey = [
+      this.uniformBufferGeneration,
+      this.selectionMaskBuffer?.generation ?? 0,
+      this.pipeline.selectionMask ? 1 : 0
+    ].join(":");
+    if (!this.frameBindGroup || this.frameBindGroupKey !== bindGroupKey) {
+      const bindGroupEntries = [{
+        binding: 0,
+        resource: {
+          buffer: this.uniformBuffer,
+          offset: 0,
+          size: WEBGPU_UNIFORM_BYTES
+        }
+      }];
+      if (selectionMaskActive && this.selectionMaskBuffer?.buffer) {
+        bindGroupEntries.push({
+          binding: 1,
+          resource: {
+            buffer: this.selectionMaskBuffer.buffer,
+            offset: 0,
+            size: this.selectionMaskBuffer.buffer.size
+          }
+        });
+      }
+      this.frameBindGroup = this.device.createBindGroup({
+        label: "ice3:frame-uniforms",
+        layout: this.pipeline.bindGroupLayout,
+        entries: bindGroupEntries
+      });
+      this.frameBindGroupKey = bindGroupKey;
+    }
+    const bindGroup = this.frameBindGroup;
+    const encodeDraws = (encoder2) => {
+      for (let index = 0; index < drawList.length; index += 1) {
+        const draw = drawList[index];
+        encoder2.setPipeline(draw.pipeline);
+        const drawBindGroup = draw.storagePage ? this.storageBindGroupFor(draw.storagePage, draw.visibilityEntry?.visibleBuffer) : bindGroup;
+        encoder2.setBindGroup(0, drawBindGroup, [
+          index * WEBGPU_UNIFORM_STRIDE
+        ]);
+        encoder2.setVertexBuffer(0, draw.geometry.vertexBuffer);
+        if (draw.storagePage) {
+          encoder2.setVertexBuffer(1, draw.semanticBuffer);
+        } else {
+          encoder2.setVertexBuffer(1, draw.instanceBuffer);
+          encoder2.setVertexBuffer(2, draw.semanticBuffer);
+        }
+        encoder2.setIndexBuffer(draw.edge ? draw.geometry.edgeIndexBuffer : draw.geometry.triangleIndexBuffer, draw.geometry.indexFormat);
+        if (draw.visibilityEntry) {
+          encoder2.drawIndexedIndirect(draw.visibilityEntry.indirectBuffer, 0);
+        } else {
+          encoder2.drawIndexed(draw.edge ? draw.geometry.edgeCount : draw.geometry.triangleCount, draw.instanceCount, 0, 0, draw.storagePage?.firstInstance ?? 0);
+        }
+      }
+    };
+    const bundleKey = [
+      plan.revision,
+      this.drawStorage.generation,
+      cache.generation,
+      instanceCache.generation,
+      this.storageCache?.generation ?? 0,
+      this.selectionMaskBuffer?.generation ?? 0,
+      this.uniformBufferGeneration,
+      this.format,
+      selectionOverlays.join("|")
+    ].join(":");
+    let bundle = null;
+    if (this.bundleActive && drawList.length > 0) {
+      try {
+        bundle = this.bundleCache.get(bundleKey, encodeDraws);
+      } catch {
+        this.bundleActive = false;
+        this.bundleCache.invalidate();
+        this.reportOptimizationFailure("bundle", "resource-failed");
+      }
+    }
+    const targetTexture = context.getCurrentTexture();
+    const encoder = this.device.createCommandEncoder();
+    if (this.gpuDrivenActive) {
+      const encodedVisibility = /* @__PURE__ */ new Set();
+      for (let index = 0; index < drawList.length; index += 1) {
+        const draw = drawList[index];
+        if (!draw.visibilityEntry || !draw.storagePage || encodedVisibility.has(draw.visibilityEntry)) {
+          continue;
+        }
+        encodedVisibility.add(draw.visibilityEntry);
+        this.visibilityEncoder.encode(encoder, draw.visibilityEntry, draw.storagePage, this.uniformBuffer, index * WEBGPU_UNIFORM_STRIDE);
+      }
+    }
+    const timestampProfiler = this.captureRequest || !this.timestampProfilingEnabled ? null : this.timestampProfiler;
+    const timestampQuerySet = timestampProfiler?.querySetFor(frame.frameId);
+    const pass = encoder.beginRenderPass({
+      colorAttachments: [{
+        view: targetTexture.createView(),
+        clearValue: {
+          r: this.backgroundRgba[0],
+          g: this.backgroundRgba[1],
+          b: this.backgroundRgba[2],
+          a: this.backgroundRgba[3]
+        },
+        loadOp: "clear",
+        storeOp: "store"
+      }],
+      depthStencilAttachment: {
+        view: this.depthTexture.createView(),
+        depthClearValue: 1,
+        depthLoadOp: "clear",
+        depthStoreOp: "store"
+      },
+      ...timestampQuerySet ? {
+        timestampWrites: {
+          querySet: timestampQuerySet,
+          beginningOfPassWriteIndex: 0,
+          endOfPassWriteIndex: 1
+        }
+      } : {}
+    });
+    if (bundle) {
+      try {
+        pass.executeBundles([bundle]);
+      } catch {
+        this.bundleActive = false;
+        this.bundleCache.invalidate();
+        this.reportOptimizationFailure("bundle", "runtime-failed");
+        encodeDraws(pass);
+      }
+    } else {
+      encodeDraws(pass);
+    }
+    this.frameStats.drawCalls += drawList.length;
+    pass.end();
+    if (timestampProfiler) {
+      timestampProfiler.resolveFrame(encoder, frame.frameId);
+    }
+    if (this.captureRequest) {
+      encoder.copyTextureToBuffer({ texture: targetTexture }, {
+        buffer: this.captureRequest.buffer,
+        bytesPerRow: this.captureRequest.bytesPerRow,
+        rowsPerImage: this.canvas.height
+      }, {
+        width: this.canvas.width,
+        height: this.canvas.height,
+        depthOrArrayLayers: 1
+      });
+      this.captureRequest = null;
+    }
+    const commandBuffer = encoder.finish();
+    this.profiler.mark("encode");
+    this.device.queue.submit([commandBuffer]);
+    this.profiler.mark("submit");
+    cache.endFrame();
+    instanceCache.endFrame();
+    this.storageCache?.endFrame();
+    this.frameStats.gpuUploads = cache.uploadCount;
+    this.frameStats.gpuEvictions = cache.evictionCount;
+    this.frameStats.gpuBytes = cache.totalBytes + instanceCache.totalBytes + (this.storageCache?.totalBytes ?? 0);
+    this.lastFrameProfile = this.profiler.end();
+  }
+  enableProfiling(enabled) {
+    this.profiler.enable(enabled);
+    this.lastFrameProfile = null;
+  }
+  get frameProfile() {
+    return this.lastFrameProfile;
+  }
+  async pick(frame, point) {
+    if (!this.picker) {
+      throw new ICEEngineError("ICE3_WEBGPU_PICK_UNAVAILABLE", "ICE3_WEBGPU_PICK_UNAVAILABLE: picker is not initialized");
+    }
+    try {
+      return await this.picker.pick({ ...frame, point }, this.requireGeometryCache(), collectWebGPUPickIds(frame));
+    } catch (error) {
+      if (error instanceof ICEEngineError && error.code === "ICE3_WEBGPU_PICK_UNAVAILABLE") {
+        throw error;
+      }
+      throw new ICEEngineError("ICE3_WEBGPU_PICK_UNAVAILABLE", "ICE3_WEBGPU_PICK_UNAVAILABLE: exact pick failed", { cause: error });
+    }
+  }
+  dispose() {
+    this.disposing = true;
+    this.bundleCache.dispose();
+    this.geometryCache?.dispose();
+    this.renderPlan.dispose();
+    this.picker?.dispose();
+    this.selectionMaskBuffer?.dispose();
+    this.storageCache?.dispose();
+    this.visibilityEncoder?.dispose();
+    this.timestampProfiler?.dispose();
+    this.instanceCache?.dispose();
+    this.identityInstances?.destroy();
+    this.zeroSemantics?.destroy();
+    this.uniformBuffer?.destroy();
+    this.depthTexture?.destroy();
+    this.context?.unconfigure();
+    this.geometryCache = null;
+    this.picker = null;
+    this.selectionMaskBuffer = null;
+    this.storageCache = null;
+    this.visibilityEncoder = null;
+    this.gpuDrivenPipeline = null;
+    this.timestampProfiler = null;
+    this.instanceCache = null;
+    this.identityInstances = null;
+    this.zeroSemantics = null;
+    this.uniformBuffer = null;
+    this.depthTexture = null;
+    this.context = null;
+    this.canvas = null;
+    this.frameBindGroup = null;
+    this.device.destroy();
+    this.releaseProbe?.();
+    this.onContextLost = void 0;
+    this.onContextRestored = void 0;
+    this.onError = void 0;
+  }
+  async capture() {
+    if (!this.context || !this.canvas || !this.lastFrame) {
+      throw new ICEEngineError("ICE3_ENGINE_NOT_READY", "Renderer has no frame to capture");
+    }
+    const width = this.canvas.width;
+    const height = this.canvas.height;
+    const bytesPerRow = Math.ceil(width * 4 / 256) * 256;
+    const readback = this.device.createBuffer({
+      label: "ice3:capture-readback",
+      size: bytesPerRow * height,
+      usage: 1 | 8
+    });
+    this.captureRequest = { buffer: readback, bytesPerRow };
+    try {
+      this.render(this.lastFrame);
+    } catch (error) {
+      this.captureRequest = null;
+      readback.destroy();
+      throw error;
+    }
+    let bytes;
+    try {
+      await readback.mapAsync(1);
+      bytes = new Uint8Array(readback.getMappedRange()).slice();
+    } finally {
+      readback.unmap();
+      readback.destroy();
+    }
+    for (let offset = 0; offset < bytes.length; offset += 4) {
+      if (this.format === "bgra8unorm" || this.format === "bgra8unorm-srgb") {
+        [bytes[offset], bytes[offset + 2]] = [
+          bytes[offset + 2],
+          bytes[offset]
+        ];
+      }
+    }
+    const imageBytes = new Uint8Array(width * height * 4);
+    const rowBytes = width * 4;
+    for (let row = 0; row < height; row += 1) {
+      imageBytes.set(bytes.subarray(row * bytesPerRow, row * bytesPerRow + rowBytes), row * rowBytes);
+    }
+    return pixelsToPng(imageBytes, width, height);
+  }
+  async finish() {
+    await this.device.queue.onSubmittedWorkDone?.();
+  }
+  async drainGpuTimings() {
+    return this.timestampProfiler?.drain() ?? [];
+  }
+  enableTimestampProfiling(enabled) {
+    this.timestampProfilingEnabled = enabled && this.timestampProfiler !== null;
+  }
+  get timestampProfilingAvailable() {
+    return this.timestampProfiler !== null;
+  }
+  get timestampProfilingUnavailableReason() {
+    return this.timestampProfiler ? this.timestampProfiler.unavailableReason : "timestamp-query unavailable";
+  }
+  get stats() {
+    return this.frameStats;
+  }
+  async readVisibilityStats() {
+    if (!this.visibilityEncoder) {
+      return void 0;
+    }
+    let visibleInstances = 0;
+    let culledInstances = 0;
+    let dispatchCount = 0;
+    const seen = /* @__PURE__ */ new Set();
+    for (const item of this.lastVisibilityEntries) {
+      if (seen.has(item.entry))
+        continue;
+      seen.add(item.entry);
+      const result = await this.visibilityEncoder.readStats(item.entry, item.page);
+      visibleInstances += result.visibleInstances;
+      culledInstances += result.culledInstances;
+      dispatchCount += result.dispatchCount;
+    }
+    return { visibleInstances, culledInstances, dispatchCount };
+  }
+  get storageActive() {
+    return (this.forceStoragePath || this.forceGpuDriven) && this.storagePipeline !== null && this.storageCache !== null;
+  }
+  get gpuDrivenActive() {
+    return this.forceGpuDriven && this.gpuDrivenPipeline !== null && this.visibilityEncoder !== null && this.storageCache !== null;
+  }
+  get optimizationStats() {
+    return {
+      tier: this.gpuDrivenActive ? "gpu-driven" : this.storageActive ? "storage" : "baseline",
+      selectionMaskActive: this.selectionMaskBuffer !== null,
+      bundleActive: this.bundleActive,
+      storageActive: this.storageActive,
+      visibilityActive: this.gpuDrivenActive,
+      instanceUploadBytes: this.storageCache?.totalUploadBytes ?? 0,
+      bundleRecreations: this.bundleCache.bundleRecreations,
+      ...this.timestampProfilingUnavailableReason ? {
+        timestampUnavailableReason: this.timestampProfilingUnavailableReason
+      } : {}
+    };
+  }
+  storageBindGroupFor(page, visibleBuffer) {
+    const key = [
+      this.uniformBufferGeneration,
+      this.selectionMaskBuffer?.generation ?? 0
+    ].join(":");
+    const cached = this.storageBindGroups.get(page.buffer);
+    if (cached?.key === key && cached.visibleBuffer === visibleBuffer) {
+      return cached.group;
+    }
+    const entries = [{
+      binding: 0,
+      resource: {
+        buffer: this.uniformBuffer,
+        offset: 0,
+        size: WEBGPU_UNIFORM_BYTES
+      }
+    }];
+    if (this.selectionMaskBuffer?.buffer) {
+      entries.push({
+        binding: 1,
+        resource: {
+          buffer: this.selectionMaskBuffer.buffer,
+          offset: 0,
+          size: this.selectionMaskBuffer.buffer.size
+        }
+      });
+    }
+    entries.push({
+      binding: 2,
+      resource: {
+        buffer: page.buffer,
+        offset: 0,
+        size: page.buffer.size
+      }
+    });
+    if (visibleBuffer) {
+      entries.push({
+        binding: 3,
+        resource: {
+          buffer: visibleBuffer,
+          offset: 0,
+          size: visibleBuffer.size
+        }
+      });
+    }
+    const group = this.device.createBindGroup({
+      label: "ice3:storage-instance-pipeline",
+      layout: visibleBuffer ? this.gpuDrivenPipeline.bindGroupLayout : this.storagePipeline.bindGroupLayout,
+      entries
+    });
+    this.storageBindGroups.set(page.buffer, {
+      key,
+      ...visibleBuffer ? { visibleBuffer } : {},
+      group
+    });
+    return group;
+  }
+  reportOptimizationFailure(layer, reason) {
+    const key = `${layer}/${reason}`;
+    if (this.optimizationWarnings.has(key))
+      return;
+    this.optimizationWarnings.add(key);
+    this.onError?.(new ICEEngineError("ICE3_RENDERER_OPTIMIZATION_UNAVAILABLE", `ICE3_RENDERER_OPTIMIZATION_UNAVAILABLE: ${key}`, { layer, reason }));
+  }
+  requireGeometryCache() {
+    if (!this.geometryCache) {
+      throw new ICEEngineError("ICE3_ENGINE_NOT_READY", "Renderer is not initialized");
+    }
+    return this.geometryCache;
+  }
+  ensureUniformCapacity(draws) {
+    if (draws <= this.uniformCapacity && this.uniformBuffer)
+      return;
+    let capacity = Math.max(UNIFORM_BUFFER_INITIAL_DRAWS, drawCountPowerOfTwo2(draws));
+    this.uniformBuffer?.destroy();
+    this.uniformBuffer = this.device.createBuffer({
+      label: "ice3:frame-uniforms",
+      size: capacity * WEBGPU_UNIFORM_STRIDE,
+      usage: UNIFORM_USAGE2
+    });
+    this.uniformCapacity = capacity;
+    this.uniformBufferGeneration += 1;
+    this.frameBindGroup = null;
+    this.bundleCache.invalidate();
+  }
+  watchDevice(device) {
+    void device.lost.then((info) => {
+      if (this.disposing || device !== this.device || info.reason === "destroyed") {
+        return;
+      }
+      void this.recoverDevice();
+    });
+  }
+  async recoverDevice() {
+    this.releaseProbe?.();
+    this.onContextLost?.();
+    this.geometryCache?.dispose();
+    this.bundleCache.dispose();
+    this.instanceCache?.dispose();
+    this.picker?.dispose();
+    this.selectionMaskBuffer?.dispose();
+    this.storageCache?.dispose();
+    this.timestampProfiler?.dispose();
+    this.identityInstances?.destroy();
+    this.zeroSemantics?.destroy();
+    this.uniformBuffer?.destroy();
+    this.depthTexture?.destroy();
+    this.geometryCache = null;
+    this.instanceCache = null;
+    this.selectionMaskBuffer = null;
+    this.storageCache = null;
+    this.picker = null;
+    this.timestampProfiler = null;
+    this.identityInstances = null;
+    this.zeroSemantics = null;
+    this.uniformBuffer = null;
+    this.depthTexture = null;
+    this.uniformCapacity = 0;
+    this.frameBindGroup = null;
+    this.bundleActive = true;
+    this.optimizationWarnings.clear();
+    this.storagePipeline = null;
+    this.storageBindGroups.clear();
+    this.renderPlan.invalidate();
+    try {
+      const features = this.device.features.has("timestamp-query") ? ["timestamp-query"] : [];
+      const device = await this.adapter.requestDevice({
+        ...features.length > 0 ? { requiredFeatures: features } : {}
+      });
+      let selectionMaskBuffer = null;
+      let pipeline;
+      try {
+        selectionMaskBuffer = new WebGPUSelectionMaskBuffer(device);
+        selectionMaskBuffer.update(new Uint32Array([0]));
+        pipeline = await WebGPURenderPipeline.create(device, this.format, { selectionMask: true });
+      } catch {
+        selectionMaskBuffer?.dispose();
+        selectionMaskBuffer = null;
+        pipeline = await WebGPURenderPipeline.create(device, this.format);
+      }
+      if (this.disposing) {
+        selectionMaskBuffer?.dispose();
+        device.destroy();
+        return;
+      }
+      this.device = device;
+      this.pipeline = pipeline;
+      this.selectionMaskBuffer = selectionMaskBuffer;
+      this.bundleCache = new WebGPUBundleCache(device, this.format);
+      this.watchDevice(device);
+      if (this.canvas) {
+        this.initialize({
+          canvas: this.canvas,
+          ...this.onContextLost ? { onContextLost: this.onContextLost } : {},
+          ...this.onContextRestored ? { onContextRestored: this.onContextRestored } : {}
+        });
+        this.resize(this.viewport, this.dpr);
+      }
+      this.onContextRestored?.();
+    } catch (error) {
+      if (this.disposing)
+        return;
+      this.onError?.(new ICEEngineError("ICE3_WEBGPU_DEVICE_LOST", `ICE3_WEBGPU_DEVICE_LOST: ${error instanceof Error ? error.message : String(error)}`, { cause: error }));
+    }
+  }
+};
+function drawCountPowerOfTwo2(value) {
+  let result = 1;
+  while (result < Math.max(1, value))
+    result *= 2;
+  return result;
+}
+async function pixelsToPng(bytes, width, height) {
+  const pixels = new Uint8ClampedArray(bytes.buffer, bytes.byteOffset, width * height * 4).slice();
+  if (typeof OffscreenCanvas !== "undefined") {
+    const canvas2 = new OffscreenCanvas(width, height);
+    const context2 = canvas2.getContext("2d");
+    if (!context2)
+      throw new Error("ICE3_GPU_RESOURCE_FAILED: 2D context");
+    const image2 = typeof ImageData === "undefined" ? { data: pixels, width, height } : new ImageData(pixels, width, height);
+    context2.putImageData(image2, 0, 0);
+    return canvas2.convertToBlob({ type: "image/png" });
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d");
+  if (!context)
+    throw new Error("ICE3_GPU_RESOURCE_FAILED: 2D context");
+  const image = typeof ImageData === "undefined" ? { data: pixels, width, height } : new ImageData(pixels, width, height);
+  context.putImageData(image, 0, 0);
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob)
+        resolve(blob);
+      else
+        reject(new Error("ICE3_GPU_RESOURCE_FAILED: PNG encoding failed"));
+    }, "image/png");
+  });
+}
+
+// packages/renderer/dist/RendererSelection.js
+async function selectRendererBackend(preference, factories) {
+  const startedAt = performance.now();
+  if (preference === "auto" || preference === "webgl2") {
+    const backend = factories.createWebGL2();
+    return {
+      backend,
+      selection: {
+        requested: preference,
+        selected: backend.capabilities.backend,
+        fallback: false,
+        experimental: false,
+        probeDurationMs: performance.now() - startedAt
+      }
+    };
+  }
+  try {
+    const backend = await factories.createWebGPU();
+    return {
+      backend,
+      selection: {
+        requested: preference,
+        selected: backend.capabilities.backend,
+        fallback: false,
+        experimental: true,
+        probeDurationMs: performance.now() - startedAt
+      }
+    };
+  } catch (error) {
+    if (preference === "webgpu") {
+      if (error instanceof ICEEngineError && error.code === "ICE3_WEBGPU_UNAVAILABLE") {
+        throw error;
+      }
+      throw new ICEEngineError("ICE3_WEBGPU_UNAVAILABLE", `ICE3_WEBGPU_UNAVAILABLE: ${error instanceof Error ? error.message : String(error)}`, { reason: failureReason(error) });
+    }
+    const backend = factories.createWebGL2();
+    const reason = failureReason(error);
+    return {
+      backend,
+      selection: {
+        requested: preference,
+        selected: backend.capabilities.backend,
+        fallback: true,
+        experimental: false,
+        probeDurationMs: performance.now() - startedAt,
+        ...reason ? { fallbackReason: reason } : {}
+      }
+    };
+  }
+}
+async function selectDefaultRendererBackend(preference) {
+  return selectRendererBackend(preference, {
+    createWebGPU: createDefaultWebGPU,
+    createWebGL2: () => new WebGL2RendererBackend()
+  });
+}
+async function createDefaultWebGPU() {
+  const result = await probeWebGPU();
+  if (!result.supported) {
+    throw new ICEEngineError("ICE3_WEBGPU_UNAVAILABLE", `ICE3_WEBGPU_UNAVAILABLE: ${result.reason}${result.detail ? `: ${result.detail}` : ""}`, { reason: result.reason });
+  }
+  try {
+    return await WebGPURendererBackend.create(result);
+  } catch (error) {
+    result.device.destroy();
+    result.release();
+    throw new ICEEngineError("ICE3_WEBGPU_UNAVAILABLE", `ICE3_WEBGPU_UNAVAILABLE: ${error instanceof Error ? error.message : String(error)}`, { reason: "pipeline-failed" });
+  }
+}
+function failureReason(error) {
+  const details = error?.details;
+  const reason = details?.reason;
+  return typeof reason === "string" ? reason : void 0;
+}
+
+// packages/renderer/dist/ICEWebGL2BatchGenerationUploader.js
+function queueBatchGeneration(buffers, options) {
+  if (!Number.isInteger(options.generation) || options.generation < 0 || !Number.isInteger(options.bytesPerFrame) || options.bytesPerFrame < 1 || buffers.some((buffer) => !Number.isInteger(buffer.byteLength) || buffer.byteLength < 1 || buffer.byteLength > options.bytesPerFrame)) {
+    fail(options, new Error("ICE3_RENDER_BATCH_UPLOAD_INVALID: upload options are invalid"));
+    return { cancel: () => void 0 };
+  }
+  const schedule = options.schedule ?? globalThis.requestAnimationFrame;
+  const cancelSchedule = options.cancelSchedule ?? globalThis.cancelAnimationFrame;
+  const upload = options.upload ?? ((buffer) => buffer);
+  const release = options.release ?? (() => void 0);
+  const resources = [];
+  let next = 0;
+  let frame;
+  let settled = false;
+  const cleanup = () => {
+    if (frame !== void 0) {
+      cancelSchedule(frame);
+      frame = void 0;
+    }
+    for (const resource of resources.splice(0))
+      release(resource);
+  };
+  const current = () => options.isCurrent?.() ?? true;
+  const failNow = (error) => {
+    if (settled)
+      return;
+    settled = true;
+    cleanup();
+    options.onFailed(options.generation, error);
+  };
+  const pump = () => {
+    frame = void 0;
+    if (settled)
+      return;
+    if (!current()) {
+      settled = true;
+      cleanup();
+      return;
+    }
+    let bytes = 0;
+    try {
+      while (next < buffers.length) {
+        const buffer = buffers[next];
+        if (resources.length > 0 && bytes + buffer.byteLength > options.bytesPerFrame) {
+          break;
+        }
+        bytes += buffer.byteLength;
+        next += 1;
+        resources.push(upload(buffer));
+      }
+    } catch (error) {
+      failNow(error);
+      return;
+    }
+    if (next >= buffers.length) {
+      if (!current()) {
+        settled = true;
+        cleanup();
+        return;
+      }
+      try {
+        options.onActivate?.(options.generation, resources);
+      } catch (error) {
+        failNow(error);
+        return;
+      }
+      settled = true;
       options.onUploaded(options.generation);
       return;
     }
@@ -2819,6 +5824,8 @@ var NAVIGATION_KEY_CODES = /* @__PURE__ */ new Set([
 ]);
 var ICE3 = class extends ICEEventDispatcher {
   backend;
+  rendererPreference;
+  rendererSelection;
   scheduler;
   interaction = new ICEInteractionState();
   layers = [];
@@ -2854,19 +5861,53 @@ var ICE3 = class extends ICEEventDispatcher {
   pointerGestures = /* @__PURE__ */ new Map();
   lastDiagnostic;
   instancingFallbackReported = false;
+  pickGeneration = 0;
   removeInputListeners = [];
   handleWindowResize = () => {
     this.resize();
   };
   constructor(options = {}) {
     super();
+    if (options.backend && options.renderer) {
+      throw new ICEEngineError("ICE3_RENDERER_CONFIG_INVALID", "ICE3_RENDERER_CONFIG_INVALID: backend injection cannot be combined with a renderer preference");
+    }
+    this.rendererPreference = options.renderer;
     this.backend = options.backend ?? new WebGL2RendererBackend();
+    this.rendererSelection = {
+      requested: options.backend ? "custom" : options.renderer ?? "webgl2",
+      selected: this.backend.capabilities.backend,
+      fallback: false,
+      experimental: this.backend.capabilities.backend === "webgpu"
+    };
     this.scheduler = options.scheduler ?? new BrowserRenderScheduler();
   }
   init(target) {
     if (this.state !== "created") {
       throw new ICEEngineError("ICE3_ALREADY_INITIALIZED", "ICE3 engine can only be initialized once");
     }
+    if (this.rendererPreference === "webgpu") {
+      throw new ICEEngineError("ICE3_RENDERER_ASYNC_REQUIRED", "ICE3_RENDERER_ASYNC_REQUIRED: webgpu requires initAsync()");
+    }
+    return this.initializeWithBackend(target);
+  }
+  async initAsync(target) {
+    if (this.state !== "created") {
+      throw new ICEEngineError("ICE3_ALREADY_INITIALIZED", "ICE3 engine can only be initialized once");
+    }
+    if (this.rendererSelection.requested === "custom") {
+      return this.initializeWithBackend(target);
+    }
+    const selected = await selectDefaultRendererBackend(this.rendererPreference ?? "webgl2");
+    this.backend = selected.backend;
+    this.rendererSelection = selected.selection;
+    try {
+      return this.initializeWithBackend(target);
+    } catch (error) {
+      selected.backend.dispose();
+      throw error;
+    }
+  }
+  initializeWithBackend(target) {
     if (typeof target === "string") {
       const element = document.querySelector(target);
       if (!element) {
@@ -2896,6 +5937,11 @@ var ICE3 = class extends ICEEventDispatcher {
           this.recordDiagnostic("ICE3_CONTEXT_RESTORED", "The GPU context was restored", "info");
           this.trigger("CONTEXT_RESTORED");
           this.requestRender("context-restored");
+        },
+        onError: (error) => {
+          if (this.state === "destroyed")
+            return;
+          this.recordDiagnostic(error.code, error.message, "error");
         }
       });
       window.addEventListener("resize", this.handleWindowResize);
@@ -3034,23 +6080,34 @@ var ICE3 = class extends ICEEventDispatcher {
     this.requestRender("selection-changed");
     return this;
   }
-  pick(point) {
-    const result = this.samplePick(point);
+  async pick(point) {
+    const result = await this.samplePick(point);
     return result.kind === "hit" ? result.node : void 0;
   }
-  pickItem(point) {
-    const node = this.pick(point);
+  async pickItem(point) {
+    const node = await this.pick(point);
     if (!node)
       return Object.freeze({});
-    const item = this.queryScene({ ids: [node.id], limit: 1 })[0];
+    const item = this.queryScene({
+      selectionIds: [node.selectionId ?? node.id],
+      limit: 1
+    })[0];
     return Object.freeze(item ? { item } : {});
   }
+  async capture() {
+    this.assertActive();
+    if (!this.backend.capture) {
+      throw new ICEEngineError("ICE3_CAPTURE_UNAVAILABLE", "ICE3_CAPTURE_UNAVAILABLE: the active renderer cannot capture pixels");
+    }
+    return this.backend.capture();
+  }
   getDiagnostics() {
     return {
       frameId: this.frameId,
       fps: this.fps,
       cpuFrameTimeMs: this.cpuFrameTimeMs,
       backend: this.backend.capabilities,
+      rendererSelection: this.rendererSelection,
       nodeCount: this.scene ? countNodes(this.scene) : 0,
       layerCount: this.layers.length,
       labelCount: this.layers.reduce((total, layer) => total + layer.getLabels().length, 0),
@@ -3251,13 +6308,18 @@ var ICE3 = class extends ICEEventDispatcher {
       }
       this.inputRouter.pointerMove(point, event.pointerId);
     });
-    listen("pointerup", (event) => {
+    listen("pointerup", async (event) => {
       const point = pointOf(event);
       const gesture = this.pointerGestures.get(event.pointerId);
       this.inputRouter.pointerUp(point, event.pointerId);
       this.pointerGestures.delete(event.pointerId);
+      overlay.releasePointerCapture?.(event.pointerId);
       if (gesture && gesture.target.kind === "scene" && !gesture.dragged && isSelectionClick(gesture.start, point)) {
-        const result = this.samplePick(point);
+        const generation = ++this.pickGeneration;
+        const result = await this.samplePick(point);
+        if (generation !== this.pickGeneration || this.state === "destroyed") {
+          return;
+        }
         const outcome = result.kind === "hit" ? {
           kind: "hit",
           id: result.selectionId
@@ -3267,7 +6329,6 @@ var ICE3 = class extends ICEEventDispatcher {
           this.setSelection(nextSelection);
         }
       }
-      overlay.releasePointerCapture?.(event.pointerId);
     });
     listen("pointercancel", (event) => {
       this.inputRouter.pointerCancel(event.pointerId);
@@ -3325,7 +6386,7 @@ var ICE3 = class extends ICEEventDispatcher {
     }[event.type];
     this.trigger(eventName, { target, event });
   }
-  samplePick(point) {
+  async samplePick(point) {
     this.assertActive();
     if (!this.scene || !this.camera) {
       return { kind: "empty" };
@@ -3333,7 +6394,7 @@ var ICE3 = class extends ICEEventDispatcher {
     if (this.backend.capabilities.picking && this.backend.pick) {
       const startedAt = performance.now();
       try {
-        const selectionId = this.backend.pick({
+        const selectionId = await this.backend.pick({
           frameId: this.frameId,
           scene: this.scene,
           camera: this.camera,