binding-draw.html | Explore in Territory

<!DOCTYPE html>
<html>

<head>
  <title>
    Test CPU performance of the GPURenderPassEncoder.draw binding
  </title>
  <script src="../resources/runner.js"></script>
  <script src="./resources/webgpu-perf-utils.js"></script>
</head>

<body>
  <canvas id="canvas" width=400 height=400></canvas>
  <script>
    (async () => {
      const adapter = navigator.gpu && await navigator.gpu.requestAdapter();
      if (!adapter) {
        return skipTest('WebGPU not supported');
      }

      const device = await adapter.requestDevice();
      const canvas = document.getElementById('canvas');
      const context = canvas.getContext('webgpu');
      const contextFormat = navigator.gpu.getPreferredCanvasFormat();

      context.configure({
        device,
        format: contextFormat,
      });

      const pipeline = await device.createRenderPipelineAsync({
        layout: 'auto',
        vertex: {
          module: device.createShaderModule({
            code: `
              const pos = array<vec2f, 3>(
                  vec2f(0.0, 0.5),
                  vec2f(-0.5, -0.5),
                  vec2f(0.5, -0.5));

              @vertex
              fn main(@builtin(vertex_index) VertexIndex : u32) -> @builtin(position) vec4<f32> {
                return vec4f(pos[VertexIndex], 0.0, 1.0);
              }`
          }),
          entryPoint: 'main',
        },
        fragment: {
          module: device.createShaderModule({
            code: `
              @fragment
              fn main() -> @location(0) vec4f {
                return vec4f(0.0, 1.0, 0.0, 1.0);
              }`
          }),
          entryPoint: 'main',
          targets: [{
            format: contextFormat,
          }],
        },
        primitive: {
          topology: 'triangle-list',
        },
      });

      const renderPassDescriptor = {
        colorAttachments: [{
            view: undefined,
            loadOp: 'clear',
            clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
            storeOp: 'store',
        }],
      };

      const iterations = 10000;
      PerfTestRunner.measureInnerRAFTime({
        description: `CPU time for ${iterations} calls to GPURenderPassEncoder.draw`,
        warmUpCount: 10,
        run() {
          const commandEncoder = device.createCommandEncoder();
          renderPassDescriptor.colorAttachments[0].view = context.getCurrentTexture().createView();

          const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
          passEncoder.setPipeline(pipeline);
          for (let i = 0; i < iterations; ++i) {
            passEncoder.draw(3, 1, 0, 0);
          }
          passEncoder.end();

          device.queue.submit([commandEncoder.finish()]);
        }
      });
    })();
  </script>
</body>

</html>
chromium/third_party/blink/perf_tests/webgpu/binding-draw.html
