@d5techs/3dgs-lib 1.4.40 → 1.4.42

package/dist/3dgs-lib.js

@@ -2080,10 +2080,12 @@ const WGSL = (
   /* wgsl */
   `
 struct Uniforms {
-    invViewProjNoTrans: mat4x4<f32>,
+    col0: vec4<f32>,
+    col1: vec4<f32>,
+    col2: vec4<f32>,
 };
 
-@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+@group(0) @binding(0) var<uniform> u: Uniforms;
 @group(0) @binding(1) var cubeSampler: sampler;
 @group(0) @binding(2) var cubeTexture: texture_cube<f32>;
 
@@ -2102,88 +2104,58 @@ fn vs(@builtin(vertex_index) vi: u32) -> VSOut {
     var out: VSOut;
     let p = positions[vi];
     out.position = vec4<f32>(p, 0.0, 1.0);
-    let unprojected = uniforms.invViewProjNoTrans * vec4<f32>(p, 1.0, 1.0);
-    out.dir = unprojected.xyz / unprojected.w;
+
+    // col0.w = 1/proj[0] (aspect*tan(fov/2)), col1.w = 1/proj[5] (tan(fov/2))
+    let eyeDir = vec3<f32>(p.x * u.col0.w, p.y * u.col1.w, -1.0);
+
+    // col0..2.xyz = rows of inverse view rotation (= transpose of view rotation)
+    out.dir = vec3<f32>(
+        dot(u.col0.xyz, eyeDir),
+        dot(u.col1.xyz, eyeDir),
+        dot(u.col2.xyz, eyeDir),
+    );
     return out;
 }
 
 @fragment
 fn fs(input: VSOut) -> @location(0) vec4<f32> {
-    return textureSample(cubeTexture, cubeSampler, normalize(input.dir));
+    let color = textureSample(cubeTexture, cubeSampler, normalize(input.dir));
+    return vec4<f32>(color.rgb, 1.0);
 }
 `
 );
 class SkyboxRenderer {
   constructor(device, format, depthFormat) {
     __publicField(this, "device");
-    __publicField(this, "format");
-    __publicField(this, "depthFormat");
-    __publicField(this, "shaderModule");
-    __publicField(this, "bindGroupLayout");
-    __publicField(this, "pipelineLayout");
     __publicField(this, "pipeline");
     __publicField(this, "uniformBuffer");
     __publicField(this, "sampler");
-    __publicField(this, "scratchViewNoTrans", new Float32Array(16));
-    __publicField(this, "scratchVp", new Float32Array(16));
-    __publicField(this, "scratchInv", new Float32Array(16));
+    __publicField(this, "bindGroupLayout");
+    __publicField(this, "uniformData", new Float32Array(12));
     __publicField(this, "cubeTexture", null);
     __publicField(this, "cubeBindGroup", null);
+    __publicField(this, "frameReady", false);
     this.device = device;
-    this.format = format;
-    this.depthFormat = depthFormat;
-    this.shaderModule = device.createShaderModule({ code: WGSL });
+    const shaderModule = device.createShaderModule({ code: WGSL });
     this.bindGroupLayout = device.createBindGroupLayout({
       entries: [
-        {
-          binding: 0,
-          visibility: GPUShaderStage.VERTEX,
-          buffer: { type: "uniform", minBindingSize: 64 }
-        },
-        {
-          binding: 1,
-          visibility: GPUShaderStage.FRAGMENT,
-          sampler: { type: "filtering" }
-        },
-        {
-          binding: 2,
-          visibility: GPUShaderStage.FRAGMENT,
-          texture: { sampleType: "float", viewDimension: "cube" }
-        }
+        { binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: "uniform" } },
+        { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+        { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float", viewDimension: "cube" } }
       ]
     });
-    this.pipelineLayout = device.createPipelineLayout({
-      bindGroupLayouts: [this.bindGroupLayout]
-    });
     this.pipeline = device.createRenderPipeline({
-      layout: this.pipelineLayout,
-      vertex: {
-        module: this.shaderModule,
-        entryPoint: "vs"
-      },
-      fragment: {
-        module: this.shaderModule,
-        entryPoint: "fs",
-        targets: [{ format: this.format }]
-      },
-      primitive: {
-        topology: "triangle-list",
-        cullMode: "none"
-      },
-      depthStencil: {
-        format: this.depthFormat,
-        depthWriteEnabled: false,
-        depthCompare: "always"
-      }
+      layout: device.createPipelineLayout({ bindGroupLayouts: [this.bindGroupLayout] }),
+      vertex: { module: shaderModule, entryPoint: "vs" },
+      fragment: { module: shaderModule, entryPoint: "fs", targets: [{ format }] },
+      primitive: { topology: "triangle-list", cullMode: "none" },
+      depthStencil: { format: depthFormat, depthWriteEnabled: false, depthCompare: "always" }
     });
     this.uniformBuffer = device.createBuffer({
-      size: 64,
+      size: 48,
       usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
     });
-    this.sampler = device.createSampler({
-      magFilter: "linear",
-      minFilter: "linear"
-    });
+    this.sampler = device.createSampler({ magFilter: "linear", minFilter: "linear" });
   }
   get isActive() {
     return this.cubeTexture !== null && this.cubeBindGroup !== null;
@@ -2193,11 +2165,8 @@ class SkyboxRenderer {
     const bitmaps = await Promise.all(
       faceUrls.map(async (url) => {
         const res = await fetch(url);
-        if (!res.ok) {
-          throw new Error(`SkyboxRenderer: failed to fetch ${url} (${res.status})`);
-        }
-        const blob = await res.blob();
-        return createImageBitmap(blob);
+        if (!res.ok) throw new Error(`SkyboxRenderer: failed to fetch ${url} (${res.status})`);
+        return createImageBitmap(await res.blob());
       })
     );
     const width = bitmaps[0].width;
@@ -2222,31 +2191,43 @@ class SkyboxRenderer {
       );
     }
     bitmaps.forEach((b) => b.close());
-    const cubeView = tex.createView({ dimension: "cube" });
-    const bindGroup = this.device.createBindGroup({
+    this.cubeBindGroup = this.device.createBindGroup({
       layout: this.bindGroupLayout,
       entries: [
         { binding: 0, resource: { buffer: this.uniformBuffer } },
         { binding: 1, resource: this.sampler },
-        { binding: 2, resource: cubeView }
+        { binding: 2, resource: tex.createView({ dimension: "cube" }) }
       ]
     });
     this.cubeTexture = tex;
-    this.cubeBindGroup = bindGroup;
   }
-  render(pass, viewMatrix, projectionMatrix) {
-    if (!this.isActive || !this.cubeBindGroup) {
-      return;
-    }
-    this.scratchViewNoTrans.set(viewMatrix);
-    this.scratchViewNoTrans[12] = 0;
-    this.scratchViewNoTrans[13] = 0;
-    this.scratchViewNoTrans[14] = 0;
-    SkyboxRenderer.multiplyMat4(this.scratchVp, projectionMatrix, this.scratchViewNoTrans);
-    if (!SkyboxRenderer.invertMat4(this.scratchInv, this.scratchVp)) {
+  /**
+   * Write uniforms BEFORE beginFrame(). No matrix inversion needed —
+   * we extract the view rotation transpose and inverse projection scalars directly.
+   */
+  prepareFrame(viewMatrix, projectionMatrix) {
+    if (!this.isActive) {
+      this.frameReady = false;
       return;
     }
-    this.device.queue.writeBuffer(this.uniformBuffer, 0, this.scratchInv);
+    const ud = this.uniformData;
+    ud[0] = viewMatrix[0];
+    ud[1] = viewMatrix[1];
+    ud[2] = viewMatrix[2];
+    ud[3] = 1 / projectionMatrix[0];
+    ud[4] = viewMatrix[4];
+    ud[5] = viewMatrix[5];
+    ud[6] = viewMatrix[6];
+    ud[7] = 1 / projectionMatrix[5];
+    ud[8] = viewMatrix[8];
+    ud[9] = viewMatrix[9];
+    ud[10] = viewMatrix[10];
+    ud[11] = 0;
+    this.device.queue.writeBuffer(this.uniformBuffer, 0, ud);
+    this.frameReady = true;
+  }
+  draw(pass) {
+    if (!this.frameReady || !this.cubeBindGroup) return;
     pass.setPipeline(this.pipeline);
     pass.setBindGroup(0, this.cubeBindGroup);
     pass.draw(3);
@@ -2257,46 +2238,12 @@ class SkyboxRenderer {
       this.cubeTexture = null;
     }
     this.cubeBindGroup = null;
+    this.frameReady = false;
   }
   destroy() {
     this.clear();
     this.uniformBuffer.destroy();
   }
-  static invertMat4(out, e) {
-    const inv = new Float32Array(16);
-    inv[0] = e[5] * e[10] * e[15] - e[5] * e[11] * e[14] - e[9] * e[6] * e[15] + e[9] * e[7] * e[14] + e[13] * e[6] * e[11] - e[13] * e[7] * e[10];
-    inv[4] = -e[4] * e[10] * e[15] + e[4] * e[11] * e[14] + e[8] * e[6] * e[15] - e[8] * e[7] * e[14] - e[12] * e[6] * e[11] + e[12] * e[7] * e[10];
-    inv[8] = e[4] * e[9] * e[15] - e[4] * e[11] * e[13] - e[8] * e[5] * e[15] + e[8] * e[7] * e[13] + e[12] * e[5] * e[11] - e[12] * e[7] * e[9];
-    inv[12] = -e[4] * e[9] * e[14] + e[4] * e[10] * e[13] + e[8] * e[5] * e[14] - e[8] * e[6] * e[13] - e[12] * e[5] * e[10] + e[12] * e[6] * e[9];
-    inv[1] = -e[1] * e[10] * e[15] + e[1] * e[11] * e[14] + e[9] * e[2] * e[15] - e[9] * e[3] * e[14] - e[13] * e[2] * e[11] + e[13] * e[3] * e[10];
-    inv[5] = e[0] * e[10] * e[15] - e[0] * e[11] * e[14] - e[8] * e[2] * e[15] + e[8] * e[3] * e[14] + e[12] * e[2] * e[11] - e[12] * e[3] * e[10];
-    inv[9] = -e[0] * e[9] * e[15] + e[0] * e[11] * e[13] + e[8] * e[1] * e[15] - e[8] * e[3] * e[13] - e[12] * e[1] * e[11] + e[12] * e[3] * e[9];
-    inv[13] = e[0] * e[9] * e[14] - e[0] * e[10] * e[13] - e[8] * e[1] * e[14] + e[8] * e[2] * e[13] + e[12] * e[1] * e[10] - e[12] * e[2] * e[9];
-    inv[2] = e[1] * e[6] * e[15] - e[1] * e[7] * e[14] - e[5] * e[2] * e[15] + e[5] * e[3] * e[14] + e[13] * e[2] * e[7] - e[13] * e[3] * e[6];
-    inv[6] = -e[0] * e[6] * e[15] + e[0] * e[7] * e[14] + e[4] * e[2] * e[15] - e[4] * e[3] * e[14] - e[12] * e[2] * e[7] + e[12] * e[3] * e[6];
-    inv[10] = e[0] * e[5] * e[15] - e[0] * e[7] * e[13] - e[4] * e[1] * e[15] + e[4] * e[3] * e[13] + e[12] * e[1] * e[7] - e[12] * e[3] * e[5];
-    inv[14] = -e[0] * e[5] * e[14] + e[0] * e[6] * e[13] + e[4] * e[1] * e[14] - e[4] * e[2] * e[13] - e[12] * e[1] * e[6] + e[12] * e[2] * e[5];
-    inv[3] = -e[1] * e[6] * e[11] + e[1] * e[7] * e[10] + e[5] * e[2] * e[11] - e[5] * e[3] * e[10] - e[9] * e[2] * e[7] + e[9] * e[3] * e[6];
-    inv[7] = e[0] * e[6] * e[11] - e[0] * e[7] * e[10] - e[4] * e[2] * e[11] + e[4] * e[3] * e[10] + e[8] * e[2] * e[7] - e[8] * e[3] * e[6];
-    inv[11] = -e[0] * e[5] * e[11] + e[0] * e[7] * e[9] + e[4] * e[1] * e[11] - e[4] * e[3] * e[9] - e[8] * e[1] * e[7] + e[8] * e[3] * e[5];
-    inv[15] = e[0] * e[5] * e[10] - e[0] * e[6] * e[9] - e[4] * e[1] * e[10] + e[4] * e[2] * e[9] + e[8] * e[1] * e[6] - e[8] * e[2] * e[5];
-    const det = e[0] * inv[0] + e[1] * inv[4] + e[2] * inv[8] + e[3] * inv[12];
-    if (Math.abs(det) < 1e-10) {
-      return false;
-    }
-    const invDet = 1 / det;
-    for (let i = 0; i < 16; i++) {
-      out[i] = inv[i] * invDet;
-    }
-    return true;
-  }
-  static multiplyMat4(out, a, b) {
-    for (let c = 0; c < 4; c++) {
-      for (let r = 0; r < 4; r++) {
-        out[c * 4 + r] = a[0 * 4 + r] * b[c * 4 + 0] + a[1 * 4 + r] * b[c * 4 + 1] + a[2 * 4 + r] * b[c * 4 + 2] + a[3 * 4 + r] * b[c * 4 + 3];
-      }
-    }
-  }
 }
 class Mesh {
   constructor(vertexBuffer, vertexCount, indexBuffer = null, indexCount = 0, boundingBox) {
@@ -18904,14 +18851,17 @@ class App {
     }
   }
   render() {
-    var _a2;
+    var _a2, _b2;
     this.camera.setAspect(this.renderer.getAspectRatio());
     this.controls.update();
     this.updateAdaptivePerformance();
     this.hotspotManager.updateBillboards();
-    const pass = this.renderer.beginFrame();
     if ((_a2 = this.skyboxRenderer) == null ? void 0 : _a2.isActive) {
-      this.skyboxRenderer.render(pass, this.camera.viewMatrix, this.camera.projectionMatrix);
+      this.skyboxRenderer.prepareFrame(this.camera.viewMatrix, this.camera.projectionMatrix);
+    }
+    const pass = this.renderer.beginFrame();
+    if ((_b2 = this.skyboxRenderer) == null ? void 0 : _b2.isActive) {
+      this.skyboxRenderer.draw(pass);
     }
     const gsRenderer = this.sceneManager.getGSRenderer();
     if (gsRenderer) {