@d5techs/3dgs-lib 1.4.78 → 1.4.80

package/dist/3dgs-lib.js

@@ -17613,19 +17613,19 @@ class SphereSelection {
     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.min = "1";
+    input.step = "1";
+    input.value = String(this._radius);
     input.style.cssText = `
-      width:50px; padding:3px 4px; border:1px solid #555; border-radius:4px;
+      width:40px; 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);
+      const v = Math.max(1, Math.round(parseFloat(input.value) || 1));
+      input.value = String(v);
       this._radius = v;
       this.callbacks.onRadiusChanged(v);
     });
@@ -17642,8 +17642,8 @@ class SphereSelection {
     return this._radius;
   }
   setRadius(radius) {
-    this._radius = radius;
-    this.radiusInput.value = radius.toFixed(2);
+    this._radius = Math.round(radius);
+    this.radiusInput.value = String(this._radius);
   }
   activate() {
     this.toolbar.style.display = "flex";
@@ -17702,19 +17702,19 @@ class BoxSelection {
       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.min = "1";
+      input.step = "1";
+      input.value = String(Math.round(initial));
       input.style.cssText = `
-        width:50px; padding:3px 4px; border:1px solid #555; border-radius:4px;
+        width:40px; 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);
+        const v = Math.max(1, Math.round(parseFloat(input.value) || 1));
+        input.value = String(v);
         onChange(v);
       });
       wrap.appendChild(input);
@@ -17757,12 +17757,12 @@ class BoxSelection {
     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);
+    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);
   }
   activate() {
     this.toolbar.style.display = "flex";
@@ -17883,16 +17883,17 @@ class SelectionVolumeRenderer {
   constructor(renderer, camera) {
     __publicField(this, "renderer");
     __publicField(this, "camera");
-    __publicField(this, "pipeline", 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, "lineColor", [0.4, 0.9, 1]);
+    __publicField(this, "frontColor", [0.4, 0.9, 1]);
     this.renderer = renderer;
     this.camera = camera;
-    this.createPipeline();
+    this.createPipelines();
     this.vertexBuffer = this.renderer.device.createBuffer({
       size: 65536,
       usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
@@ -17912,12 +17913,16 @@ class SelectionVolumeRenderer {
   setDimensions(a, b, c) {
     this._volume.dimensions = [a, b, c];
   }
-  createPipeline() {
+  createPipelines() {
     const device = this.renderer.device;
     const shaderCode = (
       /* wgsl */
       `
-      struct Uniforms { viewProjection: mat4x4<f32> }
+      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> }
@@ -17925,62 +17930,77 @@ class SelectionVolumeRenderer {
 
       @vertex fn vs(i: VI) -> VO {
         var o: VO;
-        o.position = uniforms.viewProjection * vec4(i.position, 1.0);
+        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.6);
+        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: 64, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+    this.uniformBuffer = device.createBuffer({ size: 192, 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: {
+    const layout = device.createPipelineLayout({ bindGroupLayouts: [bgl] });
+    const vertexState = {
+      module: sm,
+      entryPoint: "vs",
+      buffers: [{
+        arrayStride: 24,
+        attributes: [
+          { shaderLocation: 0, offset: 0, format: "float32x3" },
+          { shaderLocation: 1, offset: 12, format: "float32x3" }
+        ]
+      }]
+    };
+    const blendState = {
+      color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha", operation: "add" },
+      alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" }
+    };
+    this.frontPipeline = device.createRenderPipeline({
+      layout,
+      vertex: vertexState,
+      fragment: {
         module: sm,
-        entryPoint: "vs",
-        buffers: [{
-          arrayStride: 24,
-          attributes: [
-            { shaderLocation: 0, offset: 0, format: "float32x3" },
-            { shaderLocation: 1, offset: 12, format: "float32x3" }
-          ]
-        }]
+        entryPoint: "fs",
+        targets: [{ format: this.renderer.format, blend: blendState }]
       },
+      primitive: { topology: "line-list", cullMode: "none" },
+      depthStencil: { format: this.renderer.depthFormat, depthWriteEnabled: false, depthCompare: "less-equal" }
+    });
+    this.behindPipeline = device.createRenderPipeline({
+      layout,
+      vertex: vertexState,
       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" }
-          }
-        }]
+        entryPoint: "fsBehind",
+        targets: [{ format: this.renderer.format, blend: blendState }]
       },
       primitive: { topology: "line-list", cullMode: "none" },
-      depthStencil: { format: this.renderer.depthFormat, depthWriteEnabled: false, depthCompare: "always" }
+      depthStencil: { format: this.renderer.depthFormat, depthWriteEnabled: false, depthCompare: "greater" }
     });
   }
   // ========== Box: 12 edges + grid lines on all 6 faces ==========
-  generateBoxVertices() {
-    const [cx, cy, cz] = this._volume.center;
+  generateBoxVertices(color) {
     const [lx, ly, lz] = this._volume.dimensions;
     const hx = lx / 2, hy = ly / 2, hz = lz / 2;
-    const [r, g, b] = this.lineColor;
+    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 = cx - hx, x1 = cx + hx;
-    const y0 = cy - hy, y1 = cy + hy;
-    const z0 = cz - hz, z1 = cz + hz;
+    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);
@@ -18024,25 +18044,24 @@ class SelectionVolumeRenderer {
     return new Float32Array(v);
   }
   // ========== Sphere: latitude + longitude rings ==========
-  generateSphereVertices() {
-    const [cx, cy, cz] = this._volume.center;
+  generateSphereVertices(color) {
     const radius = this._volume.dimensions[0];
-    const [r, g, b] = this.lineColor;
+    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(
-          cx + Math.cos(a0) * ringRadius,
-          cy + centerY,
-          cz + Math.sin(a0) * ringRadius,
+          Math.cos(a0) * ringRadius,
+          centerY,
+          Math.sin(a0) * ringRadius,
           r,
           g,
           b,
-          cx + Math.cos(a1) * ringRadius,
-          cy + centerY,
-          cz + Math.sin(a1) * ringRadius,
+          Math.cos(a1) * ringRadius,
+          centerY,
+          Math.sin(a1) * ringRadius,
           r,
           g,
           b
@@ -18062,15 +18081,15 @@ class SelectionVolumeRenderer {
         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,
+          Math.sin(phi0) * Math.sin(theta) * radius,
+          Math.cos(phi0) * radius,
+          Math.sin(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,
+          Math.sin(phi1) * Math.sin(theta) * radius,
+          Math.cos(phi1) * radius,
+          Math.sin(phi1) * Math.cos(theta) * radius,
           r,
           g,
           b
@@ -18080,19 +18099,36 @@ class SelectionVolumeRenderer {
     return new Float32Array(v);
   }
   render(pass) {
-    if (!this._volume.type || !this.pipeline || !this.bindGroup || !this.vertexBuffer || !this.uniformBuffer) return;
+    if (!this._volume.type || !this.frontPipeline || !this.behindPipeline || !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;
+    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, verts.buffer);
-    device.queue.writeBuffer(this.uniformBuffer, 0, new Float32Array(this.camera.viewProjectionMatrix));
-    pass.setPipeline(this.pipeline);
+    device.queue.writeBuffer(this.vertexBuffer, 0, frontVerts.buffer);
+    pass.setPipeline(this.frontPipeline);
+    pass.setBindGroup(0, this.bindGroup);
+    pass.setVertexBuffer(0, this.vertexBuffer);
+    pass.draw(this.vertexCount);
+    pass.setPipeline(this.behindPipeline);
     pass.setBindGroup(0, this.bindGroup);
     pass.setVertexBuffer(0, this.vertexBuffer);
     pass.draw(this.vertexCount);
@@ -18103,7 +18139,8 @@ class SelectionVolumeRenderer {
     (_b2 = this.uniformBuffer) == null ? void 0 : _b2.destroy();
     this.vertexBuffer = null;
     this.uniformBuffer = null;
-    this.pipeline = null;
+    this.frontPipeline = null;
+    this.behindPipeline = null;
     this.bindGroup = null;
   }
 }
@@ -18189,16 +18226,13 @@ class SplatEditor {
       this.toolOverlay.style.display = name && !isVolumeTool ? "block" : "none";
       if (isVolumeTool && this.volumeRenderer) {
         const volType = name;
-        const bounds = this.getModelBounds();
-        const defaultSize = Math.max(bounds.size[0], bounds.size[1], bounds.size[2]) * 0.3;
-        const safeSize = Math.max(defaultSize, 0.5);
+        const center = this.getModelCenter();
         if (volType === "box") {
-          this.boxTool.setDimensions(safeSize, safeSize, safeSize);
-          this.volumeRenderer.setVolume("box", bounds.center, [safeSize, safeSize, safeSize]);
+          const lx = this.boxTool.lenX, ly = this.boxTool.lenY, lz = this.boxTool.lenZ;
+          this.volumeRenderer.setVolume("box", center, [lx, ly, lz]);
         } else {
-          const r = safeSize / 2;
-          this.sphereTool.setRadius(r);
-          this.volumeRenderer.setVolume("sphere", bounds.center, [r, 0, 0]);
+          const r = this.sphereTool.radius;
+          this.volumeRenderer.setVolume("sphere", center, [r, 0, 0]);
         }
         (_b2 = (_a2 = this.callbacks).onVolumeToolActivated) == null ? void 0 : _b2.call(_a2, this.volumeRenderer.volume);
       } else {