<!DOCTYPE html>
<title>Testing WebGPU compiled with Bazel</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="/build/hello-world.js"></script>

<p id="log"></p>

<canvas id="webgpu-demo-canvas" width=500 height=500></canvas>

<script type="text/javascript" charset="utf-8">
  if ("gpu" in navigator) {
    log("WebGPU detected")
    WebGPUDemo();
  } else {
    log("No WebGPU support.")
  }

  function log(s) {
    document.getElementById("log").innerText = s;
  }

  async function WebGPUDemo() {
    const adapter = await navigator.gpu.requestAdapter();
    if (!adapter) {
      log("Could not load an adapter. For Chrome, try running with --enable-features=Vulkan --enable-unsafe-webgpu");
      return;
    }
    const device = await adapter.requestDevice();
    console.log(adapter, device);

    const wk = await WebGPUKitInit({locateFile: (file) => '/build/'+file});
    // https://github.com/emscripten-core/emscripten/issues/12750#issuecomment-725001907
    wk.preinitializedWebGPUDevice = device;

    const surface = new wk.WebGPUSurface("#webgpu-demo-canvas", 500, 500);

    const triangleVertexShader = surface.MakeShader(`[[stage(vertex)]]
fn main([[builtin(vertex_index)]] VertexIndex : u32)
     -> [[builtin(position)]] vec4<f32> {
  var pos = array<vec2<f32>, 3>(
      vec2<f32>(0.0, 0.5),
      vec2<f32>(-0.5, -0.5),
      vec2<f32>(0.5, -0.5));

  return vec4<f32>(pos[VertexIndex], 0.0, 1.0);
}`);

    const redFragmentShader = surface.MakeShader(`[[stage(fragment)]]
fn main() -> [[location(0)]] vec4<f32> {
  return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}`);

    const pipeline = surface.MakeRenderPipeline(triangleVertexShader, redFragmentShader);

    const startTime = Date.now();
    function frame() {
      const now = Date.now();
      surface.drawPipeline(pipeline,
        Math.abs(Math.sin((startTime - now) / 500)), // red
        Math.abs(Math.sin((startTime - now) / 600)), // green
        Math.abs(Math.sin((startTime - now) / 700)), // blue
        1.0);
      requestAnimationFrame(frame);
    }
    requestAnimationFrame(frame);
  }
</script>