01-clear-value.js

async function main()
{
  // get webgpu adapter and device
  const adaptor = await navigator.gpu?.requestAdapter();
  const device = await adaptor?.requestDevice();
  if (!device) {
    fail('your browser does not support WebGPU');
    return;
  }

  // create a webgpu context with the canvas
  const canvas = document.getElementById("webgpu-canvas");
  const context = canvas.getContext("webgpu");
  const format = navigator.gpu.getPreferredCanvasFormat();
  context.configure({device, format});

  const render = () => {
    // The output is a texture, and we are getting a "view" 
    // of texture as the output of the render pass
    const textureView = context.getCurrentTexture().createView(); 
    const renderPassDescriptor = {
      colorAttachments: [{ // "attachments" refer to target texture that GPU renders to
        view: textureView,
        clearValue: [1.0, 0.0, 0.0, 1.0], // an arbitrary color you prefer
        storeOp: 'store', // defines what happens after rendering
        loadOp: 'clear', // defines what happnes at the beginning
      }],
    };

    const commandEncoder = device.createCommandEncoder();
    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    passEncoder.end();

    // fire up the GPU to render the load value to the output texture
    device.queue.submit([commandEncoder.finish()]);
  };

  render();
}

main();