@d5techs/3dgs-lib 1.4.79 → 1.4.80

package/dist/3dgs-lib.js

@@ -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;
   }
 }