@d5techs/3dgs-lib 1.4.82 → 1.4.84

package/dist/3dgs-lib.js

@@ -17566,188 +17566,31 @@ class EyedropperSelection {
   }
 }
 class SphereSelection {
-  constructor(parent, callbacks) {
-    __publicField(this, "parent");
-    __publicField(this, "toolbar");
-    __publicField(this, "callbacks");
+  constructor(onRadiusChanged) {
     __publicField(this, "_radius", 1);
-    __publicField(this, "radiusInput");
-    this.parent = parent;
-    this.callbacks = callbacks;
-    this.toolbar = document.createElement("div");
-    this.toolbar.className = "select-toolbar";
-    this.toolbar.style.cssText = `
-      position:absolute; bottom:100px; left:50%; transform:translateX(-50%);
-      height:54px; display:none; z-index:20;
-      padding:0 8px; border-radius:8px;
-      background:rgba(30,30,30,0.92);
-      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 = `
-        height:38px; padding:0 16px; border:none; border-radius:2px;
-        background:#444; color:#ddd; cursor:pointer; font-size:13px;
-        transition: background 0.15s;
-      `;
-      btn.addEventListener("mouseenter", () => {
-        btn.style.background = "#555";
-      });
-      btn.addEventListener("mouseleave", () => {
-        btn.style.background = "#444";
-      });
-      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:4px; margin-left:4px;";
-    const label = document.createElement("span");
-    label.textContent = "Radius";
-    label.style.cssText = "color:#888; font-size:11px;";
-    const input = document.createElement("input");
-    input.type = "number";
-    input.min = "0.01";
-    input.step = "0.01";
-    input.value = this._radius.toFixed(2);
-    input.style.cssText = `
-      width:80px; padding:4px 6px; border:1px solid #555; border-radius:4px;
-      background:#222; color:#ddd; font-size:12px; text-align:center;
-    `;
-    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(label);
-    inputWrap.appendChild(input);
-    this.radiusInput = input;
-    this.toolbar.appendChild(setBtn);
-    this.toolbar.appendChild(addBtn);
-    this.toolbar.appendChild(removeBtn);
-    this.toolbar.appendChild(inputWrap);
-    parent.appendChild(this.toolbar);
+    __publicField(this, "_onRadiusChanged");
+    this._onRadiusChanged = onRadiusChanged;
   }
   get radius() {
     return this._radius;
   }
   setRadius(radius) {
+    var _a2;
     this._radius = radius;
-    this.radiusInput.value = radius.toFixed(2);
+    (_a2 = this._onRadiusChanged) == null ? void 0 : _a2.call(this, radius);
   }
   activate() {
-    this.toolbar.style.display = "flex";
   }
   deactivate() {
-    this.toolbar.style.display = "none";
   }
 }
 class BoxSelection {
-  constructor(parent, callbacks) {
-    __publicField(this, "parent");
-    __publicField(this, "toolbar");
-    __publicField(this, "callbacks");
+  constructor(onDimensionsChanged) {
     __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.callbacks = callbacks;
-    this.toolbar = document.createElement("div");
-    this.toolbar.className = "select-toolbar";
-    this.toolbar.style.cssText = `
-      position:absolute; bottom:100px; left:50%; transform:translateX(-50%);
-      height:54px; display:none; z-index:20;
-      padding:0 8px; border-radius:8px;
-      background:rgba(30,30,30,0.92);
-      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 = `
-        height:38px; padding:0 16px; border:none; border-radius:2px;
-        background:#444; color:#ddd; cursor:pointer; font-size:13px;
-        transition: background 0.15s;
-      `;
-      btn.addEventListener("mouseenter", () => {
-        btn.style.background = "#555";
-      });
-      btn.addEventListener("mouseleave", () => {
-        btn.style.background = "#444";
-      });
-      btn.addEventListener("pointerdown", (e) => {
-        e.stopPropagation();
-        this.callbacks.onApply(op);
-      });
-      return btn;
-    };
-    const mkInput = (placeholder, initial, onChange) => {
-      const wrap = document.createElement("span");
-      wrap.style.cssText = "display:inline-flex; align-items:center; gap:4px; margin-left:4px;";
-      const label = document.createElement("span");
-      label.textContent = placeholder;
-      label.style.cssText = "color:#888; font-size:11px;";
-      const input = document.createElement("input");
-      input.type = "number";
-      input.min = "0.01";
-      input.step = "0.01";
-      input.value = initial.toFixed(2);
-      input.style.cssText = `
-        width:80px; padding:4px 6px; border:1px solid #555; border-radius:4px;
-        background:#222; color:#ddd; font-size:12px; text-align:center;
-      `;
-      input.addEventListener("change", () => {
-        const v = Math.max(0.01, parseFloat(input.value) || 0.01);
-        input.value = v.toFixed(2);
-        onChange(v);
-      });
-      wrap.appendChild(label);
-      wrap.appendChild(input);
-      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);
+    __publicField(this, "_onDimensionsChanged");
+    this._onDimensionsChanged = onDimensionsChanged;
   }
   get lenX() {
     return this._lenX;
@@ -17759,21 +17602,15 @@ class BoxSelection {
     return this._lenZ;
   }
   setDimensions(lenX, lenY, lenZ) {
+    var _a2;
     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);
+    (_a2 = this._onDimensionsChanged) == null ? void 0 : _a2.call(this, lenX, lenY, lenZ);
   }
   activate() {
-    this.toolbar.style.display = "flex";
   }
   deactivate() {
-    this.toolbar.style.display = "none";
-  }
-  emitDims() {
-    this.callbacks.onDimensionsChanged(this._lenX, this._lenY, this._lenZ);
   }
 }
 function exportEditedPLY(positions, scales, rotations, colors, opacities, shCoeffs, state) {
@@ -17877,311 +17714,29 @@ function exportEditedPLY(positions, scales, rotations, colors, opacities, shCoef
   }
   return buffer;
 }
-const BOX_VERTS = new Float32Array([
-  -0.5,
-  -0.5,
-  0.5,
-  0.5,
-  -0.5,
-  0.5,
-  0.5,
-  0.5,
-  0.5,
-  -0.5,
-  -0.5,
-  0.5,
-  0.5,
-  0.5,
-  0.5,
-  -0.5,
-  0.5,
-  0.5,
-  0.5,
-  -0.5,
-  -0.5,
-  -0.5,
-  -0.5,
-  -0.5,
-  -0.5,
-  0.5,
-  -0.5,
-  0.5,
-  -0.5,
-  -0.5,
-  -0.5,
-  0.5,
-  -0.5,
-  0.5,
-  0.5,
-  -0.5,
-  -0.5,
-  0.5,
-  0.5,
-  0.5,
-  0.5,
-  0.5,
-  0.5,
-  0.5,
-  -0.5,
-  -0.5,
-  0.5,
-  0.5,
-  0.5,
-  0.5,
-  -0.5,
-  -0.5,
-  0.5,
-  -0.5,
-  -0.5,
-  -0.5,
-  -0.5,
-  0.5,
-  -0.5,
-  -0.5,
-  0.5,
-  -0.5,
-  0.5,
-  -0.5,
-  -0.5,
-  -0.5,
-  0.5,
-  -0.5,
-  0.5,
-  -0.5,
-  -0.5,
-  0.5,
-  0.5,
-  -0.5,
-  0.5,
-  0.5,
-  -0.5,
-  -0.5,
-  0.5,
-  0.5,
-  -0.5,
-  0.5,
-  -0.5,
-  0.5,
-  0.5,
-  0.5,
-  -0.5,
-  0.5,
-  0.5,
-  0.5,
-  -0.5,
-  -0.5,
-  -0.5,
-  -0.5,
-  -0.5,
-  0.5,
-  -0.5,
-  0.5,
-  0.5,
-  -0.5,
-  -0.5,
-  -0.5,
-  -0.5,
-  0.5,
-  0.5,
-  -0.5,
-  0.5,
-  -0.5
-]);
-const COMMON_WGSL = (
-  /* wgsl */
-  `
-struct Uniforms {
-  viewProjMatrix: mat4x4<f32>,
-  modelMatrix:    mat4x4<f32>,
-  nearOrigin: vec4<f32>,
-  nearX:      vec4<f32>,
-  nearY:      vec4<f32>,
-  farOrigin:  vec4<f32>,
-  farX:       vec4<f32>,
-  farY:       vec4<f32>,
-  targetSize: vec4<f32>,
-  shapeP0:    vec4<f32>,
-  shapeP1:    vec4<f32>,
-}
-@group(0) @binding(0) var<uniform> u: Uniforms;
-
-struct VO { @builtin(position) position: vec4<f32> }
-struct FO {
-  @location(0) color: vec4<f32>,
-  @builtin(frag_depth) depth: f32,
-}
-
-@vertex fn vs(@location(0) pos: vec3<f32>) -> VO {
-  var o: VO;
-  o.position = u.viewProjMatrix * u.modelMatrix * vec4(pos, 1.0);
-  return o;
-}
-
-fn interleavedGradientNoise(p: vec2<f32>) -> f32 {
-  return fract(52.9829189 * fract(dot(p, vec2(0.06711056, 0.00583715))));
-}
-
-fn writeDepth(alpha: f32, fc: vec2<f32>) -> bool {
-  return alpha > interleavedGradientNoise(fc);
-}
-
-fn calcDepth(wp: vec3<f32>) -> f32 {
-  let v = u.viewProjMatrix * vec4(wp, 1.0);
-  return clamp(v.z / v.w, 0.0, 1.0);
-}
-
-fn reconstructRay(fragPos: vec4<f32>) -> array<vec3<f32>, 2> {
-  let clip = vec2(fragPos.x / u.targetSize.x, 1.0 - fragPos.y / u.targetSize.y);
-  let wNear = u.nearOrigin.xyz + u.nearX.xyz * clip.x + u.nearY.xyz * clip.y;
-  let wFar  = u.farOrigin.xyz  + u.farX.xyz  * clip.x + u.farY.xyz  * clip.y;
-  return array(wNear, normalize(wFar - wNear));
-}
-`
-);
-const BOX_FRAG_WGSL = (
-  /* wgsl */
-  `
-fn intersectBox(pos: vec3<f32>, dir: vec3<f32>, cen: vec3<f32>, halfLen: vec3<f32>) -> vec4<f32> {
-  let vx = select(0.0, 1.0, dir.x != 0.0);
-  let vy = select(0.0, 1.0, dir.y != 0.0);
-  let vz = select(0.0, 1.0, dir.z != 0.0);
-  let valid = vec3<f32>(vx, vy, vz);
-  let m = vec3<f32>(
-    select(0.0, sign(dir.x) / abs(dir.x), dir.x != 0.0),
-    select(0.0, sign(dir.y) / abs(dir.y), dir.y != 0.0),
-    select(0.0, sign(dir.z) / abs(dir.z), dir.z != 0.0),
-  );
-  let n = m * (pos - cen);
-  let k = abs(m) * halfLen;
-  var v0 = -n - k;
-  var v1 = -n + k;
-  v0 = mix(vec3(-1e10), v0, valid);
-  v1 = mix(vec3( 1e10), v1, valid);
-
-  var axis0: i32; var axis1: i32;
-  if v0.x > v0.y { axis0 = select(2, 0, v0.x > v0.z); }
-  else            { axis0 = select(2, 1, v0.y > v0.z); }
-  if v1.x < v1.y { axis1 = select(2, 0, v1.x < v1.z); }
-  else            { axis1 = select(2, 1, v1.y < v1.z); }
-
-  let t0 = select(select(v0.z, v0.y, axis0==1), v0.x, axis0==0);
-  let t1 = select(select(v1.z, v1.y, axis1==1), v1.x, axis1==0);
-  if t0 > t1 || t1 < 0.0 { return vec4(-1.0); }
-  return vec4(t0, t1, f32(axis0), f32(axis1));
-}
-
-fn strips(pos: vec3<f32>, axis: i32) -> bool {
-  let f = fract(pos * 2.0 + vec3(0.015));
-  let b = f < vec3(0.03);
-  if axis == 0 { return b.y || b.z; }
-  if axis == 1 { return b.x || b.z; }
-  return b.x || b.y;
-}
-
-@fragment fn fs(i: VO) -> FO {
-  var o: FO;
-  o.color = vec4(0.0);
-  o.depth = 1.0;
-
-  let ray = reconstructRay(i.position);
-  let hit = intersectBox(ray[0], ray[1], u.shapeP0.xyz, u.shapeP1.xyz);
-  if hit.x < 0.0 { discard; return o; }
-
-  let t0 = hit.x; let t1 = hit.y;
-  let a0 = i32(hit.z); let a1 = i32(hit.w);
-  let frontPos = ray[0] + ray[1] * t0;
-  let backPos  = ray[0] + ray[1] * t1;
-  let front = t0 > 0.0 && strips(frontPos - u.shapeP0.xyz, a0);
-  let back  = strips(backPos - u.shapeP0.xyz, a1);
-
-  if front {
-    o.color = vec4(1.0, 1.0, 1.0, 0.6);
-    o.depth = select(1.0, calcDepth(frontPos), writeDepth(0.6, i.position.xy));
-    return o;
-  }
-  if back {
-    o.color = vec4(0.0, 0.0, 0.0, 0.6);
-    o.depth = select(1.0, calcDepth(backPos), writeDepth(0.6, i.position.xy));
-    return o;
-  }
-  discard;
-  return o;
-}
-`
-);
-const SPHERE_FRAG_WGSL = (
-  /* wgsl */
-  `
-fn intersectSphere(pos: vec3<f32>, dir: vec3<f32>, sph: vec4<f32>) -> vec2<f32> {
-  let L = sph.xyz - pos;
-  let tca = dot(L, dir);
-  let d2 = sph.w * sph.w - (dot(L, L) - tca * tca);
-  if d2 <= 0.0 { return vec2(-1.0); }
-  let thc = sqrt(d2);
-  let t0 = tca - thc;
-  let t1 = tca + thc;
-  if t1 <= 0.0 { return vec2(-1.0); }
-  return vec2(t0, t1);
-}
-
-fn calcAzimuthElev(dir: vec3<f32>) -> vec2<f32> {
-  let azimuth = atan2(dir.z, dir.x);
-  let elev = asin(clamp(dir.y, -1.0, 1.0));
-  return vec2(azimuth, elev) * 180.0 / 3.14159265;
-}
-
-fn sphereStrips(lp: vec3<f32>, radius: f32) -> bool {
-  let ae = calcAzimuthElev(normalize(lp));
-  let spacing = 180.0 / (2.0 * 3.14159265 * radius);
-  let sz = 0.03;
-  return fract(ae.x / spacing) < sz || fract(ae.y / spacing) < sz;
-}
-
-@fragment fn fs(i: VO) -> FO {
-  var o: FO;
-  o.color = vec4(0.0);
-  o.depth = 1.0;
-
-  let sph = u.shapeP0;
-  let ray = reconstructRay(i.position);
-  let hit = intersectSphere(ray[0], ray[1], sph);
-  if hit.x < 0.0 && hit.y < 0.0 { discard; return o; }
-
-  let t0 = hit.x; let t1 = hit.y;
-  let frontPos = ray[0] + ray[1] * t0;
-  let backPos  = ray[0] + ray[1] * t1;
-  let front = t0 > 0.0 && sphereStrips(frontPos - sph.xyz, sph.w);
-  let back  = sphereStrips(backPos - sph.xyz, sph.w);
-
-  if front {
-    o.color = vec4(1.0, 1.0, 1.0, 0.6);
-    o.depth = select(1.0, calcDepth(frontPos), writeDepth(0.6, i.position.xy));
-    return o;
-  }
-  if back {
-    o.color = vec4(0.0, 0.0, 0.0, 0.6);
-    o.depth = select(1.0, calcDepth(backPos), writeDepth(0.6, i.position.xy));
-    return o;
-  }
-  discard;
-  return o;
-}
-`
-);
-const UNIFORM_SIZE = 272;
+const SEG = 64;
+const LAT_COUNT = 8;
+const LON_COUNT = 12;
+const BOX_GRID_SUBDIV = 4;
 class SelectionVolumeRenderer {
   constructor(renderer, camera) {
     __publicField(this, "renderer");
     __publicField(this, "camera");
-    __publicField(this, "boxPipeline", null);
-    __publicField(this, "spherePipeline", null);
+    __publicField(this, "frontPipeline", null);
+    __publicField(this, "behindPipeline", 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, "frontColor", [0.4, 0.9, 1]);
     this.renderer = renderer;
     this.camera = camera;
-    this.createResources();
+    this.createPipelines();
+    this.vertexBuffer = this.renderer.device.createBuffer({
+      size: 65536,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+    });
   }
   get volume() {
     return this._volume;
@@ -18197,187 +17752,225 @@ class SelectionVolumeRenderer {
   setDimensions(a, b, c) {
     this._volume.dimensions = [a, b, c];
   }
-  createResources() {
+  createPipelines() {
     const device = this.renderer.device;
-    this.vertexBuffer = device.createBuffer({
-      size: BOX_VERTS.byteLength,
-      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
-    });
-    device.queue.writeBuffer(this.vertexBuffer, 0, BOX_VERTS);
-    this.uniformBuffer = device.createBuffer({
-      size: UNIFORM_SIZE,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-    });
+    const shaderCode = (
+      /* wgsl */
+      `
+      struct Uniforms {
+        viewMatrix: mat4x4<f32>,
+        projMatrix: mat4x4<f32>,
+        modelMatrix: 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;
+        let worldPos = uniforms.modelMatrix * vec4(i.position, 1.0);
+        let viewPos = uniforms.viewMatrix * worldPos;
+        o.position = uniforms.projMatrix * viewPos;
+        o.color = i.color;
+        return o;
+      }
+      @fragment fn fs(i: VO) -> @location(0) vec4<f32> {
+        return vec4(i.color, 0.7);
+      }
+      @fragment fn fsBehind(i: VO) -> @location(0) vec4<f32> {
+        return vec4(i.color * 0.35, 0.2);
+      }
+    `
+    );
+    const sm = device.createShaderModule({ code: shaderCode });
+    this.uniformBuffer = device.createBuffer({ size: 192, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
     const bgl = device.createBindGroupLayout({
-      entries: [{
-        binding: 0,
-        visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-        buffer: { type: "uniform" }
-      }]
-    });
-    this.bindGroup = device.createBindGroup({
-      layout: bgl,
-      entries: [{ binding: 0, resource: { buffer: this.uniformBuffer } }]
+      entries: [{ binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }]
     });
+    this.bindGroup = device.createBindGroup({ layout: bgl, entries: [{ binding: 0, resource: { buffer: this.uniformBuffer } }] });
     const layout = device.createPipelineLayout({ bindGroupLayouts: [bgl] });
-    const mkVertexState = (mod) => ({
-      module: mod,
+    const vertexState = {
+      module: sm,
       entryPoint: "vs",
       buffers: [{
-        arrayStride: 12,
-        attributes: [{ shaderLocation: 0, offset: 0, format: "float32x3" }]
+        arrayStride: 24,
+        attributes: [
+          { shaderLocation: 0, offset: 0, format: "float32x3" },
+          { shaderLocation: 1, offset: 12, format: "float32x3" }
+        ]
       }]
-    });
-    const blend = {
+    };
+    const blendState = {
       color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha", operation: "add" },
       alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" }
     };
-    const depthStencil = {
-      format: this.renderer.depthFormat,
-      depthWriteEnabled: true,
-      depthCompare: "less-equal"
-    };
-    const boxMod = device.createShaderModule({ code: COMMON_WGSL + BOX_FRAG_WGSL });
-    this.boxPipeline = device.createRenderPipeline({
+    this.frontPipeline = device.createRenderPipeline({
       layout,
-      vertex: mkVertexState(boxMod),
+      vertex: vertexState,
       fragment: {
-        module: boxMod,
+        module: sm,
         entryPoint: "fs",
-        targets: [{ format: this.renderer.format, blend }]
+        targets: [{ format: this.renderer.format, blend: blendState }]
       },
-      primitive: { topology: "triangle-list", cullMode: "front" },
-      depthStencil
+      primitive: { topology: "line-list", cullMode: "none" },
+      depthStencil: { format: this.renderer.depthFormat, depthWriteEnabled: false, depthCompare: "less-equal" }
     });
-    const sphereMod = device.createShaderModule({ code: COMMON_WGSL + SPHERE_FRAG_WGSL });
-    this.spherePipeline = device.createRenderPipeline({
+    this.behindPipeline = device.createRenderPipeline({
       layout,
-      vertex: mkVertexState(sphereMod),
+      vertex: vertexState,
       fragment: {
-        module: sphereMod,
-        entryPoint: "fs",
-        targets: [{ format: this.renderer.format, blend }]
+        module: sm,
+        entryPoint: "fsBehind",
+        targets: [{ format: this.renderer.format, blend: blendState }]
       },
-      primitive: { topology: "triangle-list", cullMode: "front" },
-      depthStencil
+      primitive: { topology: "line-list", cullMode: "none" },
+      depthStencil: { format: this.renderer.depthFormat, depthWriteEnabled: false, depthCompare: "greater" }
     });
   }
-  // ---------- Frustum corners ----------
-  computeFrustumUniforms(buf) {
-    const cam = this.camera;
-    const vm = cam.viewMatrix;
-    const right = [vm[0], vm[4], vm[8]];
-    const up = [vm[1], vm[5], vm[9]];
-    const zAxis = [vm[2], vm[6], vm[10]];
-    const eye = cam.position;
-    const d = 100;
-    const halfH = d * Math.tan(cam.fov / 2);
-    const halfW = halfH * cam.aspect;
-    const fcx = eye[0] - d * zAxis[0];
-    const fcy = eye[1] - d * zAxis[1];
-    const fcz = eye[2] - d * zAxis[2];
-    buf[0] = eye[0];
-    buf[1] = eye[1];
-    buf[2] = eye[2];
-    buf[3] = 0;
-    buf[4] = 0;
-    buf[5] = 0;
-    buf[6] = 0;
-    buf[7] = 0;
-    buf[8] = 0;
-    buf[9] = 0;
-    buf[10] = 0;
-    buf[11] = 0;
-    buf[12] = fcx - halfW * right[0] - halfH * up[0];
-    buf[13] = fcy - halfW * right[1] - halfH * up[1];
-    buf[14] = fcz - halfW * right[2] - halfH * up[2];
-    buf[15] = 0;
-    buf[16] = 2 * halfW * right[0];
-    buf[17] = 2 * halfW * right[1];
-    buf[18] = 2 * halfW * right[2];
-    buf[19] = 0;
-    buf[20] = 2 * halfH * up[0];
-    buf[21] = 2 * halfH * up[1];
-    buf[22] = 2 * halfH * up[2];
-    buf[23] = 0;
+  // ========== Box: 12 edges + grid lines on all 6 faces ==========
+  generateBoxVertices(color) {
+    const [lx, ly, lz] = this._volume.dimensions;
+    const hx = lx / 2, hy = ly / 2, hz = lz / 2;
+    const [r, g, b] = color;
+    const v = [];
+    const line = (x12, y12, z12, x2, y2, z2) => {
+      v.push(x12, y12, z12, r, g, b, x2, y2, z2, r, g, b);
+    };
+    const x0 = -hx, x1 = hx;
+    const y0 = -hy, y1 = hy;
+    const z0 = -hz, z1 = hz;
+    line(x0, y0, z0, x1, y0, z0);
+    line(x1, y0, z0, x1, y0, z1);
+    line(x1, y0, z1, x0, y0, z1);
+    line(x0, y0, z1, x0, y0, z0);
+    line(x0, y1, z0, x1, y1, z0);
+    line(x1, y1, z0, x1, y1, z1);
+    line(x1, y1, z1, x0, y1, z1);
+    line(x0, y1, z1, x0, y1, z0);
+    line(x0, y0, z0, x0, y1, z0);
+    line(x1, y0, z0, x1, y1, z0);
+    line(x1, y0, z1, x1, y1, z1);
+    line(x0, y0, z1, x0, y1, z1);
+    const n = BOX_GRID_SUBDIV;
+    for (let i = 1; i < n; i++) {
+      const t = i / n;
+      const px = x0 + (x1 - x0) * t;
+      const pz = z0 + (z1 - z0) * t;
+      line(px, y0, z0, px, y0, z1);
+      line(px, y1, z0, px, y1, z1);
+      line(x0, y0, pz, x1, y0, pz);
+      line(x0, y1, pz, x1, y1, pz);
+    }
+    for (let i = 1; i < n; i++) {
+      const t = i / n;
+      const px = x0 + (x1 - x0) * t;
+      const py = y0 + (y1 - y0) * t;
+      line(px, y0, z0, px, y1, z0);
+      line(px, y0, z1, px, y1, z1);
+      line(x0, py, z0, x1, py, z0);
+      line(x0, py, z1, x1, py, z1);
+    }
+    for (let i = 1; i < n; i++) {
+      const t = i / n;
+      const py = y0 + (y1 - y0) * t;
+      const pz = z0 + (z1 - z0) * t;
+      line(x0, py, z0, x0, py, z1);
+      line(x1, py, z0, x1, py, z1);
+      line(x0, y0, pz, x0, y1, pz);
+      line(x1, y0, pz, x1, y1, pz);
+    }
+    return new Float32Array(v);
+  }
+  // ========== Sphere: latitude + longitude rings ==========
+  generateSphereVertices(color) {
+    const radius = this._volume.dimensions[0];
+    const [r, g, b] = color;
+    const v = [];
+    const addRing = (centerY, ringRadius) => {
+      for (let i = 0; i < SEG; i++) {
+        const a0 = i / SEG * Math.PI * 2;
+        const a1 = (i + 1) / SEG * Math.PI * 2;
+        v.push(
+          Math.cos(a0) * ringRadius,
+          centerY,
+          Math.sin(a0) * ringRadius,
+          r,
+          g,
+          b,
+          Math.cos(a1) * ringRadius,
+          centerY,
+          Math.sin(a1) * ringRadius,
+          r,
+          g,
+          b
+        );
+      }
+    };
+    for (let i = 0; i <= LAT_COUNT; i++) {
+      const phi = -Math.PI / 2 + i / LAT_COUNT * Math.PI;
+      const y = Math.sin(phi) * radius;
+      const ringR = Math.cos(phi) * radius;
+      if (ringR < 1e-3) continue;
+      addRing(y, ringR);
+    }
+    for (let j = 0; j < LON_COUNT; j++) {
+      const theta = j / LON_COUNT * Math.PI;
+      for (let i = 0; i < SEG; i++) {
+        const phi0 = i / SEG * Math.PI * 2;
+        const phi1 = (i + 1) / SEG * Math.PI * 2;
+        v.push(
+          Math.sin(phi0) * Math.sin(theta) * radius,
+          Math.cos(phi0) * radius,
+          Math.sin(phi0) * Math.cos(theta) * radius,
+          r,
+          g,
+          b,
+          Math.sin(phi1) * Math.sin(theta) * radius,
+          Math.cos(phi1) * radius,
+          Math.sin(phi1) * Math.cos(theta) * radius,
+          r,
+          g,
+          b
+        );
+      }
+    }
+    return new Float32Array(v);
   }
   render(pass) {
-    const vol = this._volume;
-    if (!vol.type || !this.uniformBuffer || !this.vertexBuffer || !this.bindGroup) return;
-    const pipeline = vol.type === "box" ? this.boxPipeline : this.spherePipeline;
-    if (!pipeline) return;
+    if (!this._volume.type || !this.frontPipeline || !this.behindPipeline || !this.bindGroup || !this.vertexBuffer || !this.uniformBuffer) return;
     const device = this.renderer.device;
-    const uniforms = new Float32Array(UNIFORM_SIZE / 4);
-    uniforms.set(this.camera.viewProjectionMatrix, 0);
-    const [cx, cy, cz] = vol.center;
-    if (vol.type === "box") {
-      const [lx, ly, lz] = vol.dimensions;
-      uniforms[16] = lx;
-      uniforms[17] = 0;
-      uniforms[18] = 0;
-      uniforms[19] = 0;
-      uniforms[20] = 0;
-      uniforms[21] = ly;
-      uniforms[22] = 0;
-      uniforms[23] = 0;
-      uniforms[24] = 0;
-      uniforms[25] = 0;
-      uniforms[26] = lz;
-      uniforms[27] = 0;
-      uniforms[28] = cx;
-      uniforms[29] = cy;
-      uniforms[30] = cz;
-      uniforms[31] = 1;
-    } else {
-      const r2 = vol.dimensions[0] * 2;
-      uniforms[16] = r2;
-      uniforms[17] = 0;
-      uniforms[18] = 0;
-      uniforms[19] = 0;
-      uniforms[20] = 0;
-      uniforms[21] = r2;
-      uniforms[22] = 0;
-      uniforms[23] = 0;
-      uniforms[24] = 0;
-      uniforms[25] = 0;
-      uniforms[26] = r2;
-      uniforms[27] = 0;
-      uniforms[28] = cx;
-      uniforms[29] = cy;
-      uniforms[30] = cz;
-      uniforms[31] = 1;
-    }
-    const frustumBuf = new Float32Array(24);
-    this.computeFrustumUniforms(frustumBuf);
-    uniforms.set(frustumBuf, 32);
-    uniforms[56] = this.renderer.width;
-    uniforms[57] = this.renderer.height;
-    uniforms[58] = 0;
-    uniforms[59] = 0;
-    if (vol.type === "box") {
-      uniforms[60] = cx;
-      uniforms[61] = cy;
-      uniforms[62] = cz;
-      uniforms[63] = 0;
-      uniforms[64] = vol.dimensions[0] * 0.5;
-      uniforms[65] = vol.dimensions[1] * 0.5;
-      uniforms[66] = vol.dimensions[2] * 0.5;
-      uniforms[67] = 0;
-    } else {
-      uniforms[60] = cx;
-      uniforms[61] = cy;
-      uniforms[62] = cz;
-      uniforms[63] = vol.dimensions[0];
-      uniforms[64] = 0;
-      uniforms[65] = 0;
-      uniforms[66] = 0;
-      uniforms[67] = 0;
-    }
-    device.queue.writeBuffer(this.uniformBuffer, 0, uniforms.buffer);
-    pass.setPipeline(pipeline);
+    const [cx, cy, cz] = this._volume.center;
+    const modelMatrix = new Float32Array(16);
+    modelMatrix[0] = 1;
+    modelMatrix[5] = 1;
+    modelMatrix[10] = 1;
+    modelMatrix[15] = 1;
+    modelMatrix[12] = cx;
+    modelMatrix[13] = cy;
+    modelMatrix[14] = cz;
+    const uniforms = new Float32Array(48);
+    uniforms.set(this.camera.viewMatrix, 0);
+    uniforms.set(this.camera.projectionMatrix, 16);
+    uniforms.set(modelMatrix, 32);
+    device.queue.writeBuffer(this.uniformBuffer, 0, uniforms);
+    const frontVerts = this._volume.type === "box" ? this.generateBoxVertices(this.frontColor) : this.generateSphereVertices(this.frontColor);
+    this.vertexCount = frontVerts.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, frontVerts.buffer);
+    pass.setPipeline(this.frontPipeline);
     pass.setBindGroup(0, this.bindGroup);
     pass.setVertexBuffer(0, this.vertexBuffer);
-    pass.draw(36);
+    pass.draw(this.vertexCount);
+    pass.setPipeline(this.behindPipeline);
+    pass.setBindGroup(0, this.bindGroup);
+    pass.setVertexBuffer(0, this.vertexBuffer);
+    pass.draw(this.vertexCount);
   }
   destroy() {
     var _a2, _b2;
@@ -18385,8 +17978,8 @@ class SelectionVolumeRenderer {
     (_b2 = this.uniformBuffer) == null ? void 0 : _b2.destroy();
     this.vertexBuffer = null;
     this.uniformBuffer = null;
-    this.boxPipeline = null;
-    this.spherePipeline = null;
+    this.frontPipeline = null;
+    this.behindPipeline = null;
     this.bindGroup = null;
   }
 }
@@ -18524,20 +18117,14 @@ class SplatEditor {
     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.sphereTool = new SphereSelection((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.boxTool = new BoxSelection((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);
@@ -18895,6 +18482,24 @@ class SplatEditor {
       }
     };
   }
+  // ============================================
+  // 体积工具参数 API（供前端 UI 调用）
+  // ============================================
+  setBoxDimensions(lx, ly, lz) {
+    var _a2;
+    (_a2 = this.boxTool) == null ? void 0 : _a2.setDimensions(lx, ly, lz);
+  }
+  getBoxDimensions() {
+    return this.boxTool ? [this.boxTool.lenX, this.boxTool.lenY, this.boxTool.lenZ] : [2, 2, 2];
+  }
+  setSphereRadius(radius) {
+    var _a2;
+    (_a2 = this.sphereTool) == null ? void 0 : _a2.setRadius(radius);
+  }
+  getSphereRadius() {
+    var _a2;
+    return ((_a2 = this.sphereTool) == null ? void 0 : _a2.radius) ?? 1;
+  }
   /**
    * 获取模型世界空间包围盒（中心 + 尺寸）
    */