WebGPU Compute WebGPU is more than just another graphics library It also let you perform general calculations but using the power of the GPU async if navigator gpu console log WebGPU is not supported Enable chrome flags enable unsafe webgpu flag return const adapter await navigator gpu requestAdapter if adapter console log Failed to get GPU adapter return const device await adapter requestDevice Get a GPU buffer in a mapped state and an arrayBuffer for writing const gpuWriteBuffer device createBuffer mappedAtCreation true size 4 usage GPUBufferUsage MAP WRITE GPUBufferUsage COPY SRC const arrayBuffer gpuWriteBuffer getMappedRange Write bytes to buffer new Uint8Array arrayBuffer set 0 1 2 3 Unmap buffer so that it can be used later for copy gpuWriteBuffer unmap Get a GPU buffer for reading in an unmapped state const gpuReadBuffer device createBuffer mappedAtCreation false size 4 usage GPUBufferUsage COPY DST GPUBufferUsage MAP READ Encode commands for copying buffer to buffer const copyEncoder device createCommandEncoder copyEncoder copyBufferToBuffer gpuWriteBuffer source buffer 0 source offset gpuReadBuffer destination buffer 0 destination offset 4 size Submit copy commands const copyCommands copyEncoder finish device queue submit copyCommands Read buffer await gpuReadBuffer mapAsync GPUMapMode READ const copyArrayBuffer gpuReadBuffer getMappedRange console log new Uint8Array copyArrayBuffer Matrix Multiplcation WebGPU Sample 1 async if navigator gpu console log WebGPU is not supported Enable chrome flags enable unsafe webgpu flag return const adapter await navigator gpu requestAdapter if adapter console log Failed to get GPU adapter return const device await adapter requestDevice First Matrix const firstMatrix new Float32Array 2 rows 4 columns 1 2 3 4 5 6 7 8 const gpuBufferFirstMatrix device createBuffer mappedAtCreation true size firstMatrix byteLength usage GPUBufferUsage STORAGE const arrayBufferFirstMatrix gpuBufferFirstMatrix getMappedRange new Float32Array arrayBufferFirstMatrix set firstMatrix gpuBufferFirstMatrix unmap Second Matrix const secondMatrix new Float32Array 4 rows 2 columns 1 2 3 4 5 6 7 8 const gpuBufferSecondMatrix device createBuffer mappedAtCreation true size secondMatrix byteLength usage GPUBufferUsage STORAGE const arrayBufferSecondMatrix gpuBufferSecondMatrix getMappedRange new Float32Array arrayBufferSecondMatrix set secondMatrix gpuBufferSecondMatrix unmap Result Matrix const resultMatrixBufferSize Float32Array BYTES PER ELEMENT 2 firstMatrix 0 secondMatrix 1 const resultMatrixBuffer device createBuffer size resultMatrixBufferSize usage GPUBufferUsage STORAGE GPUBufferUsage COPY SRC Bind group layout and bind group const bindGroupLayout device createBindGroupLayout entries binding 0 visibility GPUShaderStage COMPUTE buffer type read only storage binding 1 visibility GPUShaderStage COMPUTE buffer type read only storage binding 2 visibility GPUShaderStage COMPUTE buffer type storage const bindGroup device createBindGroup layout bindGroupLayout entries binding 0 resource buffer gpuBufferFirstMatrix binding 1 resource buffer gpuBufferSecondMatrix binding 2 resource buffer resultMatrixBuffer Compute shader code const shaderModule device createShaderModule code block struct Matrix size vec2 f32 numbers array f32 group 0 binding 0 var storage read firstMatrix Matrix group 0 binding 1 var storage read secondMatrix Matrix group 0 binding 2 var storage write resultMatrix Matrix stage compute workgroup size 8 8 fn main builtin global invocation id global id vec3 u32 Guard against out of bounds work group sizes if global id x u32 firstMatrix size x global id y u32 secondMatrix size y return resultMatrix size vec2 f32 firstMatrix size x secondMatrix size y let resultCell vec2 u32 global id x global id y var result 0 0 for var i 0u i u32 firstMatrix size y i i 1u let a i resultCell x u32 firstMatrix size y let b resultCell y i u32 secondMatrix size y result result firstMatrix numbers a secondMatrix numbers b let index resultCell y resultCell x u32 secondMatrix size y resultMatrix numbers index result Pipeline setup const computePipeline device createComputePipeline layout device createPipelineLayout bindGroupLayouts bindGroupLayout compute module shaderModule entryPoint main Commands submission const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginComputePass passEncoder setPipeline computePipeline passEncoder setBindGroup 0 bindGroup const x Math ceil firstMatrix 0 8 X dimension of the grid of workgroups to dispatch const y Math ceil secondMatrix 1 8 Y dimension of the grid of workgroups to dispatch passEncoder dispatch x y passEncoder endPass Get a GPU buffer for reading in an unmapped state const gpuReadBuffer device createBuffer size resultMatrixBufferSize usage GPUBufferUsage COPY DST GPUBufferUsage MAP READ Encode commands for copying buffer to buffer commandEncoder copyBufferToBuffer resultMatrixBuffer source buffer 0 source offset gpuReadBuffer destination buffer 0 destination offset resultMatrixBufferSize size Submit GPU commands const gpuCommands commandEncoder finish device queue submit gpuCommands Read buffer await gpuReadBuffer mapAsync GPUMapMode READ const arrayBuffer gpuReadBuffer getMappedRange console log new Float32Array arrayBuffer Matrix Multiplcation WebGPU Sample 2 async if navigator gpu console log WebGPU is not supported Enable chrome flags enable unsafe webgpu flag return const adapter await navigator gpu requestAdapter if adapter console log Failed to get GPU adapter return const device await adapter requestDevice First Matrix const firstMatrix new Float32Array 2 rows 4 columns 1 2 3 4 5 6 7 8 const gpuBufferFirstMatrix device createBuffer mappedAtCreation true size firstMatrix byteLength usage GPUBufferUsage STORAGE const arrayBufferFirstMatrix gpuBufferFirstMatrix getMappedRange new Float32Array arrayBufferFirstMatrix set firstMatrix gpuBufferFirstMatrix unmap Second Matrix const secondMatrix new Float32Array 4 rows 2 columns 1 2 3 4 5 6 7 8 const gpuBufferSecondMatrix device createBuffer mappedAtCreation true size secondMatrix byteLength usage GPUBufferUsage STORAGE const arrayBufferSecondMatrix gpuBufferSecondMatrix getMappedRange new Float32Array arrayBufferSecondMatrix set secondMatrix gpuBufferSecondMatrix unmap Result Matrix const resultMatrixBufferSize Float32Array BYTES PER ELEMENT 2 firstMatrix 0 secondMatrix 1 const resultMatrixBuffer device createBuffer size resultMatrixBufferSize usage GPUBufferUsage STORAGE GPUBufferUsage COPY SRC Compute shader code const shaderModule device createShaderModule code block struct Matrix size vec2 f32 numbers array f32 group 0 binding 0 var storage read firstMatrix Matrix group 0 binding 1 var storage read secondMatrix Matrix group 0 binding 2 var storage write resultMatrix Matrix stage compute workgroup size 8 8 fn main builtin global invocation id global id vec3 u32 Guard against out of bounds work group sizes if global id x u32 firstMatrix size x global id y u32 secondMatrix size y return resultMatrix size vec2 f32 firstMatrix size x secondMatrix size y let resultCell vec2 u32 global id x global id y var result 0 0 for var i 0u i u32 firstMatrix size y i i 1u let a i resultCell x u32 firstMatrix size y let b resultCell y i u32 secondMatrix size y result result firstMatrix numbers a secondMatrix numbers b let index resultCell y resultCell x u32 secondMatrix size y resultMatrix numbers index result Pipeline setup const computePipeline device createComputePipeline compute module shaderModule entryPoint main Bind group const bindGroup device createBindGroup layout computePipeline getBindGroupLayout 0 index entries binding 0 resource buffer gpuBufferFirstMatrix binding 1 resource buffer gpuBufferSecondMatrix binding 2 resource buffer resultMatrixBuffer Commands submission const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginComputePass passEncoder setPipeline computePipeline passEncoder setBindGroup 0 bindGroup const x Math ceil firstMatrix 0 8 X dimension of the grid of workgroups to dispatch const y Math ceil secondMatrix 1 8 Y dimension of the grid of workgroups to dispatch passEncoder dispatch x y passEncoder endPass Get a GPU buffer for reading in an unmapped state const gpuReadBuffer device createBuffer size resultMatrixBufferSize usage GPUBufferUsage COPY DST GPUBufferUsage MAP READ Encode commands for copying buffer to buffer commandEncoder copyBufferToBuffer resultMatrixBuffer source buffer 0 source offset gpuReadBuffer destination buffer 0 destination offset resultMatrixBufferSize size Submit GPU commands const gpuCommands commandEncoder finish device queue submit gpuCommands Read buffer await gpuReadBuffer mapAsync GPUMapMode READ const arrayBuffer gpuReadBuffer getMappedRange console log new Float32Array arrayBuffer
er device createCommandEncoder const passEncoder commandEncoder beginComputePass passEncoder setPipeline computePipeline passEncoder setBindGroup 0 bindGroup const x Math ceil firstMatrix 0 8 X dimension of the grid of workgroups to dispatch const y Math ceil secondMatrix 1 8 Y dimension of the grid of workgroups to dispatch passEncoder dispatch x y passEncoder endPass Get a GPU buffer for reading in an unmapped state const gpuReadBuffer device createBuffer size resultMatrixBufferSize usage GPUBufferUsage COPY DST GPUBufferUsage MAP READ Encode commands for copying buffer to buffer commandEncoder copyBufferToBuffer resultMatrixBuffer source buffer 0 source offset gpuReadBuffer destination buffer 0 destination offset resultMatrixBufferSize size Submit GPU commands const gpuCommands commandEncoder finish device queue submit gpuCommands Read buffer await gpuReadBuffer mapAsync GPUMapMode READ const arrayBuffer gpuReadBuffer getMappedRange console log new Float32Array arrayBuffer Matrix Multiplcation WebGPU Sample 2 async if navigator gpu console log WebGPU is not supported Enable chrome flags enable unsafe webgpu flag return const adapter await navigator gpu requestAdapter if adapter console log Failed to get GPU adapter return const device await adapter requestDevice First Matrix const firstMatrix new Float32Array 2 rows 4 columns 1 2 3 4 5 6 7 8 const gpuBufferFirstMatrix device createBuffer mappedAtCreation true size firstMatrix byteLength usage GPUBufferUsage STORAGE const arrayBufferFirstMatrix gpuBufferFirstMatrix getMappedRange new Float32Array arrayBufferFirstMatrix set firstMatrix gpuBufferFirstMatrix unmap Second Matrix const secondMatrix new Float32Array 4 rows 2 columns 1 2 3 4 5 6 7 8 const gpuBufferSecondMatrix device createBuffer mappedAtCreation true size secondMatrix byteLength usage GPUBufferUsage STORAGE const arrayBufferSecondMatrix gpuBufferSecondMatrix getMappedRange new Float32Array arrayBufferSecondMatrix set secondMatrix gpuBufferSecondMatrix unmap Result Matrix const resultMatrixBufferSize Float32Array BYTES PER ELEMENT 2 firstMatrix 0 secondMatrix 1 const resultMatrixBuffer device createBuffer size resultMatrixBufferSize usage GPUBufferUsage STORAGE GPUBufferUsage COPY SRC Compute shader code const shaderModule device createShaderModule code block struct Matrix size vec2 f32 numbers array f32 group 0 binding 0 var storage read firstMatrix Matrix group 0 binding 1 var storage read secondMatrix Matrix group 0 binding 2 var storage write resultMatrix Matrix stage compute workgroup size 8 8 fn main builtin global invocation id global id vec3 u32 Guard against out of bounds work group sizes if global id x u32 firstMatrix size x global id y u32 secondMatrix size y return resultMatrix size vec2 f32 firstMatrix size x secondMatrix size y let resultCell vec2 u32 global id x global id y var result 0 0 for var i 0u i u32 firstMatrix size y i i 1u let a i resultCell x u32 firstMatrix size y let b resultCell y i u32 secondMatrix size y result result firstMatrix numbers a secondMatrix numbers b let index resultCell y resultCell x u32 secondMatrix size y resultMatrix numbers index result Pipeline setup const computePipeline device createComputePipeline compute module shaderModule entryPoint main Bind group const bindGroup device createBindGroup layout computePipeline getBindGroupLayout 0 index entries binding 0 resource buffer gpuBufferFirstMatrix binding 1 resource buffer gpuBufferSecondMatrix binding 2 resource buffer resultMatrixBuffer Commands submission const commandEncoder device createCommandEncoder const passEncoder commandEncoder beginComputePass passEncoder setPipeline computePipeline passEncoder setBindGroup 0 bindGroup const x Math ceil firstMatrix 0 8 X dimension of the grid of workgroups to dispatch const y Math ceil secondMatrix 1 8 Y dimension of the grid of workgroups to dispatch passEncoder dispatch x y passEncoder endPass Get a GPU buffer for reading in an unmapped state const gpuReadBuffer device createBuffer size resultMatrixBufferSize usage GPUBufferUsage COPY DST GPUBufferUsage MAP READ Encode commands for copying buffer to buffer commandEncoder copyBufferToBuffer resultMatrixBuffer source buffer 0 source offset gpuReadBuffer destination buffer 0 destination offset resultMatrixBufferSize size Submit GPU commands const gpuCommands commandEncoder finish device queue submit gpuCommands Read buffer await gpuReadBuffer mapAsync GPUMapMode READ const arrayBuffer gpuReadBuffer getMappedRange console log new Float32Array arrayBuffer