@d5techs/3dgs-lib 1.4.52 → 1.4.53

package/dist/3dgs-lib.js

@@ -2096,122 +2096,199 @@ class SceneAidsRenderer {
     this.axesBindGroup = null;
   }
 }
-const WGSL = (
+async function loadHdr(url) {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`HdrLoader: fetch failed ${url} (${res.status})`);
+  const buf = await res.arrayBuffer();
+  return parseHdr(new Uint8Array(buf));
+}
+function parseHdr(bytes) {
+  let pos = 0;
+  const readLine = () => {
+    let line = "";
+    while (pos < bytes.length) {
+      const c = bytes[pos++];
+      if (c === 10) return line;
+      line += String.fromCharCode(c);
+    }
+    return line;
+  };
+  const magic = readLine();
+  if (!magic.startsWith("#?")) throw new Error("HdrLoader: not a Radiance HDR file");
+  while (pos < bytes.length) {
+    const line = readLine();
+    if (line.length === 0) break;
+  }
+  const resLine = readLine();
+  const m = resLine.match(/-Y\s+(\d+)\s+\+X\s+(\d+)/);
+  if (!m) throw new Error("HdrLoader: unsupported resolution format: " + resLine);
+  const height = parseInt(m[1], 10);
+  const width = parseInt(m[2], 10);
+  const rgbe = new Uint8Array(width * height * 4);
+  for (let y = 0; y < height; y++) {
+    const scanline = decodeScanline(bytes, pos, width);
+    pos = scanline.newPos;
+    rgbe.set(scanline.pixels, y * width * 4);
+  }
+  const data = new Float32Array(width * height * 4);
+  for (let i = 0; i < width * height; i++) {
+    const r = rgbe[i * 4];
+    const g = rgbe[i * 4 + 1];
+    const b = rgbe[i * 4 + 2];
+    const e = rgbe[i * 4 + 3];
+    if (e === 0) {
+      data[i * 4] = 0;
+      data[i * 4 + 1] = 0;
+      data[i * 4 + 2] = 0;
+    } else {
+      const scale = Math.pow(2, e - 128 - 8);
+      data[i * 4] = r * scale;
+      data[i * 4 + 1] = g * scale;
+      data[i * 4 + 2] = b * scale;
+    }
+    data[i * 4 + 3] = 1;
+  }
+  return { width, height, data };
+}
+function decodeScanline(bytes, pos, width) {
+  const pixels = new Uint8Array(width * 4);
+  if (width < 8 || width > 32767) {
+    for (let i = 0; i < width * 4; i++) pixels[i] = bytes[pos++];
+    return { pixels, newPos: pos };
+  }
+  const b0 = bytes[pos], b1 = bytes[pos + 1], b22 = bytes[pos + 2], b3 = bytes[pos + 3];
+  if (b0 !== 2 || b1 !== 2 || (b22 & 128) !== 0) {
+    for (let i = 0; i < width * 4; i++) pixels[i] = bytes[pos++];
+    return { pixels, newPos: pos };
+  }
+  const lineWidth = b22 << 8 | b3;
+  if (lineWidth !== width) throw new Error("HdrLoader: scanline width mismatch");
+  pos += 4;
+  for (let ch = 0; ch < 4; ch++) {
+    let x = 0;
+    while (x < width) {
+      const code = bytes[pos++];
+      if (code > 128) {
+        const count = code - 128;
+        const val = bytes[pos++];
+        for (let i = 0; i < count; i++) pixels[(x + i) * 4 + ch] = val;
+        x += count;
+      } else {
+        for (let i = 0; i < code; i++) pixels[(x + i) * 4 + ch] = bytes[pos++];
+        x += code;
+      }
+    }
+  }
+  return { pixels, newPos: pos };
+}
+const CUBE_WGSL = (
   /* wgsl */
   `
-struct Uniforms {
-    col0: vec4<f32>,
-    col1: vec4<f32>,
-    col2: vec4<f32>,
-};
-
+struct Uniforms { col0: vec4<f32>, col1: vec4<f32>, col2: vec4<f32> };
 @group(0) @binding(0) var<uniform> u: 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 eyeDir = vec3<f32>(p.x * u.col0.w, p.y * u.col1.w, -1.0);
-
-    out.dir = vec3<f32>(
-        dot(u.col0.xyz, eyeDir),
-        dot(u.col1.xyz, eyeDir),
-        dot(u.col2.xyz, eyeDir),
-    );
-    return out;
+struct V { @builtin(position) pos: vec4<f32>, @location(0) dir: vec3<f32> };
+@vertex fn vs(@builtin(vertex_index) vi: u32) -> V {
+    let ps = array<vec2<f32>,3>(vec2(-1.,-1.),vec2(3.,-1.),vec2(-1.,3.));
+    var o: V; let p = ps[vi]; o.pos = vec4(p, 0., 1.);
+    let e = vec3(p.x*u.col0.w, p.y*u.col1.w, -1.);
+    o.dir = vec3(dot(u.col0.xyz,e), dot(u.col1.xyz,e), dot(u.col2.xyz,e));
+    return o;
 }
-
-@fragment
-fn fs(input: VSOut) -> @location(0) vec4<f32> {
-    let color = textureSample(cubeTexture, cubeSampler, normalize(input.dir));
-    return vec4<f32>(color.rgb, 1.0);
+@fragment fn fs(i: V) -> @location(0) vec4<f32> {
+    return vec4(textureSample(cubeTexture, cubeSampler, normalize(i.dir)).rgb, 1.);
+}`
+);
+const EQUIRECT_WGSL = (
+  /* wgsl */
+  `
+struct Uniforms { col0: vec4<f32>, col1: vec4<f32>, col2: vec4<f32> };
+@group(0) @binding(0) var<uniform> u: Uniforms;
+@group(0) @binding(1) var envSampler: sampler;
+@group(0) @binding(2) var envTexture: texture_2d<f32>;
+struct V { @builtin(position) pos: vec4<f32>, @location(0) dir: vec3<f32> };
+const PI: f32 = 3.14159265358979;
+@vertex fn vs(@builtin(vertex_index) vi: u32) -> V {
+    let ps = array<vec2<f32>,3>(vec2(-1.,-1.),vec2(3.,-1.),vec2(-1.,3.));
+    var o: V; let p = ps[vi]; o.pos = vec4(p, 0., 1.);
+    let e = vec3(p.x*u.col0.w, p.y*u.col1.w, -1.);
+    o.dir = vec3(dot(u.col0.xyz,e), dot(u.col1.xyz,e), dot(u.col2.xyz,e));
+    return o;
 }
-`
+@fragment fn fs(i: V) -> @location(0) vec4<f32> {
+    let d = normalize(i.dir);
+    let uv = vec2(atan2(d.z, d.x) / (2.*PI) + .5, asin(clamp(d.y,-1.,1.)) / PI + .5);
+    let c = textureSample(envTexture, envSampler, vec2(uv.x, 1. - uv.y)).rgb;
+    let mapped = c / (c + vec3(1.));
+    let gamma = pow(mapped, vec3(1./2.2));
+    return vec4(gamma, 1.);
+}`
 );
 class SkyboxRenderer {
   constructor(device, format, depthFormat) {
     __publicField(this, "device");
-    __publicField(this, "pipeline");
     __publicField(this, "uniformBuffer");
     __publicField(this, "sampler");
-    __publicField(this, "bindGroupLayout");
     __publicField(this, "uniformData", new Float32Array(12));
-    __publicField(this, "cubeTexture", null);
-    __publicField(this, "cubeBindGroup", null);
+    __publicField(this, "cubePipeline");
+    __publicField(this, "cubeBindGroupLayout");
+    __publicField(this, "equirectPipeline");
+    __publicField(this, "equirectBindGroupLayout");
+    __publicField(this, "texture", null);
+    __publicField(this, "bindGroup", null);
     __publicField(this, "frameReady", false);
+    __publicField(this, "mode", "none");
     this.device = device;
-    const shaderModule = device.createShaderModule({ code: WGSL });
-    this.bindGroupLayout = device.createBindGroupLayout({
+    const depthStencil = {
+      format: depthFormat,
+      depthWriteEnabled: false,
+      depthCompare: "always"
+    };
+    this.cubeBindGroupLayout = 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]
-      }),
-      vertex: { module: shaderModule, entryPoint: "vs" },
-      fragment: {
-        module: shaderModule,
-        entryPoint: "fs",
-        targets: [{ format }]
-      },
+    this.cubePipeline = device.createRenderPipeline({
+      layout: device.createPipelineLayout({ bindGroupLayouts: [this.cubeBindGroupLayout] }),
+      vertex: { module: device.createShaderModule({ code: CUBE_WGSL }), entryPoint: "vs" },
+      fragment: { module: device.createShaderModule({ code: CUBE_WGSL }), entryPoint: "fs", targets: [{ format }] },
       primitive: { topology: "triangle-list", cullMode: "none" },
-      depthStencil: {
-        format: depthFormat,
-        depthWriteEnabled: false,
-        depthCompare: "always"
-      }
+      depthStencil
+    });
+    this.equirectBindGroupLayout = 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: "2d" } }
+      ]
+    });
+    this.equirectPipeline = device.createRenderPipeline({
+      layout: device.createPipelineLayout({ bindGroupLayouts: [this.equirectBindGroupLayout] }),
+      vertex: { module: device.createShaderModule({ code: EQUIRECT_WGSL }), entryPoint: "vs" },
+      fragment: { module: device.createShaderModule({ code: EQUIRECT_WGSL }), entryPoint: "fs", targets: [{ format }] },
+      primitive: { topology: "triangle-list", cullMode: "none" },
+      depthStencil
     });
     this.uniformBuffer = device.createBuffer({
       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;
+    return this.mode !== "none" && this.texture !== null && this.bindGroup !== null;
   }
+  // ---- cubemap ----
   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})`
-          );
+        if (!res.ok) throw new Error(`SkyboxRenderer: failed to fetch ${url} (${res.status})`);
         return createImageBitmap(await res.blob());
       })
     );
@@ -2220,9 +2297,7 @@ 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({
@@ -2239,16 +2314,44 @@ class SkyboxRenderer {
       );
     }
     bitmaps.forEach((b) => b.close());
-    this.cubeBindGroup = this.device.createBindGroup({
-      layout: this.bindGroupLayout,
+    this.bindGroup = this.device.createBindGroup({
+      layout: this.cubeBindGroupLayout,
       entries: [
         { binding: 0, resource: { buffer: this.uniformBuffer } },
         { binding: 1, resource: this.sampler },
         { binding: 2, resource: tex.createView({ dimension: "cube" }) }
       ]
     });
-    this.cubeTexture = tex;
+    this.texture = tex;
+    this.mode = "cubemap";
   }
+  // ---- equirectangular HDR ----
+  async loadEquirectangular(url) {
+    this.clear();
+    const hdr = await loadHdr(url);
+    const tex = this.device.createTexture({
+      size: [hdr.width, hdr.height],
+      format: "rgba32float",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+    });
+    this.device.queue.writeTexture(
+      { texture: tex },
+      hdr.data.buffer,
+      { bytesPerRow: hdr.width * 16, rowsPerImage: hdr.height },
+      { width: hdr.width, height: hdr.height }
+    );
+    this.bindGroup = this.device.createBindGroup({
+      layout: this.equirectBindGroupLayout,
+      entries: [
+        { binding: 0, resource: { buffer: this.uniformBuffer } },
+        { binding: 1, resource: this.sampler },
+        { binding: 2, resource: tex.createView() }
+      ]
+    });
+    this.texture = tex;
+    this.mode = "equirect";
+  }
+  // ---- common ----
   prepareFrame(viewMatrix, projectionMatrix) {
     if (!this.isActive) {
       this.frameReady = false;
@@ -2271,18 +2374,20 @@ class SkyboxRenderer {
     this.frameReady = true;
   }
   draw(pass) {
-    if (!this.frameReady || !this.cubeBindGroup) return;
-    pass.setPipeline(this.pipeline);
-    pass.setBindGroup(0, this.cubeBindGroup);
+    if (!this.frameReady || !this.bindGroup) return;
+    const pipeline = this.mode === "cubemap" ? this.cubePipeline : this.equirectPipeline;
+    pass.setPipeline(pipeline);
+    pass.setBindGroup(0, this.bindGroup);
     pass.draw(3);
   }
   clear() {
-    if (this.cubeTexture) {
-      this.cubeTexture.destroy();
-      this.cubeTexture = null;
+    if (this.texture) {
+      this.texture.destroy();
+      this.texture = null;
     }
-    this.cubeBindGroup = null;
+    this.bindGroup = null;
     this.frameReady = false;
+    this.mode = "none";
   }
   destroy() {
     this.clear();
@@ -19088,6 +19193,16 @@ class App {
       faceUrls.negZ
     ]);
   }
+  async setHdrBackground(url) {
+    if (!this.skyboxRenderer) {
+      this.skyboxRenderer = new SkyboxRenderer(
+        this.renderer.device,
+        this.renderer.format,
+        "depth24plus"
+      );
+    }
+    await this.skyboxRenderer.loadEquirectangular(url);
+  }
   clearSkybox() {
     var _a2;
     (_a2 = this.skyboxRenderer) == null ? void 0 : _a2.clear();
@@ -19580,6 +19695,7 @@ export {
   getRecommendedDPR,
   isMobileDevice,
   isWebGPUSupported,
+  loadHdr,
   loadPLY,
   loadPLYMobile,
   loadSOG,