Create world.js

world.js

@@ -0,0 +1,87 @@
+import wgsl from "./world.wgsl?raw";
+import { createCompute } from "./gpu.js";
+
+export class World {
+  constructor(canvas, gpu) {
+    this.ctx = canvas.getContext("2d");
+    this.gpu = gpu;
+    this.size = 1024;
+    this.time = 0;
+
+    this.field = new Float32Array(this.size);
+
+    if (gpu.mode === "gpu") {
+      this.initGPU();
+    }
+  }
+
+  async initGPU() {
+    const device = this.gpu.device;
+
+    this.buffer = device.createBuffer({
+      size: this.field.byteLength,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
+    });
+
+    this.readback = device.createBuffer({
+      size: this.field.byteLength,
+      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+    });
+
+    this.pipeline = await createCompute(device, wgsl);
+  }
+
+  update(dt) {
+    this.time += dt;
+
+    if (this.gpu.mode === "gpu") {
+      const device = this.gpu.device;
+      const encoder = device.createCommandEncoder();
+
+      const pass = encoder.beginComputePass();
+      pass.setPipeline(this.pipeline);
+      pass.setBindGroup(0, device.createBindGroup({
+        layout: this.pipeline.getBindGroupLayout(0),
+        entries: [{ binding: 0, resource: { buffer: this.buffer } }]
+      }));
+      pass.dispatchWorkgroups(Math.ceil(this.size / 64));
+      pass.end();
+
+      encoder.copyBufferToBuffer(this.buffer, 0, this.readback, 0, this.field.byteLength);
+      device.queue.submit([encoder.finish()]);
+    }
+  }
+
+  async render() {
+    if (this.gpu.mode === "gpu") {
+      await this.readback.mapAsync(GPUMapMode.READ);
+      new Float32Array(this.readback.getMappedRange()).set(this.field);
+      this.readback.unmap();
+    } else {
+      // CPU fallback
+      for (let i = 0; i < this.size; i++) {
+        this.field[i] = Math.sin(this.time + i * 0.01) * 0.5 + 0.5;
+      }
+    }
+
+    const w = this.ctx.canvas.width = this.ctx.canvas.clientWidth;
+    const h = this.ctx.canvas.height = this.ctx.canvas.clientHeight;
+
+    this.ctx.clearRect(0, 0, w, h);
+
+    for (let i = 0; i < this.size; i++) {
+      const x = (i / this.size) * w;
+      const y = h / 2;
+      const r = this.field[i] * 20;
+
+      this.ctx.fillStyle = "#00ffd0";
+      this.ctx.beginPath();
+      this.ctx.arc(x, y, r, 0, Math.PI * 2);
+      this.ctx.fill();
+    }
+  }
+
+  apply(cmd) {
+    // Language can modulate parameters here
+  }
+}