@d5techs/3dgs-lib 1.4.45 → 1.4.46

package/dist/3dgs-lib.js

@@ -1013,6 +1013,12 @@ const _OrbitControls = class _OrbitControls {
     this.camera.position[2] = this.camera.target[2] + this.distance * sinPhi * cosTheta;
     this.camera.updateMatrix();
   }
+  get modelCenter() {
+    return [this._modelCenter[0], this._modelCenter[1], this._modelCenter[2]];
+  }
+  get modelRadius() {
+    return this.zoomDistanceCap;
+  }
   /**
    * 旋转速度缩放：当 target 远离模型时降低旋转灵敏度，
    * 使模型在屏幕上的视觉运动速度保持一致。
@@ -2097,6 +2103,7 @@ struct Uniforms {
     col0: vec4<f32>,
     col1: vec4<f32>,
     col2: vec4<f32>,
+    extra: vec4<f32>,
 };
 
 @group(0) @binding(0) var<uniform> u: Uniforms;
@@ -2108,6 +2115,12 @@ struct VSOut {
     @location(0) dir: vec3<f32>,
 };
 
+fn rotateX(d: vec3<f32>, angle: f32) -> vec3<f32> {
+    let c = cos(angle);
+    let s = sin(angle);
+    return vec3<f32>(d.x, c * d.y - s * d.z, s * d.y + c * d.z);
+}
+
 @vertex
 fn vs(@builtin(vertex_index) vi: u32) -> VSOut {
     let positions = array<vec2<f32>, 3>(
@@ -2119,15 +2132,17 @@ fn vs(@builtin(vertex_index) vi: u32) -> VSOut {
     let p = positions[vi];
     out.position = vec4<f32>(p, 0.0, 1.0);
 
-    // 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>(
+    var worldDir = vec3<f32>(
         dot(u.col0.xyz, eyeDir),
         dot(u.col1.xyz, eyeDir),
         dot(u.col2.xyz, eyeDir),
     );
+
+    worldDir = rotateX(worldDir, u.extra.x);
+
+    out.dir = worldDir;
     return out;
 }
 
@@ -2145,31 +2160,57 @@ class SkyboxRenderer {
     __publicField(this, "uniformBuffer");
     __publicField(this, "sampler");
     __publicField(this, "bindGroupLayout");
-    __publicField(this, "uniformData", new Float32Array(12));
+    __publicField(this, "uniformData", new Float32Array(16));
     __publicField(this, "cubeTexture", null);
     __publicField(this, "cubeBindGroup", null);
     __publicField(this, "frameReady", false);
+    __publicField(this, "alignToGround", true);
     this.device = device;
     const shaderModule = device.createShaderModule({ code: WGSL });
     this.bindGroupLayout = device.createBindGroupLayout({
       entries: [
-        { 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" } }
+        {
+          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.pipeline = device.createRenderPipeline({
-      layout: device.createPipelineLayout({ bindGroupLayouts: [this.bindGroupLayout] }),
+      layout: device.createPipelineLayout({
+        bindGroupLayouts: [this.bindGroupLayout]
+      }),
       vertex: { module: shaderModule, entryPoint: "vs" },
-      fragment: { module: shaderModule, entryPoint: "fs", targets: [{ format }] },
+      fragment: {
+        module: shaderModule,
+        entryPoint: "fs",
+        targets: [{ format }]
+      },
       primitive: { topology: "triangle-list", cullMode: "none" },
-      depthStencil: { format: depthFormat, depthWriteEnabled: false, depthCompare: "always" }
+      depthStencil: {
+        format: depthFormat,
+        depthWriteEnabled: false,
+        depthCompare: "always"
+      }
     });
     this.uniformBuffer = device.createBuffer({
-      size: 48,
+      size: 64,
       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;
@@ -2179,7 +2220,10 @@ 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})`);
+        if (!res.ok)
+          throw new Error(
+            `SkyboxRenderer: failed to fetch ${url} (${res.status})`
+          );
         return createImageBitmap(await res.blob());
       })
     );
@@ -2188,7 +2232,9 @@ class SkyboxRenderer {
     for (let i = 1; i < 6; i++) {
       if (bitmaps[i].width !== width || bitmaps[i].height !== height) {
         bitmaps.forEach((b) => b.close());
-        throw new Error("SkyboxRenderer: all cubemap faces must share the same dimensions");
+        throw new Error(
+          "SkyboxRenderer: all cubemap faces must share the same dimensions"
+        );
       }
     }
     const tex = this.device.createTexture({
@@ -2216,10 +2262,11 @@ class SkyboxRenderer {
     this.cubeTexture = tex;
   }
   /**
-   * Write uniforms BEFORE beginFrame(). No matrix inversion needed —
-   * we extract the view rotation transpose and inverse projection scalars directly.
+   * Write uniforms BEFORE beginFrame().
+   * pitchOffset: radians to rotate sampling direction around world X axis,
+   * used to align skybox horizon with model ground plane.
    */
-  prepareFrame(viewMatrix, projectionMatrix) {
+  prepareFrame(viewMatrix, projectionMatrix, pitchOffset = 0) {
     if (!this.isActive) {
       this.frameReady = false;
       return;
@@ -2237,6 +2284,10 @@ class SkyboxRenderer {
     ud[9] = viewMatrix[9];
     ud[10] = viewMatrix[10];
     ud[11] = 0;
+    ud[12] = pitchOffset;
+    ud[13] = 0;
+    ud[14] = 0;
+    ud[15] = 0;
     this.device.queue.writeBuffer(this.uniformBuffer, 0, ud);
     this.frameReady = true;
   }
@@ -18871,7 +18922,26 @@ class App {
     this.updateAdaptivePerformance();
     this.hotspotManager.updateBillboards();
     if ((_a2 = this.skyboxRenderer) == null ? void 0 : _a2.isActive) {
-      this.skyboxRenderer.prepareFrame(this.camera.viewMatrix, this.camera.projectionMatrix);
+      let pitchOffset = 0;
+      if (this.skyboxRenderer.alignToGround) {
+        const cam = this.camera.position;
+        const mc = this.controls.modelCenter;
+        const mr = this.controls.modelRadius;
+        if (mr !== Infinity) {
+          const groundY = mc[1] - mr;
+          const heightAboveGround = cam[1] - groundY;
+          const dx = cam[0] - mc[0];
+          const dz = cam[2] - mc[2];
+          const hDist = Math.sqrt(dx * dx + dz * dz);
+          const raw = Math.atan2(heightAboveGround, Math.max(hDist, 0.01));
+          pitchOffset = Math.max(-1.2, Math.min(1.2, raw));
+        }
+      }
+      this.skyboxRenderer.prepareFrame(
+        this.camera.viewMatrix,
+        this.camera.projectionMatrix,
+        pitchOffset
+      );
     }
     const pass = this.renderer.beginFrame();
     if ((_b2 = this.skyboxRenderer) == null ? void 0 : _b2.isActive) {
@@ -19063,6 +19133,11 @@ class App {
     var _a2;
     return ((_a2 = this.skyboxRenderer) == null ? void 0 : _a2.isActive) ?? false;
   }
+  setSkyboxAlignToGround(value) {
+    if (this.skyboxRenderer) {
+      this.skyboxRenderer.alignToGround = value;
+    }
+  }
   // ============================================
   // Gizmo（委托给 GizmoManager）
   // ============================================