WebGPU: Test onSubmittedWorkDone per requestAnimationFrame

README.md

WebGPU: Test onSubmittedWorkDone per requestAnimationFrame

view on jsgist

index.css

:root {
  color-scheme: light dark;
}

index.html

/*bug-in-github-api-content-can-not-be-empty*/

index.js

async function main() {
  const adapter = await navigator.gpu.requestAdapter();
  const device = await adapter.requestDevice();
  const texture = device.createTexture({
    usage: GPUTextureUsage.RENDER_ATTACHMENT,
    size: [16, 16],
    format: 'rgba8unorm',
  });

  const numTests = 20;
  let count = 0;
  for (let test = 0; test < numTests; ++test) {
    await rAF();
    let done = false;
    requestAnimationFrame(() => { done = true });
    while (!done) {
      const encoder = device.createCommandEncoder();
      const pass = encoder.beginRenderPass({
        colorAttachments: [
          {
            view: texture,
            loadOp: 'clear',
            storeOp: 'store',
          },
        ],
      });
      pass.end();
      device.queue.submit([encoder.finish()]);
      await device.queue.onSubmittedWorkDone();
      ++count;
    }
  }

  log(`onSubmittedWorkDone per requestAnimationFrame = ${(count / numTests).toFixed(2)}`)
}

main();

function log(...args) {
  const elem = document.createElement('pre');
  elem.textContent = args.join(' ');
  document.body.append(elem);
}

function rAF() {
  return new Promise(resolve => requestAnimationFrame(resolve));
}

jsGist.json

{"name":"WebGPU: Test onSubmittedWorkDone per requestAnimationFrame","settings":{},"filenames":["index.html","index.css","index.js"]}