Skip to content
tomixy's sketchbook

コンピュートシェーダで1を足す

  
  
  
 
  
import shaderCode from "./compute.wgsl?raw"


const adapter = await navigator.gpu.requestAdapter()
if (!adapter) {
  throw new Error("WebGPU cannot be initialized - Adapter not found")
}


const device = await adapter.requestDevice()
device.lost.then(() => {
  throw new Error("WebGPU cannot be initialized - Device has been lost")
})


const shaderModule = device.createShaderModule({ code: shaderCode })


const data = new Float32Array([0.0])
const buffer = device.createBuffer({
  size: data.byteLength,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
})
device.queue.writeBuffer(buffer, 0, data)


const bindgroupLayout = device.createBindGroupLayout({
  entries: [
    {
      binding: 0,
      visibility: GPUShaderStage.COMPUTE,
      buffer: {
        type: "storage"
      }
    }
  ]
})
const bindgroup = device.createBindGroup({
  layout: bindgroupLayout,
  entries: [
    {
      binding: 0,
      resource: {
        buffer
      }
    }
  ]
})


const computePipelineLayout = device.createPipelineLayout({
  bindGroupLayouts: [bindgroupLayout]
})
const computePipeline = device.createComputePipeline({
  layout: computePipelineLayout,
  compute: {
    module: shaderModule,
    entryPoint: "main"
  }
})


const commandEncoder = device.createCommandEncoder()


const computePass = commandEncoder.beginComputePass()
computePass.setPipeline(computePipeline)
computePass.setBindGroup(0, bindgroup)
computePass.dispatchWorkgroups(1)
computePass.end()


// Copy buffer to GPU
const stagingBuffer = device.createBuffer({
  size: data.byteLength,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
})
commandEncoder.copyBufferToBuffer(buffer, 0, stagingBuffer, 0, data.byteLength)


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


// Map and read the buffer
await stagingBuffer.mapAsync(GPUMapMode.READ)
const arrayBuffer = stagingBuffer.getMappedRange()
const result = new Float32Array(arrayBuffer)


const $output = document.getElementById("output")!
$output.textContent = `Result: ${result[0]}`


stagingBuffer.unmap()