<!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('gpupresent');
      const swapChainFormat = await context.getSwapChainPreferredFormat(device);

      const swapChain = context.configureSwapChain({
        device,
        format: swapChainFormat,
      });

      const pipeline = device.createRenderPipeline({
        vertexStage: {
          module: device.createShaderModule({
            code: `
              const pos : array<vec2<f32>, 3> = array<vec2<f32>, 3>(
                  vec2<f32>(0.0, 0.5),
                  vec2<f32>(-0.5, -0.5),
                  vec2<f32>(0.5, -0.5));

              [[builtin(position)]] var<out> Position : vec4<f32>;
              [[builtin(vertex_index)]] var<in> VertexIndex : u32;
              [[stage(vertex)]] fn main() -> void {
                Position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
              }`
          }),
          entryPoint: 'main',
        },
        fragmentStage: {
          module: device.createShaderModule({
            code: `
              [[location(0)]] var<out> outColor : vec4<f32>;
              [[stage(fragment)]] fn main() -> void {
                outColor = vec4<f32>(0.0, 1.0, 0.0, 1.0);
              }`
          }),
          entryPoint: 'main',
        },
        primitiveTopology: 'triangle-list',
        colorStates: [{
          format: swapChainFormat,
        }],
      });

      const renderPassDescriptor = {
        colorAttachments: [{
            attachment: undefined,
            loadValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
        }],
      };

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

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

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

</html>