| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>Create a basic GPUBindGroup.</title> |
| <body> |
| <script src="js/webgpu-functions.js"></script> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script> |
| let tests = {}; |
| |
| const basicBufferShader = ` |
| [numthreads(1, 1, 1)] |
| compute void compute_main(device int[] buffer : register(u0)) |
| { |
| ++buffer[0]; |
| } |
| `; |
| |
| let basicPipeline; |
| |
| tests["Create and use a basic GPUBindGroup."] = async device => { |
| const bufferLayoutBinding = { |
| binding: 0, |
| visibility: GPUShaderStage.COMPUTE, |
| type: "storage-buffer" |
| }; |
| |
| const bindGroupLayout = device.createBindGroupLayout({ bindings: [bufferLayoutBinding] }); |
| |
| const basicBuffer = device.createBuffer({ size: 4, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.MAP_READ }); |
| const bufferBinding = { buffer: basicBuffer, size: 4 }; |
| const bindGroupBinding = { binding: 0, resource: bufferBinding }; |
| |
| const bindGroup = device.createBindGroup({ layout: bindGroupLayout, bindings: [bindGroupBinding] }); |
| |
| const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] }); |
| |
| const basicShaderModule = device.createShaderModule({ code: basicBufferShader }); |
| basicPipeline = device.createComputePipeline({ |
| layout: pipelineLayout, |
| computeStage: { |
| module: basicShaderModule, |
| entryPoint: "compute_main" |
| } |
| }); |
| |
| const commandEncoder = device.createCommandEncoder(); |
| const passEncoder = commandEncoder.beginComputePass(); |
| passEncoder.setPipeline(basicPipeline); |
| passEncoder.setBindGroup(0, bindGroup); |
| passEncoder.dispatch(1, 1, 1); |
| passEncoder.endPass(); |
| device.getQueue().submit([commandEncoder.finish()]); |
| |
| const results = new Int32Array(await basicBuffer.mapReadAsync()); |
| basicBuffer.unmap(); |
| assert_equals(results[0], 1, "Storage buffer binding written to successfully."); |
| }; |
| |
| tests["Create and use many GPUBindGroups in a single compute pass."] = async device => { |
| const bufferLayoutBinding = { |
| binding: 0, |
| visibility: GPUShaderStage.COMPUTE, |
| type: "storage-buffer" |
| }; |
| |
| const bindGroupLayout = device.createBindGroupLayout({ bindings: [bufferLayoutBinding] }); |
| |
| const basicBuffer = device.createBuffer({ size: 4, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.MAP_READ }); |
| const bufferBinding = { buffer: basicBuffer, size: 4 }; |
| const bindGroupBinding = { binding: 0, resource: bufferBinding }; |
| |
| const numGroups = 1000; |
| let bindGroups = new Array(numGroups); |
| for (let i = 0; i < numGroups; ++i) |
| bindGroups[i] = device.createBindGroup({ layout: bindGroupLayout, bindings: [bindGroupBinding] }); |
| |
| const commandEncoder = device.createCommandEncoder(); |
| const passEncoder = commandEncoder.beginComputePass(); |
| |
| let j = 0; |
| for (; j < numGroups; ++j) { |
| passEncoder.setPipeline(basicPipeline); |
| passEncoder.setBindGroup(0, bindGroups[j]); |
| passEncoder.dispatch(1, 1, 1); |
| } |
| |
| passEncoder.endPass(); |
| device.getQueue().submit([commandEncoder.finish()]); |
| |
| const results = new Int32Array(await basicBuffer.mapReadAsync()); |
| basicBuffer.unmap(); |
| assert_equals(results[0], j, "Storage buffer accessed successfully through multiple bind groups."); |
| }; |
| |
| const uniformBufferShader = ` |
| [numthreads(1, 1, 1)] |
| compute void compute_main(constant int[] uniforms : register(b0), device int[] buffer : register(u1)) |
| { |
| buffer[0] += uniforms[0]; |
| } |
| `; |
| |
| tests["Create and access a uniform-buffer in a GPUBindGroup."] = async device => { |
| const [uniformBuffer, writeArrayBuffer] = device.createBufferMapped({ size: 4, usage: GPUBufferUsage.UNIFORM }); |
| new Int32Array(writeArrayBuffer).set([42]); |
| uniformBuffer.unmap(); |
| |
| const storageBuffer = device.createBuffer({ size: 4, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.MAP_READ }); |
| |
| const bindGroupLayout = device.createBindGroupLayout({ |
| bindings: [{ |
| binding: 0, |
| visibility: GPUShaderStage.COMPUTE, |
| type: "uniform-buffer" |
| }, { |
| binding: 1, |
| visibility: GPUShaderStage.COMPUTE, |
| type: "storage-buffer" |
| }] |
| }); |
| |
| const bindGroup = device.createBindGroup({ |
| layout: bindGroupLayout, |
| bindings: [{ |
| binding: 0, |
| resource: { |
| buffer: uniformBuffer, |
| size: 4 |
| } |
| }, { |
| binding: 1, |
| resource: { |
| buffer: storageBuffer, |
| size: 4 |
| } |
| }] |
| }); |
| |
| const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] }); |
| |
| const shaderModule = device.createShaderModule({ code: uniformBufferShader }); |
| |
| const pipeline = device.createComputePipeline({ |
| layout: pipelineLayout, |
| computeStage: { |
| module: shaderModule, |
| entryPoint: "compute_main" |
| } |
| }); |
| |
| const commandEncoder = device.createCommandEncoder(); |
| const passEncoder = commandEncoder.beginComputePass(); |
| passEncoder.setPipeline(pipeline); |
| passEncoder.setBindGroup(0, bindGroup); |
| passEncoder.dispatch(1, 1, 1); |
| passEncoder.endPass(); |
| device.getQueue().submit([commandEncoder.finish()]); |
| |
| const results = new Int32Array(await storageBuffer.mapReadAsync()); |
| storageBuffer.unmap(); |
| assert_equals(results[0], 42, "Storage buffer binding written to successfully."); |
| }; |
| |
| const sampledTextureShader = ` |
| [numthreads(1, 1, 1)] |
| compute void compute_main(Texture2D<uint> inputTexture : register(t0), sampler inputSampler : register(s1), device uint[] output : register(u2)) |
| { |
| output[0] = Sample(inputTexture, inputSampler, float2(0, 0)); |
| } |
| `; |
| |
| tests["Create and access a sampled texture in a GPUBindGroup."] = async device => { |
| const [textureDataBuffer, textureArrayBuffer] = device.createBufferMapped({ size: 4, usage: GPUBufferUsage.COPY_SRC }); |
| new Uint32Array(textureArrayBuffer).set([42]); |
| textureDataBuffer.unmap(); |
| |
| const textureSize = { width: 1, height: 1, depth: 1 }; |
| const texture = device.createTexture({ |
| size: textureSize, |
| format: "rgba8uint", |
| usage: GPUTextureUsage.SAMPLED | GPUTextureUsage.COPY_DST |
| }); |
| |
| const outputBuffer = device.createBuffer({ size: 4, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.MAP_READ }); |
| |
| const bindGroupLayout = device.createBindGroupLayout({ |
| bindings: [{ |
| binding: 0, |
| visibility: GPUShaderStage.COMPUTE, |
| type: "sampled-texture" |
| }, { |
| binding: 1, |
| visibility: GPUShaderStage.COMPUTE, |
| type: "sampler" |
| }, { |
| binding: 2, |
| visibility: GPUShaderStage.COMPUTE, |
| type: "storage-buffer" |
| }] |
| }); |
| const bindGroup = device.createBindGroup({ |
| layout: bindGroupLayout, |
| bindings: [{ |
| binding: 0, |
| resource: texture.createDefaultView() |
| }, { |
| binding: 1, |
| resource: device.createSampler({}) |
| }, { |
| binding: 2, |
| resource: { |
| buffer: outputBuffer, |
| size: 4 |
| } |
| }] |
| }); |
| |
| const shaderModule = device.createShaderModule({ code: sampledTextureShader }); |
| const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] }); |
| |
| const pipeline = device.createComputePipeline({ |
| layout: pipelineLayout, |
| computeStage: { |
| module: shaderModule, |
| entryPoint: "compute_main" |
| } |
| }); |
| |
| const commandEncoder = device.createCommandEncoder(); |
| commandEncoder.copyBufferToTexture({ |
| buffer: textureDataBuffer, |
| rowPitch: 4, |
| imageHeight: 0 |
| }, { texture: texture }, textureSize); |
| |
| const passEncoder = commandEncoder.beginComputePass(); |
| passEncoder.setPipeline(pipeline); |
| passEncoder.setBindGroup(0, bindGroup); |
| passEncoder.dispatch(1, 1, 1); |
| passEncoder.endPass(); |
| |
| device.getQueue().submit([commandEncoder.finish()]); |
| |
| const results = new Uint32Array(await outputBuffer.mapReadAsync()); |
| outputBuffer.unmap(); |
| assert_equals(results[0], 42, "Correct value sampled from a bound 2D texture."); |
| }; |
| |
| const comboShader = ` |
| [numthreads(1, 1, 1)] |
| compute void compute_main( |
| Texture2D<uint> inputTexture : register(t0, space0), |
| sampler inputSampler : register(s0, space1), |
| constant uint[] input : register(b0, space2), |
| device uint[] output : register(u0, space3)) |
| { |
| output[0] = input[0] + Sample(inputTexture, inputSampler, float2(0, 0)); |
| } |
| `; |
| |
| tests["Create and use multiple GPUBindGroups in a single dispatch."] = async device => { |
| const [textureDataBuffer, textureArrayBuffer] = device.createBufferMapped({ size: 4, usage: GPUBufferUsage.COPY_SRC }); |
| new Uint32Array(textureArrayBuffer).set([17]); |
| textureDataBuffer.unmap(); |
| |
| const textureSize = { width: 1, height: 1, depth: 1 }; |
| const texture = device.createTexture({ |
| size: textureSize, |
| format: "rgba8uint", |
| usage: GPUTextureUsage.SAMPLED | GPUTextureUsage.COPY_DST |
| }); |
| |
| const [inputBuffer, inputArrayBuffer] = device.createBufferMapped({ size: 4, usage: GPUBufferUsage.UNIFORM }); |
| new Uint32Array(inputArrayBuffer).set([25]); |
| inputBuffer.unmap(); |
| |
| const outputBuffer = device.createBuffer({ size: 4, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.MAP_READ }); |
| |
| const bgl0 = device.createBindGroupLayout({ |
| bindings: [{ |
| binding: 0, |
| visibility: GPUShaderStage.COMPUTE, |
| type: "sampled-texture" |
| }] |
| }); |
| const bgl1 = device.createBindGroupLayout({ |
| bindings: [{ |
| binding: 0, |
| visibility: GPUShaderStage.COMPUTE, |
| type: "sampler" |
| }] |
| }); |
| const bgl2 = device.createBindGroupLayout({ |
| bindings: [{ |
| binding: 0, |
| visibility: GPUShaderStage.COMPUTE, |
| type: "uniform-buffer" |
| }] |
| }); |
| const bgl3 = device.createBindGroupLayout({ |
| bindings: [{ |
| binding: 0, |
| visibility: GPUShaderStage.COMPUTE, |
| type: "storage-buffer" |
| }] |
| }) |
| |
| const bg0 = device.createBindGroup({ |
| layout: bgl0, |
| bindings: [{ |
| binding: 0, |
| resource: texture.createDefaultView() |
| }] |
| }); |
| const bg1 = device.createBindGroup({ |
| layout: bgl1, |
| bindings: [{ |
| binding: 0, |
| resource: device.createSampler({}) |
| }] |
| }); |
| const bg2 = device.createBindGroup({ |
| layout: bgl2, |
| bindings: [{ |
| binding: 0, |
| resource: { |
| buffer: inputBuffer, |
| size: 4 |
| } |
| }] |
| }); |
| const bg3 = device.createBindGroup({ |
| layout: bgl3, |
| bindings: [{ |
| binding: 0, |
| resource: { |
| buffer: outputBuffer, |
| size: 4 |
| } |
| }] |
| }); |
| |
| const shaderModule = device.createShaderModule({ code: comboShader }); |
| const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bgl0, bgl1, bgl2, bgl3] }); |
| |
| const pipeline = device.createComputePipeline({ |
| layout: pipelineLayout, |
| computeStage: { |
| module: shaderModule, |
| entryPoint: "compute_main" |
| } |
| }); |
| |
| const commandEncoder = device.createCommandEncoder(); |
| commandEncoder.copyBufferToTexture({ |
| buffer: textureDataBuffer, |
| rowPitch: 4, |
| imageHeight: 0 |
| }, { texture: texture }, textureSize); |
| |
| const passEncoder = commandEncoder.beginComputePass(); |
| passEncoder.setPipeline(pipeline); |
| passEncoder.setBindGroup(0, bg0); |
| passEncoder.setBindGroup(1, bg1); |
| passEncoder.setBindGroup(2, bg2); |
| passEncoder.setBindGroup(3, bg3); |
| passEncoder.dispatch(1, 1, 1); |
| passEncoder.endPass(); |
| |
| device.getQueue().submit([commandEncoder.finish()]); |
| |
| const results = new Uint32Array(await outputBuffer.mapReadAsync()); |
| outputBuffer.unmap(); |
| assert_equals(results[0], 42, "Correct value sampled from a bound 2D texture."); |
| }; |
| |
| tests["Bind a single GPUBuffer with different offsets in different GPUBindGroups"] = async device => { |
| const numInputs = 4; |
| const [uniformBuffer, writeArrayBuffer] = device.createBufferMapped({ size: 4 * numInputs, usage: GPUBufferUsage.UNIFORM }); |
| new Int32Array(writeArrayBuffer).set([1, 2, 3, 36]); |
| uniformBuffer.unmap(); |
| |
| const storageBuffer = device.createBuffer({ size: 4, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.MAP_READ }); |
| |
| const bindGroupLayout = device.createBindGroupLayout({ |
| bindings: [{ |
| binding: 0, |
| visibility: GPUShaderStage.COMPUTE, |
| type: "uniform-buffer" |
| }, { |
| binding: 1, |
| visibility: GPUShaderStage.COMPUTE, |
| type: "storage-buffer" |
| }] |
| }); |
| |
| let bindGroups = new Array(numInputs); |
| for (let i = 0; i < numInputs; ++i) { |
| bindGroups[i] = device.createBindGroup({ |
| layout: bindGroupLayout, |
| bindings: [{ |
| binding: 0, |
| resource: { |
| buffer: uniformBuffer, |
| offset: i * numInputs, |
| size: 4 |
| } |
| }, { |
| binding: 1, |
| resource: { |
| buffer: storageBuffer, |
| size: 4 |
| } |
| }] |
| }); |
| } |
| |
| const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] }); |
| |
| const shaderModule = device.createShaderModule({ code: uniformBufferShader }); |
| |
| const pipeline = device.createComputePipeline({ |
| layout: pipelineLayout, |
| computeStage: { |
| module: shaderModule, |
| entryPoint: "compute_main" |
| } |
| }); |
| |
| const commandEncoder = device.createCommandEncoder(); |
| const passEncoder = commandEncoder.beginComputePass(); |
| passEncoder.setPipeline(pipeline); |
| for (let i = 0; i < numInputs; ++i) { |
| passEncoder.setBindGroup(0, bindGroups[i]); |
| passEncoder.dispatch(1, 1, 1); |
| } |
| passEncoder.endPass(); |
| device.getQueue().submit([commandEncoder.finish()]); |
| |
| const results = new Int32Array(await storageBuffer.mapReadAsync()); |
| storageBuffer.unmap(); |
| assert_equals(results[0], 42, "Storage buffer binding written to successfully."); |
| }; |
| |
| runTestsWithDevice(tests); |
| </script> |
| </body> |
