Compute work in WebGPU runs in a compute pass that is recorded before the render pass in the same command encoder

A compute pass is the GPU-side container for compute shader dispatches, analogous to a render pass for drawing. Start it with encoder.beginComputePass(), end it with computePass.end(). Inside: set the compute pipeline, bind groups, and dispatch workgroups. Compute and render passes share the same command encoder and are submitted together. The compute pass should precede the render pass so its output is available as render input. The step counter is incremented between the two passes to align ping-pong buffer roles correctly.

Examples

const encoder = device.createCommandEncoder();
const computePass = encoder.beginComputePass();
computePass.setPipeline(simulationPipeline);
computePass.setBindGroup(0, bindGroups[step % 2]);
computePass.dispatchWorkgroups(workgroupCount, workgroupCount);
computePass.end();
step++;
// then begin render pass...
device.queue.submit([encoder.finish()]);

Assessment

Why must the compute pass run before the render pass when both share a command encoder? What would happen if you incremented step before the compute pass instead of after?