Update world.js

world.js

@@ -1,90 +1,68 @@
-import wgsl from "./world.wgsl?raw";
 import { createCompute } from "./gpu.js";
+import shader from "./world.wgsl?raw";
 
 export class World {
   constructor(canvas, gpu) {
     this.ctx = canvas.getContext("2d");
     this.gpu = gpu;
-
-    this.w = 256;
-    this.h = 256;
-    this.time = 0;
     this.power = 8.0;
-    this.ready = false;
+    this.time = 0;
 
-    this.image = this.ctx.createImageData(this.w, this.h);
+    this.image = this.ctx.createImageData(256, 256);
 
     if (gpu.mode === "gpu") this.initGPU();
-    else this.ready = true;
   }
 
   async initGPU() {
     const d = this.gpu.device;
+    this.pipeline = createCompute(d, shader);
 
-    this.pixelBuffer = d.createBuffer({
-      size: this.w * this.h * 4 * 4,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
-    });
-
-    this.readback = d.createBuffer({
-      size: this.w * this.h * 4 * 4,
-      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
-    });
-
-    this.paramBuffer = d.createBuffer({
-      size: 8,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-    });
-
-    this.pipeline = createCompute(d, wgsl);
-    this.ready = true;
+    this.param = d.createBuffer({ size: 8, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+    this.buf = d.createBuffer({ size: 256*256*4*4, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC });
+    this.read = d.createBuffer({ size: 256*256*4*4, usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ });
   }
 
   update(dt) {
-    if (!this.ready) return;
     this.time += dt;
+    if (this.gpu.mode !== "gpu") return;
 
-    if (this.gpu.mode === "gpu") {
-      const d = this.gpu.device;
-      d.queue.writeBuffer(this.paramBuffer, 0, new Float32Array([this.time, this.power]));
+    const d = this.gpu.device;
+    d.queue.writeBuffer(this.param, 0, new Float32Array([this.time, this.power]));
 
-      const enc = d.createCommandEncoder();
-      const pass = enc.beginComputePass();
+    const enc = d.createCommandEncoder();
+    const pass = enc.beginComputePass();
 
-      pass.setPipeline(this.pipeline);
-      pass.setBindGroup(0, d.createBindGroup({
-        layout: this.pipeline.getBindGroupLayout(0),
-        entries: [
-          { binding: 0, resource: { buffer: this.paramBuffer } },
-          { binding: 1, resource: { buffer: this.pixelBuffer } }
-        ]
-      }));
+    pass.setPipeline(this.pipeline);
+    pass.setBindGroup(0, d.createBindGroup({
+      layout: this.pipeline.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: { buffer: this.param } },
+        { binding: 1, resource: { buffer: this.buf } }
+      ]
+    }));
 
-      pass.dispatchWorkgroups(32, 32);
-      pass.end();
+    pass.dispatchWorkgroups(32, 32);
+    pass.end();
 
-      enc.copyBufferToBuffer(this.pixelBuffer, 0, this.readback, 0, this.w * this.h * 4 * 4);
-      d.queue.submit([enc.finish()]);
-    }
+    enc.copyBufferToBuffer(this.buf, 0, this.read, 0, 256*256*4*4);
+    d.queue.submit([enc.finish()]);
   }
 
   async render() {
-    if (!this.ready || this.gpu.mode !== "gpu") return;
+    if (this.gpu.mode !== "gpu") return;
 
-    await this.readback.mapAsync(GPUMapMode.READ);
-    const data = new Float32Array(this.readback.getMappedRange());
+    await this.read.mapAsync(GPUMapMode.READ);
+    const f = new Float32Array(this.read.getMappedRange());
 
-    for (let i = 0; i < data.length; i++) {
-      this.image.data[i] = Math.min(255, data[i] * 255);
+    for (let i = 0; i < f.length; i++) {
+      this.image.data[i] = Math.min(255, f[i] * 255);
     }
 
-    this.readback.unmap();
+    this.read.unmap();
     this.ctx.putImageData(this.image, 0, 0);
   }
 
   apply(cmd) {
-    if (cmd.lane === "world" && cmd.payload.power) {
-      this.power = cmd.payload.power;
-    }
+    if (cmd.payload?.power) this.power = cmd.payload.power;
   }
 }