home/ atoms/ webgpu-render-pass-clear

A WebGPU render pass with loadOp 'clear' and a clearValue fills the attached texture with a solid RGBA color

A render pass begins with encoder.beginRenderPass({ colorAttachments: [{ view, loadOp, clearValue, storeOp }] }). Setting loadOp: 'clear' causes the texture to be cleared at pass start; clearValue: { r, g, b, a } sets the clear color with each channel in [0, 1]. Setting storeOp: 'store' preserves drawing done during the pass; 'discard' throws it away. A pass with only the clear op and no draw calls is the simplest complete rendering: it paints the canvas with the clear color.

Examples

const pass = encoder.beginRenderPass({
  colorAttachments: [{
    view: context.getCurrentTexture().createView(),
    loadOp: 'clear',
    clearValue: { r: 0, g: 0, b: 0.4, a: 1 },
    storeOp: 'store',
  }]
});
pass.end();

Assessment

Given clearValue: { r: 1, g: 0, b: 1, a: 1 }, what color fills the canvas? What does storeOp: 'discard' do to the rendered result?

“A `loadOp` value of `"clear"` indicates that you want the texture to b”
corpus · your-first-webgpu-app-google-codelab · chunk 2