rm-webgpu-compute-tasks 0.0.2 → 0.0.4

package/src/index.js

@@ -478,6 +478,37 @@ const getAdapter = () => {
   if (!adapter) throw new Error("未初始化webgpu");
   return adapter;
 };
+let __nullBG = null;
+let __nullBGLayout = null;
+function getNullBG() {
+  if (!__nullBG) {
+    const device2 = getDevice();
+    const dummyBuffer = device2.createBuffer({
+      size: 16,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    __nullBGLayout = device2.createBindGroupLayout({
+      entries: [{
+        binding: 0,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: {}
+      }]
+    });
+    __nullBG = device2.createBindGroup({
+      layout: __nullBGLayout,
+      entries: [{
+        binding: 0,
+        resource: {
+          buffer: dummyBuffer
+        }
+      }]
+    });
+  }
+  return {
+    bindGroup: __nullBG,
+    bindGroupLayout: __nullBGLayout
+  };
+}
 function createBuffer(device2, options) {
   const { data, size, usage, mappedAtCreation = false, label } = options;
   let bufferSize = size ?? 0;
@@ -693,6 +724,36 @@ async function readCubeTexture(texture, face = 0, mipLevel = 0, device2 = getDev
     bytesPerPixel: result.bytesPerPixel
   };
 }
+function autoWorkgroup(maxSize = [1]) {
+  const x = maxSize[0] ?? 1;
+  const y = maxSize[1] ?? 1;
+  const z = maxSize[2] ?? 1;
+  let workgroupSize = [1, 1, 1];
+  if (y === 1 && z === 1) {
+    const size = x;
+    let wg = 64;
+    if (size < 64) wg = 32;
+    if (size < 32) wg = 16;
+    workgroupSize = [wg, 1, 1];
+  } else if (z === 1) {
+    if (x >= 256 && y >= 256) {
+      workgroupSize = [16, 16, 1];
+    } else {
+      workgroupSize = [8, 8, 1];
+    }
+  } else {
+    workgroupSize = [4, 4, 4];
+  }
+  const workgroupCount = [
+    Math.ceil(x / workgroupSize[0]),
+    Math.ceil(y / workgroupSize[1]),
+    Math.ceil(z / workgroupSize[2])
+  ];
+  return {
+    workgroupSize,
+    workgroupCount
+  };
+}
 const shaderLocationMap = /* @__PURE__ */ new Map();
 shaderLocationMap.set("position", 0).set("normal ", 1).set("uv", 2).set("color", 3);
 class BufferGeometry extends THREE.BufferGeometry {
@@ -750,6 +811,9 @@ class BufferGeometry extends THREE.BufferGeometry {
 const layoutCache$2 = /* @__PURE__ */ new WeakMap();
 const OBJECT_UNIFORM_SIZE = 128;
 class Object3D extends THREE.Object3D {
+  static get GROU_INDEX() {
+    return 1;
+  }
   static get bindGroupLayout() {
     const device2 = getDevice();
     let layout = layoutCache$2.get(device2);
@@ -967,7 +1031,7 @@ class Texture {
   viewDimension;
   constructor(width, height = width, des) {
     const {
-      format = navigator.gpu.getPreferredCanvasFormat(),
+      format = "rgba8unorm",
       sampler,
       depthOrArrayLayers = 1,
       dimension = "2d",
@@ -1203,6 +1267,9 @@ var<uniform> object : Object;
 `
 );
 class ShaderMaterial {
+  static get GROU_INDEX() {
+    return 2;
+  }
   vertex;
   fragment;
   pipeline;
@@ -1218,7 +1285,7 @@ class ShaderMaterial {
   blend;
   writeMask;
   depthStencil;
-  env;
+  define;
   _needsUniformUpdate = true;
   get needsUniformUpdate() {
     return this._needsUniformUpdate;
@@ -1235,14 +1302,14 @@ class ShaderMaterial {
   }
   constructor(options) {
     const device2 = getDevice();
-    this.vertex = vertexCommon + options.vertex;
+    this.vertex = options.vertex;
     this.fragment = options.fragment;
     this.topology = options.topology;
     this.side = options.side ?? "front";
     this.blend = options.blend;
     this.writeMask = options.writeMask;
     this.depthStencil = options.depthStencil;
-    this.env = options.env;
+    this.define = options.define;
     this.buffer = device2.createBuffer({
       size: MATERIAL_UNIFORM_SIZE,
       usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
@@ -1258,13 +1325,16 @@ class ShaderMaterial {
     this.uniforms = {};
     let binding = 1;
     const createObjectListener = (key, value, type, set) => {
+      let value_ = value;
       const uniform = {
         get value() {
-          return value;
+          return value_;
         },
         set value(v) {
-          if (getUniformType(v) !== type) return;
-          value = set(v, value);
+          if (getUniformType(v, uniforms[key]?.atomic) !== type) return;
+          v = set(v, value_);
+          if ("copy" in value_ && typeof value_.copy === "function") value_.copy(v);
+          else value_ = v;
         }
       };
       this.uniforms[key] = uniform;
@@ -1319,8 +1389,10 @@ class ShaderMaterial {
       if (Array.isArray(value) || value instanceof Float32Array || value instanceof Uint32Array || value instanceof Uint8Array) {
         arrayListener(key, value, type);
         this._storageUniforms[key].write = uniforms[key].write ?? false;
-      } else if (type === "texture_cube" || type === "texture_2d") textureListener(key, value, type);
-      else defaultListener(key, value, type);
+      } else if (type === "texture_cube" || type === "texture_2d") {
+        textureListener(key, value, type);
+        this._textureUniforms[key].write = uniforms[key].write ?? false;
+      } else defaultListener(key, value, type);
     }
     this.needsBindGroupUpdate = true;
     this.needsUniformUpdate = true;
@@ -1345,21 +1417,29 @@ class ShaderMaterial {
     if (layoutCache.has(key)) return layoutCache.get(key);
     const entries = [{
       binding: 0,
-      visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+      visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT | GPUShaderStage.COMPUTE,
       buffer: {}
     }];
     textureKeys.forEach((key2) => {
       const item = this._textureUniforms[key2];
-      entries.push({
+      const format = item.value?.texture?.format ?? "rgba8unorm";
+      const opt = {
         binding: item.binding,
-        visibility: GPUShaderStage.FRAGMENT,
-        texture: item.type === "texture_cube" ? {
-          "viewDimension": "cube"
-        } : {}
-      });
+        visibility: GPUShaderStage.FRAGMENT | GPUShaderStage.COMPUTE,
+        [item.write ? "storageTexture" : "texture"]: {
+          access: "write",
+          format,
+          ...item.type === "texture_cube" ? {
+            viewDimension: "cube"
+          } : {
+            viewDimension: "2d"
+          }
+        }
+      };
+      entries.push(opt);
       entries.push({
         binding: item.binding + 1,
-        visibility: GPUShaderStage.FRAGMENT,
+        visibility: GPUShaderStage.FRAGMENT | GPUShaderStage.COMPUTE,
         sampler: {}
       });
     });
@@ -1367,7 +1447,7 @@ class ShaderMaterial {
       const item = this._storageUniforms[key2];
       entries.push({
         binding: item.binding,
-        visibility: item.write ? GPUShaderStage.FRAGMENT : GPUShaderStage.FRAGMENT | GPUShaderStage.VERTEX,
+        visibility: (item.write ? GPUShaderStage.FRAGMENT : GPUShaderStage.FRAGMENT | GPUShaderStage.VERTEX) | GPUShaderStage.COMPUTE,
         buffer: {
           type: item.write ? "storage" : "read-only-storage"
         }
@@ -1412,56 +1492,52 @@ class ShaderMaterial {
     this.needsBindGroupUpdate = false;
   }
   /** 生成uniform 代码
-   * @param type 
+   * @param mtype 
    * @returns 
    */
-  _generateUniformWGSL(type) {
+  _generateUniformWGSL(mtype) {
     let code = "";
     if (Object.keys(this._bufferUniforms).length) {
       code += "struct MaterialUniforms {\n";
       for (const key in this._bufferUniforms) {
-        const type2 = this._bufferUniforms[key].type;
-        if (type2 === "mat4")
+        const type = this._bufferUniforms[key].type;
+        if (type === "mat4")
           code += `    ${key} : mat4x4<f32>,
 `;
-        else if (type2 === "mat3")
+        else if (type === "mat3")
           code += `    ${key} : mat3x3<f32>,
 `;
-        else if (type2 === "vec2")
+        else if (type === "vec2")
           code += `    ${key} : vec2<f32>,
 `;
-        else if (type2 === "vec3")
+        else if (type === "vec3")
           code += `    ${key} : vec3<f32>,
 `;
-        else if (type2 === "vec4")
+        else if (type === "vec4")
           code += `    ${key} : vec4<f32>,
 `;
-        else if (type2 === "f32")
+        else if (type === "f32")
           code += `    ${key} : f32,
 `;
       }
       code += "};\n";
-      code += ` @group(2) @binding(0) var<uniform> uniforms : MaterialUniforms; `;
+      code += ` @group(2) @binding(0) var<uniform> uniforms : MaterialUniforms; 
+`;
     }
-    if (type === "fragment") {
+    if (mtype === "fragment" || mtype === "compute") {
       for (const key in this._textureUniforms) {
         const meta = this._textureUniforms[key];
         const b = meta.binding;
+        const format = meta.value?.texture?.format ?? "rgba8unorm";
         if (meta.type === "texture_2d") {
-          code += `
-                        @group(2) @binding(${b})
-                        var ${key} : texture_2d<f32>;
-                        @group(2) @binding(${b + 1})
-                        var ${key}Sampler : sampler;
-                    `;
+          code += `@group(2) @binding(${b})var ${key} : ${meta.write ? `texture_storage_2d<${format}, read_write>` : `texture_2d<f32>`};
+@group(2) @binding(${b + 1})var ${key}Sampler : sampler;
+`;
         }
         if (meta.type === "texture_cube") {
-          code += `
-                        @group(2) @binding(${b})
-                        var ${key} : texture_cube<f32>;
-                        @group(2) @binding(${b + 1})
-                        var ${key}Sampler : sampler;
-                    `;
+          code += `@group(2) @binding(${b})var ${key} : texture_cube<f32>;
+@group(2) @binding(${b + 1})var ${key}Sampler : sampler;
+`;
         }
       }
     }
@@ -1473,7 +1549,7 @@ class ShaderMaterial {
    */
   _generateVertexInputWGSL(attrMap) {
     if (!attrMap.size) return "";
-    let code = `struct VertexInput { `;
+    let code = `struct VertexInput { @builtin(vertex_index) vertexId: u32,`;
     attrMap.forEach((v, name) => code += `@location(${v.shaderLocation}) ${name}: ${vertexFormatToWGSL[v.format]}, `);
     code += `};`;
     return code;
@@ -1514,13 +1590,13 @@ class ShaderMaterial {
       this.pipeline = pipelineCache.get(key);
       return this.pipeline;
     }
-    const env = { ...this.env };
-    for (const key2 of attrMap.keys()) env[key2] = true;
+    const define = { ...this.define };
+    for (const key2 of attrMap.keys()) define[key2] = true;
     const moduleVertex = device2.createShaderModule({
-      code: `${this._generateUniformWGSL("vertex")} ${this._generateStorageWGSL("vertex")} ${this._generateVertexInputWGSL(attrMap)} ${preprocessShaderFSM(this.vertex, env)}`
+      code: `${vertexCommon} ${this._generateUniformWGSL("vertex")} ${this._generateStorageWGSL("vertex")} ${this._generateVertexInputWGSL(attrMap)} ${preprocessShaderFSM(this.vertex, define)}`
     });
     const moduleFragment = device2.createShaderModule({
-      code: `${this._generateUniformWGSL("fragment")} ${this._generateStorageWGSL("fragment")} ${preprocessShaderFSM(this.fragment, env)}`
+      code: `${this._generateUniformWGSL("fragment")} ${this._generateStorageWGSL("fragment")} ${preprocessShaderFSM(this.fragment, define)}`
     });
     const pipeline = device2.createRenderPipeline({
       layout: device2.createPipelineLayout({
@@ -1538,11 +1614,13 @@ class ShaderMaterial {
       fragment: {
         module: moduleFragment,
         entryPoint: "main",
-        targets: [{
-          format: colorFormat,
-          blend: this.blend,
-          writeMask: this.writeMask
-        }]
+        targets: [
+          {
+            format: colorFormat,
+            blend: this.blend,
+            writeMask: this.writeMask
+          }
+        ]
       },
       primitive: {
         topology: this.topology,
@@ -1564,53 +1642,55 @@ class ShaderMaterial {
    */
   _updateUniform() {
     const device2 = getDevice();
+    const align = (offset2, alignmentBytes) => {
+      const alignment = alignmentBytes / 4;
+      return offset2 + alignment - 1 & ~(alignment - 1);
+    };
     let offset = 0;
-    const align4 = (n) => n + 3 & -4;
     for (const key in this._bufferUniforms) {
       const value = this._bufferUniforms[key].value;
-      offset = align4(offset);
       if (typeof value === "number") {
+        offset = align(offset, 4);
         this.uniformArray[offset++] = value;
         continue;
       }
       if (value instanceof Vector2) {
+        offset = align(offset, 8);
         this.uniformArray.set([value.x, value.y], offset);
         offset += 2;
         continue;
       }
       if (value instanceof Vector3) {
-        this.uniformArray.set([value.x, value.y, value.z], offset);
-        offset += 3;
+        offset = align(offset, 16);
+        this.uniformArray.set([value.x, value.y, value.z, 0], offset);
+        offset += 4;
         continue;
       }
       if (value instanceof Vector4) {
+        offset = align(offset, 16);
         this.uniformArray.set([value.x, value.y, value.z, value.w], offset);
         offset += 4;
         continue;
       }
       if (value.isColor) {
+        offset = align(offset, 16);
         const c = value;
-        this.uniformArray[offset++] = c.r;
-        this.uniformArray[offset++] = c.g;
-        this.uniformArray[offset++] = c.b;
+        this.uniformArray.set([c.r, c.g, c.b, 0], offset);
+        offset += 4;
         continue;
       }
       if (value.isMatrix4) {
+        offset = align(offset, 16);
         this.uniformArray.set(value.elements, offset);
         offset += 16;
         continue;
       }
       if (value.isMatrix3) {
+        offset = align(offset, 16);
         const m = value.elements;
-        this.uniformArray[offset + 0] = m[0];
-        this.uniformArray[offset + 1] = m[1];
-        this.uniformArray[offset + 2] = m[2];
-        this.uniformArray[offset + 4] = m[3];
-        this.uniformArray[offset + 5] = m[4];
-        this.uniformArray[offset + 6] = m[5];
-        this.uniformArray[offset + 8] = m[6];
-        this.uniformArray[offset + 9] = m[7];
-        this.uniformArray[offset + 10] = m[8];
+        this.uniformArray.set([m[0], m[1], m[2], 0], offset + 0);
+        this.uniformArray.set([m[3], m[4], m[5], 0], offset + 4);
+        this.uniformArray.set([m[6], m[7], m[8], 0], offset + 8);
         offset += 12;
         continue;
       }
@@ -1629,6 +1709,16 @@ class ShaderMaterial {
   getStorageBuffer(name) {
     return this._storageUniforms[name]?.buffer;
   }
+  /** 主动设置GPUBuffer, 可共享其他材质已经创建的 GPUBuffer
+   * @param name 
+   * @param buff 
+   */
+  setStorageBuffer(name, buff) {
+    if (this._storageUniforms[name]) {
+      this._storageUniforms[name].buffer = buff;
+      this.needsBindGroupUpdate = true;
+    }
+  }
 }
 const transparentOption = {
   blend: {
@@ -1708,167 +1798,53 @@ class BaseMaterial extends ShaderMaterial {
     });
   }
 }
-class DepthMaterial extends ShaderMaterial {
-  constructor(opt = {}) {
+class ComputeMaterial extends ShaderMaterial {
+  workgroupCount;
+  workgroupSize;
+  constructor(opt) {
     super({
-      vertex: (
-        /* wgsl */
-        `
-                struct VertexOutput {
-                    @builtin(position) Position : vec4<f32>,
-                    @location(0) worldDir: vec3<f32>,
-                    @location(1) near: f32,
-                    @location(2) far: f32,
-                };
-
-                @vertex
-                fn main(input: VertexInput) -> VertexOutput {
-                    var out: VertexOutput;
-                    let worldPos = object.modelMatrix * vec4<f32>(input.position, 1.0);
-
-                    out.Position = camera.viewProjection * worldPos;
-                    out.worldDir = worldPos.xyz - camera.position;
-                    out.near = camera.near;
-                    out.far = camera.far;
-                    
-                    return out;
-                }
-            `
-      ),
-      fragment: (
-        /* wgsl */
-        `
-                fn packDepth(v: f32) -> vec4<f32> {
-                    var bitShift: vec4<f32> = vec4<f32>( 256.0*256.0*256.0, 256.0*256.0, 256.0, 1.0 );
-                    var bitMask: vec4<f32> = vec4<f32>( 0.0, 1.0/256.0, 1.0/256.0, 1.0/256.0 );
-                    var res: vec4<f32> = fract(v * bitShift);
-                    res -= res.xxyz * bitMask;
-                    return res;
-                }
-
-                @fragment
-                fn main(
-                    @location(0) worldDir: vec3<f32>,
-                    @location(1) near: f32,
-                    @location(2) far: f32
-                ) -> @location(0) vec4<f32> {
-                    var depth = length(worldDir);
-                    depth = (depth - near) / (far - near);
-                    depth = clamp(depth, 0.0, 1.0);
-                    return packDepth(depth);
-                }
-            `
-      ),
-      side: opt.side ?? "none",
-      topology: opt.topology ?? "triangle-list",
-      depthStencil: {
-        depthWriteEnabled: true,
-        depthCompare: "greater"
-      }
+      ...opt,
+      vertex: opt.mainCode,
+      fragment: opt.beforeCcde ?? ""
     });
+    this.workgroupCount = opt.workgroupCount ?? [256];
+    this.workgroupSize = opt.workgroupSize ?? [1, 1, 1];
+    if (opt.maxSize) {
+      const { workgroupCount, workgroupSize } = autoWorkgroup(opt.maxSize);
+      this.workgroupCount = workgroupCount;
+      this.workgroupSize = workgroupSize;
+    }
   }
-}
-class OcclusionMaterial extends ShaderMaterial {
-  constructor(opt) {
-    super({
-      vertex: (
-        /* wgsl */
-        `
-                struct VertexOutput {
-                    @builtin(position) Position : vec4<f32>,
-                    @location(0) worldDir: vec3<f32>,
-                    @location(1) near: f32,
-                    @location(2) far: f32,
-                    @location(3) @interpolate(flat) vId: vec4<f32>,
-                    @location(4) @interpolate(flat) id: u32,
-                };
-
-                fn packUint(v: u32) -> vec4<f32>{
-                    return vec4<f32>(
-                        f32(v & 255u),
-                        f32((v >> 8) & 255u),
-                        f32((v >> 16) & 255u),
-                        f32((v >> 24) & 255u)
-                    ) / 255.0;
-                }
-
-                @vertex
-                fn main(input: VertexInput) -> VertexOutput {
-                    var out: VertexOutput;
-                    let worldPos = object.modelMatrix * vec4<f32>(input.position, 1.0);
-
-                    out.Position = camera.viewProjection * worldPos;
-                    out.worldDir = worldPos.xyz - camera.position;
-                    out.near = camera.near;
-                    out.far = camera.far;
-                    out.vId = packUint( input.id );
-                    out.id = input.id;
-
-                    return out;
-                }
-            `
-      ),
-      fragment: (
-        /* wgsl */
-        `
-                fn unpackDepth(v: vec4<f32>) -> f32 {
-                    var bitShift: vec4<f32> = vec4<f32>( 256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0 );
-                    return dot(v, 1.0 / bitShift);
-                }
-
-                @fragment
-                fn main(
-                    @location(0) worldDir: vec3<f32>,
-                    @location(1) near: f32,
-                    @location(2) far: f32,
-                    @location(3) @interpolate(flat) vId: vec4<f32>,
-                    @location(4) @interpolate(flat) id: u32
-                ) -> @location(0) vec4<f32> {
-                    var dist = length(worldDir);
-                    
-                    // 偏移
-                    var diff = 0.1;
-
-                    var dir = normalize(worldDir);
-                    dir.x = -dir.x;
-                    
-                    var depthColor = textureSample(cubeTexture, cubeTextureSampler, dir);
-                    var maxDepth = unpackDepth( depthColor );
-                    var maxDist = maxDepth * (far - near) + near;
-
-                    if(depthColor.a != 1.0 && maxDist - dist > diff) {
-                        atomicOr(&results[id], 1);
-                        return vId;
-                    }
-                    return vec4<f32>(0);
+  setWorkgroupCount(workgroupCount) {
+    this.workgroupCount = workgroupCount;
+  }
+  needsPipelineUpdate = true;
+  createPipeline() {
+    if (!this.needsPipelineUpdate) return;
+    const device2 = getDevice(), uniformCode = this._generateUniformWGSL("compute"), storageCode = this._generateStorageWGSL("compute"), code = ` ${uniformCode}  ${storageCode}  
+                ${this.fragment}
+                @compute @workgroup_size(${this.workgroupSize.join(",")})
+                fn main(@builtin(global_invocation_id) id: vec3<u32>) {
+                    ${this.vertex}
                 }
-            `
-      ),
-      side: opt.side ?? "none",
-      topology: opt.topology ?? "triangle-list",
-      uniforms: {
-        cubeTexture: { value: opt.cubeTexture },
-        results: { value: opt.results ?? new Uint32Array([0, 0, 0]), write: true, atomic: true }
+            `, shaderModule = device2.createShaderModule({ code });
+    const { bindGroupLayout } = getNullBG();
+    const groupLayout = this._getBindGroupLayout();
+    this.pipeline = device2.createComputePipeline({
+      layout: device2.createPipelineLayout({
+        bindGroupLayouts: [bindGroupLayout, bindGroupLayout, groupLayout]
+      }),
+      compute: {
+        module: shaderModule,
+        entryPoint: "main"
       }
     });
+    this.needsPipelineUpdate = false;
+    return this.pipeline;
   }
-  static packUint(v) {
-    const vec4 = new Vector4();
-    vec4.set(
-      v & 255,
-      v >> 8 & 255,
-      v >> 16 & 255,
-      v >> 24 & 255
-    );
-    return vec4.divideScalar(255);
-  }
-  static unpackUint(r, g, b, a) {
-    return (r | g << 8 | b << 16 | a << 24) >>> 0;
-  }
-  static unpackUintByUint8(buff, i) {
-    const r = buff[i * 4], g = buff[i * 4 + 1], b = buff[i * 4 + 2], a = buff[i * 4 + 3];
-    if ((r | g | b) === 0 && a === 255) return null;
-    return this.unpackUint(r, g, b, a);
+  update() {
+    super.update();
+    if (this.needsPipelineUpdate) this.createPipeline();
   }
 }
 const directions = [
@@ -1955,6 +1931,11 @@ class Renderer {
   format;
   renderTarget = null;
   depthTarget = null;
+  /** 
+   * @param width 
+   * @param height 
+   * @param format 
+   */
   constructor(width = 800, height = 800, format = navigator.gpu.getPreferredCanvasFormat()) {
     const device2 = getDevice();
     this.format = format;
@@ -1977,6 +1958,12 @@ class Renderer {
     });
     this.depthTextureView = this.depthTexture.createView();
   }
+  /** 渲染
+   * @param meshList 
+   * @param camera 
+   * @param depthClearValue 
+   * @returns 
+   */
   render(meshList, camera, depthClearValue = 1) {
     const device2 = getDevice();
     camera.update();
@@ -2001,8 +1988,8 @@ class Renderer {
     meshList.forEach((mesh) => {
       mesh.update(this.format);
       pass.setPipeline(mesh.pipeline);
-      pass.setBindGroup(1, mesh.bindGroup);
-      pass.setBindGroup(2, mesh.material.bindGroup);
+      pass.setBindGroup(Object3D.GROU_INDEX, mesh.bindGroup);
+      pass.setBindGroup(ShaderMaterial.GROU_INDEX, mesh.material.bindGroup);
       let index = 0;
       mesh.geometry.gpuAttributes.forEach((v) => {
         pass.setVertexBuffer(index, v.buffer);
@@ -2018,6 +2005,24 @@ class Renderer {
     pass.end();
     device2.queue.submit([encoder.finish()]);
   }
+  compute(materials) {
+    if (materials instanceof ComputeMaterial) materials = [materials];
+    const device2 = getDevice();
+    const encoder = device2.createCommandEncoder();
+    const pass = encoder.beginComputePass();
+    const { bindGroup } = getNullBG();
+    pass.setBindGroup(0, bindGroup);
+    pass.setBindGroup(1, bindGroup);
+    materials.forEach((material) => {
+      material.update();
+      pass.setPipeline(material.pipeline);
+      pass.setBindGroup(ShaderMaterial.GROU_INDEX, material.bindGroup);
+      const workgroupCount = material.workgroupCount;
+      pass.dispatchWorkgroups(workgroupCount[0], workgroupCount[1], workgroupCount[2]);
+    });
+    pass.end();
+    device2.queue.submit([encoder.finish()]);
+  }
 }
 class PCD {
   header;
@@ -2206,52 +2211,231 @@ async function trajectoryHandle(baseUrl, trajectoryData) {
     pointCloudArray
   };
 }
-async function loadData(base, linesJson_) {
-  const t = performance.now();
-  const trajectory = await loadTrajectory(base), { pointClouds, pointCloudArray, trajectoryList } = await trajectoryHandle(base, trajectory), linesJson = linesJson_ ?? await loadLines(base), { map, rectArray, indexArray } = linesToBuffer(linesJson);
-  console.log("加载耗时", performance.now() - t);
-  return {
-    pointClouds,
-    pointCloudArray,
-    trajectoryList,
-    map,
-    rectArray,
-    indexArray,
-    linesJson
-  };
+function getPointsCenter(arr) {
+  let x = 0, y = 0, z = 0;
+  for (let i = 0; i < arr.length; i += 3) {
+    x += arr[i];
+    y += arr[i + 1];
+    z += arr[i + 2];
+  }
+  const count = arr.length / 3;
+  return { x: x / count, y: y / count, z: z / count };
 }
-async function obstacleDetection_(opt) {
-  const {
-    base,
-    size = 512,
-    near = 0.01,
-    far = 100,
-    canvasWidth = 1400,
-    canvasHeight = 800,
-    fov = 75,
-    linesJson
-  } = opt;
-  let t = performance.now();
-  const data = await loadData(base, linesJson), { indexArray, rectArray, trajectoryList, pointClouds, map } = data, renderer = new Renderer(canvasWidth, canvasHeight, "rgba8unorm"), camera = new PerspectiveCamera(fov, canvasWidth / canvasHeight, 1e-3, 100);
-  console.log("数据加载耗时", performance.now() - t);
-  t = performance.now();
-  camera.up = new THREE.Vector3(0, 0, 1);
-  camera.position.set(0, 0, 5);
-  camera.lookAt(new THREE.Vector3(0, 0, 0));
-  const depthCubeTexture = new CubeTexture(size, size, { needDepthTexture: true, format: "rgba8unorm", sampler: { minFilter: "nearest", magFilter: "nearest", mipmapFilter: "nearest" } }), resultCubeTexture = new CubeTexture(size, size, { needDepthTexture: true, format: "rgba8unorm", sampler: { minFilter: "nearest", magFilter: "nearest", mipmapFilter: "nearest" } }), cubeCamera = new CubeCamera(near, far), indexCount = indexArray.length / 6, quadObject3D = new Object3D(
-    new BufferGeometry().setAttribute("position", new THREE.BufferAttribute(new Float32Array(rectArray), 3)).setAttribute("id", new THREE.Uint32BufferAttribute(new Uint32Array(indexArray), 1)),
-    new OcclusionMaterial({
-      cubeTexture: depthCubeTexture,
-      results: new Uint32Array(indexCount)
-      // indexCount 个 uint8
-    })
-  ), pointsObject3D = new Object3D(
-    new BufferGeometry().setAttribute("position", new THREE.BufferAttribute(new Float32Array(), 3)),
-    new DepthMaterial({ topology: "point-list" })
-  );
-  for (let i = 0; i < trajectoryList.length; i++) {
-    const trajectory = trajectoryList[i];
-    pointsObject3D.geometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array(pointClouds[i]), 3));
+function getPointDistance(p1, p2) {
+  const dx = p2.x - p1.x;
+  const dy = p2.y - p1.y;
+  const dz = p2.z - p1.z;
+  return Math.sqrt(dx * dx + dy * dy + dz * dz);
+}
+class OcclusionMaterial extends ShaderMaterial {
+  constructor(opt) {
+    super({
+      vertex: (
+        /* wgsl */
+        `
+                struct VertexOutput {
+                    @builtin(position) Position : vec4<f32>,
+                    @location(0) worldDir: vec3<f32>,
+                    @location(1) near: f32,
+                    @location(2) far: f32,
+                    @location(3) @interpolate(flat) vId: vec4<f32>,
+                    @location(4) @interpolate(flat) id: u32,
+                };
+
+                fn packUint(v: u32) -> vec4<f32>{
+                    return vec4<f32>(
+                        f32(v & 255u),
+                        f32((v >> 8) & 255u),
+                        f32((v >> 16) & 255u),
+                        f32((v >> 24) & 255u)
+                    ) / 255.0;
+                }
+
+                @vertex
+                fn main(input: VertexInput) -> VertexOutput {
+                    var out: VertexOutput;
+                    let worldPos = object.modelMatrix * vec4<f32>(input.position, 1.0);
+
+                    out.Position = camera.viewProjection * worldPos;
+                    out.worldDir = worldPos.xyz - camera.position;
+                    out.near = camera.near;
+                    out.far = camera.far;
+                    out.vId = packUint( input.id );
+                    out.id = input.id;
+
+                    return out;
+                }
+            `
+      ),
+      fragment: (
+        /* wgsl */
+        `
+                fn unpackDepth(v: vec4<f32>) -> f32 {
+                    var bitShift: vec4<f32> = vec4<f32>( 256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0 );
+                    return dot(v, 1.0 / bitShift);
+                }
+
+                @fragment
+                fn main(
+                    @location(0) worldDir: vec3<f32>,
+                    @location(1) near: f32,
+                    @location(2) far: f32,
+                    @location(3) @interpolate(flat) vId: vec4<f32>,
+                    @location(4) @interpolate(flat) id: u32
+                ) -> @location(0) vec4<f32> {
+                    var dist = length(worldDir);
+                    
+                    // 偏移
+                    var diff = 0.1;
+
+                    var dir = normalize(worldDir);
+                    dir.x = -dir.x;
+                    
+                    var depthColor = textureSample(cubeTexture, cubeTextureSampler, dir);
+                    var maxDepth = unpackDepth( depthColor );
+                    var maxDist = maxDepth * (far - near) + near;
+
+                    if(depthColor.a != 1.0 && maxDist - dist > diff) {
+                        atomicOr(&results[id], 1);
+                        return vId;
+                    }
+                    return vec4<f32>(0);
+                }
+            `
+      ),
+      side: opt.side ?? "none",
+      topology: opt.topology ?? "triangle-list",
+      uniforms: {
+        cubeTexture: { value: opt.cubeTexture },
+        results: { value: opt.results ?? new Uint32Array([0, 0, 0]), write: true, atomic: true }
+      }
+    });
+  }
+  static packUint(v) {
+    const vec4 = new Vector4();
+    vec4.set(
+      v & 255,
+      v >> 8 & 255,
+      v >> 16 & 255,
+      v >> 24 & 255
+    );
+    return vec4.divideScalar(255);
+  }
+  static unpackUint(r, g, b, a) {
+    return (r | g << 8 | b << 16 | a << 24) >>> 0;
+  }
+  static unpackUintByUint8(buff, i) {
+    const r = buff[i * 4], g = buff[i * 4 + 1], b = buff[i * 4 + 2], a = buff[i * 4 + 3];
+    if ((r | g | b) === 0 && a === 255) return null;
+    return this.unpackUint(r, g, b, a);
+  }
+}
+class DepthMaterial extends ShaderMaterial {
+  constructor(opt = {}) {
+    super({
+      vertex: (
+        /* wgsl */
+        `
+                struct VertexOutput {
+                    @builtin(position) Position : vec4<f32>,
+                    @location(0) worldDir: vec3<f32>,
+                    @location(1) near: f32,
+                    @location(2) far: f32,
+                };
+
+                @vertex
+                fn main(input: VertexInput) -> VertexOutput {
+                    var out: VertexOutput;
+                    let worldPos = object.modelMatrix * vec4<f32>(input.position, 1.0);
+
+                    out.Position = camera.viewProjection * worldPos;
+                    out.worldDir = worldPos.xyz - camera.position;
+                    out.near = camera.near;
+                    out.far = camera.far;
+                    
+                    return out;
+                }
+            `
+      ),
+      fragment: (
+        /* wgsl */
+        `
+                fn packDepth(v: f32) -> vec4<f32> {
+                    var bitShift: vec4<f32> = vec4<f32>( 256.0*256.0*256.0, 256.0*256.0, 256.0, 1.0 );
+                    var bitMask: vec4<f32> = vec4<f32>( 0.0, 1.0/256.0, 1.0/256.0, 1.0/256.0 );
+                    var res: vec4<f32> = fract(v * bitShift);
+                    res -= res.xxyz * bitMask;
+                    return res;
+                }
+
+                @fragment
+                fn main(
+                    @location(0) worldDir: vec3<f32>,
+                    @location(1) near: f32,
+                    @location(2) far: f32
+                ) -> @location(0) vec4<f32> {
+                    var depth = length(worldDir);
+                    depth = (depth - near) / (far - near);
+                    depth = clamp(depth, 0.0, 1.0);
+                    return packDepth(depth);
+                }
+            `
+      ),
+      side: opt.side ?? "none",
+      topology: opt.topology ?? "triangle-list",
+      depthStencil: {
+        depthWriteEnabled: true,
+        depthCompare: "greater"
+      }
+    });
+  }
+}
+async function loadData(base, linesJson_) {
+  const t = performance.now();
+  const trajectory = await loadTrajectory(base), { pointClouds, pointCloudArray, trajectoryList } = await trajectoryHandle(base, trajectory), linesJson = linesJson_ ?? await loadLines(base), { map, rectArray, indexArray } = linesToBuffer(linesJson);
+  console.log("加载耗时", performance.now() - t);
+  return {
+    pointClouds,
+    pointCloudArray,
+    trajectoryList,
+    map,
+    rectArray,
+    indexArray,
+    linesJson
+  };
+}
+async function obstacleDetection_(opt) {
+  const {
+    base,
+    size = 512,
+    near = 0.01,
+    far = 100,
+    canvasWidth = 1400,
+    canvasHeight = 800,
+    fov = 75,
+    linesJson
+  } = opt;
+  let t = performance.now();
+  const data = await loadData(base, linesJson), { indexArray, rectArray, trajectoryList, pointClouds, map } = data, renderer = new Renderer(canvasWidth, canvasHeight, "rgba8unorm"), camera = new PerspectiveCamera(fov, canvasWidth / canvasHeight, 1e-3, 100);
+  console.log("数据加载耗时", performance.now() - t);
+  t = performance.now();
+  camera.up = new THREE.Vector3(0, 0, 1);
+  camera.position.set(0, 0, 5);
+  camera.lookAt(new THREE.Vector3(0, 0, 0));
+  const depthCubeTexture = new CubeTexture(size, size, { needDepthTexture: true, format: "rgba8unorm", sampler: { minFilter: "nearest", magFilter: "nearest", mipmapFilter: "nearest" } }), resultCubeTexture = new CubeTexture(size, size, { needDepthTexture: true, format: "rgba8unorm", sampler: { minFilter: "nearest", magFilter: "nearest", mipmapFilter: "nearest" } }), cubeCamera = new CubeCamera(near, far), indexCount = indexArray.length / 6, quadObject3D = new Object3D(
+    new BufferGeometry().setAttribute("position", new THREE.BufferAttribute(new Float32Array(rectArray), 3)).setAttribute("id", new THREE.Uint32BufferAttribute(new Uint32Array(indexArray), 1)),
+    new OcclusionMaterial({
+      cubeTexture: depthCubeTexture,
+      results: new Uint32Array(indexCount)
+      // indexCount 个 uint8
+    })
+  ), pointsObject3D = new Object3D(
+    new BufferGeometry().setAttribute("position", new THREE.BufferAttribute(new Float32Array(), 3)),
+    new DepthMaterial({ topology: "point-list" })
+  );
+  for (let i = 0; i < trajectoryList.length; i++) {
+    const trajectory = trajectoryList[i];
+    pointsObject3D.geometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array(pointClouds[i]), 3));
     cubeCamera.setPosition(trajectory.x, trajectory.y, trajectory.z);
     cubeCamera.depthClearValue = 0;
     cubeCamera.render([pointsObject3D], renderer, depthCubeTexture);
@@ -2291,20 +2475,836 @@ const obstacleDetection = Object.assign(obstacleDetection_, {
     return result;
   }
 });
+const vertexShader$1 = (
+  /* wgsl*/
+  `
+    struct VertexOutput {
+        @builtin(position) Position : vec4<f32>,
+        @location(0) vId: vec4<f32>,
+        @location(1) z: f32
+    };
+
+    fn packUint(v: u32) -> vec4<f32> {
+        return vec4(
+            f32(v & 255u),
+            f32((v >> 8) & 255u),
+            f32((v >> 16) & 255u),
+            f32((v >> 24) & 255u)
+        ) / 255.0;
+    }
+
+    @vertex
+    fn main(input: VertexInput) -> VertexOutput {
+        var out: VertexOutput;
+
+        if(uniforms.groundZ > input.position.z) { 
+            out.Position = vec4(2.0, 2.0, 2.0, 1.0);
+            return out;
+        }
+
+        var worldPos = object.modelMatrix * vec4(input.position, 1.0);
+
+        // world -> camera
+        var camPos = (uniforms.T_cw * worldPos).xyz;
+
+        if (camPos.z <= 0.1) {
+            out.Position = vec4(2.0, 2.0, 2.0, 1.0);
+            return out;
+        }
+
+        // 投影
+        var uvw = uniforms.cameraMat * camPos;
+
+        var uv = uvw.xy / uvw.z;
+
+        // 像素 -> NDC
+        var x = (uv.x / uniforms.imageSize.x) * 2.0 - 1.0;
+        var y = 1.0 - (uv.y / uniforms.imageSize.y) * 2.0;
+
+        out.Position = vec4(x, y, camPos.z * 0.000001, 1.0);
+
+        out.vId = packUint( input.vertexId );
+        out.z = camPos.z;
+
+        return out;
+    }
+`
+);
+const fragmentShader$1 = (
+  /* wgsl*/
+  `
+    fn floatToOrderedUint(v: f32) -> u32 {
+        let u = bitcast<u32>(v);
+        return select( u ^ 0xffffffffu, u, (u & 0x80000000u) == 0u );
+    }
+
+    @fragment
+    fn main(
+        @builtin(position) fragCoord: vec4<f32>,
+        @location(0) vId: vec4<f32>,
+        @location(1) z: f32
+    ) -> @location(0) vec4<f32> {
+        let x: u32 = u32(fragCoord.x);
+        let y: u32 = u32(fragCoord.y);
+        let width: u32 = u32(uniforms.imageSize.x);
+        let offset = y * width + x;
+
+        let currz = floatToOrderedUint(z);
+
+        atomicMin(&depth[offset], currz);
+        return vId;
+    }
+`
+);
+class PointCloudsIndexMaterial extends ShaderMaterial {
+  resultTexture;
+  _depthU32;
+  constructor(width, height) {
+    const resultTexture = new Texture(width, height, { needDepthTexture: true, format: "rgba8unorm" });
+    const depthU32 = new Uint32Array(width * height).fill(4294967295);
+    super({
+      vertex: vertexShader$1,
+      fragment: fragmentShader$1,
+      side: "none",
+      uniforms: {
+        cameraMat: { value: new Matrix3() },
+        T_cw: { value: new Matrix4() },
+        imageSize: { value: new Vector2(width, height) },
+        groundZ: { value: -0.911335763281652 + 0.1 },
+        depth: { value: depthU32, write: true, atomic: true }
+      },
+      topology: "point-list"
+    });
+    this.resultTexture = resultTexture;
+    this._depthU32 = depthU32;
+  }
+  clearDepth() {
+    this.uniforms.depth.value = this._depthU32;
+  }
+  get cameraMat() {
+    return this.uniforms.cameraMat.value;
+  }
+  set cameraMat(value) {
+    this.uniforms.cameraMat.value = value;
+  }
+  get T_cw() {
+    return this.uniforms.T_cw.value;
+  }
+  set T_cw(value) {
+    this.uniforms.T_cw.value = value;
+  }
+  get imageSize() {
+    return this.uniforms.imageSize.value;
+  }
+  set imageSize(value) {
+    this.uniforms.imageSize.value = value;
+    this.uniforms.depth.value = new Float32Array(value.x * value.y);
+  }
+  get groundZ() {
+    return this.uniforms.groundZ.value;
+  }
+  set groundZ(value) {
+    this.uniforms.groundZ.value = value;
+  }
+}
+const vertexShader = (
+  /* wgsl*/
+  `
+    struct VertexOutput {
+        @builtin(position) Position : vec4<f32>,
+        @location(0) vId: vec4<f32>
+    };
+
+    fn packUint(v: u32) -> vec4<f32>{
+        return vec4(
+            f32(v & 255u),
+            f32((v >> 8) & 255u),
+            f32((v >> 16) & 255u),
+            f32((v >> 24) & 255u)
+        ) / 255.0;
+    }
+
+    @vertex
+    fn main(input: VertexInput) -> VertexOutput {
+        var out: VertexOutput;
+
+        // 像素 -> NDC
+        var x = (input.position.x / uniforms.imageSize.x) * 2.0 - 1.0;
+        var y = 1.0 - (input.position.y / uniforms.imageSize.y) * 2.0;
+
+        out.Position = vec4(x, y, 0, 1);
+        out.vId = packUint(u32(input.position.z));
+
+        return out;
+    }
+`
+);
+const fragmentShader = (
+  /* wgsl*/
+  `
+    @fragment
+    fn main(
+        @location(0) vId: vec4<f32>,
+    ) -> @location(0) vec4<f32> {
+        return vId;
+    }
+`
+);
+class PolyAreaIndexMaterial extends ShaderMaterial {
+  resultTexture;
+  constructor(width = 1920, height = 1200) {
+    const resultTexture = new Texture(width, height, { needDepthTexture: true, format: "rgba8unorm" });
+    super({
+      vertex: vertexShader,
+      fragment: fragmentShader,
+      side: "none",
+      uniforms: {
+        imageSize: { value: new Vector2(width, height) }
+      }
+    });
+    this.resultTexture = resultTexture;
+  }
+  get imageSize() {
+    return this.uniforms.imageSize.value;
+  }
+  set imageSize(value) {
+    this.uniforms.imageSize.value = value;
+  }
+}
+class MapEnhance extends Map {
+  get valueArray() {
+    return [...this.values()];
+  }
+  map(callbackfn) {
+    const result = [];
+    for (const [k, v] of this) {
+      result.push(callbackfn(v, k));
+    }
+    return result;
+  }
+  filter(callbackfn) {
+    const result = [];
+    for (const [k, v] of this) {
+      callbackfn(v, k) && result.push(v);
+    }
+    return result;
+  }
+  filterKey(callbackfn) {
+    const result = [];
+    for (const [k, v] of this) {
+      callbackfn(v, k) && result.push(k);
+    }
+    return result;
+  }
+  reduce(callbackfn, result) {
+    for (const [k, v] of this) {
+      result = callbackfn(result, v, k);
+    }
+    return result;
+  }
+  some(callbackfn) {
+    for (const [k, v] of this) {
+      if (callbackfn(v, k)) return true;
+    }
+    return false;
+  }
+  every(callbackfn) {
+    for (const [k, v] of this) {
+      if (!callbackfn(v, k)) return false;
+    }
+    return true;
+  }
+  find(callbackfn) {
+    for (const [k, v] of this) {
+      if (callbackfn(v, k)) return v;
+    }
+  }
+  findKey(callbackfn) {
+    for (const [k, v] of this) {
+      if (callbackfn(v, k)) return k;
+    }
+  }
+  someKeys(keys) {
+    return keys.some((key) => this.has(key));
+  }
+  everyKeys(keys) {
+    return keys.every((key) => this.has(key));
+  }
+  group(callbackfn) {
+    const map = new ArrayMap();
+    for (const [k, v] of this) {
+      const groupKey = callbackfn(v, k);
+      map.append(groupKey, v);
+    }
+    return map;
+  }
+  toObject() {
+    return this.reduce((obj, v, k) => (obj[`${k}`] = v, obj), {});
+  }
+  // 在 MapEnhance 裡面補充
+  first() {
+    return this.values().next().value;
+  }
+  firstKey() {
+    return this.keys().next().value;
+  }
+  last() {
+    let last;
+    for (const v of this.values()) last = v;
+    return last;
+  }
+  sortBy(callback) {
+    return [...this.entries()].sort((a, b) => {
+      const va = callback(a[1], a[0]);
+      const vb = callback(b[1], b[0]);
+      return va < vb ? -1 : va > vb ? 1 : 0;
+    });
+  }
+  // 很常見的 collect / pluck 模式
+  pluck(keyPath) {
+    return this.map((v) => v[keyPath]);
+  }
+}
+class ArrayMap extends MapEnhance {
+  maxLength = Infinity;
+  append(k, ...arr) {
+    arr.forEach((v) => {
+      if (!this.has(k)) this.set(k, []);
+      const list = this.get(k);
+      list.push(v);
+      if (list.length > this.maxLength) {
+        list.splice(0, list.length - this.maxLength);
+      }
+    });
+    return this;
+  }
+  setLength(key, len) {
+    const list = this.get(key);
+    if (list) list.length = Math.max(0, len);
+  }
+  remove(k, ...arr) {
+    const set = this.get(k);
+    if (set) {
+      arr.forEach((v) => set.splice(set.indexOf(v), 1));
+    }
+    return this;
+  }
+  // 在 ArrayMap 補充
+  getOrCreate(key) {
+    if (!this.has(key)) {
+      this.set(key, []);
+    }
+    return this.get(key);
+  }
+}
+class UnionFindSet {
+  parent;
+  rank;
+  constructor(size) {
+    this.parent = Array(size).fill(0).map((_, index) => index);
+    this.rank = Array(size).fill(1);
+  }
+  // 查找操作，使用路径压缩优化
+  find(x) {
+    if (this.parent[x] !== x) {
+      this.parent[x] = this.find(this.parent[x]);
+    }
+    return this.parent[x];
+  }
+  // 合并操作，使用按秩合并优化
+  union(x, y) {
+    let rootX = this.find(x);
+    let rootY = this.find(y);
+    if (rootX !== rootY) {
+      if (this.rank[rootX] > this.rank[rootY]) {
+        this.parent[rootY] = rootX;
+      } else if (this.rank[rootX] < this.rank[rootY]) {
+        this.parent[rootX] = rootY;
+      } else {
+        this.parent[rootY] = rootX;
+        this.rank[rootX] += 1;
+      }
+    }
+  }
+  /** 获取所有集合
+   * @returns 
+   */
+  getAllSets() {
+    const sets = new ArrayMap();
+    for (const el of this.parent.keys()) {
+      const root = this.find(el);
+      sets.append(root, el);
+    }
+    return sets;
+  }
+}
+function hash(ix, iy, iz) {
+  return ix * 73856093 ^ iy * 19349663 ^ iz * 83492791;
+}
+function voxelization(pointsArray, size = 0.05) {
+  const inv = 1 / size, keySet = /* @__PURE__ */ new Set(), result = [], points = [];
+  for (let i = 0; i < pointsArray.length; i += 3) {
+    const xi = Math.floor(pointsArray[i] * inv), yi = Math.floor(pointsArray[i + 1] * inv), zi = Math.floor(pointsArray[i + 2] * inv), key = hash(xi, yi, zi);
+    if (keySet.has(key)) continue;
+    keySet.add(key);
+    result.push(xi, yi, zi);
+    points.push(pointsArray[i], pointsArray[i + 1], pointsArray[i + 2]);
+  }
+  return { result, keySet, points };
+}
+function gridClustering(pointsArray, size = 0.05, threshold = 2) {
+  const { result, points, keySet } = voxelization(new Float32Array(pointsArray), size), unionFindSet = new UnionFindSet(keySet.size), keys = [...keySet.values()];
+  const indexMap = /* @__PURE__ */ new Map();
+  keys.forEach((v, i) => indexMap.set(v, i));
+  keys.forEach((key, i) => {
+    const x = result[i * 3];
+    const y = result[i * 3 + 1];
+    const z = result[i * 3 + 2];
+    for (let i2 = -threshold; i2 <= threshold; i2++) {
+      for (let j = -threshold; j <= threshold; j++) {
+        for (let k = -threshold; k <= threshold; k++) {
+          const xx = x + i2, yy = y + j, zz = z + k;
+          if (xx === x && yy === y && zz === z) continue;
+          const id = hash(xx, yy, zz);
+          if (!keySet.has(id)) continue;
+          unionFindSet.union(indexMap.get(key), indexMap.get(id));
+        }
+      }
+    }
+  });
+  return unionFindSet.getAllSets().map(
+    (list) => list.flatMap((i) => {
+      const x = points[i * 3];
+      const y = points[i * 3 + 1];
+      const z = points[i * 3 + 2];
+      return [x, y, z];
+    })
+  );
+}
+const beforeCcde$1 = (
+  /* wgsl*/
+  `
+    fn packUint(v: u32) -> vec4<f32>{
+        return vec4(
+            f32(v & 255u),
+            f32((v >> 8) & 255u),
+            f32((v >> 16) & 255u),
+            f32((v >> 24) & 255u)
+        ) / 255.0;
+    }
+
+    fn unPackUint(color: vec4<f32>) -> u32 {
+        let r = u32(color.r * 255.0);
+        let g = u32(color.g * 255.0);
+        let b = u32(color.b * 255.0);
+        let a = u32(color.a * 255.0);
+        return (a << 24u) | (b << 16u) | (g << 8u)  | r;
+    }
+
+    fn isEmpty(value: u32) -> bool {
+        return value  == 0xff000000 || value == 0x0 ;
+    }
+`
+);
+const mainCode$1 = (
+  /* wgsl*/
+  `
+    let width  = i32(uniforms.size.x);
+    let height = i32(uniforms.size.y);
+    let half = i32(uniforms.kernelSize / 2);
+
+    let x = i32(id.x);
+    let y = i32(id.y);
+
+    let idx = u32(y) * u32(width) + u32(x);
+
+    // 当前像素
+    let center = unPackUint(textureLoad(map, vec2<i32>(x, y), 0));
+
+    // 如果当前就是空，直接空
+    if ( isEmpty(center) ) {
+        result[idx] = 0xff000000;
+        return;
+    }
+
+    // 是否被腐蚀
+    var eroded = false;
+
+    // 遍历邻域
+    for (var ky = -half; ky <= half; ky = ky + 1) {
+        let ny = y + ky;
+
+        if (ny < 0 || ny >= height) {
+            continue;
+        }
+
+        for (var kx = -half; kx <= half; kx = kx + 1) {
+            let nx = x + kx;
+
+            if (nx < 0 || nx >= width) {
+                continue;
+            }
+
+            let neighbor = unPackUint(textureLoad(map, vec2<i32>(nx, ny), 0));
+
+            // 只要有一个是空 → 腐蚀
+            if (isEmpty(neighbor) || neighbor != center) {
+                eroded = true;
+                break;
+            }
+        }
+
+        if (eroded) {
+            break;
+        }
+    }
+
+    // 写结果
+    if (eroded) {
+        result[idx] = 0xff000000;
+    } else {
+        result[idx] = center;
+    }
+`
+);
+class ErodeMaskComputeMaterial extends ComputeMaterial {
+  constructor(width = 1920, height = 1200, texture, kernelSize = 3) {
+    super({
+      maxSize: [width, height],
+      mainCode: mainCode$1,
+      beforeCcde: beforeCcde$1,
+      uniforms: {
+        map: { value: texture },
+        size: { value: new Vector2(width, height) },
+        kernelSize: { value: kernelSize },
+        // 建议从3开始
+        result: {
+          value: new Uint32Array(width * height),
+          write: true
+        }
+      }
+    });
+  }
+}
+const beforeCcde = (
+  /* wgsl*/
+  `
+    // fn orderedUintToFloat(u: u32) -> f32 {
+    //     let mask = select(0x80000000u, 0xffffffffu, (u & 0x80000000u) != 0u);
+    //     return bitcast<f32>(u ^ mask);
+    // }
+
+    fn orderedUintToFloat(u: u32) -> f32 {
+        let restored = select(u ^ 0xffffffffu, u, (u & 0x80000000u) != 0u);
+        return bitcast<f32>(restored);
+    }
+
+    fn packUint(v: u32) -> vec4<f32>{
+        return vec4(
+            f32(v & 255u),
+            f32((v >> 8) & 255u),
+            f32((v >> 16) & 255u),
+            f32((v >> 24) & 255u)
+        ) / 255.0;
+    }
+
+    fn unPackUint(color: vec4<f32>) -> u32 {
+        let r = u32(color.r * 255.0);
+        let g = u32(color.g * 255.0);
+        let b = u32(color.b * 255.0);
+        let a = u32(color.a * 255.0);
+        return (a << 24u) | (b << 16u) | (g << 8u)  | r;
+    }
+
+    fn isPolyEmpty(value: u32) -> bool {
+        return value  == 0xff000000 || value == 0x0 ;
+    }
+
+    fn isEmpty(value: u32) -> bool {
+        return value  == 0xff000000;
+    }
+
+    fn isDepthEmpty(value: u32) -> bool {
+        return value  == 0xffffffff;
+    }
+`
+);
+const mainCode = (
+  /* wgsl*/
+  `
+    let width  = i32(uniforms.size.x);
+    let height = i32(uniforms.size.y);
+    let half = i32(uniforms.kernelSize / 2);
+    let depthTol = uniforms.depthTol;
+
+    let x = i32(id.x);
+    let y = i32(id.y);
+
+    let idx = u32(y) * u32(width) + u32(x);
+
+    // 判断是不是多边形区域
+    let polyPackedIndex = polyAreaIndex[idx];
+    if(isPolyEmpty(polyPackedIndex)) {
+        return;
+    }
+
+    // 获取多边形当前坐标有没有点云（获取深度值判断也是一样的， 深度值和点云索引图一一对应）
+    let packedIndex = textureLoad(pcIndexMap, vec2<i32>(x, y), 0);
+    let pointIndex = unPackUint(packedIndex); 
+    if(isEmpty(pointIndex)) {
+        return;
+    }
+
+    // 获取当前点云深度值
+    let depthU32 = pcDepth[idx];
+    let depthF32 = orderedUintToFloat(depthU32);
+
+    // 获取范围内最小深度值和对应点云索引
+    let maxDepth = 10000.0;
+    var minDepth = maxDepth;
+    var minPcUv = vec2<i32>(0, 0);
+
+    for (var ky = -half; ky <= half; ky = ky + 1) {
+        let ny = y + ky;
+        for (var kx = -half; kx <= half; kx = kx + 1) {
+            let nx = x + kx;
+
+            if (nx < 0 || ny < 0 || nx >= width || ny >= height ) {
+                continue;
+            }
+
+            let idx = u32(ny) * u32(width) + u32(nx);
+
+            let depthU32 = pcDepth[idx];
+            let depthF32 = orderedUintToFloat( depthU32 );
+
+            if(depthF32 < minDepth) {
+                minDepth = depthF32;
+                minPcUv.x = nx;
+                minPcUv.y = ny;
+            }
+        }
+    }
+
+    // 是否找到最小值, 当前判断条件为未找到
+    if(minDepth >= maxDepth) {
+        return;
+    }
+
+    // 判断当前点深度和最小深度的差值是否小于阈值
+    if(abs(depthF32 - minDepth) > depthTol) {
+        return;
+    }
+
+    let finalPackedIndex = textureLoad(pcIndexMap, minPcUv, 0);
+    let finalPointIndex = unPackUint(packedIndex);
+    result[finalPointIndex] = polyPackedIndex;
+`
+);
+class SOPCComputeMaterial extends ComputeMaterial {
+  result;
+  constructor(width, height, count, pcIndexTexture, kernelSize = 15) {
+    const result = new Uint32Array(count).fill(4294967295);
+    super({
+      maxSize: [width, height],
+      mainCode,
+      beforeCcde,
+      uniforms: {
+        pcIndexMap: { value: pcIndexTexture },
+        // 空白填充 0xff_00_00_00
+        pcDepth: { value: new Uint32Array() },
+        // 默认填充 0xff_ff_ff_ff
+        polyAreaIndex: { value: new Uint32Array() },
+        // 空白填充 0xff_00_00_00
+        size: { value: new Vector2(width, height) },
+        kernelSize: { value: kernelSize },
+        depthTol: { value: 0.05 },
+        result: {
+          value: result,
+          write: true
+        }
+      }
+    });
+    this.result = result;
+  }
+  clearResult() {
+    this.uniforms.result.value = this.result;
+  }
+}
+async function load(base, urls) {
+  let points = await loadPCDCustom(base + "/data/rgb_global_map.pcd");
+  const itemsFiles = await Promise.all(urls.map((path) => loadJson(path)));
+  const width = itemsFiles[0].imageSize[0];
+  const height = itemsFiles[0].imageSize[1];
+  return { points, itemsFiles, width, height };
+}
+function getInfo(itemsFile, cindex) {
+  const width = itemsFile.imageSize[0];
+  const height = itemsFile.imageSize[1];
+  const T_wi = new THREE.Matrix4();
+  T_wi.compose(
+    new THREE.Vector3().copy(itemsFile.position),
+    new THREE.Quaternion().copy(itemsFile.quaternion),
+    new THREE.Vector3(1, 1, 1)
+  );
+  const T_il = new THREE.Matrix4().makeTranslation(-0.011, -0.02329, 0.04412);
+  const T_lc = new THREE.Matrix4().fromArray(itemsFile.extrinsicMat).transpose();
+  const T_wc = new THREE.Matrix4();
+  T_wc.copy(T_wi).multiply(T_il).multiply(T_lc);
+  const T_cw = T_wc.clone().invert();
+  const cameraMat = new THREE.Matrix3();
+  cameraMat.fromArray(itemsFile.cameraMat);
+  cameraMat.transpose();
+  let count = 0;
+  itemsFile.sam3Objects.forEach((item) => count += item.coordinates.length);
+  const itemPosition = [];
+  for (let i = 0; i < itemsFile.sam3Objects.length; i++) {
+    const item = itemsFile.sam3Objects[i], path = item.coordinates.map((coordinate) => new THREE.Vector2(coordinate[0], coordinate[1])), triangles = THREE.ShapeUtils.triangulateShape(path, []);
+    triangles.forEach(
+      (list) => list.forEach(
+        (index) => itemPosition.push(
+          path[index].x,
+          path[index].y,
+          cindex * 200 + i
+        )
+      )
+    );
+  }
+  return {
+    cameraMat,
+    T_cw,
+    width,
+    height,
+    itemPosition: new Float32Array(itemPosition)
+  };
+}
+async function sopc_(opt) {
+  const {
+    base,
+    urls,
+    erodeMaskSize = 3,
+    kernelSize = 15,
+    gridSize = 0.05,
+    gridAmount = 2
+  } = opt;
+  console.log("开始计算");
+  let t = performance.now();
+  await initWebgpu();
+  const canvasWidth = window?.innerWidth ?? 256, canvasHeight = window?.innerHeight ?? 256, renderer = new Renderer(canvasWidth, canvasHeight, "rgba8unorm"), camera = new PerspectiveCamera(75, canvasWidth / canvasHeight, 1e-3, 100), { points: pointsArray, itemsFiles, width, height } = await load(base, urls), pointCount = pointsArray.length / 3, pcIndexMaterial = new PointCloudsIndexMaterial(width, height), polyAreaIndexMaterial = new PolyAreaIndexMaterial(width, height), erodeMaskComputeMaterial = new ErodeMaskComputeMaterial(width, height, polyAreaIndexMaterial.resultTexture, erodeMaskSize), sopcComputeMaterial = new SOPCComputeMaterial(width, height, pointCount, pcIndexMaterial.resultTexture, kernelSize), points = new Object3D(
+    new BufferGeometry().setAttribute("position", new THREE.BufferAttribute(pointsArray, 3)),
+    pcIndexMaterial
+  ), mesh = new Object3D(
+    new BufferGeometry().setAttribute("position", new THREE.BufferAttribute(new Float32Array(), 3)),
+    polyAreaIndexMaterial
+  );
+  camera.position.set(1, 1, 1);
+  console.log("文件加载耗时：", performance.now() - t);
+  t = performance.now();
+  for (let i = 0; i < itemsFiles.length; i++) {
+    const itemsFile = itemsFiles[i];
+    if (itemsFile.sam3Objects.length === 0) {
+      console.log("第" + i + "个没有物品");
+      continue;
+    }
+    const { T_cw, cameraMat, itemPosition } = getInfo(itemsFile, i);
+    mesh.geometry.setAttribute("position", new THREE.BufferAttribute(itemPosition, 3));
+    pcIndexMaterial.T_cw = T_cw;
+    pcIndexMaterial.cameraMat = cameraMat;
+    pcIndexMaterial.clearDepth();
+    renderer.renderTarget = pcIndexMaterial.resultTexture.view;
+    renderer.depthTarget = pcIndexMaterial.resultTexture.depthView;
+    renderer.render([points], camera);
+    renderer.renderTarget = polyAreaIndexMaterial.resultTexture.view;
+    renderer.depthTarget = polyAreaIndexMaterial.resultTexture.depthView;
+    renderer.render([mesh], camera);
+    renderer.compute(erodeMaskComputeMaterial);
+    sopcComputeMaterial.setStorageBuffer("pcDepth", pcIndexMaterial.getStorageBuffer("depth"));
+    sopcComputeMaterial.setStorageBuffer("polyAreaIndex", erodeMaskComputeMaterial.getStorageBuffer("result"));
+    renderer.compute(sopcComputeMaterial);
+  }
+  const resultsBuffer = await readGPUBuffer(sopcComputeMaterial.getStorageBuffer("result"), pointCount * 4, Uint32Array);
+  console.log("渲染消耗时间：", performance.now() - t);
+  t = performance.now();
+  const map = /* @__PURE__ */ new Map();
+  for (let i = 0; i < resultsBuffer.length; i++) {
+    const v = resultsBuffer[i];
+    if (v === 4294967295) continue;
+    const itemIndex = v % 200;
+    const fileIndex = (v - itemIndex) / 200;
+    let arrayMap = map.get(fileIndex);
+    if (!arrayMap) {
+      arrayMap = new ArrayMap();
+      map.set(fileIndex, arrayMap);
+    }
+    arrayMap.append(itemIndex, i);
+  }
+  const transcendingCreation = ["window", "calcony railing", "glass balcony railing", "metal balcony railing", "temporary construction guardrail"];
+  const results = new Array(itemsFiles.length);
+  const sort = (pointarr, isTranscendingCreation, position) => {
+    let list = gridClustering(pointarr, gridSize, gridAmount);
+    if (list.length === 1) return list;
+    if (isTranscendingCreation) {
+      const distList = list.map((points2) => getPointDistance(getPointsCenter(points2), position));
+      let indices = Array.from({ length: list.length }, (_, i) => i);
+      indices.sort((a, b) => distList[a] - distList[b]);
+      const min = distList[indices[0]];
+      indices = indices.filter((i) => distList[i] - min < 0.12 * 2);
+      list = indices.map((i) => list[i]);
+    }
+    list.sort((a, b) => b.length - a.length);
+    return list;
+  };
+  map.forEach((arrMap, fileIndex) => {
+    arrMap.forEach((pointIndexs, itemIndex) => {
+      let pointarr = [];
+      pointIndexs.forEach((i) => {
+        pointarr.push(
+          pointsArray[i * 3],
+          pointsArray[i * 3 + 1],
+          pointsArray[i * 3 + 2]
+        );
+      });
+      const itemsFile = itemsFiles[fileIndex];
+      const type = itemsFile.sam3Objects[itemIndex].category;
+      const isTranscendingCreation = transcendingCreation.includes(type);
+      pointarr = sort(pointarr, isTranscendingCreation, itemsFile.position)[0];
+      if (pointarr.length <= 6 * 3) return;
+      if (!results[fileIndex]) results[fileIndex] = new Array(itemsFiles[fileIndex].sam3Objects.length);
+      results[fileIndex][itemIndex] = pointarr;
+    });
+  });
+  renderer.renderTarget = null;
+  renderer.depthTarget = null;
+  console.log("整理结果消耗时间：", performance.now() - t, "点云数量", pointsArray.length / 3, "文件数量", itemsFiles.length);
+  return {
+    renderer,
+    camera,
+    results,
+    pointsArray
+  };
+}
+const segmentObjectPointClouds = Object.assign(sopc_, {
+  async getResult(opt) {
+    await initWebgpu();
+    const { results } = await sopc_(opt);
+    await destroyWebgpu();
+    return results;
+  }
+});
 export {
   AtomicUint32Array,
   BaseMaterial,
   BufferGeometry,
+  ComputeMaterial,
   CubeCamera,
   CubeTexture,
-  DepthMaterial,
   GpuComputed,
   Object3D,
-  OcclusionMaterial,
   PerspectiveCamera,
   Renderer,
   ShaderMaterial,
   Texture,
+  autoWorkgroup,
   createBuffer,
   createComputePipeline,
   createRenderPipeline,
@@ -2312,6 +3312,7 @@ export {
   destroyWebgpu,
   getAdapter,
   getDevice,
+  getNullBG,
   getSampler,
   initWebgpu,
   loadData,
@@ -2319,6 +3320,7 @@ export {
   readCubeTexture,
   readGPUBuffer,
   readTextureBuffer,
+  segmentObjectPointClouds,
   shaderLocationMap,
   transparentOption
 };