Conway's Game of Life

// test my lightweight WebGPU tool "Orton"

//

// This Conway's Game of Life implementation is based on "Your First WebGPU App"

// "Your first WebGPU app" is released under the Apache License Version 2.0.

// see https://codelabs.developers.google.com/your-first-webgpu-app

​

import { Orton, Data } from "https://cdn.jsdelivr.net/npm/orton@0.0.0/dist/Orton.min.js"

import { vert, frag, comp } from "./shaderSource.js"

​

const random = (min, max) => min + (Math.random() * (max - min));

​

const GRID_SIZE = 16 * Math.ceil(random(0, 32)) // multiple of 16

const DELAY_TIME = 1000 / 30 // ms

​

const canvas = document.querySelector("canvas")

​

async function main() {

  const O = await Orton.init(canvas)

  const device = O.device

  O.context.configure({

    device,

    format: O.preferredFormat,

  })

​

  const r = 1

  // prettier-ignore

  const cellVertices = [

    [-r, -r],

    [ r, -r],

    [ r,  r],

​

    [ r,  r],

    [-r,  r],

    [-r, -r],

  ]

  const cellVerticesData = Data(cellVertices, "f32")

​

  // vertex buffer, attribute

  const cellVertexBuffer = O.Buffer(device, {

    size: cellVerticesData.byteLength,

    usage: ["VERTEX", "COPY_DST"],

  })

  O.queue.writeBuffer(cellVertexBuffer, 0, cellVerticesData)

  const positionAttribute = O.createVertexAttribute({

    format: "float32x2",

    offset: 0,

    shaderLocation: 0,

  })

  const cellVertexBufferLayout = O.createVertexBufferLayout({

    arrayStride: 8,

    attributes: [positionAttribute],

  })

​

  // uniform

  const gridData = Data([GRID_SIZE, GRID_SIZE])

  const gridUniformBuffer = O.Buffer(device, {

    label: "grid uniform",

    size: gridData.byteLength,

    usage: ["VERTEX", "UNIFORM", "COPY_DST"],

  })

  O.queue.writeBuffer(gridUniformBuffer, 0, gridData)

  const gridUniformBinding = O.Binding({

    type: "uniform",

    visibility: ["VERTEX", "COMPUTE"],

    buffer: gridUniformBuffer,

  })

​

  // compute

  const cellStateData = Data(GRID_SIZE * GRID_SIZE, "u32")

  const cellStateStorage = [

    O.Buffer(device, {

      size: cellStateData.byteLength,

      usage: ["STORAGE", "COPY_DST"],

    }),

    O.Buffer(device, {

      size: cellStateData.byteLength,

      usage: ["STORAGE", "COPY_DST"],

    }),

  ]

  for (let i = 0; i < cellStateData.length; i++) {

    cellStateData[i] = Math.random() >= 0.5 ? 0 : 1

  }

  O.queue.writeBuffer(cellStateStorage[0], 0, cellStateData)

  const cellStateReadStorageBindingA = O.Binding({

    type: "read-only-storage",

    visibility: ["VERTEX", "COMPUTE"],

    buffer: cellStateStorage[0],

  })

  const cellStateWriteStorageBindingA = O.Binding({

    type: "storage",

    visibility: ["COMPUTE"],

    buffer: cellStateStorage[1],

  })

  const cellStateReadStorageBindingB = O.Binding({

    ...cellStateReadStorageBindingA,

    buffer: cellStateStorage[1],

  })

  const cellStateWriteStorageBindingB = O.Binding({

    ...cellStateWriteStorageBindingA,

    buffer: cellStateStorage[0],

  })

​

  // binding groups, used for switching

  // BindGroup( device, [binding0, binding1, binding2, ... ] )

  let BindGroupA = O.BindGroup(device, [

    gridUniformBinding,

    cellStateReadStorageBindingA,

    cellStateWriteStorageBindingA,

  ])

  let BindGroupB = O.BindGroup(device, [

    gridUniformBinding,

    cellStateReadStorageBindingB,

    cellStateWriteStorageBindingB,

  ])

​

  // pipeline layout

  const pipelineLayout = O.PipelineLayout(device, [BindGroupA.layout])

​

  // compute pipeline

  const computePipeline = O.ComputePipeline(device, {

    layout: pipelineLayout,

    compute: O.Shader.Compute(device, comp),

  })

​

  // render pipeline

  const renderPipeline = O.RenderPipeline(device, {

    layout: pipelineLayout,

    vertex: O.Shader.Vertex(device, {

      code: vert,

      buffers: [cellVertexBufferLayout],

    }),

    fragment: O.Shader.Fragment(device, {

      code: frag,

      targets: [{ format: O.preferredFormat }],

    }),

  })

​

  const WORKGROUP_SIZE = 8

  const WORKGROUP_COUNT = Math.ceil(GRID_SIZE / WORKGROUP_SIZE)

​

  let frame = 0

  const render = () => {

    const commandEncoder = O.CommandEncoder(device)

​

    // compute pass

    O

      .beginComputePass(commandEncoder)

      .setPipeline(computePipeline)

      .setBindGroup(0, BindGroupA.bindGroup) // 0: @group(0)

      .dispatchWorkgroups(WORKGROUP_COUNT, WORKGROUP_COUNT, 1)

      .end()

​

    const renderPassDescriptor = O.createRenderPassDescriptor({

      colorAttachments: [

        {

          // @fragment @location(0)

          clearValue: [0, 0, 0, 1],

          loadOp: "clear",

          storeOp: "store",

          view: O.createView(),

        },

      ],

    })

​

    // render pass

    O

      .beginRenderPass(commandEncoder, renderPassDescriptor)

      .setPipeline(renderPipeline)

      .setVertexBuffer(0, cellVertexBuffer) // 0: pipeline -> vertex.buffers[0], @location(0)

      .setBindGroup(0, BindGroupB.bindGroup) // 0: @group(0)

      .draw(cellVertices.length, GRID_SIZE * GRID_SIZE)

      .end()

​

    O.queue.submit([commandEncoder.finish()])

​

    frame++

    ;[BindGroupA, BindGroupB] = [BindGroupB, BindGroupA]

  }

  setInterval(render, DELAY_TIME)

}

main()

​