@d5techs/3dgs-lib 1.4.75 → 1.4.76

package/dist/3dgs-lib.cjs

@@ -17568,213 +17568,212 @@ class EyedropperSelection {
   }
 }
 class SphereSelection {
-  constructor(parent, onSelect) {
+  constructor(parent, callbacks) {
     __publicField(this, "parent");
-    __publicField(this, "svg");
-    __publicField(this, "circle");
-    __publicField(this, "onSelect");
-    __publicField(this, "center", { x: 0, y: 0 });
-    __publicField(this, "radiusPx", 0);
-    __publicField(this, "dragId");
+    __publicField(this, "toolbar");
+    __publicField(this, "callbacks");
+    __publicField(this, "_radius", 1);
+    __publicField(this, "radiusInput");
     this.parent = parent;
-    this.onSelect = onSelect;
-    this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    this.svg.classList.add("tool-svg");
-    this.svg.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:none;z-index:10;";
-    parent.appendChild(this.svg);
-    this.circle = document.createElementNS(
-      this.svg.namespaceURI,
-      "circle"
-    );
-    this.circle.setAttribute("fill", "rgba(0,150,255,0.12)");
-    this.circle.setAttribute("stroke", "#09f");
-    this.circle.setAttribute("stroke-width", "1.5");
-    this.circle.setAttribute("stroke-dasharray", "6 3");
-    this.circle.style.display = "none";
-    this.svg.appendChild(this.circle);
-    this.pointerdown = this.pointerdown.bind(this);
-    this.pointermove = this.pointermove.bind(this);
-    this.pointerup = this.pointerup.bind(this);
-  }
-  activate() {
-    this.svg.style.display = "block";
-    this.parent.style.cursor = "crosshair";
-    this.parent.addEventListener("pointerdown", this.pointerdown);
-    this.parent.addEventListener("pointermove", this.pointermove);
-    this.parent.addEventListener("pointerup", this.pointerup);
-  }
-  deactivate() {
-    if (this.dragId !== void 0) this.dragEnd();
-    this.svg.style.display = "none";
-    this.parent.style.cursor = "";
-    this.parent.removeEventListener("pointerdown", this.pointerdown);
-    this.parent.removeEventListener("pointermove", this.pointermove);
-    this.parent.removeEventListener("pointerup", this.pointerup);
-  }
-  updateCircle() {
-    this.circle.setAttribute("cx", this.center.x.toString());
-    this.circle.setAttribute("cy", this.center.y.toString());
-    this.circle.setAttribute("r", Math.max(1, this.radiusPx).toString());
+    this.callbacks = callbacks;
+    this.toolbar = document.createElement("div");
+    this.toolbar.className = "volume-select-toolbar";
+    this.toolbar.style.cssText = `
+      position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
+      display:none; z-index:20; background:rgba(30,30,30,0.92);
+      border-radius:8px; padding:6px 10px; gap:6px;
+      align-items:center; font-size:13px; color:#ddd;
+      backdrop-filter:blur(6px); user-select:none; white-space:nowrap;
+      box-shadow:0 2px 12px rgba(0,0,0,0.4);
+    `;
+    this.toolbar.addEventListener("pointerdown", (e) => e.stopPropagation());
+    this.toolbar.addEventListener("wheel", (e) => e.stopPropagation());
+    const mkBtn = (label2, op) => {
+      const btn = document.createElement("button");
+      btn.textContent = label2;
+      btn.style.cssText = `
+        padding:4px 12px; border:1px solid #555; border-radius:4px;
+        background:#333; color:#ddd; cursor:pointer; font-size:13px;
+        transition: background 0.15s;
+      `;
+      btn.addEventListener("mouseenter", () => {
+        btn.style.background = "#555";
+      });
+      btn.addEventListener("mouseleave", () => {
+        btn.style.background = "#333";
+      });
+      btn.addEventListener("pointerdown", (e) => {
+        e.stopPropagation();
+        this.callbacks.onApply(op);
+      });
+      return btn;
+    };
+    const setBtn = mkBtn("Set", "set");
+    const addBtn = mkBtn("Add", "add");
+    const removeBtn = mkBtn("Remove", "remove");
+    const inputWrap = document.createElement("span");
+    inputWrap.style.cssText = "display:inline-flex; align-items:center; gap:2px;";
+    const input = document.createElement("input");
+    input.type = "number";
+    input.min = "0.01";
+    input.step = "0.1";
+    input.value = this._radius.toFixed(2);
+    input.style.cssText = `
+      width:50px; padding:3px 4px; border:1px solid #555; border-radius:4px;
+      background:#222; color:#ddd; font-size:12px; text-align:center;
+    `;
+    const label = document.createElement("span");
+    label.textContent = "Radius";
+    label.style.cssText = "color:#888; font-size:11px;";
+    input.addEventListener("change", () => {
+      const v = Math.max(0.01, parseFloat(input.value) || 0.01);
+      input.value = v.toFixed(2);
+      this._radius = v;
+      this.callbacks.onRadiusChanged(v);
+    });
+    inputWrap.appendChild(input);
+    inputWrap.appendChild(label);
+    this.radiusInput = input;
+    this.toolbar.appendChild(setBtn);
+    this.toolbar.appendChild(addBtn);
+    this.toolbar.appendChild(removeBtn);
+    this.toolbar.appendChild(inputWrap);
+    parent.appendChild(this.toolbar);
   }
-  pointerdown(e) {
-    if (this.dragId !== void 0) return;
-    if (e.pointerType === "mouse" ? e.button !== 0 : !e.isPrimary) return;
-    e.preventDefault();
-    e.stopPropagation();
-    this.dragId = e.pointerId;
-    this.parent.setPointerCapture(this.dragId);
-    this.center.x = e.offsetX;
-    this.center.y = e.offsetY;
-    this.radiusPx = 0;
-    this.updateCircle();
-    this.circle.style.display = "block";
+  get radius() {
+    return this._radius;
   }
-  pointermove(e) {
-    if (e.pointerId !== this.dragId) return;
-    e.preventDefault();
-    e.stopPropagation();
-    const dx = e.offsetX - this.center.x;
-    const dy = e.offsetY - this.center.y;
-    this.radiusPx = Math.sqrt(dx * dx + dy * dy);
-    this.updateCircle();
+  setRadius(radius) {
+    this._radius = radius;
+    this.radiusInput.value = radius.toFixed(2);
   }
-  dragEnd() {
-    if (this.dragId !== void 0) {
-      this.parent.releasePointerCapture(this.dragId);
-      this.dragId = void 0;
-    }
-    this.circle.style.display = "none";
+  activate() {
+    this.toolbar.style.display = "flex";
   }
-  pointerup(e) {
-    if (e.pointerId !== this.dragId) return;
-    e.preventDefault();
-    e.stopPropagation();
-    const selectOp = e.shiftKey ? "add" : e.ctrlKey ? "remove" : "set";
-    if (this.radiusPx < 3) this.radiusPx = 20;
-    this.onSelect(selectOp, { x: this.center.x, y: this.center.y }, this.radiusPx);
-    this.dragEnd();
+  deactivate() {
+    this.toolbar.style.display = "none";
   }
 }
 class BoxSelection {
-  constructor(parent, onSelect) {
+  constructor(parent, callbacks) {
     __publicField(this, "parent");
-    __publicField(this, "svg");
-    __publicField(this, "rect");
-    __publicField(this, "crossV");
-    __publicField(this, "crossH");
-    __publicField(this, "onSelect");
-    __publicField(this, "center", { x: 0, y: 0 });
-    __publicField(this, "halfW", 0);
-    __publicField(this, "halfH", 0);
-    __publicField(this, "dragId");
+    __publicField(this, "toolbar");
+    __publicField(this, "callbacks");
+    __publicField(this, "_lenX", 2);
+    __publicField(this, "_lenY", 2);
+    __publicField(this, "_lenZ", 2);
+    __publicField(this, "inputX");
+    __publicField(this, "inputY");
+    __publicField(this, "inputZ");
     this.parent = parent;
-    this.onSelect = onSelect;
-    this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    this.svg.classList.add("tool-svg");
-    this.svg.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:none;z-index:10;";
-    parent.appendChild(this.svg);
-    this.rect = document.createElementNS(
-      this.svg.namespaceURI,
-      "rect"
-    );
-    this.rect.setAttribute("fill", "rgba(0,200,100,0.12)");
-    this.rect.setAttribute("stroke", "#0c6");
-    this.rect.setAttribute("stroke-width", "1.5");
-    this.rect.setAttribute("stroke-dasharray", "6 3");
-    this.rect.style.display = "none";
-    this.svg.appendChild(this.rect);
-    const mkLine = () => {
-      const l = document.createElementNS(this.svg.namespaceURI, "line");
-      l.setAttribute("stroke", "#0c6");
-      l.setAttribute("stroke-width", "1");
-      l.setAttribute("stroke-dasharray", "3 3");
-      l.style.display = "none";
-      this.svg.appendChild(l);
-      return l;
+    this.callbacks = callbacks;
+    this.toolbar = document.createElement("div");
+    this.toolbar.className = "volume-select-toolbar";
+    this.toolbar.style.cssText = `
+      position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
+      display:none; z-index:20; background:rgba(30,30,30,0.92);
+      border-radius:8px; padding:6px 10px; gap:6px;
+      align-items:center; font-size:13px; color:#ddd;
+      backdrop-filter:blur(6px); user-select:none; white-space:nowrap;
+      box-shadow:0 2px 12px rgba(0,0,0,0.4);
+    `;
+    this.toolbar.addEventListener("pointerdown", (e) => e.stopPropagation());
+    this.toolbar.addEventListener("wheel", (e) => e.stopPropagation());
+    const mkBtn = (label, op) => {
+      const btn = document.createElement("button");
+      btn.textContent = label;
+      btn.style.cssText = `
+        padding:4px 12px; border:1px solid #555; border-radius:4px;
+        background:#333; color:#ddd; cursor:pointer; font-size:13px;
+        transition: background 0.15s;
+      `;
+      btn.addEventListener("mouseenter", () => {
+        btn.style.background = "#555";
+      });
+      btn.addEventListener("mouseleave", () => {
+        btn.style.background = "#333";
+      });
+      btn.addEventListener("pointerdown", (e) => {
+        e.stopPropagation();
+        this.callbacks.onApply(op);
+      });
+      return btn;
     };
-    this.crossV = mkLine();
-    this.crossH = mkLine();
-    this.pointerdown = this.pointerdown.bind(this);
-    this.pointermove = this.pointermove.bind(this);
-    this.pointerup = this.pointerup.bind(this);
+    const mkInput = (placeholder, initial, onChange) => {
+      const wrap = document.createElement("span");
+      wrap.style.cssText = "display:inline-flex; align-items:center; gap:2px;";
+      const input = document.createElement("input");
+      input.type = "number";
+      input.min = "0.01";
+      input.step = "0.1";
+      input.value = initial.toFixed(2);
+      input.style.cssText = `
+        width:50px; padding:3px 4px; border:1px solid #555; border-radius:4px;
+        background:#222; color:#ddd; font-size:12px; text-align:center;
+      `;
+      const label = document.createElement("span");
+      label.textContent = placeholder;
+      label.style.cssText = "color:#888; font-size:11px;";
+      input.addEventListener("change", () => {
+        const v = Math.max(0.01, parseFloat(input.value) || 0.01);
+        input.value = v.toFixed(2);
+        onChange(v);
+      });
+      wrap.appendChild(input);
+      wrap.appendChild(label);
+      return { wrap, input };
+    };
+    const setBtn = mkBtn("Set", "set");
+    const addBtn = mkBtn("Add", "add");
+    const removeBtn = mkBtn("Remove", "remove");
+    const xInput = mkInput("LenX", this._lenX, (v) => {
+      this._lenX = v;
+      this.emitDims();
+    });
+    const yInput = mkInput("LenY", this._lenY, (v) => {
+      this._lenY = v;
+      this.emitDims();
+    });
+    const zInput = mkInput("LenZ", this._lenZ, (v) => {
+      this._lenZ = v;
+      this.emitDims();
+    });
+    this.inputX = xInput.input;
+    this.inputY = yInput.input;
+    this.inputZ = zInput.input;
+    this.toolbar.appendChild(setBtn);
+    this.toolbar.appendChild(addBtn);
+    this.toolbar.appendChild(removeBtn);
+    this.toolbar.appendChild(xInput.wrap);
+    this.toolbar.appendChild(yInput.wrap);
+    this.toolbar.appendChild(zInput.wrap);
+    parent.appendChild(this.toolbar);
+  }
+  get lenX() {
+    return this._lenX;
+  }
+  get lenY() {
+    return this._lenY;
+  }
+  get lenZ() {
+    return this._lenZ;
+  }
+  setDimensions(lenX, lenY, lenZ) {
+    this._lenX = lenX;
+    this._lenY = lenY;
+    this._lenZ = lenZ;
+    this.inputX.value = lenX.toFixed(2);
+    this.inputY.value = lenY.toFixed(2);
+    this.inputZ.value = lenZ.toFixed(2);
   }
   activate() {
-    this.svg.style.display = "block";
-    this.parent.style.cursor = "crosshair";
-    this.parent.addEventListener("pointerdown", this.pointerdown);
-    this.parent.addEventListener("pointermove", this.pointermove);
-    this.parent.addEventListener("pointerup", this.pointerup);
+    this.toolbar.style.display = "flex";
   }
   deactivate() {
-    if (this.dragId !== void 0) this.dragEnd();
-    this.svg.style.display = "none";
-    this.parent.style.cursor = "";
-    this.parent.removeEventListener("pointerdown", this.pointerdown);
-    this.parent.removeEventListener("pointermove", this.pointermove);
-    this.parent.removeEventListener("pointerup", this.pointerup);
+    this.toolbar.style.display = "none";
   }
-  updateVisuals() {
-    const x = this.center.x - this.halfW;
-    const y = this.center.y - this.halfH;
-    const w = this.halfW * 2;
-    const h = this.halfH * 2;
-    this.rect.setAttribute("x", x.toString());
-    this.rect.setAttribute("y", y.toString());
-    this.rect.setAttribute("width", Math.max(1, w).toString());
-    this.rect.setAttribute("height", Math.max(1, h).toString());
-    this.crossV.setAttribute("x1", this.center.x.toString());
-    this.crossV.setAttribute("y1", y.toString());
-    this.crossV.setAttribute("x2", this.center.x.toString());
-    this.crossV.setAttribute("y2", (y + h).toString());
-    this.crossH.setAttribute("x1", x.toString());
-    this.crossH.setAttribute("y1", this.center.y.toString());
-    this.crossH.setAttribute("x2", (x + w).toString());
-    this.crossH.setAttribute("y2", this.center.y.toString());
-  }
-  pointerdown(e) {
-    if (this.dragId !== void 0) return;
-    if (e.pointerType === "mouse" ? e.button !== 0 : !e.isPrimary) return;
-    e.preventDefault();
-    e.stopPropagation();
-    this.dragId = e.pointerId;
-    this.parent.setPointerCapture(this.dragId);
-    this.center.x = e.offsetX;
-    this.center.y = e.offsetY;
-    this.halfW = 0;
-    this.halfH = 0;
-    this.updateVisuals();
-    this.rect.style.display = "block";
-    this.crossV.style.display = "block";
-    this.crossH.style.display = "block";
-  }
-  pointermove(e) {
-    if (e.pointerId !== this.dragId) return;
-    e.preventDefault();
-    e.stopPropagation();
-    this.halfW = Math.abs(e.offsetX - this.center.x);
-    this.halfH = Math.abs(e.offsetY - this.center.y);
-    this.updateVisuals();
-  }
-  dragEnd() {
-    if (this.dragId !== void 0) {
-      this.parent.releasePointerCapture(this.dragId);
-      this.dragId = void 0;
-    }
-    this.rect.style.display = "none";
-    this.crossV.style.display = "none";
-    this.crossH.style.display = "none";
-  }
-  pointerup(e) {
-    if (e.pointerId !== this.dragId) return;
-    e.preventDefault();
-    e.stopPropagation();
-    const selectOp = e.shiftKey ? "add" : e.ctrlKey ? "remove" : "set";
-    if (this.halfW < 3 && this.halfH < 3) {
-      this.halfW = 20;
-      this.halfH = 20;
-    }
-    this.onSelect(selectOp, { x: this.center.x, y: this.center.y }, this.halfW, this.halfH);
-    this.dragEnd();
+  emitDims() {
+    this.callbacks.onDimensionsChanged(this._lenX, this._lenY, this._lenZ);
   }
 }
 function exportEditedPLY(positions, scales, rotations, colors, opacities, shCoeffs, state) {
@@ -17878,9 +17877,205 @@ function exportEditedPLY(positions, scales, rotations, colors, opacities, shCoef
   }
   return buffer;
 }
+const SPHERE_SEGMENTS = 64;
+const SPHERE_RINGS = 3;
+class SelectionVolumeRenderer {
+  constructor(renderer, camera) {
+    __publicField(this, "renderer");
+    __publicField(this, "camera");
+    __publicField(this, "pipeline", null);
+    __publicField(this, "uniformBuffer", null);
+    __publicField(this, "bindGroup", null);
+    __publicField(this, "vertexBuffer", null);
+    __publicField(this, "_volume", { type: null, center: [0, 0, 0], dimensions: [2, 2, 2] });
+    __publicField(this, "vertexCount", 0);
+    __publicField(this, "maxVertices");
+    __publicField(this, "lineColor", [0.2, 0.8, 1]);
+    this.renderer = renderer;
+    this.camera = camera;
+    this.maxVertices = Math.max(
+      24,
+      SPHERE_SEGMENTS * 2 * SPHERE_RINGS
+    );
+    this.createPipeline();
+    this.createVertexBuffer();
+  }
+  get volume() {
+    return this._volume;
+  }
+  setVolume(type, center, dimensions) {
+    this._volume.type = type;
+    if (center) this._volume.center = center;
+    if (dimensions) this._volume.dimensions = dimensions;
+  }
+  setCenter(x, y, z) {
+    this._volume.center = [x, y, z];
+  }
+  setDimensions(a, b, c) {
+    this._volume.dimensions = [a, b, c];
+  }
+  createPipeline() {
+    const device = this.renderer.device;
+    const shaderCode = (
+      /* wgsl */
+      `
+      struct Uniforms { viewProjection: mat4x4<f32> }
+      @group(0) @binding(0) var<uniform> uniforms: Uniforms;
+
+      struct VI { @location(0) position: vec3<f32>, @location(1) color: vec3<f32> }
+      struct VO { @builtin(position) position: vec4<f32>, @location(0) color: vec3<f32> }
+
+      @vertex fn vs(i: VI) -> VO {
+        var o: VO;
+        o.position = uniforms.viewProjection * vec4(i.position, 1.0);
+        o.color = i.color;
+        return o;
+      }
+      @fragment fn fs(i: VO) -> @location(0) vec4<f32> {
+        return vec4(i.color, 0.8);
+      }
+    `
+    );
+    const sm = device.createShaderModule({ code: shaderCode });
+    this.uniformBuffer = device.createBuffer({ size: 64, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+    const bgl = device.createBindGroupLayout({
+      entries: [{ binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: "uniform" } }]
+    });
+    this.bindGroup = device.createBindGroup({ layout: bgl, entries: [{ binding: 0, resource: { buffer: this.uniformBuffer } }] });
+    this.pipeline = device.createRenderPipeline({
+      layout: device.createPipelineLayout({ bindGroupLayouts: [bgl] }),
+      vertex: {
+        module: sm,
+        entryPoint: "vs",
+        buffers: [{
+          arrayStride: 24,
+          attributes: [
+            { shaderLocation: 0, offset: 0, format: "float32x3" },
+            { shaderLocation: 1, offset: 12, format: "float32x3" }
+          ]
+        }]
+      },
+      fragment: {
+        module: sm,
+        entryPoint: "fs",
+        targets: [{
+          format: this.renderer.format,
+          blend: {
+            color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha", operation: "add" },
+            alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" }
+          }
+        }]
+      },
+      primitive: { topology: "line-list", cullMode: "none" },
+      depthStencil: { format: this.renderer.depthFormat, depthWriteEnabled: false, depthCompare: "always" }
+    });
+  }
+  createVertexBuffer() {
+    const size = this.maxVertices * 24;
+    this.vertexBuffer = this.renderer.device.createBuffer({
+      size,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+    });
+  }
+  generateBoxVertices() {
+    const [cx, cy, cz] = this._volume.center;
+    const [lx, ly, lz] = this._volume.dimensions;
+    const hx = lx / 2, hy = ly / 2, hz = lz / 2;
+    const [r, g, b] = this.lineColor;
+    const v = [];
+    const addLine = (x12, y12, z12, x2, y2, z2) => {
+      v.push(x12, y12, z12, r, g, b, x2, y2, z2, r, g, b);
+    };
+    const x0 = cx - hx, x1 = cx + hx;
+    const y0 = cy - hy, y1 = cy + hy;
+    const z0 = cz - hz, z1 = cz + hz;
+    addLine(x0, y0, z0, x1, y0, z0);
+    addLine(x1, y0, z0, x1, y0, z1);
+    addLine(x1, y0, z1, x0, y0, z1);
+    addLine(x0, y0, z1, x0, y0, z0);
+    addLine(x0, y1, z0, x1, y1, z0);
+    addLine(x1, y1, z0, x1, y1, z1);
+    addLine(x1, y1, z1, x0, y1, z1);
+    addLine(x0, y1, z1, x0, y1, z0);
+    addLine(x0, y0, z0, x0, y1, z0);
+    addLine(x1, y0, z0, x1, y1, z0);
+    addLine(x1, y0, z1, x1, y1, z1);
+    addLine(x0, y0, z1, x0, y1, z1);
+    return new Float32Array(v);
+  }
+  generateSphereVertices() {
+    const [cx, cy, cz] = this._volume.center;
+    const radius = this._volume.dimensions[0];
+    const [r, g, b] = this.lineColor;
+    const v = [];
+    const seg = SPHERE_SEGMENTS;
+    const addCircle = (axis) => {
+      for (let i = 0; i < seg; i++) {
+        const a0 = i / seg * Math.PI * 2;
+        const a1 = (i + 1) / seg * Math.PI * 2;
+        let x0, y0, z0, x1, y1, z1;
+        if (axis === "y") {
+          x0 = cx + Math.cos(a0) * radius;
+          y0 = cy;
+          z0 = cz + Math.sin(a0) * radius;
+          x1 = cx + Math.cos(a1) * radius;
+          y1 = cy;
+          z1 = cz + Math.sin(a1) * radius;
+        } else if (axis === "x") {
+          x0 = cx;
+          y0 = cy + Math.cos(a0) * radius;
+          z0 = cz + Math.sin(a0) * radius;
+          x1 = cx;
+          y1 = cy + Math.cos(a1) * radius;
+          z1 = cz + Math.sin(a1) * radius;
+        } else {
+          x0 = cx + Math.cos(a0) * radius;
+          y0 = cy + Math.sin(a0) * radius;
+          z0 = cz;
+          x1 = cx + Math.cos(a1) * radius;
+          y1 = cy + Math.sin(a1) * radius;
+          z1 = cz;
+        }
+        v.push(x0, y0, z0, r, g, b, x1, y1, z1, r, g, b);
+      }
+    };
+    addCircle("x");
+    addCircle("y");
+    addCircle("z");
+    return new Float32Array(v);
+  }
+  render(pass) {
+    if (!this._volume.type || !this.pipeline || !this.bindGroup || !this.vertexBuffer || !this.uniformBuffer) return;
+    const device = this.renderer.device;
+    const verts = this._volume.type === "box" ? this.generateBoxVertices() : this.generateSphereVertices();
+    this.vertexCount = verts.length / 6;
+    if (this.vertexCount === 0) return;
+    const needed = this.vertexCount * 24;
+    if (needed > this.vertexBuffer.size) {
+      this.vertexBuffer.destroy();
+      this.vertexBuffer = device.createBuffer({ size: needed, usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST });
+    }
+    device.queue.writeBuffer(this.vertexBuffer, 0, verts.buffer);
+    device.queue.writeBuffer(this.uniformBuffer, 0, new Float32Array(this.camera.viewProjectionMatrix));
+    pass.setPipeline(this.pipeline);
+    pass.setBindGroup(0, this.bindGroup);
+    pass.setVertexBuffer(0, this.vertexBuffer);
+    pass.draw(this.vertexCount);
+  }
+  destroy() {
+    var _a2, _b2;
+    (_a2 = this.vertexBuffer) == null ? void 0 : _a2.destroy();
+    (_b2 = this.uniformBuffer) == null ? void 0 : _b2.destroy();
+    this.vertexBuffer = null;
+    this.uniformBuffer = null;
+    this.pipeline = null;
+    this.bindGroup = null;
+  }
+}
 class SplatEditor {
-  constructor(camera, gsRenderer, container, callbacks = {}) {
+  constructor(camera, gsRenderer, container, callbacks = {}, renderer) {
     __publicField(this, "camera");
+    __publicField(this, "gpuRenderer");
     __publicField(this, "gsRenderer");
     __publicField(this, "container");
     __publicField(this, "splatState");
@@ -17895,6 +18090,10 @@ class SplatEditor {
     __publicField(this, "projDirty", true);
     __publicField(this, "_active", false);
     __publicField(this, "overlayCleanup", []);
+    /** 体积选择线框渲染器 */
+    __publicField(this, "volumeRenderer", null);
+    __publicField(this, "boxTool", null);
+    __publicField(this, "sphereTool", null);
     // ============================================
     // 键盘快捷键
     // ============================================
@@ -17903,6 +18102,7 @@ class SplatEditor {
     this.gsRenderer = gsRenderer;
     this.container = container;
     this.callbacks = callbacks;
+    this.gpuRenderer = renderer;
   }
   get active() {
     return this._active;
@@ -17949,9 +18149,20 @@ class SplatEditor {
       this.container.style.position = "relative";
     }
     this.toolManager = new ToolManager((name) => {
-      var _a2, _b2;
-      this.toolOverlay.style.display = name ? "block" : "none";
-      (_b2 = (_a2 = this.callbacks).onToolChanged) == null ? void 0 : _b2.call(_a2, name);
+      var _a2, _b2, _c, _d, _e, _f;
+      const isVolumeTool = name === "box" || name === "sphere";
+      this.toolOverlay.style.display = name && !isVolumeTool ? "block" : "none";
+      if (isVolumeTool && this.volumeRenderer) {
+        const volType = name;
+        const center = this.getModelCenter();
+        const dims = volType === "box" ? [this.boxTool.lenX, this.boxTool.lenY, this.boxTool.lenZ] : [this.sphereTool.radius, 0, 0];
+        this.volumeRenderer.setVolume(volType, center, dims);
+        (_b2 = (_a2 = this.callbacks).onVolumeToolActivated) == null ? void 0 : _b2.call(_a2, this.volumeRenderer.volume);
+      } else {
+        if (this.volumeRenderer) this.volumeRenderer.setVolume(null);
+        (_d = (_c = this.callbacks).onVolumeToolDeactivated) == null ? void 0 : _d.call(_c);
+      }
+      (_f = (_e = this.callbacks).onToolChanged) == null ? void 0 : _f.call(_e, name);
     });
     this.toolManager.register("rect", new RectSelection(
       this.toolOverlay,
@@ -17987,24 +18198,42 @@ class SplatEditor {
       this.toolOverlay,
       (op, pt, threshold) => this.selectByColor(op, pt, threshold)
     ));
-    this.toolManager.register("sphere", new SphereSelection(
-      this.toolOverlay,
-      (op, centerPx, radiusPx) => this.selectBySphere(op, centerPx, radiusPx)
-    ));
-    this.toolManager.register("box", new BoxSelection(
-      this.toolOverlay,
-      (op, centerPx, halfW, halfH) => this.selectByBox(op, centerPx, halfW, halfH)
-    ));
+    if (this.gpuRenderer) {
+      this.volumeRenderer = new SelectionVolumeRenderer(this.gpuRenderer, this.camera);
+    }
+    this.sphereTool = new SphereSelection(this.container, {
+      onApply: (op) => this.applyVolumeSelection(op),
+      onRadiusChanged: (radius) => {
+        var _a2;
+        (_a2 = this.volumeRenderer) == null ? void 0 : _a2.setDimensions(radius, 0, 0);
+      }
+    });
+    this.toolManager.register("sphere", this.sphereTool);
+    this.boxTool = new BoxSelection(this.container, {
+      onApply: (op) => this.applyVolumeSelection(op),
+      onDimensionsChanged: (lx, ly, lz) => {
+        var _a2;
+        (_a2 = this.volumeRenderer) == null ? void 0 : _a2.setDimensions(lx, ly, lz);
+      }
+    });
+    this.toolManager.register("box", this.boxTool);
     this.gsRenderer.setEditorState(this.splatState.data);
     this._keyHandler = this._onKeyDown.bind(this);
     window.addEventListener("keydown", this._keyHandler);
     this.projDirty = true;
   }
+  /**
+   * 渲染体积选择线框（在主渲染 pass 内调用）
+   */
+  renderVolume(pass) {
+    var _a2;
+    (_a2 = this.volumeRenderer) == null ? void 0 : _a2.render(pass);
+  }
   /**
    * 退出编辑模式，将编辑结果永久写入渲染数据
    */
   exit() {
-    var _a2, _b2;
+    var _a2, _b2, _c;
     if (!this._active) return;
     this._active = false;
     window.removeEventListener("keydown", this._keyHandler);
@@ -18013,6 +18242,8 @@ class SplatEditor {
     this.overlayCleanup = [];
     (_a2 = this.toolOverlay) == null ? void 0 : _a2.remove();
     (_b2 = this.maskCanvas) == null ? void 0 : _b2.remove();
+    (_c = this.volumeRenderer) == null ? void 0 : _c.destroy();
+    this.volumeRenderer = null;
     this.applyEditsToRenderer();
     this.editHistory.clear();
     this.gsRenderer.clearEditorState();
@@ -18248,52 +18479,119 @@ class SplatEditor {
     this.editHistory.add(editOp);
   }
   /**
-   * 球选择：在屏幕空间判断 splat 是否在圆形区域内
+   * 世界空间球体选择
    */
-  selectBySphere(op, centerPx, radiusPx) {
-    this.ensureProjection();
-    const proj = this.projectedPositions;
-    if (!proj) return;
-    const w = this.container.clientWidth;
-    const h = this.container.clientHeight;
-    const cx = centerPx.x / w;
-    const cy = centerPx.y / h;
-    const rx = radiusPx / w;
-    const ry = radiusPx / h;
-    const rx2 = rx * rx;
-    const ry2 = ry * ry;
+  selectByWorldSphere(op, center, radius) {
+    const cpuPos = this.gsRenderer.getCPUPositions();
+    if (!cpuPos) return;
+    const modelMat = this.gsRenderer.getModelMatrix();
+    const r2 = radius * radius;
+    const [cx, cy, cz] = center;
     const editOp = new SelectOp(this.splatState, op, (i) => {
-      const b = i * 3;
-      const sx = proj[b], sy = proj[b + 1], sz = proj[b + 2];
-      if (sz <= 0 || sz >= 1) return false;
-      const dx = sx - cx, dy = sy - cy;
-      return dx * dx / rx2 + dy * dy / ry2 <= 1;
+      if (this.splatState.data[i] & (State.hidden | State.deleted)) return false;
+      const i3 = i * 3;
+      const lx = cpuPos[i3], ly = cpuPos[i3 + 1], lz = cpuPos[i3 + 2];
+      const wx = modelMat[0] * lx + modelMat[4] * ly + modelMat[8] * lz + modelMat[12];
+      const wy = modelMat[1] * lx + modelMat[5] * ly + modelMat[9] * lz + modelMat[13];
+      const wz = modelMat[2] * lx + modelMat[6] * ly + modelMat[10] * lz + modelMat[14];
+      const dx = wx - cx, dy = wy - cy, dz = wz - cz;
+      return dx * dx + dy * dy + dz * dz <= r2;
     });
     this.editHistory.add(editOp);
   }
   /**
-   * 盒选择：在屏幕空间判断 splat 是否在矩形区域内
+   * 世界空间 AABB 选择
    */
-  selectByBox(op, centerPx, halfWPx, halfHPx) {
-    this.ensureProjection();
-    const proj = this.projectedPositions;
-    if (!proj) return;
-    const w = this.container.clientWidth;
-    const h = this.container.clientHeight;
-    const cx = centerPx.x / w;
-    const cy = centerPx.y / h;
-    const hw = halfWPx / w;
-    const hh = halfHPx / h;
-    const left = cx - hw, right = cx + hw;
-    const top = cy - hh, bottom = cy + hh;
+  selectByWorldBox(op, center, lenX, lenY, lenZ) {
+    const cpuPos = this.gsRenderer.getCPUPositions();
+    if (!cpuPos) return;
+    const modelMat = this.gsRenderer.getModelMatrix();
+    const [cx, cy, cz] = center;
+    const hx = lenX / 2, hy = lenY / 2, hz = lenZ / 2;
     const editOp = new SelectOp(this.splatState, op, (i) => {
-      const b = i * 3;
-      const sx = proj[b], sy = proj[b + 1], sz = proj[b + 2];
-      if (sz <= 0 || sz >= 1) return false;
-      return sx >= left && sx <= right && sy >= top && sy <= bottom;
+      if (this.splatState.data[i] & (State.hidden | State.deleted)) return false;
+      const i3 = i * 3;
+      const lx = cpuPos[i3], ly = cpuPos[i3 + 1], lz = cpuPos[i3 + 2];
+      const wx = modelMat[0] * lx + modelMat[4] * ly + modelMat[8] * lz + modelMat[12];
+      const wy = modelMat[1] * lx + modelMat[5] * ly + modelMat[9] * lz + modelMat[13];
+      const wz = modelMat[2] * lx + modelMat[6] * ly + modelMat[10] * lz + modelMat[14];
+      const rx = wx - cx, ry = wy - cy, rz = wz - cz;
+      return rx >= -hx && rx <= hx && ry >= -hy && ry <= hy && rz >= -hz && rz <= hz;
     });
     this.editHistory.add(editOp);
   }
+  /**
+   * 应用当前体积选择
+   */
+  applyVolumeSelection(op) {
+    if (!this.volumeRenderer) return;
+    const vol = this.volumeRenderer.volume;
+    if (!vol.type) return;
+    if (vol.type === "sphere") {
+      this.selectByWorldSphere(op, vol.center, vol.dimensions[0]);
+    } else {
+      this.selectByWorldBox(op, vol.center, vol.dimensions[0], vol.dimensions[1], vol.dimensions[2]);
+    }
+  }
+  /**
+   * 设置体积选择的中心位置（供外部 gizmo 调用）
+   */
+  setVolumeCenter(x, y, z) {
+    var _a2;
+    (_a2 = this.volumeRenderer) == null ? void 0 : _a2.setCenter(x, y, z);
+  }
+  /**
+   * 获取当前体积状态
+   */
+  getVolumeState() {
+    var _a2;
+    return ((_a2 = this.volumeRenderer) == null ? void 0 : _a2.volume) ?? null;
+  }
+  /**
+   * 创建体积位置的 TransformableObject 代理，供 gizmo 控制
+   */
+  createVolumeTransformProxy() {
+    if (!this.volumeRenderer) return null;
+    const vol = this.volumeRenderer;
+    return {
+      get position() {
+        return vol.volume.center;
+      },
+      get rotation() {
+        return [0, 0, 0];
+      },
+      get scale() {
+        return [1, 1, 1];
+      },
+      setPosition: (x, y, z) => {
+        vol.setCenter(x, y, z);
+      },
+      setRotation: () => {
+      },
+      setScale: () => {
+      }
+    };
+  }
+  /**
+   * 获取模型包围盒中心（世界空间）
+   */
+  getModelCenter() {
+    const cpuPos = this.gsRenderer.getCPUPositions();
+    if (!cpuPos || cpuPos.length === 0) return [0, 0, 0];
+    const modelMat = this.gsRenderer.getModelMatrix();
+    const count = this.splatState.count;
+    let sx = 0, sy = 0, sz = 0, n = 0;
+    const step = Math.max(1, Math.floor(count / 1e3));
+    for (let i = 0; i < count; i += step) {
+      const i3 = i * 3;
+      const lx = cpuPos[i3], ly = cpuPos[i3 + 1], lz = cpuPos[i3 + 2];
+      sx += modelMat[0] * lx + modelMat[4] * ly + modelMat[8] * lz + modelMat[12];
+      sy += modelMat[1] * lx + modelMat[5] * ly + modelMat[9] * lz + modelMat[13];
+      sz += modelMat[2] * lx + modelMat[6] * ly + modelMat[10] * lz + modelMat[14];
+      n++;
+    }
+    return n > 0 ? [sx / n, sy / n, sz / n] : [0, 0, 0];
+  }
   /**
    * 根据屏幕像素坐标，找到最近的可见 splat 并返回其世界坐标及深度换算系数
    */
@@ -18498,6 +18796,8 @@ class App {
     __publicField(this, "baseRenderScale", 1);
     // 绑定的事件处理函数
     __publicField(this, "boundOnResize");
+    /** 额外渲染回调（在 gizmo 之前、场景辅助之后执行） */
+    __publicField(this, "extraRenderCallbacks", []);
     this.canvas = canvas;
     this.boundOnResize = this.onResize.bind(this);
   }
@@ -18943,6 +19243,7 @@ class App {
     }
     this.meshRenderer.render(pass);
     this.sceneAids.render(pass);
+    for (const cb of this.extraRenderCallbacks) cb(pass);
     this.gizmoManager.render(pass);
     this.renderer.endFrame();
     if (this.hotspotManager.isActive()) {
@@ -19185,6 +19486,16 @@ class App {
   getRenderer() {
     return this.renderer;
   }
+  /**
+   * 注册额外的渲染回调（在场景辅助之后、gizmo 之前执行）
+   */
+  addRenderCallback(cb) {
+    this.extraRenderCallbacks.push(cb);
+  }
+  removeRenderCallback(cb) {
+    const idx = this.extraRenderCallbacks.indexOf(cb);
+    if (idx >= 0) this.extraRenderCallbacks.splice(idx, 1);
+  }
   /**
    * CPU splat 拾取：在屏幕坐标 (clientX, clientY) 处找最近的 splat，返回世界坐标或 null
    */
@@ -19583,6 +19894,7 @@ exports.Renderer = Renderer;
 exports.SHMode = SHMode;
 exports.SceneAidsRenderer = SceneAidsRenderer;
 exports.SceneManager = SceneManager;
+exports.SelectionVolumeRenderer = SelectionVolumeRenderer;
 exports.SkyboxRenderer = SkyboxRenderer;
 exports.SplatBoundingBoxProvider = SplatBoundingBoxProvider;
 exports.SplatEditor = SplatEditor;