Update world.js

world.js

@@ -3,46 +3,41 @@ import { createCompute } from "./gpu.js";
 
 export class World {
   constructor(canvas, gpu) {
-    this.canvas = canvas;
     this.ctx = canvas.getContext("2d");
     this.gpu = gpu;
 
-    this.size = 512;
+    this.w = 256;
+    this.h = 256;
     this.time = 0;
     this.power = 8.0;
     this.ready = false;
 
-    this.field = new Float32Array(this.size);
+    this.image = this.ctx.createImageData(this.w, this.h);
 
     if (gpu.mode === "gpu") this.initGPU();
     else this.ready = true;
   }
 
   async initGPU() {
-    try {
-      const d = this.gpu.device;
+    const d = this.gpu.device;
 
-      this.buffer = d.createBuffer({
-        size: this.field.byteLength,
-        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
-      });
-
-      this.paramBuffer = d.createBuffer({
-        size: 8,
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-      });
-
-      this.readback = d.createBuffer({
-        size: this.field.byteLength,
-        usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
-      });
-
-      this.pipeline = createCompute(d, wgsl);
-      this.ready = true;
-    } catch {
-      this.gpu.mode = "cpu";
-      this.ready = true;
-    }
+    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;
   }
 
   update(dt) {
@@ -51,60 +46,40 @@ export class World {
 
     if (this.gpu.mode === "gpu") {
       const d = this.gpu.device;
+      d.queue.writeBuffer(this.paramBuffer, 0, new Float32Array([this.time, this.power]));
 
-      d.queue.writeBuffer(
-        this.paramBuffer,
-        0,
-        new Float32Array([this.power, this.time])
-      );
-
-      const encoder = d.createCommandEncoder();
-      const pass = encoder.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.buffer } },
-          { binding: 1, resource: { buffer: this.paramBuffer } }
+          { binding: 0, resource: { buffer: this.paramBuffer } },
+          { binding: 1, resource: { buffer: this.pixelBuffer } }
         ]
       }));
 
-      pass.dispatchWorkgroups(Math.ceil(this.size / 64));
+      pass.dispatchWorkgroups(32, 32);
       pass.end();
 
-      encoder.copyBufferToBuffer(this.buffer, 0, this.readback, 0, this.field.byteLength);
-      d.queue.submit([encoder.finish()]);
-    } else {
-      for (let i = 0; i < this.size; i++) {
-        this.field[i] = Math.sin(this.time + i * 0.02) * 0.5 + 0.5;
-      }
+      enc.copyBufferToBuffer(this.pixelBuffer, 0, this.readback, 0, this.w * this.h * 4 * 4);
+      d.queue.submit([enc.finish()]);
     }
   }
 
   async render() {
-    if (!this.ready) return;
-
-    if (this.gpu.mode === "gpu") {
-      await this.readback.mapAsync(GPUMapMode.READ);
-      this.field.set(new Float32Array(this.readback.getMappedRange()));
-      this.readback.unmap();
-    }
-
-    const w = this.canvas.width = this.canvas.clientWidth;
-    const h = this.canvas.height = this.canvas.clientHeight;
+    if (!this.ready || this.gpu.mode !== "gpu") return;
 
-    this.ctx.fillStyle = "#000";
-    this.ctx.fillRect(0, 0, w, h);
-    this.ctx.fillStyle = "#00ffd0";
+    await this.readback.mapAsync(GPUMapMode.READ);
+    const data = new Float32Array(this.readback.getMappedRange());
 
-    for (let i = 0; i < this.size; i += 4) {
-      const x = (i / this.size) * w;
-      const r = this.field[i] * 18;
-      this.ctx.beginPath();
-      this.ctx.arc(x, h / 2, r, 0, Math.PI * 2);
-      this.ctx.fill();
+    for (let i = 0; i < data.length; i++) {
+      this.image.data[i] = Math.min(255, data[i] * 255);
     }
+
+    this.readback.unmap();
+    this.ctx.putImageData(this.image, 0, 0);
   }
 
   apply(cmd) {