@d5techs/3dgs-lib 1.4.37 → 1.4.39

package/dist/3dgs-lib.js

@@ -628,9 +628,10 @@ const _OrbitControls = class _OrbitControls {
     // 移动端触摸灵敏度
     __publicField(this, "touchZoomSpeed", 0.01);
     __publicField(this, "touchPanSpeed", 3e-3);
-    // 缩放步长上限：用 min(distance, zoomDistanceCap) 计算每步的绝对位移，
-    // 使远距离时缩放速度由模型尺寸而非 target 位置决定。frameModel 会自动设置为 radius。
+    // 缩放步长上限：取 min(distance, cameraToCenterDist, zoomDistanceCap)，
+    // 使缩放速度始终与相机到模型的真实距离匹配，而非 target 位置。
     __publicField(this, "zoomDistanceCap", Infinity);
+    __publicField(this, "_modelCenter", [0, 0, 0]);
     // 阻尼：每帧应用全量 delta，然后 delta *= (1 - dampingFactor) 实现惯性
     __publicField(this, "enableDamping", true);
     __publicField(this, "dampingFactor", 0.1);
@@ -795,7 +796,7 @@ const _OrbitControls = class _OrbitControls {
       this.deltaDistance = Math.sign(this.deltaDistance) * Math.min(Math.abs(this.deltaDistance), maxAccum);
     } else {
       const factor = Math.exp(zoomDelta);
-      const effectiveDist = Math.min(this.distance, this.zoomDistanceCap);
+      const effectiveDist = this.getEffectiveZoomDist();
       this.distance -= effectiveDist * (1 - factor);
       this.distance = Math.max(
         this.minDistance,
@@ -946,7 +947,7 @@ const _OrbitControls = class _OrbitControls {
           this.deltaDistance += -Math.log(ratio) * this.dampingFactor;
         } else {
           const factor = 1 / ratio;
-          const effectiveDist = Math.min(this.distance, this.zoomDistanceCap);
+          const effectiveDist = this.getEffectiveZoomDist();
           this.distance -= effectiveDist * (1 - factor);
           this.distance = Math.max(
             this.minDistance,
@@ -1010,6 +1011,17 @@ const _OrbitControls = class _OrbitControls {
     this.camera.position[2] = this.camera.target[2] + this.distance * sinPhi * cosTheta;
     this.camera.updateMatrix();
   }
+  /**
+   * 缩放有效距离：取 distance、相机到模型中心距离、zoomDistanceCap 三者最小值。
+   * 保证缩放步长始终与相机到模型的真实接近程度匹配。
+   */
+  getEffectiveZoomDist() {
+    const cp = this.camera.position;
+    const mc = this._modelCenter;
+    const dx = cp[0] - mc[0], dy = cp[1] - mc[1], dz = cp[2] - mc[2];
+    const camToCenter = Math.sqrt(dx * dx + dy * dy + dz * dz);
+    return Math.min(this.distance, camToCenter, this.zoomDistanceCap);
+  }
   /**
    * 每帧调用：应用阻尼衰减并更新相机
    * 在渲染循环中调用此方法以获得平滑惯性效果
@@ -1028,7 +1040,7 @@ const _OrbitControls = class _OrbitControls {
       if (Math.abs(this.deltaPhi) < EPS) this.deltaPhi = 0;
       if (Math.abs(this.deltaDistance) > EPS) {
         const factor = Math.exp(this.deltaDistance);
-        const effectiveDist = Math.min(this.distance, this.zoomDistanceCap);
+        const effectiveDist = this.getEffectiveZoomDist();
         this.distance -= effectiveDist * (1 - factor);
         this.distance = Math.max(
           this.minDistance,
@@ -1130,6 +1142,7 @@ const _OrbitControls = class _OrbitControls {
   frameModel(center, radius, animate = true) {
     this.clearVelocity();
     this.zoomDistanceCap = radius;
+    this._modelCenter = [center[0], center[1], center[2]];
     const fovRad = this.camera.fov;
     const halfFov = fovRad / 2;
     const marginFactor = 1.5;
@@ -2063,6 +2076,228 @@ class SceneAidsRenderer {
     this.axesBindGroup = null;
   }
 }
+const WGSL = (
+  /* wgsl */
+  `
+struct Uniforms {
+    invViewProjNoTrans: mat4x4<f32>,
+};
+
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+@group(0) @binding(1) var cubeSampler: sampler;
+@group(0) @binding(2) var cubeTexture: texture_cube<f32>;
+
+struct VSOut {
+    @builtin(position) position: vec4<f32>,
+    @location(0) dir: vec3<f32>,
+};
+
+@vertex
+fn vs(@builtin(vertex_index) vi: u32) -> VSOut {
+    let positions = array<vec2<f32>, 3>(
+        vec2<f32>(-1.0, -1.0),
+        vec2<f32>(3.0, -1.0),
+        vec2<f32>(-1.0, 3.0),
+    );
+    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;
+    return out;
+}
+
+@fragment
+fn fs(input: VSOut) -> @location(0) vec4<f32> {
+    return textureSample(cubeTexture, cubeSampler, normalize(input.dir));
+}
+`
+);
+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, "cubeTexture", null);
+    __publicField(this, "cubeBindGroup", null);
+    this.device = device;
+    this.format = format;
+    this.depthFormat = depthFormat;
+    this.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" }
+        }
+      ]
+    });
+    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"
+      }
+    });
+    this.uniformBuffer = device.createBuffer({
+      size: 64,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    this.sampler = device.createSampler({
+      magFilter: "linear",
+      minFilter: "linear"
+    });
+  }
+  get isActive() {
+    return this.cubeTexture !== null && this.cubeBindGroup !== null;
+  }
+  async loadCubemap(faceUrls) {
+    this.clear();
+    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);
+      })
+    );
+    const width = bitmaps[0].width;
+    const height = bitmaps[0].height;
+    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");
+      }
+    }
+    const tex = this.device.createTexture({
+      dimension: "2d",
+      size: [width, height, 6],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+    });
+    for (let layer = 0; layer < 6; layer++) {
+      this.device.queue.copyExternalImageToTexture(
+        { source: bitmaps[layer] },
+        { texture: tex, mipLevel: 0, origin: { x: 0, y: 0, z: layer } },
+        { width, height, depthOrArrayLayers: 1 }
+      );
+    }
+    bitmaps.forEach((b) => b.close());
+    const cubeView = tex.createView({ dimension: "cube" });
+    const bindGroup = this.device.createBindGroup({
+      layout: this.bindGroupLayout,
+      entries: [
+        { binding: 0, resource: { buffer: this.uniformBuffer } },
+        { binding: 1, resource: this.sampler },
+        { binding: 2, resource: cubeView }
+      ]
+    });
+    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)) {
+      return;
+    }
+    this.device.queue.writeBuffer(this.uniformBuffer, 0, this.scratchInv);
+    pass.setPipeline(this.pipeline);
+    pass.setBindGroup(0, this.cubeBindGroup);
+    pass.draw(3);
+  }
+  clear() {
+    if (this.cubeTexture) {
+      this.cubeTexture.destroy();
+      this.cubeTexture = null;
+    }
+    this.cubeBindGroup = null;
+  }
+  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) {
     __publicField(this, "vertexBuffer");
@@ -18229,6 +18464,7 @@ class App {
     __publicField(this, "gizmoManager");
     __publicField(this, "hotspotManager");
     __publicField(this, "sceneAids");
+    __publicField(this, "skyboxRenderer", null);
     __publicField(this, "isRunning", false);
     __publicField(this, "animationId", 0);
     // 是否使用移动端渲染器
@@ -18668,11 +18904,15 @@ class App {
     }
   }
   render() {
+    var _a2;
     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);
+    }
     const gsRenderer = this.sceneManager.getGSRenderer();
     if (gsRenderer) {
       gsRenderer.render(pass);
@@ -18832,6 +19072,34 @@ class App {
     return false;
   }
   // ============================================
+  // Skybox
+  // ============================================
+  async setSkybox(faceUrls) {
+    if (!this.skyboxRenderer) {
+      this.skyboxRenderer = new SkyboxRenderer(
+        this.renderer.device,
+        this.renderer.format,
+        "depth24plus"
+      );
+    }
+    await this.skyboxRenderer.loadCubemap([
+      faceUrls.posX,
+      faceUrls.negX,
+      faceUrls.posY,
+      faceUrls.negY,
+      faceUrls.posZ,
+      faceUrls.negZ
+    ]);
+  }
+  clearSkybox() {
+    var _a2;
+    (_a2 = this.skyboxRenderer) == null ? void 0 : _a2.clear();
+  }
+  isSkyboxActive() {
+    var _a2;
+    return ((_a2 = this.skyboxRenderer) == null ? void 0 : _a2.isActive) ?? false;
+  }
+  // ============================================
   // Gizmo（委托给 GizmoManager）
   // ============================================
   getTransformGizmo() {
@@ -19292,6 +19560,7 @@ export {
   SHMode,
   SceneAidsRenderer,
   SceneManager,
+  SkyboxRenderer,
   SplatBoundingBoxProvider,
   SplatEditor,
   SplatState,