Latency test

latencyTest.js

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const trials = 100;

const buf = device.createBuffer({ usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST, size: 4096 });
let t1 = 0;
for (let i = 0; i < trials; ++i) {
  const s = performance.now();
  const encoder = device.createCommandEncoder();
  encoder.clearBuffer(buf);
  device.queue.submit([encoder.finish()]);
  await buf.mapAsync(GPUMapMode.READ);
  t1 += performance.now() - s;
  buf.unmap();
}

let t2 = 0;
for (let i = 0; i < trials; ++i) {
  const s = performance.now();
  await buf.mapAsync(GPUMapMode.READ);
  t2 += performance.now() - s;
  buf.unmap();
}

let t3 = 0;
for (let i = 0; i < trials; ++i) {
  const s = performance.now();
  await Promise.resolve();
  t3 += performance.now() - s;
}

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl');
const data = new Uint8Array(canvas.width * canvas.height * 4);
let t4 = 0;
for (let i = 0; i < trials; ++i) {
  const s = performance.now();
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.readPixels(0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, data);
  t4 += performance.now() - s;
}

let t5 = 0;
for (let i = 0; i < trials; ++i) {
  const s = performance.now();
  gl.readPixels(0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, data);
  t5 += performance.now() - s;
}

console.log('webgpu clear and map async', t1 / trials);
console.log('map async while idle',  t2 / trials);
console.log('promise resolve', t3 / trials);
console.log('webgl clear and read pixels', t4 / trials);
console.log('webgl read pixels while idle', t5 / trials);