@d5techs/3dgs-lib 1.4.79 → 1.4.81

package/dist/3dgs-lib.cjs

@@ -17577,11 +17577,12 @@ class SphereSelection {
     this.parent = parent;
     this.callbacks = callbacks;
     this.toolbar = document.createElement("div");
-    this.toolbar.className = "volume-select-toolbar";
+    this.toolbar.className = "select-toolbar";
     this.toolbar.style.cssText = `
-      position:absolute; bottom:90px; 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;
+      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);
@@ -17592,15 +17593,15 @@ class SphereSelection {
       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;
+        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 = "#333";
+        btn.style.background = "#444";
       });
       btn.addEventListener("pointerdown", (e) => {
         e.stopPropagation();
@@ -17612,27 +17613,27 @@ class SphereSelection {
     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;";
+    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 = "1";
-    input.step = "1";
-    input.value = String(this._radius);
+    input.min = "0.01";
+    input.step = "0.01";
+    input.value = this._radius.toFixed(2);
     input.style.cssText = `
-      width:40px; padding:3px 4px; border:1px solid #555; border-radius:4px;
+      width:80px; padding:4px 6px; 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(1, Math.round(parseFloat(input.value) || 1));
-      input.value = String(v);
+      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);
+    inputWrap.appendChild(input);
     this.radiusInput = input;
     this.toolbar.appendChild(setBtn);
     this.toolbar.appendChild(addBtn);
@@ -17644,8 +17645,8 @@ class SphereSelection {
     return this._radius;
   }
   setRadius(radius) {
-    this._radius = Math.round(radius);
-    this.radiusInput.value = String(this._radius);
+    this._radius = radius;
+    this.radiusInput.value = radius.toFixed(2);
   }
   activate() {
     this.toolbar.style.display = "flex";
@@ -17668,11 +17669,12 @@ class BoxSelection {
     this.parent = parent;
     this.callbacks = callbacks;
     this.toolbar = document.createElement("div");
-    this.toolbar.className = "volume-select-toolbar";
+    this.toolbar.className = "select-toolbar";
     this.toolbar.style.cssText = `
-      position:absolute; bottom:90px; 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;
+      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);
@@ -17683,15 +17685,15 @@ class BoxSelection {
       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;
+        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 = "#333";
+        btn.style.background = "#444";
       });
       btn.addEventListener("pointerdown", (e) => {
         e.stopPropagation();
@@ -17701,26 +17703,26 @@ class BoxSelection {
     };
     const mkInput = (placeholder, initial, onChange) => {
       const wrap = document.createElement("span");
-      wrap.style.cssText = "display:inline-flex; align-items:center; gap:2px;";
+      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 = "1";
-      input.step = "1";
-      input.value = String(Math.round(initial));
+      input.min = "0.01";
+      input.step = "0.01";
+      input.value = initial.toFixed(2);
       input.style.cssText = `
-        width:40px; padding:3px 4px; border:1px solid #555; border-radius:4px;
+        width:80px; padding:4px 6px; 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(1, Math.round(parseFloat(input.value) || 1));
-        input.value = String(v);
+        const v = Math.max(0.01, parseFloat(input.value) || 0.01);
+        input.value = v.toFixed(2);
         onChange(v);
       });
-      wrap.appendChild(input);
       wrap.appendChild(label);
+      wrap.appendChild(input);
       return { wrap, input };
     };
     const setBtn = mkBtn("Set", "set");
@@ -17759,12 +17761,12 @@ class BoxSelection {
     return this._lenZ;
   }
   setDimensions(lenX, lenY, lenZ) {
-    this._lenX = Math.round(lenX);
-    this._lenY = Math.round(lenY);
-    this._lenZ = Math.round(lenZ);
-    this.inputX.value = String(this._lenX);
-    this.inputY.value = String(this._lenY);
-    this.inputZ.value = String(this._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.toolbar.style.display = "flex";
@@ -17877,28 +17879,311 @@ function exportEditedPLY(positions, scales, rotations, colors, opacities, shCoef
   }
   return buffer;
 }
-const SEG = 64;
-const LAT_COUNT = 8;
-const LON_COUNT = 12;
-const BOX_GRID_SUBDIV = 4;
+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;
 class SelectionVolumeRenderer {
   constructor(renderer, camera) {
     __publicField(this, "renderer");
     __publicField(this, "camera");
-    __publicField(this, "pipeline", null);
+    __publicField(this, "boxPipeline", null);
+    __publicField(this, "spherePipeline", 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, "lineColor", [0.4, 0.9, 1]);
     this.renderer = renderer;
     this.camera = camera;
-    this.createPipeline();
-    this.vertexBuffer = this.renderer.device.createBuffer({
-      size: 65536,
-      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
-    });
+    this.createResources();
   }
   get volume() {
     return this._volume;
@@ -17914,190 +18199,187 @@ class SelectionVolumeRenderer {
   setDimensions(a, b, c) {
     this._volume.dimensions = [a, b, c];
   }
-  createPipeline() {
+  createResources() {
     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.6);
-      }
-    `
-    );
-    const sm = device.createShaderModule({ code: shaderCode });
-    this.uniformBuffer = device.createBuffer({ size: 64, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+    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 bgl = device.createBindGroupLayout({
-      entries: [{ binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: "uniform" } }]
+      entries: [{
+        binding: 0,
+        visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+        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" }
-          ]
-        }]
+    this.bindGroup = device.createBindGroup({
+      layout: bgl,
+      entries: [{ binding: 0, resource: { buffer: this.uniformBuffer } }]
+    });
+    const layout = device.createPipelineLayout({ bindGroupLayouts: [bgl] });
+    const mkVertexState = (mod) => ({
+      module: mod,
+      entryPoint: "vs",
+      buffers: [{
+        arrayStride: 12,
+        attributes: [{ shaderLocation: 0, offset: 0, format: "float32x3" }]
+      }]
+    });
+    const blend = {
+      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({
+      layout,
+      vertex: mkVertexState(boxMod),
+      fragment: {
+        module: boxMod,
+        entryPoint: "fs",
+        targets: [{ format: this.renderer.format, blend }]
       },
+      primitive: { topology: "triangle-list", cullMode: "front" },
+      depthStencil
+    });
+    const sphereMod = device.createShaderModule({ code: COMMON_WGSL + SPHERE_FRAG_WGSL });
+    this.spherePipeline = device.createRenderPipeline({
+      layout,
+      vertex: mkVertexState(sphereMod),
       fragment: {
-        module: sm,
+        module: sphereMod,
         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" }
-          }
-        }]
+        targets: [{ format: this.renderer.format, blend }]
       },
-      primitive: { topology: "line-list", cullMode: "none" },
-      depthStencil: { format: this.renderer.depthFormat, depthWriteEnabled: false, depthCompare: "always" }
+      primitive: { topology: "triangle-list", cullMode: "front" },
+      depthStencil
     });
   }
-  // ========== Box: 12 edges + grid lines on all 6 faces ==========
-  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 line = (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;
-    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() {
-    const [cx, cy, cz] = this._volume.center;
-    const radius = this._volume.dimensions[0];
-    const [r, g, b] = this.lineColor;
-    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(
-          cx + Math.cos(a0) * ringRadius,
-          cy + centerY,
-          cz + Math.sin(a0) * ringRadius,
-          r,
-          g,
-          b,
-          cx + Math.cos(a1) * ringRadius,
-          cy + centerY,
-          cz + 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(
-          cx + Math.cos(phi0) * Math.sin(theta) * radius,
-          cy + Math.sin(phi0) * radius,
-          cz + Math.cos(phi0) * Math.cos(theta) * radius,
-          r,
-          g,
-          b,
-          cx + Math.cos(phi1) * Math.sin(theta) * radius,
-          cy + Math.sin(phi1) * radius,
-          cz + Math.cos(phi1) * Math.cos(theta) * radius,
-          r,
-          g,
-          b
-        );
-      }
-    }
-    return new Float32Array(v);
+  // ---------- 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;
   }
   render(pass) {
-    if (!this._volume.type || !this.pipeline || !this.bindGroup || !this.vertexBuffer || !this.uniformBuffer) return;
+    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;
     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);
+    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);
     pass.setBindGroup(0, this.bindGroup);
     pass.setVertexBuffer(0, this.vertexBuffer);
-    pass.draw(this.vertexCount);
+    pass.draw(36);
   }
   destroy() {
     var _a2, _b2;
@@ -18105,7 +18387,8 @@ class SelectionVolumeRenderer {
     (_b2 = this.uniformBuffer) == null ? void 0 : _b2.destroy();
     this.vertexBuffer = null;
     this.uniformBuffer = null;
-    this.pipeline = null;
+    this.boxPipeline = null;
+    this.spherePipeline = null;
     this.bindGroup = null;
   }
 }