llbzow 的摸鱼日记 (づ￣ 3￣)づ

1
export class ParticleGravitySystem {
2
  private device!: GPUDevice;
3
  private computePipeline!: GPUComputePipeline;
4
  private bindGroups: GPUBindGroup[] = [];
5
  private particleBuffers: GPUBuffer[] = [];
6
  private uniformBuffer!: GPUBuffer;
7
  private currentStep = 0;
8
  private particleCount: number;
9

10
  constructor(particleCount = 100000) {
11
    this.particleCount = particleCount;
12
  }
13

14
  public async init(canvas: HTMLCanvasElement) {
15
    // 1. 请求 WebGPU 适配器与逻辑设备
16
    const adapter = await navigator.gpu?.requestAdapter({
17
      powerPreference: 'high-performance'
18
    });
19
    if (!adapter) throw new Error('WebGPU not supported on this browser.');
20
    this.device = await adapter.requestDevice();
21

22
    // 2. 初始化粒子原始状态 (位置与初速度)
23
    const initialData = new Float32Array(this.particleCount * 4); // pos(2), vel(2)
24
    for (let i = 0; i < this.particleCount; i++) {
25
      const angle = Math.random() * Math.PI * 2;
26
      const radius = 0.2 + Math.random() * 0.6;
27
      // 银河漩涡初速度配置
28
      initialData[i * 4 + 0] = Math.cos(angle) * radius;
29
      initialData[i * 4 + 1] = Math.sin(angle) * radius;
30
      initialData[i * 4 + 2] = -Math.sin(angle) * 0.15;
31
      initialData[i * 4 + 3] = Math.cos(angle) * 0.15;
32
    }
33

34
    // 3. 创建 Ping-Pong 双缓冲 (具备 STORAGE 与 VERTEX 双重用途)
35
    const bufferSize = initialData.byteLength;
36
    for (let i = 0; i < 2; i++) {
37
      this.particleBuffers[i] = this.device.createBuffer({
38
        size: bufferSize,
39
        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
40
      });
41
      this.device.queue.writeBuffer(this.particleBuffers[i], 0, initialData);
42
    }
43

44
    // 4. 创建物理参数 Uniform Buffer
45
    this.uniformBuffer = this.device.createBuffer({
46
      size: 16, // 4 * sizeof(f32)
47
      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
48
    });
49
    this.device.queue.writeBuffer(
50
      this.uniformBuffer,
51
      0,
52
      new Float32Array([0.001, 1.2, 0.0005, this.particleCount])
53
    );
54

55
    // 5. 编译着色器与创建计算管线
56
    const shaderModule = this.device.createShaderModule({ code: WGSL_SOURCE });
57
    this.computePipeline = this.device.createComputePipeline({
58
      layout: 'auto',
59
      compute: { module: shaderModule, entryPoint: 'computeMain' }
60
    });
61

62
    // 6. 为 Ping-Pong 两个方向分别构造 BindGroup
63
    for (let i = 0; i < 2; i++) {
64
      this.bindGroups[i] = this.device.createBindGroup({
65
        layout: this.computePipeline.getBindGroupLayout(0),
66
        entries: [
67
          { binding: 0, resource: { buffer: this.uniformBuffer } },
68
          { binding: 1, resource: { buffer: this.particleBuffers[i] } },
69
          { binding: 2, resource: { buffer: this.particleBuffers[1 - i] } },
70
        ]
71
      });
72
    }
73
  }
74

75
  public frame() {
76
    const commandEncoder = this.device.createCommandEncoder();
77

78
    // ── 步骤 A: 录制计算通道 (Compute Pass) ──
79
    const computePass = commandEncoder.beginComputePass();
80
    computePass.setPipeline(this.computePipeline);
81
    computePass.setBindGroup(0, this.bindGroups[this.currentStep % 2]);
82
    // 派发工作组: 向上取整 (总粒子数 / 每组64个线程)
83
    computePass.dispatchWorkgroups(Math.ceil(this.particleCount / 64));
84
    computePass.end();
85

86
    // ── 步骤 B: 录制渲染通道 (Render Pass) ──
87
    // 直接复用刚写完的这块 buffer 作为顶点着色器的输入，零拷贝！
88
    const renderPass = commandEncoder.beginRenderPass(this.getRenderPassDescriptor());
89
    renderPass.setPipeline(this.renderPipeline);
90
    renderPass.setVertexBuffer(0, this.particleBuffers[(this.currentStep + 1) % 2]);
91
    renderPass.draw(6, this.particleCount); // 绘制 10 万个点/小四边形
92
    renderPass.end();
93

94
    // 提交 GPU 队列调度执行
95
    this.device.queue.submit([commandEncoder.finish()]);
96
    this.currentStep++;
97
  }
98
}