@d5techs/3dgs-lib 1.4.38 → 1.4.39

package/dist/3dgs-lib.js

@@ -2076,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");
@@ -18242,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);
     // 是否使用移动端渲染器
@@ -18681,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);
@@ -18845,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() {
@@ -19305,6 +19560,7 @@ export {
   SHMode,
   SceneAidsRenderer,
   SceneManager,
+  SkyboxRenderer,
   SplatBoundingBoxProvider,
   SplatEditor,
   SplatState,