CommandEncoder

• Methods cover beginRenderPass, beginComputePass, copyBufferToTexture and finish.
• copyTextureToBuffer reads pixels back into a mappable Buffer.
• pushDebugGroup and popDebugGroup label commands for GPU debuggers.

const encoder = device.createCommandEncoder({ id: 'frame' });

/* 第一趟：离屏渲染 */
const offscreen = encoder.beginRenderPass({
  framebuffer: fbo,
  clearColor: [0, 0, 0, 1]
});
offscreen.setPipeline(offscreenPipeline);
offscreen.setVertexArray(quadArray);
offscreen.draw({ vertexCount: 6 });
offscreen.end();

/* 第二趟：画到画布 */
const screen = encoder.beginRenderPass({
  clearColor: [0.04, 0.06, 0.09, 1]
});
screen.setPipeline(postPipeline);
screen.setVertexArray(quadArray);
screen.setBindings({ uScene: colorTexture });
screen.draw({ vertexCount: 6 });
screen.end();

const commandBuffer = encoder.finish();
device.submit(commandBuffer);

const encoder = device.createCommandEncoder();

const pass = encoder.beginRenderPass({
  framebuffer: fbo,
  clearColor: [0.1, 0.2, 0.3, 1]
});
pass.end();

encoder.copyTextureToBuffer(copyOptions);

device.submit(encoder.finish());

const pixels = await readbackBuffer.readAsync();

• Ending the encoder while a pass is still open makes finish() throw.
• An encoder is single-use; calling finish() twice on it fails.