rm-webgpu-compute-tasks 0.0.1

package/src/index.js

@@ -0,0 +1,2323 @@
+import * as THREE from "three";
+import { Vector2, Vector3, Vector4, Matrix4, Matrix3, Color } from "three";
+async function include(path, exportDefault = true) {
+  if (typeof global !== "undefined" && typeof require !== "undefined") {
+    return require(path);
+  } else {
+    let pack = await import(
+      /* @vite-ignore */
+      path
+    );
+    if (exportDefault) pack = pack.default;
+    return pack;
+  }
+}
+function arrayBufferViewToWgslType(value) {
+  if (value instanceof Float32Array) return "f32";
+  if (value instanceof Int32Array) return "i32";
+  if (value instanceof Uint32Array) return "u32";
+  throw new Error(
+    `Unsupported ArrayBufferView type: ${value.constructor.name}`
+  );
+}
+function capitalize(str) {
+  if (!str) return str;
+  return str[0].toUpperCase() + str.slice(1);
+}
+function isWgslType(type) {
+  return wgslTypes.includes(type);
+}
+function isStruct(s) {
+  if (s && Array.isArray(s) && s.length) {
+    return s.every((v) => v && typeof v === "object" && "name" in v && "type" in v && isWgslType(v.type));
+  }
+  return false;
+}
+function isStructArray(s) {
+  return s && "layout" in s && isStruct(s.layout);
+}
+function padding(offset, type) {
+  const alignment = TYPE_ALIGN[type];
+  return (alignment - offset % alignment) % alignment;
+}
+function roundUp(offset, align) {
+  return offset + (align - offset % align) % align;
+}
+function buildStructTypeByData(data) {
+  const keys = Object.keys(data);
+  const types = keys.map((k) => {
+    const v = data[k];
+    if (Array.isArray(v)) {
+      for (const t of ["vec2", "vec3", "vec4", "mat3x3", "mat4x4"]) {
+        if (TYPE_SIZE[t] === v.length) return t;
+      }
+      throw new Error(`${k} 不支持的数组长度 ${v.length}`);
+    }
+    if (typeof v === "number") return "f32";
+    throw new Error(`${k} 不支持的类型`);
+  });
+  if (keys.length !== types.length) throw new Error("keys 与 types 长度不一致");
+  let offset = 0;
+  const layout = keys.map((k, i) => {
+    const type = types[i];
+    offset += padding(offset, type);
+    const info = {
+      name: k,
+      type,
+      offset,
+      size: TYPE_SIZE[type]
+    };
+    offset += TYPE_SIZE[type];
+    return info;
+  });
+  const structAlign = Math.max(...types.map((t) => TYPE_ALIGN[t]));
+  const stride = offset + (structAlign - offset % structAlign) % structAlign;
+  return {
+    stride,
+    layout
+  };
+}
+const TYPE_SIZE = {
+  f32: 1,
+  u32: 1,
+  vec2: 2,
+  vec3: 3,
+  vec4: 4,
+  mat3x3: 12,
+  mat4x4: 16
+  // array: Infinity
+};
+const TYPE_ALIGN = {
+  f32: 1,
+  u32: 1,
+  vec2: 2,
+  vec3: 4,
+  vec4: 4,
+  mat3x3: 4,
+  mat4x4: 4
+  // array: 1
+};
+class AtomicUint32Array extends Uint32Array {
+}
+const wgslTypes = ["f32", "u32", "vec2", "vec3", "vec4", "mat3x3", "mat4x4"];
+let adapter$1 = null;
+let device$1 = null;
+class GpuComputed {
+  template;
+  option;
+  pipeline;
+  device;
+  groupLayout;
+  code;
+  constructor(template, option) {
+    this.template = template;
+    this.option = option;
+    this.improveTemplateOption(this.template);
+  }
+  /** 完善模版数据
+   * @param template 
+   */
+  improveTemplateOption(template) {
+    const improveStruct = (struct) => {
+      let offset = 0;
+      struct.forEach((item) => {
+        offset += padding(offset, item.type);
+        item.offset = offset;
+        item.size = TYPE_SIZE[item.type];
+        offset += item.size;
+      });
+    };
+    const improveStructArray = (structArr) => {
+      improveStruct(structArr.layout);
+      const last = structArr.layout[structArr.layout.length - 1], stride = last.offset + last.size;
+      let maxAlign = 1;
+      for (const item of structArr.layout) maxAlign = Math.max(maxAlign, TYPE_ALIGN[item.type]);
+      structArr.stride = roundUp(stride, maxAlign);
+    };
+    const keys = Object.keys(template);
+    keys.forEach((key) => {
+      const value = template[key];
+      if (isStruct(value)) improveStruct(value);
+      else if (isStructArray(value)) improveStructArray(value);
+      else if (Array.isArray(value) && typeof value[0] === "number") {
+        template[key] = new Float32Array();
+      }
+    });
+  }
+  /** 获取Gpu设备
+   * @returns 
+   */
+  async getDevice() {
+    if (!adapter$1 || !device$1) throw new Error("webgpu未初始化或不可用");
+    return { adapter: adapter$1, device: device$1 };
+  }
+  /**
+   * 初始化计算管线
+   */
+  async initPipeline() {
+    if (!this.template) throw new Error("初始化计算管线错误，未找到可用数据模版");
+    await GpuComputed.init();
+    const template = this.template;
+    const { device: device2 } = await this.getDevice(), structCodes = [], groupCodes = [], groupLayoutOption = [];
+    this.device = device2;
+    Object.keys(template).forEach((name, index) => {
+      groupLayoutOption.push({
+        binding: index,
+        // 绑定到组里的0号位插槽
+        visibility: GPUShaderStage.COMPUTE,
+        // 数据在哪些阶段可以使用, 计算着色器、片元着色器、顶点着色器
+        buffer: {
+          type: "storage"
+        }
+      });
+      if (isStruct(template[name])) {
+        const value = template[name], code2 = value.map((item) => `${item.name}:${item.type === "f32" ? "f32" : item.type + "<f32>"}`).join(","), structName = `${capitalize(name)}Struct`;
+        structCodes.push(`struct ${capitalize(name)}Struct {${code2}};`);
+        groupCodes.push(`@group(0) @binding(${index}) var<storage, read_write> ${name}: ${structName};`);
+      } else if (isStructArray(template[name])) {
+        const value = template[name], code2 = value.layout.map((item) => `${item.name}:${item.type === "f32" ? "f32" : item.type + "<f32>"}`).join(","), structName = `${capitalize(name)}Struct`;
+        structCodes.push(`struct ${structName} {${code2}};`);
+        groupCodes.push(`@group(0) @binding(${index}) var<storage, read_write> ${name}: array<${structName}>;`);
+      } else if (ArrayBuffer.isView(template[name]) && !(template[name] instanceof DataView)) {
+        const value = template[name];
+        const type = arrayBufferViewToWgslType(value);
+        if (value instanceof AtomicUint32Array) groupCodes.push(`@group(0) @binding(${index}) var<storage, read_write> ${name}: array<atomic<${type}>>;`);
+        else groupCodes.push(`@group(0) @binding(${index}) var<storage, read_write> ${name}: array<${type}>;`);
+      }
+    });
+    const {
+      beforeCodes = [],
+      workgroupSize = [32, 1, 1],
+      globalInvocationIdName = "grid",
+      workgroupIndexName = "index",
+      code = ""
+    } = this.option ?? {};
+    const codeFull = (
+      /*wgsl*/
+      `
+            ${structCodes.join("")}
+${groupCodes.join("")}
+            ${beforeCodes.join(" ") ?? ""}
+
+            @compute @workgroup_size(${workgroupSize.join(",")})
+            fn main(@builtin(global_invocation_id) ${globalInvocationIdName}: vec3<u32>) {
+                var ${workgroupIndexName} = ${globalInvocationIdName}.x;
+                ${code}
+            }
+        `
+    );
+    this.code = codeFull;
+    const groupLayout = device2.createBindGroupLayout({
+      entries: groupLayoutOption
+    });
+    this.groupLayout = groupLayout;
+    this.pipeline = device2.createComputePipeline({
+      layout: device2.createPipelineLayout({
+        bindGroupLayouts: [groupLayout]
+      }),
+      compute: {
+        module: device2.createShaderModule({ code: codeFull, label: "" }),
+        entryPoint: "main"
+      }
+    });
+  }
+  /**
+   * 根据数据创建buffer组
+   * @param data 数据
+   * @param bindGroup 已创建的bindGroup, 会在没有传入对应数据时使用，用于Buffer重复利用，不需要重新构建，按名字判断，所以请确保名称和类型一致性
+   * @returns 
+   */
+  createBindGroup(data, bindGroup) {
+    if (!this.template) throw new Error("创建buffer组错误，未找到可用数据模版");
+    if (!this.device) throw new Error("创建buffer组错误，未找到可用的gpu设备，请确保初始化完计算管线");
+    const device2 = this.device, template = this.template, buffers = [], bufferMap = bindGroup?.buffers?.reduce((map, item) => {
+      map.set(item.name, item.buffer);
+      return map;
+    }, /* @__PURE__ */ new Map());
+    function buildStruct(valueObj, tem, offset = 0, data2) {
+      if (ArrayBuffer.isView(valueObj) || Array.isArray(valueObj)) return valueObj;
+      if (!data2) {
+        const last = tem[tem.length - 1], stride = last.offset + last.size;
+        let maxAlign = 1;
+        for (const item of tem) maxAlign = Math.max(maxAlign, TYPE_ALIGN[item.type]);
+        data2 = data2 ?? new Float32Array(roundUp(stride, maxAlign)).fill(0);
+      }
+      tem.forEach((item) => {
+        let value = valueObj[item.name];
+        if (!Array.isArray(value)) value = [value];
+        for (let i = 0; i < item.size; i++) {
+          data2[offset + item.offset + i] = Number(value[i] ?? 0);
+        }
+      });
+      return data2;
+    }
+    function buildStructArray(values, tem) {
+      if (ArrayBuffer.isView(values) || typeof values[0] === "number") return values;
+      const data2 = new Float32Array(tem.stride * values.length).fill(0);
+      values.forEach((value, i) => {
+        const offset = i * tem.stride;
+        buildStruct(value, tem.layout, offset, data2);
+      });
+      return data2;
+    }
+    Object.keys(template).forEach((name) => {
+      if (!(name in data)) {
+        if (bufferMap && bufferMap.has(name)) {
+          return buffers.push({ name, buffer: bufferMap.get(name) });
+        }
+        throw new Error(`传入的数据中，不存在${name}字段`);
+      }
+      const tem = template[name];
+      const value = data[name];
+      let array = [];
+      if (isStruct(tem)) array = buildStruct(value, tem);
+      else if (isStructArray(tem)) array = buildStructArray(value, tem);
+      else if (Array.isArray(value) || ArrayBuffer.isView(value)) array = value;
+      let arrayBuffer = null;
+      if (tem instanceof Float32Array) arrayBuffer = new Float32Array(array);
+      else if (tem instanceof Uint32Array) arrayBuffer = new Uint32Array(array);
+      else if (tem instanceof Int32Array) arrayBuffer = new Int32Array(array);
+      else arrayBuffer = new Float32Array(array);
+      if (!arrayBuffer) throw new Error("不支持的数组类型" + tem);
+      const buffer = device2.createBuffer({
+        size: arrayBuffer.byteLength,
+        usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC | GPUBufferUsage.STORAGE
+      });
+      device2.queue.writeBuffer(buffer, 0, arrayBuffer);
+      buffers.push({ name, buffer });
+    });
+    const group = device2.createBindGroup({
+      layout: this.groupLayout,
+      entries: buffers.map((item, index) => ({
+        binding: index,
+        resource: { buffer: item.buffer }
+      }))
+    });
+    return {
+      group,
+      buffers
+    };
+  }
+  /** 数据映射回模版数据
+   * @param array 
+   * @param key 
+   */
+  dataMap(array, key) {
+    if (!(key in this.template)) throw new Error("未找到数据字段：" + key);
+    if (isStructArray(this.template[key])) {
+      const tems = this.template[key], count = array.length / tems.stride, list = [];
+      for (let i = 0; i < count; i++) {
+        const base = i * tems.stride;
+        const obj = {};
+        tems.layout.forEach((item) => {
+          const data = array.slice(base + item.offset, base + item.offset + item.size);
+          obj[item.name] = data.length === 1 ? data[0] : [...data];
+        });
+        list.push(obj);
+      }
+      return list;
+    }
+    if (isStruct(this.template[key])) {
+      const tem = this.template[key];
+      const obj = {};
+      tem.forEach((item) => {
+        const data = array.slice(item.offset, item.offset + item.size);
+        obj[item.name] = data.length === 1 ? data[0] : [...data];
+      });
+      return obj;
+    }
+    return array;
+  }
+  /** 开始计算
+   * @param group 数据组
+   * @param workgroupCount 工作组大小
+   * @param synchronize 需要同步的数据字段
+   * @returns 
+   */
+  async computed(group, workgroupCount, synchronize = []) {
+    if (!this.pipeline) throw new Error("未找到可用计算管线，请确保计算管线已经创建成功");
+    const device2 = this.device;
+    const pipeline = this.pipeline;
+    const encoder = device2.createCommandEncoder();
+    const pass = encoder.beginComputePass();
+    pass.setPipeline(pipeline);
+    pass.setBindGroup(0, group.group);
+    pass.dispatchWorkgroups(workgroupCount[0], workgroupCount[1], workgroupCount[2]);
+    pass.end();
+    const syncBuffers = group.buffers?.map((item) => {
+      if (synchronize?.includes(item.name)) {
+        const stagingBuffer = device2.createBuffer({
+          size: item.buffer.size,
+          usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST
+        });
+        encoder.copyBufferToBuffer(item.buffer, 0, stagingBuffer, 0, stagingBuffer.size);
+        return { buffer: stagingBuffer, name: item.name };
+      }
+    }).filter((i) => !!i);
+    device2.queue.submit([encoder.finish()]);
+    await device2.queue.onSubmittedWorkDone();
+    const map = /* @__PURE__ */ new Map();
+    await Promise.all(
+      syncBuffers.map(async (item) => {
+        await item.buffer.mapAsync(GPUMapMode.READ);
+        const mappedRange = item.buffer.getMappedRange();
+        let arrayBuffer = null;
+        if (this.template[item.name] instanceof Float32Array) arrayBuffer = new Float32Array(mappedRange);
+        else if (this.template[item.name] instanceof Uint32Array) arrayBuffer = new Uint32Array(mappedRange);
+        else if (this.template[item.name] instanceof Int32Array) arrayBuffer = new Int32Array(mappedRange);
+        else arrayBuffer = new Float32Array(mappedRange);
+        map.set(item.name, arrayBuffer);
+      })
+    );
+    const results = synchronize.map((name) => map.get(name));
+    return results;
+  }
+  /** 初始化gpu设备
+   * @returns 
+   */
+  static async init(opt = {}) {
+    if (adapter$1 && device$1) return;
+    if (typeof globalThis !== "undefined" && typeof window === "undefined") {
+      const { create, globals } = await include("webgpu", false);
+      Object.assign(globalThis, globals);
+      if (!globalThis.navigator) globalThis.navigator = {};
+      Object.assign(globalThis.navigator, { gpu: create([]) });
+    }
+    if (!navigator.gpu) throw new Error("该环境不支持webgpu");
+    if (!adapter$1) adapter$1 = await navigator.gpu.requestAdapter(opt);
+    if (!adapter$1) throw new Error("获取适配器失败");
+    device$1 = await adapter$1.requestDevice(opt);
+    if (!adapter$1) throw new Error("获取设备失败");
+  }
+  static set(adapter_, device_) {
+    adapter$1 = adapter_;
+    device$1 = device_;
+  }
+  /** 注销gpu设备
+   */
+  static destroy() {
+    if (device$1) device$1.destroy();
+    device$1 = null;
+  }
+  /** 
+   * @param data 
+   */
+  static buildBufferTypeByData(data) {
+    const bufferDataType = Object.keys(data).reduce((obj, k) => {
+      let value = data[k];
+      if (Array.isArray(value) && typeof value[0] === "number") value = new Float32Array();
+      if (Array.isArray(value)) {
+        if (typeof value[0] === "object" || value.length) {
+          const buffer = buildStructTypeByData(value[0]);
+          obj[k] = buffer;
+        } else console.log(`字段：${k}， 不支持该值对应数据类型或数组为空`);
+      } else if (ArrayBuffer.isView(value) && !(value instanceof DataView)) {
+        obj[k] = value;
+      } else if (typeof value === "object") {
+        const buffer = buildStructTypeByData(value);
+        obj[k] = buffer.layout;
+      } else console.log(`字段：${k}， 不支持的数据类型`);
+      return obj;
+    }, {});
+    return bufferDataType;
+  }
+  /** 通过数据创建
+   * @param opt 
+   * @returns 
+   */
+  static async fromByData(opt) {
+    let { data, ...option } = opt;
+    const bufferDataType = this.buildBufferTypeByData(data);
+    const gpuComputed = new GpuComputed(bufferDataType, option);
+    await gpuComputed.initPipeline();
+    return gpuComputed;
+  }
+  /** 快捷计算方法
+   * @param opt 
+   * @returns 
+   */
+  static async computed(opt) {
+    let { data, map = false, workgroupCount, synchronize, onSuccess, ...option } = opt;
+    const gpuComputed = await this.fromByData({ data, ...option }), group = gpuComputed.createBindGroup(data), results = await gpuComputed.computed(group, workgroupCount, synchronize);
+    onSuccess && onSuccess({ gpuComputed, group, results });
+    if (map) return results.map((data2, i) => gpuComputed.dataMap(data2, synchronize[i]));
+    return results;
+  }
+}
+let adapter = null;
+let device = null;
+async function initWebgpu(opt = {}) {
+  if (adapter && device) return;
+  if (typeof globalThis !== "undefined" && typeof window === "undefined") {
+    const { create, globals } = await include("webgpu", false);
+    Object.assign(globalThis, globals);
+    if (!globalThis.navigator) globalThis.navigator = {};
+    Object.assign(globalThis.navigator, { gpu: create([]) });
+  }
+  if (!navigator.gpu) throw new Error("该环境不支持webgpu");
+  if (!adapter) adapter = await navigator.gpu.requestAdapter(opt);
+  if (!adapter) throw new Error("获取适配器失败");
+  device = await adapter.requestDevice(opt);
+  if (!adapter) throw new Error("获取设备失败");
+  GpuComputed.set(adapter, device);
+  return { device, adapter };
+}
+async function destroyWebgpu() {
+  if (adapter && device) {
+    device.destroy();
+    GpuComputed.destroy();
+    adapter = null;
+    device = null;
+  }
+}
+const getDevice = () => {
+  if (!device) throw new Error("未初始化webgpu");
+  return device;
+};
+const getAdapter = () => {
+  if (!adapter) throw new Error("未初始化webgpu");
+  return adapter;
+};
+function createBuffer(device2, options) {
+  const { data, size, usage, mappedAtCreation = false, label } = options;
+  let bufferSize = size ?? 0;
+  if (data) {
+    bufferSize = data.byteLength;
+  }
+  bufferSize = Math.ceil(bufferSize / 4) * 4;
+  const buffer = device2.createBuffer({
+    size: bufferSize,
+    usage,
+    mappedAtCreation
+  });
+  if (label) {
+    buffer.label = label;
+  }
+  if (data) {
+    if (mappedAtCreation) {
+      const mapping = buffer.getMappedRange();
+      new Uint8Array(mapping).set(
+        data instanceof ArrayBuffer ? new Uint8Array(data) : new Uint8Array(data.buffer)
+      );
+      buffer.unmap();
+    } else {
+      device2.queue.writeBuffer(
+        buffer,
+        0,
+        data instanceof ArrayBuffer ? data : data.buffer
+      );
+    }
+  }
+  return buffer;
+}
+function createTexture(device2, options) {
+  const {
+    size,
+    format,
+    usage,
+    dimension = "2d",
+    mipLevelCount = 1,
+    sampleCount = 1,
+    // data,
+    // bytesPerRow,
+    label
+  } = options;
+  const texture = device2.createTexture({
+    size,
+    format,
+    usage,
+    dimension,
+    mipLevelCount,
+    sampleCount
+  });
+  if (label) {
+    texture.label = label;
+  }
+  return texture;
+}
+function createRenderPipeline(device2, options) {
+  const {
+    layout = "auto",
+    vertex: vertex2,
+    primitive,
+    depthStencil,
+    multisample,
+    fragment: fragment2,
+    label
+  } = options;
+  const pipeline = device2.createRenderPipeline({
+    layout,
+    vertex: vertex2,
+    primitive,
+    depthStencil,
+    multisample,
+    fragment: fragment2
+  });
+  if (label) {
+    pipeline.label = label;
+  }
+  return pipeline;
+}
+function createComputePipeline(device2, options) {
+  const { layout = "auto", compute, label } = options;
+  const pipeline = device2.createComputePipeline({
+    layout,
+    compute
+  });
+  if (label) {
+    pipeline.label = label;
+  }
+  return pipeline;
+}
+const FORMAT_BYTES = {
+  rgba8unorm: 4,
+  "rgba8unorm-srgb": 4,
+  bgra8unorm: 4,
+  rg8unorm: 2,
+  r8unorm: 1,
+  r16float: 2,
+  r32float: 4,
+  rgba16float: 8,
+  rgba32float: 16,
+  depth32float: 4
+};
+async function readGPUBuffer(buffer, size, Type = Uint8Array, device2 = getDevice()) {
+  const readBuffer = device2.createBuffer({
+    size,
+    usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+  });
+  const encoder = device2.createCommandEncoder();
+  encoder.copyBufferToBuffer(buffer, 0, readBuffer, 0, size);
+  device2.queue.submit([encoder.finish()]);
+  await readBuffer.mapAsync(GPUMapMode.READ);
+  const mapped = readBuffer.getMappedRange();
+  const copy = mapped.slice(0);
+  const result = new Type(copy);
+  readBuffer.unmap();
+  return result;
+}
+async function readTextureBuffer(texture, options = {}, device2 = getDevice()) {
+  const mipLevel = options.mipLevel ?? 0;
+  const width = Math.max(1, (texture.width ?? 1) >> mipLevel);
+  const height = Math.max(1, (texture.height ?? 1) >> mipLevel);
+  const layer = options.face ?? options.layer ?? 0;
+  const format = texture.format ?? "rgba8unorm";
+  const bytesPerPixel = FORMAT_BYTES[format] ?? 4;
+  const bytesPerRow = Math.ceil(width * bytesPerPixel / 256) * 256;
+  const bufferSize = bytesPerRow * height;
+  const buffer = device2.createBuffer({
+    size: bufferSize,
+    usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+  });
+  const encoder = device2.createCommandEncoder();
+  let srcTexture = texture;
+  try {
+    encoder.copyTextureToBuffer(
+      {
+        texture: srcTexture,
+        mipLevel,
+        origin: { x: 0, y: 0, z: layer }
+      },
+      {
+        buffer,
+        bytesPerRow,
+        rowsPerImage: height
+      },
+      {
+        width,
+        height,
+        depthOrArrayLayers: 1
+      }
+    );
+  } catch {
+    const temp = device2.createTexture({
+      size: [width, height, 1],
+      format,
+      usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST
+    });
+    encoder.copyTextureToTexture(
+      { texture: srcTexture },
+      { texture: temp },
+      { width, height, depthOrArrayLayers: 1 }
+    );
+    encoder.copyTextureToBuffer(
+      {
+        texture: temp
+      },
+      {
+        buffer,
+        bytesPerRow,
+        rowsPerImage: height
+      },
+      {
+        width,
+        height,
+        depthOrArrayLayers: 1
+      }
+    );
+  }
+  device2.queue.submit([encoder.finish()]);
+  await buffer.mapAsync(GPUMapMode.READ);
+  const mapped = new Uint8Array(buffer.getMappedRange());
+  const result = new Uint8Array(width * height * bytesPerPixel);
+  for (let y = 0; y < height; y++) {
+    const srcOffset = y * bytesPerRow;
+    const dstOffset = y * width * bytesPerPixel;
+    result.set(
+      mapped.subarray(
+        srcOffset,
+        srcOffset + width * bytesPerPixel
+      ),
+      dstOffset
+    );
+  }
+  buffer.unmap();
+  return {
+    data: result,
+    width,
+    height,
+    bytesPerPixel,
+    format
+  };
+}
+async function readCubeTexture(texture, face = 0, mipLevel = 0, device2 = getDevice()) {
+  const result = await readTextureBuffer(texture, {
+    face,
+    mipLevel
+  }, device2);
+  return {
+    data: result.data,
+    width: result.width,
+    height: result.height,
+    format: result.format,
+    bytesPerPixel: result.bytesPerPixel
+  };
+}
+const shaderLocationMap = /* @__PURE__ */ new Map();
+shaderLocationMap.set("position", 0).set("normal ", 1).set("uv", 2).set("color", 3);
+class BufferGeometry extends THREE.BufferGeometry {
+  gpuAttributes = /* @__PURE__ */ new Map();
+  indexBuffer;
+  indexFormat;
+  needsUpdate = true;
+  count = 0;
+  update() {
+    if (!this.needsUpdate) return;
+    const device2 = getDevice();
+    let index = 0;
+    for (const name in this.attributes) {
+      const attr = this.attributes[name];
+      if (name === "position") this.count = attr.count;
+      const array = attr.array;
+      const stride = attr.itemSize * 4;
+      const buffer = device2.createBuffer({
+        size: array.byteLength,
+        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+      });
+      device2.queue.writeBuffer(buffer, 0, array);
+      const format = this.getVertexFormat(attr);
+      const shaderLocation = shaderLocationMap.get(name) ?? shaderLocationMap.size + 2 + index;
+      this.gpuAttributes.set(name, { buffer, stride, format, shaderLocation });
+      index++;
+    }
+    if (this.index) {
+      const array = this.index.array;
+      this.indexBuffer = device2.createBuffer({
+        size: array.byteLength,
+        usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST
+      });
+      device2.queue.writeBuffer(this.indexBuffer, 0, array);
+      this.indexFormat = array instanceof Uint32Array ? "uint32" : "uint16";
+    }
+    this.needsUpdate = false;
+  }
+  setAttribute(name, attribute) {
+    super.setAttribute(name, attribute);
+    this.needsUpdate = true;
+    return this;
+  }
+  getVertexFormat(attr) {
+    const itemSize = attr.itemSize;
+    const array = attr.array;
+    const type = array instanceof Float32Array ? "float32" : array instanceof Uint32Array ? "uint32" : array instanceof Uint16Array ? "uint16" : "float32";
+    if (itemSize === 1) return `${type}`;
+    if (itemSize === 2) return `${type}x2`;
+    if (itemSize === 3) return `${type}x3`;
+    if (itemSize === 4) return `${type}x4`;
+    throw new Error("unsupported attribute size");
+  }
+}
+const layoutCache$2 = /* @__PURE__ */ new WeakMap();
+const OBJECT_UNIFORM_SIZE = 128;
+class Object3D extends THREE.Object3D {
+  static get bindGroupLayout() {
+    const device2 = getDevice();
+    let layout = layoutCache$2.get(device2);
+    if (layout) return layout;
+    layout = device2.createBindGroupLayout({
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.VERTEX,
+          buffer: { type: "uniform" }
+        }
+      ]
+    });
+    layoutCache$2.set(device2, layout);
+    return layout;
+  }
+  buffer;
+  bindGroup;
+  needsUpdate = true;
+  material;
+  geometry;
+  uniformArray = new Float32Array(OBJECT_UNIFORM_SIZE / 4);
+  constructor(geometry, material) {
+    super();
+    this.material = material;
+    this.geometry = geometry;
+    const device2 = getDevice();
+    this.buffer = device2.createBuffer({
+      size: OBJECT_UNIFORM_SIZE,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    this.bindGroup = device2.createBindGroup({
+      layout: Object3D.bindGroupLayout,
+      entries: [
+        {
+          binding: 0,
+          resource: {
+            buffer: this.buffer
+          }
+        }
+      ]
+    });
+  }
+  updateMatrixWorld(force) {
+    super.updateMatrixWorld(force);
+    this.needsUpdate = true;
+  }
+  _updateBuffer() {
+    if (!this.needsUpdate) return;
+    const device2 = getDevice();
+    const model = this.matrixWorld;
+    const normal = new THREE.Matrix3().getNormalMatrix(model);
+    let offset = 0;
+    this.uniformArray.set(model.elements, offset);
+    offset += 16;
+    const n = normal.elements;
+    this.uniformArray[offset++] = n[0];
+    this.uniformArray[offset++] = n[1];
+    this.uniformArray[offset++] = n[2];
+    this.uniformArray[offset++] = 0;
+    this.uniformArray[offset++] = n[3];
+    this.uniformArray[offset++] = n[4];
+    this.uniformArray[offset++] = n[5];
+    this.uniformArray[offset++] = 0;
+    this.uniformArray[offset++] = n[6];
+    this.uniformArray[offset++] = n[7];
+    this.uniformArray[offset++] = n[8];
+    this.uniformArray[offset++] = 0;
+    device2.queue.writeBuffer(this.buffer, 0, this.uniformArray);
+    this.needsUpdate = false;
+  }
+  pipeline = null;
+  createPipeline(format) {
+    this.pipeline = this.material.createPipeline(this.geometry.gpuAttributes, format);
+  }
+  update(format) {
+    this.geometry.update();
+    this.material.update();
+    if (!this.pipeline) this.createPipeline(format);
+    if (this.needsUpdate) this._updateBuffer();
+  }
+}
+const layoutCache$1 = /* @__PURE__ */ new WeakMap();
+const CAMERA_UNIFORM_SIZE = 224;
+class PerspectiveCamera extends THREE.PerspectiveCamera {
+  static get bindGroupLayout() {
+    const device2 = getDevice();
+    let layout = layoutCache$1.get(device2);
+    if (layout) return layout;
+    layout = device2.createBindGroupLayout({
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+          buffer: {
+            type: "uniform"
+          }
+        }
+      ]
+    });
+    layoutCache$1.set(device2, layout);
+    return layout;
+  }
+  buffer;
+  bindGroup;
+  _needsUpdate = true;
+  get needsUpdate() {
+    return this._needsUpdate;
+  }
+  set needsUpdate(v) {
+    this._needsUpdate = v;
+  }
+  uniformArray = new Float32Array(CAMERA_UNIFORM_SIZE / 4);
+  constructor(fov, aspect, near, far) {
+    super(fov, aspect, near, far);
+    const device2 = getDevice();
+    this.buffer = device2.createBuffer({
+      size: 256,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    this.bindGroup = device2.createBindGroup({
+      layout: PerspectiveCamera.bindGroupLayout,
+      entries: [
+        {
+          binding: 0,
+          resource: {
+            buffer: this.buffer
+          }
+        }
+      ]
+    });
+  }
+  _updateBuffer() {
+    if (!this.needsUpdate) return;
+    const device2 = getDevice();
+    this.updateMatrixWorld();
+    this.updateProjectionMatrix();
+    const view = this.matrixWorldInverse;
+    const proj = this.projectionMatrix.clone();
+    const vp = new THREE.Matrix4().multiplyMatrices(proj, view);
+    const pos = this.position;
+    let offset = 0;
+    const a = this.uniformArray;
+    a.set(view.elements, offset);
+    offset += 16;
+    a.set(proj.elements, offset);
+    offset += 16;
+    a.set(vp.elements, offset);
+    offset += 16;
+    a[offset++] = pos.x;
+    a[offset++] = pos.y;
+    a[offset++] = pos.z;
+    a[offset++] = 0;
+    a[offset++] = this.near;
+    a[offset++] = this.far;
+    a[offset++] = 0;
+    a[offset++] = 0;
+    device2.queue.writeBuffer(
+      this.buffer,
+      0,
+      a
+    );
+    this.needsUpdate = false;
+  }
+  updateMatrix() {
+    super.updateMatrix();
+    this.needsUpdate = true;
+  }
+  updateMatrixWorld() {
+    super.updateMatrixWorld();
+    this.needsUpdate = true;
+  }
+  updateProjectionMatrix() {
+    super.updateProjectionMatrix();
+    this.needsUpdate = true;
+  }
+  update() {
+    if (this.needsUpdate) this._updateBuffer();
+  }
+}
+const samplerCache = /* @__PURE__ */ new Map();
+function samplerKey(desc) {
+  return [
+    desc.magFilter,
+    desc.minFilter,
+    desc.mipmapFilter,
+    desc.addressModeU,
+    desc.addressModeV,
+    desc.addressModeW,
+    desc.compare
+  ].join("_");
+}
+function getSampler(desc) {
+  const device2 = getDevice();
+  const key = samplerKey(desc);
+  let sampler = samplerCache.get(key);
+  if (!sampler) {
+    sampler = device2.createSampler(desc);
+    samplerCache.set(key, sampler);
+  }
+  return sampler;
+}
+class Texture {
+  depthTexture;
+  depthView;
+  texture;
+  view;
+  width;
+  height;
+  format;
+  sampler;
+  needDepthTexture;
+  depthOrArrayLayers;
+  dimension;
+  viewDimension;
+  constructor(width, height = width, des) {
+    const {
+      format = navigator.gpu.getPreferredCanvasFormat(),
+      sampler,
+      depthOrArrayLayers = 1,
+      dimension = "2d",
+      viewDimension = "2d",
+      init = true,
+      needDepthTexture = false
+    } = des ?? {};
+    this.format = format;
+    this.depthOrArrayLayers = depthOrArrayLayers;
+    this.dimension = dimension;
+    this.viewDimension = viewDimension;
+    this.needDepthTexture = needDepthTexture;
+    this.sampler = getSampler({
+      magFilter: "linear",
+      minFilter: "linear",
+      mipmapFilter: "linear",
+      ...sampler
+    });
+    init && this.init(width, height);
+  }
+  init(width, height = width) {
+    if (width === this.width && height === this.height) return;
+    this.destroy();
+    const device2 = getDevice();
+    this.width = width;
+    this.height = height;
+    if (this.needDepthTexture) {
+      this.depthTexture = device2.createTexture({
+        size: [width, height],
+        format: "depth24plus",
+        label: "depthTexture",
+        usage: GPUTextureUsage.RENDER_ATTACHMENT
+      });
+      this.depthView = this.depthTexture.createView();
+    }
+    this.texture = device2.createTexture({
+      size: {
+        width,
+        height,
+        depthOrArrayLayers: this.depthOrArrayLayers
+      },
+      format: this.format,
+      dimension: this.dimension,
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST
+    });
+    this.view = this.texture.createView({
+      dimension: this.viewDimension
+    });
+  }
+  destroy() {
+    this.texture?.destroy();
+    this.depthTexture?.destroy();
+  }
+  static async fromByImage(bitmap) {
+    const device2 = getDevice();
+    const texture = new Texture(bitmap.width, bitmap.height);
+    device2.queue.copyExternalImageToTexture(
+      { source: bitmap },
+      { texture: texture.texture },
+      { width: bitmap.width, height: bitmap.height }
+    );
+    return texture;
+  }
+  static async fromURL(url) {
+    const img = await fetch(url).then((r) => r.blob());
+    const bitmap = await createImageBitmap(img);
+    return await this.fromByImage(bitmap);
+  }
+}
+class CubeTexture extends Texture {
+  get cubeView() {
+    return this.view;
+  }
+  faceViews = new Array(6);
+  constructor(width, height = width, des) {
+    super(width, height, {
+      viewDimension: "cube",
+      dimension: "2d",
+      depthOrArrayLayers: 6,
+      ...des
+    });
+    this.buildFaceViews();
+  }
+  getFaceView(face) {
+    return this.faceViews[face];
+  }
+  buildFaceViews() {
+    for (let i = 0; i < 6; i++) {
+      this.faceViews[i] = this.texture.createView({
+        dimension: "2d",
+        baseArrayLayer: i,
+        arrayLayerCount: 1
+      });
+    }
+  }
+}
+function preprocessShaderFSM(source, defs) {
+  let State;
+  ((State2) => {
+    State2[State2["TEXT"] = 0] = "TEXT";
+    State2[State2["DIRECTIVE"] = 1] = "DIRECTIVE";
+  })(State || (State = {}));
+  let state = 0;
+  let i = 0;
+  const len = source.length;
+  let output = "";
+  const condStack = [];
+  let enabled = true;
+  function readUntilLineEnd() {
+    let start = i;
+    while (i < len && source[i] !== "\n") i++;
+    return source.slice(start, i);
+  }
+  while (i < len) {
+    const ch = source[i];
+    switch (state) {
+      case 0:
+        if (ch === "#") {
+          state = 1;
+          i++;
+        } else {
+          if (enabled) output += ch;
+          i++;
+        }
+        break;
+      case 1:
+        const line = "#" + readUntilLineEnd();
+        i++;
+        state = 0;
+        let m = line.match(/^#if\s*\(\s*([A-Za-z0-9_]+)\s*\)/);
+        if (m) {
+          const key = m[1];
+          const cond = !!defs[key];
+          condStack.push(enabled);
+          enabled = enabled && cond;
+          break;
+        }
+        if (/^#else/.test(line)) {
+          const parent = condStack[condStack.length - 1] ?? true;
+          enabled = parent && !enabled;
+          break;
+        }
+        if (/^#endif/.test(line)) {
+          enabled = condStack.pop() ?? true;
+          break;
+        }
+        if (enabled) {
+          output += line + "\n";
+        }
+        break;
+    }
+  }
+  return output;
+}
+const MATERIAL_UNIFORM_SIZE = 256;
+const pipelineCache = /* @__PURE__ */ new Map();
+const layoutCache = /* @__PURE__ */ new Map();
+function getUniformType(v, atomic = false) {
+  if (v instanceof Matrix4) return "mat4";
+  if (v instanceof Matrix3) return "mat3";
+  if (v instanceof Color) return "vec3";
+  if (v instanceof Vector2) return "vec2";
+  if (v instanceof Vector3) return "vec3";
+  if (v instanceof Vector4) return "vec4";
+  if (typeof v === "number") return "f32";
+  if (v instanceof CubeTexture) return "texture_cube";
+  if (v instanceof Texture) return "texture_2d";
+  if (Array.isArray(v) || v instanceof Float32Array) return `array<${atomic ? "atomic<f32>" : "f32"}>`;
+  if (v instanceof Uint32Array || v instanceof Uint8Array) return `array<${atomic ? "atomic<u32>" : "u32"}>`;
+  return "f32";
+}
+function getArray(v) {
+  if (Array.isArray(v)) return new Float32Array(v);
+  if (v instanceof Float32Array || v instanceof Uint32Array || v instanceof Uint8Array) return v;
+  return new Float32Array();
+}
+const vertexFormatToWGSL = {
+  uint8x2: "vec2<u32>",
+  uint8x4: "vec4<u32>",
+  sint8x2: "vec2<i32>",
+  sint8x4: "vec4<i32>",
+  unorm8x2: "vec2<f32>",
+  unorm8x4: "vec4<f32>",
+  snorm8x2: "vec2<f32>",
+  snorm8x4: "vec4<f32>",
+  uint16x2: "vec2<u32>",
+  uint16x4: "vec4<u32>",
+  sint16x2: "vec2<i32>",
+  sint16x4: "vec4<i32>",
+  unorm16x2: "vec2<f32>",
+  unorm16x4: "vec4<f32>",
+  snorm16x2: "vec2<f32>",
+  snorm16x4: "vec4<f32>",
+  float16x2: "vec2<f16>",
+  float16x4: "vec4<f16>",
+  float32: "f32",
+  float32x2: "vec2<f32>",
+  float32x3: "vec3<f32>",
+  float32x4: "vec4<f32>",
+  uint32: "u32",
+  uint32x2: "vec2<u32>",
+  uint32x3: "vec3<u32>",
+  uint32x4: "vec4<u32>",
+  sint32: "i32",
+  sint32x2: "vec2<i32>",
+  sint32x3: "vec3<i32>",
+  sint32x4: "vec4<i32>"
+};
+const vertexCommon = (
+  /* wgsl */
+  `
+struct Camera {
+    view : mat4x4<f32>,
+    projection : mat4x4<f32>,
+    viewProjection : mat4x4<f32>,
+    position : vec3<f32>,
+    _pad0 : f32,
+    near : f32,
+    far : f32,
+    _pad1 : vec2<f32>,
+};
+
+@group(0) @binding(0)
+var<uniform> camera : Camera;
+
+struct Object {
+    modelMatrix : mat4x4<f32>,
+    normalMatrix : mat3x3<f32>,
+};
+
+@group(1) @binding(0)
+var<uniform> object : Object;
+`
+);
+class ShaderMaterial {
+  vertex;
+  fragment;
+  pipeline;
+  bindGroup;
+  buffer;
+  uniforms;
+  uniformArray = new Float32Array(MATERIAL_UNIFORM_SIZE / 4);
+  _bufferUniforms = {};
+  _textureUniforms = {};
+  _storageUniforms = {};
+  topology;
+  side;
+  blend;
+  writeMask;
+  depthStencil;
+  env;
+  _needsUniformUpdate = true;
+  get needsUniformUpdate() {
+    return this._needsUniformUpdate;
+  }
+  set needsUniformUpdate(v) {
+    this._needsUniformUpdate = v;
+  }
+  _needsBindGroupUpdate = true;
+  get needsBindGroupUpdate() {
+    return this._needsBindGroupUpdate;
+  }
+  set needsBindGroupUpdate(v) {
+    this._needsBindGroupUpdate = v;
+  }
+  constructor(options) {
+    const device2 = getDevice();
+    this.vertex = vertexCommon + 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.buffer = device2.createBuffer({
+      size: MATERIAL_UNIFORM_SIZE,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    this._initUniform(options.uniforms || {});
+  }
+  /**
+   * 初始化uniform
+   * @param uniforms 
+   */
+  _initUniform(uniforms) {
+    const device2 = getDevice();
+    this.uniforms = {};
+    let binding = 1;
+    const createObjectListener = (key, value, type, set) => {
+      const uniform = {
+        get value() {
+          return value;
+        },
+        set value(v) {
+          if (getUniformType(v) !== type) return;
+          value = set(v, value);
+        }
+      };
+      this.uniforms[key] = uniform;
+    };
+    const defaultListener = (key, value, type) => {
+      createObjectListener(key, value, type, (newValue) => {
+        this._bufferUniforms[key].value = newValue;
+        this.needsUniformUpdate = true;
+        return newValue;
+      });
+      this._bufferUniforms[key] = { type, value };
+    };
+    const arrayListener = (key, value, type) => {
+      createObjectListener(key, value, type, (newValue, oldValue) => {
+        const data = getArray(newValue);
+        if (newValue.length !== oldValue.length) {
+          this._storageUniforms[key].buffer = createBuffer(device2, {
+            data,
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC
+          });
+          this.needsBindGroupUpdate = true;
+        } else {
+          device2.queue.writeBuffer(this._storageUniforms[key].buffer, 0, data);
+        }
+        this._storageUniforms[key].value = newValue;
+        return newValue;
+      });
+      this._storageUniforms[key] = {
+        type,
+        value,
+        binding,
+        buffer: createBuffer(device2, {
+          data: getArray(value),
+          usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC
+        })
+      };
+      binding += 1;
+    };
+    const textureListener = (key, value, type) => {
+      createObjectListener(key, value, type, (newValue) => {
+        this._textureUniforms[key].value = newValue;
+        this._createBindGroup();
+        this.needsUniformUpdate = true;
+        return newValue;
+      });
+      this._textureUniforms[key] = { type, value, binding };
+      binding += 2;
+    };
+    for (const key in uniforms) {
+      let value = uniforms[key].value;
+      const type = getUniformType(value, uniforms[key]?.atomic);
+      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);
+    }
+    this.needsBindGroupUpdate = true;
+    this.needsUniformUpdate = true;
+  }
+  /**
+   * 获取绑定组布局
+   * @returns 
+   */
+  _getBindGroupLayout() {
+    const device2 = getDevice(), textureKeys = Object.keys(this._textureUniforms), storageUniformsKey = Object.keys(this._storageUniforms), key = "layout_" + JSON.stringify({
+      textures: textureKeys.map((k) => ({
+        name: k,
+        binding: this._textureUniforms[k].binding,
+        type: this._textureUniforms[k].type
+      })),
+      storages: storageUniformsKey.map((k) => ({
+        name: k,
+        binding: this._storageUniforms[k].binding,
+        write: this._storageUniforms[k].write
+      }))
+    });
+    if (layoutCache.has(key)) return layoutCache.get(key);
+    const entries = [{
+      binding: 0,
+      visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+      buffer: {}
+    }];
+    textureKeys.forEach((key2) => {
+      const item = this._textureUniforms[key2];
+      entries.push({
+        binding: item.binding,
+        visibility: GPUShaderStage.FRAGMENT,
+        texture: item.type === "texture_cube" ? {
+          "viewDimension": "cube"
+        } : {}
+      });
+      entries.push({
+        binding: item.binding + 1,
+        visibility: GPUShaderStage.FRAGMENT,
+        sampler: {}
+      });
+    });
+    storageUniformsKey.forEach((key2) => {
+      const item = this._storageUniforms[key2];
+      entries.push({
+        binding: item.binding,
+        visibility: item.write ? GPUShaderStage.FRAGMENT : GPUShaderStage.FRAGMENT | GPUShaderStage.VERTEX,
+        buffer: {
+          type: item.write ? "storage" : "read-only-storage"
+        }
+      });
+    });
+    const layout = device2.createBindGroupLayout({ entries });
+    layoutCache.set(key, layout);
+    return layout;
+  }
+  /**
+   * 创建绑定组
+   */
+  _createBindGroup() {
+    const device2 = getDevice();
+    const entries = [{
+      binding: 0,
+      resource: { buffer: this.buffer }
+    }];
+    for (const key in this._textureUniforms) {
+      const meta = this._textureUniforms[key];
+      const tex = meta.value;
+      entries.push({
+        binding: meta.binding,
+        resource: tex.view
+      });
+      entries.push({
+        binding: meta.binding + 1,
+        resource: tex.sampler
+      });
+    }
+    for (const key in this._storageUniforms) {
+      const meta = this._storageUniforms[key];
+      entries.push({
+        binding: meta.binding,
+        resource: meta.buffer
+      });
+    }
+    this.bindGroup = device2.createBindGroup({
+      layout: this._getBindGroupLayout(),
+      entries
+    });
+    this.needsBindGroupUpdate = false;
+  }
+  /** 生成uniform 代码
+   * @param type 
+   * @returns 
+   */
+  _generateUniformWGSL(type) {
+    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")
+          code += `    ${key} : mat4x4<f32>,
+`;
+        else if (type2 === "mat3")
+          code += `    ${key} : mat3x3<f32>,
+`;
+        else if (type2 === "vec2")
+          code += `    ${key} : vec2<f32>,
+`;
+        else if (type2 === "vec3")
+          code += `    ${key} : vec3<f32>,
+`;
+        else if (type2 === "vec4")
+          code += `    ${key} : vec4<f32>,
+`;
+        else if (type2 === "f32")
+          code += `    ${key} : f32,
+`;
+      }
+      code += "};\n";
+      code += ` @group(2) @binding(0) var<uniform> uniforms : MaterialUniforms; `;
+    }
+    if (type === "fragment") {
+      for (const key in this._textureUniforms) {
+        const meta = this._textureUniforms[key];
+        const b = meta.binding;
+        if (meta.type === "texture_2d") {
+          code += `
+                        @group(2) @binding(${b})
+                        var ${key} : 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;
+                    `;
+        }
+      }
+    }
+    return code;
+  }
+  /** 生成 顶点着色器入参类型代码
+   * @param attrMap 
+   * @returns 
+   */
+  _generateVertexInputWGSL(attrMap) {
+    if (!attrMap.size) return "";
+    let code = `struct VertexInput { `;
+    attrMap.forEach((v, name) => code += `@location(${v.shaderLocation}) ${name}: ${vertexFormatToWGSL[v.format]}, `);
+    code += `};`;
+    return code;
+  }
+  /**
+   * 生成 Storage 类型代码
+   */
+  _generateStorageWGSL(type) {
+    return Object.keys(this._storageUniforms).map((name) => {
+      const item = this._storageUniforms[name];
+      if (item.write && type === "vertex") return "";
+      return `@group(2) @binding(${item.binding}) var<storage, ${item.write ? "read_write" : "read"}> ${name}: ${item.type}; `;
+    }).join("");
+  }
+  /** 创建渲染管线
+   * @param attrMap 
+   * @param colorFormat 
+   * @param depthFormat 
+   * @returns 
+   */
+  createPipeline(attrMap, colorFormat = "rgba8unorm", depthFormat = "depth24plus") {
+    const vertexBuffers = [];
+    attrMap.forEach((v) => {
+      vertexBuffers.push({
+        arrayStride: v.stride,
+        attributes: [
+          {
+            shaderLocation: v.shaderLocation,
+            offset: 0,
+            format: v.format
+          }
+        ]
+      });
+    });
+    const device2 = getDevice();
+    const key = this.vertex + this.fragment + colorFormat + depthFormat + this.topology + this.side + Object.keys(this._textureUniforms).length + JSON.stringify(vertexBuffers);
+    if (pipelineCache.has(key)) {
+      this.pipeline = pipelineCache.get(key);
+      return this.pipeline;
+    }
+    const env = { ...this.env };
+    for (const key2 of attrMap.keys()) env[key2] = true;
+    const moduleVertex = device2.createShaderModule({
+      code: `${this._generateUniformWGSL("vertex")} ${this._generateStorageWGSL("vertex")} ${this._generateVertexInputWGSL(attrMap)} ${preprocessShaderFSM(this.vertex, env)}`
+    });
+    const moduleFragment = device2.createShaderModule({
+      code: `${this._generateUniformWGSL("fragment")} ${this._generateStorageWGSL("fragment")} ${preprocessShaderFSM(this.fragment, env)}`
+    });
+    const pipeline = device2.createRenderPipeline({
+      layout: device2.createPipelineLayout({
+        bindGroupLayouts: [
+          PerspectiveCamera.bindGroupLayout,
+          Object3D.bindGroupLayout,
+          this._getBindGroupLayout()
+        ]
+      }),
+      vertex: {
+        module: moduleVertex,
+        entryPoint: "main",
+        buffers: vertexBuffers
+      },
+      fragment: {
+        module: moduleFragment,
+        entryPoint: "main",
+        targets: [{
+          format: colorFormat,
+          blend: this.blend,
+          writeMask: this.writeMask
+        }]
+      },
+      primitive: {
+        topology: this.topology,
+        cullMode: this.side
+      },
+      depthStencil: {
+        depthWriteEnabled: true,
+        format: depthFormat,
+        depthCompare: "less",
+        ...this.depthStencil
+      }
+    });
+    pipelineCache.set(key, pipeline);
+    this.pipeline = pipeline;
+    return pipeline;
+  }
+  /**
+   * 更新uniform 数据
+   */
+  _updateUniform() {
+    const device2 = getDevice();
+    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") {
+        this.uniformArray[offset++] = value;
+        continue;
+      }
+      if (value instanceof Vector2) {
+        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;
+        continue;
+      }
+      if (value instanceof Vector4) {
+        this.uniformArray.set([value.x, value.y, value.z, value.w], offset);
+        offset += 4;
+        continue;
+      }
+      if (value.isColor) {
+        const c = value;
+        this.uniformArray[offset++] = c.r;
+        this.uniformArray[offset++] = c.g;
+        this.uniformArray[offset++] = c.b;
+        continue;
+      }
+      if (value.isMatrix4) {
+        this.uniformArray.set(value.elements, offset);
+        offset += 16;
+        continue;
+      }
+      if (value.isMatrix3) {
+        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];
+        offset += 12;
+        continue;
+      }
+    }
+    device2.queue.writeBuffer(this.buffer, 0, this.uniformArray);
+    this.needsUniformUpdate = false;
+  }
+  update() {
+    if (this.needsBindGroupUpdate) this._createBindGroup();
+    if (this.needsUniformUpdate) this._updateUniform();
+  }
+  /** 获取buffer
+   * @param name 
+   * @returns 
+   */
+  getStorageBuffer(name) {
+    return this._storageUniforms[name]?.buffer;
+  }
+}
+const transparentOption = {
+  blend: {
+    color: {
+      srcFactor: "src-alpha",
+      dstFactor: "one-minus-src-alpha",
+      operation: "add"
+    },
+    alpha: {
+      srcFactor: "one",
+      dstFactor: "one-minus-src-alpha",
+      operation: "add"
+    }
+  }
+};
+const vertex = (
+  /* wgsl */
+  `
+    struct VertexOutput {
+        @builtin(position) Position : vec4<f32>,
+        #if(uv) 
+            @location(0) uv: vec2<f32> 
+        #endif
+    };
+
+    @vertex
+    fn main(input: VertexInput) -> VertexOutput {
+        var out: VertexOutput;
+        let worldPos = object.modelMatrix * vec4<f32>(input.position, 1.0);
+        out.Position = camera.viewProjection * worldPos;
+
+        #if(uv) 
+            out.uv = input.uv; #endif
+
+        return out;
+    }
+`
+);
+const fragment = (
+  /* wgsl */
+  `
+    @fragment
+    fn main( 
+        #if(uv) 
+            @location(0) uv: vec2<f32> 
+        #endif 
+    ) -> @location(0) vec4<f32> {
+        #if(uv) 
+            let color = textureSample(map, mapSampler, uv); 
+            return vec4<f32>(uniforms.color, uniforms.opacity) * color;
+        #else 
+            return vec4<f32>(uniforms.color, uniforms.opacity);
+        #endif
+    }
+`
+);
+class BaseMaterial extends ShaderMaterial {
+  constructor(opt = {}) {
+    super({
+      vertex,
+      fragment,
+      side: opt.side ?? "front",
+      topology: opt.topology ?? "triangle-list",
+      uniforms: {
+        opacity: { value: opt.opacity ?? 1 },
+        color: { value: new Color(opt.color ?? 16777215) },
+        map: { value: opt.map ?? new Texture(128, 128) }
+      },
+      ...opt.transparent && {
+        ...transparentOption,
+        writeMask: GPUColorWrite.ALL,
+        depthStencil: {
+          depthWriteEnabled: false,
+          depthCompare: "less"
+        }
+      }
+    });
+  }
+}
+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"
+      }
+    });
+  }
+}
+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);
+  }
+}
+const directions = [
+  new THREE.Vector3(-1, 0, 0),
+  // -X
+  new THREE.Vector3(1, 0, 0),
+  // +X
+  new THREE.Vector3(0, 1, 0),
+  // +Y
+  new THREE.Vector3(0, -1, 0),
+  // -Y
+  new THREE.Vector3(0, 0, 1),
+  // +Z
+  new THREE.Vector3(0, 0, -1)
+  // -Z
+];
+const ups = [
+  new THREE.Vector3(0, -1, 0),
+  // -X
+  new THREE.Vector3(0, -1, 0),
+  // +X
+  new THREE.Vector3(0, 0, 1),
+  // +Y
+  new THREE.Vector3(0, 0, -1),
+  // -Y
+  new THREE.Vector3(0, -1, 0),
+  // +Z
+  new THREE.Vector3(0, -1, 0)
+  // -Z
+];
+class CubeCamera {
+  cameras = [];
+  depthClearValue = 1;
+  constructor(near = 0.1, far = 1e3, depthClearValue = 1) {
+    this.depthClearValue = depthClearValue;
+    for (let i = 0; i < 6; i++) {
+      const cam = new PerspectiveCamera(-90, 1, near, far);
+      cam.up.copy(ups[i]);
+      cam.lookAt(directions[i]);
+      this.cameras.push(cam);
+    }
+  }
+  setPosition(x, y, z) {
+    for (let i = 0; i < 6; i++) {
+      const cam = this.cameras[i];
+      cam.position.set(x, y, z);
+      cam.lookAt(
+        x + directions[i].x,
+        y + directions[i].y,
+        z + directions[i].z
+      );
+      cam.updateMatrixWorld();
+    }
+  }
+  updateDirections() {
+    for (let i = 0; i < 6; i++) {
+      const cam = this.cameras[i];
+      cam.up.copy(ups[i]);
+      cam.lookAt(
+        cam.position.x + directions[i].x,
+        cam.position.y + directions[i].y,
+        cam.position.z + directions[i].z
+      );
+      cam.updateMatrixWorld();
+    }
+  }
+  render(meshList, renderer, cubeTexture) {
+    for (let i = 0; i < 6; i++) {
+      const camera = this.cameras[i];
+      const view = cubeTexture.getFaceView(i);
+      renderer.renderTarget = view;
+      renderer.depthTarget = cubeTexture.depthView;
+      renderer.render(meshList, camera, this.depthClearValue);
+    }
+    renderer.renderTarget = null;
+    renderer.depthTarget = null;
+  }
+}
+class Renderer {
+  canvas;
+  context;
+  depthTexture;
+  depthTextureView;
+  format;
+  renderTarget = null;
+  depthTarget = null;
+  constructor(width = 800, height = 800, format = navigator.gpu.getPreferredCanvasFormat()) {
+    const device2 = getDevice();
+    this.format = format;
+    if (typeof window !== "undefined") {
+      this.canvas = document.createElement("canvas");
+      this.canvas.width = width;
+      this.canvas.height = height;
+      this.context = this.canvas.getContext("webgpu");
+      this.context.configure({
+        device: device2,
+        format,
+        alphaMode: "opaque"
+      });
+    }
+    this.depthTexture = device2.createTexture({
+      size: [width, height],
+      format: "depth24plus",
+      label: "cubeDepthDepthTexture",
+      usage: GPUTextureUsage.RENDER_ATTACHMENT
+    });
+    this.depthTextureView = this.depthTexture.createView();
+  }
+  render(meshList, camera, depthClearValue = 1) {
+    const device2 = getDevice();
+    camera.update();
+    const encoder = device2.createCommandEncoder();
+    const view = this.renderTarget ?? this.context?.getCurrentTexture().createView();
+    if (!view) return;
+    const pass = encoder.beginRenderPass({
+      colorAttachments: [{
+        view,
+        clearValue: { r: 0, g: 0, b: 0, a: 1 },
+        loadOp: "clear",
+        storeOp: "store"
+      }],
+      depthStencilAttachment: {
+        view: this.depthTarget ?? this.depthTextureView,
+        depthClearValue,
+        depthLoadOp: "clear",
+        depthStoreOp: "store"
+      }
+    });
+    pass.setBindGroup(0, camera.bindGroup);
+    meshList.forEach((mesh) => {
+      mesh.update(this.format);
+      pass.setPipeline(mesh.pipeline);
+      pass.setBindGroup(1, mesh.bindGroup);
+      pass.setBindGroup(2, mesh.material.bindGroup);
+      let index = 0;
+      mesh.geometry.gpuAttributes.forEach((v) => {
+        pass.setVertexBuffer(index, v.buffer);
+        index++;
+      });
+      if (mesh.geometry.indexBuffer) {
+        pass.setIndexBuffer(mesh.geometry.indexBuffer, mesh.geometry.indexFormat);
+        pass.drawIndexed(mesh.geometry.index.count);
+      } else {
+        pass.draw(mesh.geometry.count);
+      }
+    });
+    pass.end();
+    device2.queue.submit([encoder.finish()]);
+  }
+}
+class PCD {
+  header;
+  positions;
+  intensity;
+  rgb;
+  static async load(url) {
+    const buffer = await readFile(url);
+    const pcd = new PCD();
+    pcd.parse(buffer);
+    return pcd;
+  }
+  parse(buffer) {
+    this.header = this.parseHeader(buffer);
+    if (this.header.data === "binary") {
+      this.parseBinary(buffer);
+    } else if (this.header.data === "ascii") {
+      this.parseASCII(buffer);
+    } else {
+      throw new Error("binary_compressed 暂未支持");
+    }
+  }
+  parseHeader(buffer) {
+    const text = new TextDecoder().decode(buffer.slice(0, 5e3));
+    const lines = text.split("\n");
+    const header = {
+      fields: [],
+      size: [],
+      type: [],
+      count: [],
+      width: 0,
+      height: 1,
+      points: 0,
+      data: "ascii",
+      headerLen: 0
+    };
+    let offset = 0;
+    for (const line of lines) {
+      offset += line.length + 1;
+      const parts = line.trim().split(/\s+/);
+      const key = parts[0];
+      if (key === "FIELDS") header.fields = parts.slice(1);
+      else if (key === "SIZE") header.size = parts.slice(1).map(Number);
+      else if (key === "TYPE") header.type = parts.slice(1);
+      else if (key === "COUNT") header.count = parts.slice(1).map(Number);
+      else if (key === "WIDTH") header.width = Number(parts[1]);
+      else if (key === "HEIGHT") header.height = Number(parts[1]);
+      else if (key === "POINTS") header.points = Number(parts[1]);
+      else if (key === "DATA") {
+        header.data = parts[1];
+        header.headerLen = offset;
+        break;
+      }
+    }
+    if (!header.points) {
+      header.points = header.width * header.height;
+    }
+    return header;
+  }
+  parseBinary(buffer) {
+    const { header } = this;
+    const body = buffer.slice(header.headerLen);
+    const dv = new DataView(body);
+    const stride = header.size.reduce((a, b) => a + b, 0);
+    const points = header.points;
+    const fieldOffset = {};
+    let offset = 0;
+    for (let i = 0; i < header.fields.length; i++) {
+      fieldOffset[header.fields[i]] = offset;
+      offset += header.size[i];
+    }
+    this.positions = new Float32Array(points * 3);
+    if (fieldOffset.intensity !== void 0) {
+      this.intensity = new Float32Array(points);
+    }
+    if (fieldOffset.rgb !== void 0) {
+      this.rgb = new Uint8Array(points * 3);
+    }
+    let pIndex = 0;
+    let iIndex = 0;
+    let cIndex = 0;
+    for (let i = 0; i < points; i++) {
+      const base = i * stride;
+      const x = dv.getFloat32(base + fieldOffset.x, true);
+      const y = dv.getFloat32(base + fieldOffset.y, true);
+      const z = dv.getFloat32(base + fieldOffset.z, true);
+      this.positions[pIndex++] = x;
+      this.positions[pIndex++] = y;
+      this.positions[pIndex++] = z;
+      if (this.intensity) {
+        this.intensity[iIndex++] = dv.getFloat32(
+          base + fieldOffset.intensity,
+          true
+        );
+      }
+      if (this.rgb) {
+        const rgb = dv.getUint32(base + fieldOffset.rgb, true);
+        this.rgb[cIndex++] = rgb >> 16 & 255;
+        this.rgb[cIndex++] = rgb >> 8 & 255;
+        this.rgb[cIndex++] = rgb & 255;
+      }
+    }
+  }
+  parseASCII(buffer) {
+    const { header } = this;
+    const text = new TextDecoder().decode(buffer.slice(header.headerLen));
+    const lines = text.trim().split("\n");
+    const points = lines.length;
+    this.positions = new Float32Array(points * 3);
+    let pIndex = 0;
+    for (let i = 0; i < points; i++) {
+      const parts = lines[i].trim().split(/\s+/);
+      this.positions[pIndex++] = parseFloat(parts[0]);
+      this.positions[pIndex++] = parseFloat(parts[1]);
+      this.positions[pIndex++] = parseFloat(parts[2]);
+    }
+  }
+}
+const IS_BROWSER = typeof window !== "undefined";
+async function readFile(path) {
+  if (IS_BROWSER) {
+    const data = await fetch(path).then((res) => res.arrayBuffer());
+    return data;
+  }
+  const fs = await include("fs");
+  const buf = fs.readFileSync(path);
+  return buf.buffer.slice(buf.byteOffset, buf.byteOffset + buf.byteLength);
+}
+async function loadJson(url) {
+  const arrayBuffer = await readFile(url);
+  const decoder = new TextDecoder("utf-8");
+  const str = decoder.decode(arrayBuffer);
+  return JSON.parse(str);
+}
+async function loadPCDCustom(path) {
+  const data = await PCD.load(path);
+  return data.positions;
+}
+async function loadTrajectory(base) {
+  return await loadJson(base + "/data/trajectory.json");
+}
+async function loadLines(base) {
+  return await loadJson(base + "/data/originSplitLines.json");
+}
+function linesToBuffer(lines) {
+  const map = /* @__PURE__ */ new Map(), rectArray = [], indexArray = [];
+  let count = 0;
+  const rectIndex = [0, 1, 2, 2, 3, 0];
+  for (let i = 0; i < lines.length; i++) {
+    let num = 0;
+    lines[i].checkResults?.forEach((checkResult, j) => {
+      checkResult?.originalVertices.forEach((rect, k) => {
+        const index = count++;
+        map.set(index, [i, j, k, num++]);
+        rectIndex.forEach((j2) => {
+          const item = rect[j2];
+          rectArray.push(item.x, item.y, item.z);
+          indexArray.push(index);
+        });
+      });
+    });
+  }
+  return {
+    map,
+    rectArray,
+    indexArray
+  };
+}
+async function trajectoryHandle(baseUrl, trajectoryData) {
+  const keys = Object.keys(trajectoryData);
+  const trajectoryList = new Array(keys.length);
+  const pointClouds = new Array(keys.length);
+  const pointCloudArray = [];
+  await Promise.all(
+    keys.map(async (key, i) => {
+      const item = trajectoryData[key];
+      const float32Array = await loadPCDCustom(baseUrl + "/pcd/" + key + ".pcd");
+      trajectoryList[i] = { x: item.x, y: item.y, z: item.z };
+      pointClouds[i] = float32Array;
+      pointCloudArray.push(...float32Array);
+    })
+  );
+  return {
+    pointClouds,
+    trajectoryList,
+    pointCloudArray
+  };
+}
+async function loadData(base) {
+  const t = performance.now();
+  const trajectory = await loadTrajectory(base), { pointClouds, pointCloudArray, trajectoryList } = await trajectoryHandle(base, trajectory), 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
+  } = opt;
+  let t = performance.now();
+  const data = await loadData(base), { 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);
+    cubeCamera.depthClearValue = 1;
+    cubeCamera.render([quadObject3D], renderer, resultCubeTexture);
+  }
+  const buffer = quadObject3D.material.getStorageBuffer("results");
+  const resultTextureBuff = await readGPUBuffer(buffer, indexCount * 4, Uint32Array);
+  const result = [];
+  resultTextureBuff.forEach((v, index) => {
+    if (v === 0) {
+      const [i, j, k, l] = map.get(index);
+      result.push(i, j, k, l);
+    }
+  });
+  console.log("渲染耗时", performance.now() - t);
+  console.log("轨迹点数量", trajectoryList.length, "长方形数量", indexArray.length / 6);
+  return {
+    renderer,
+    camera,
+    data,
+    depthCubeTexture,
+    resultCubeTexture,
+    cubeCamera,
+    quadObject3D,
+    pointsObject3D,
+    indexCount,
+    resultTextureBuff,
+    result
+  };
+}
+const obstacleDetection = Object.assign(obstacleDetection_, {
+  async getResult(base) {
+    await initWebgpu();
+    const { result } = await obstacleDetection_({ base });
+    await destroyWebgpu();
+    return result;
+  }
+});
+export {
+  AtomicUint32Array,
+  BaseMaterial,
+  BufferGeometry,
+  CubeCamera,
+  CubeTexture,
+  DepthMaterial,
+  GpuComputed,
+  Object3D,
+  OcclusionMaterial,
+  PerspectiveCamera,
+  Renderer,
+  ShaderMaterial,
+  Texture,
+  createBuffer,
+  createComputePipeline,
+  createRenderPipeline,
+  createTexture,
+  destroyWebgpu,
+  getAdapter,
+  getDevice,
+  getSampler,
+  initWebgpu,
+  loadData,
+  obstacleDetection,
+  readCubeTexture,
+  readGPUBuffer,
+  readTextureBuffer,
+  shaderLocationMap,
+  transparentOption
+};