xref: /aosp_15_r20/external/skia/experimental/webgpu-bazel/example/index.html (revision c8dee2aa9b3f27cf6c858bd81872bdeb2c07ed17) 
1*c8dee2aaSAndroid Build Coastguard Worker<!DOCTYPE html>
2*c8dee2aaSAndroid Build Coastguard Worker<html>
3*c8dee2aaSAndroid Build Coastguard Worker<head>
4*c8dee2aaSAndroid Build Coastguard Worker    <title>Skia+WebGPU compiled with Bazel</title>
5*c8dee2aaSAndroid Build Coastguard Worker    <meta charset="utf-8" />
6*c8dee2aaSAndroid Build Coastguard Worker    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7*c8dee2aaSAndroid Build Coastguard Worker    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8*c8dee2aaSAndroid Build Coastguard Worker    <script type="text/javascript" src="/build/hello-world.js"></script>
9*c8dee2aaSAndroid Build Coastguard Worker    <style>
10*c8dee2aaSAndroid Build Coastguard Worker        body {
11*c8dee2aaSAndroid Build Coastguard Worker            display: flex;
12*c8dee2aaSAndroid Build Coastguard Worker            flex-direction: column;
13*c8dee2aaSAndroid Build Coastguard Worker            align-items: center;
14*c8dee2aaSAndroid Build Coastguard Worker            width: 100%;
15*c8dee2aaSAndroid Build Coastguard Worker            height: 100%;
16*c8dee2aaSAndroid Build Coastguard Worker            margin: 0;
17*c8dee2aaSAndroid Build Coastguard Worker            padding: 0;
18*c8dee2aaSAndroid Build Coastguard Worker            background: #000;
19*c8dee2aaSAndroid Build Coastguard Worker        }
20*c8dee2aaSAndroid Build Coastguard Worker        p {
21*c8dee2aaSAndroid Build Coastguard Worker            color: white;
22*c8dee2aaSAndroid Build Coastguard Worker            font-family: sans-serif;
23*c8dee2aaSAndroid Build Coastguard Worker        }
24*c8dee2aaSAndroid Build Coastguard Worker        button {
25*c8dee2aaSAndroid Build Coastguard Worker            margin: 20px;
26*c8dee2aaSAndroid Build Coastguard Worker            color: white;
27*c8dee2aaSAndroid Build Coastguard Worker            background-color: black;
28*c8dee2aaSAndroid Build Coastguard Worker            border: none;
29*c8dee2aaSAndroid Build Coastguard Worker            text-decoration: none;
30*c8dee2aaSAndroid Build Coastguard Worker            font-size: 20px;
31*c8dee2aaSAndroid Build Coastguard Worker            cursor: pointer;
32*c8dee2aaSAndroid Build Coastguard Worker        }
33*c8dee2aaSAndroid Build Coastguard Worker    </style>
34*c8dee2aaSAndroid Build Coastguard Worker</head>
35*c8dee2aaSAndroid Build Coastguard Worker<body>
36*c8dee2aaSAndroid Build Coastguard Worker    <p id="log"></p>
37*c8dee2aaSAndroid Build Coastguard Worker    <canvas id="webgpu-demo-canvas" width=600 height=600></canvas>
38*c8dee2aaSAndroid Build Coastguard Worker    <div id="buttons">
39*c8dee2aaSAndroid Build Coastguard Worker        <button id="solid-color">Solid Color</button>
40*c8dee2aaSAndroid Build Coastguard Worker        <button id="gradient">Gradient</button>
41*c8dee2aaSAndroid Build Coastguard Worker        <button id="runtime-effect">Runtime Effect</button>
42*c8dee2aaSAndroid Build Coastguard Worker    </div>
43*c8dee2aaSAndroid Build Coastguard Worker    <script type="text/javascript" charset="utf-8">
44*c8dee2aaSAndroid Build Coastguard Worker      if (navigator.gpu) {
45*c8dee2aaSAndroid Build Coastguard Worker        log("WebGPU detected")
46*c8dee2aaSAndroid Build Coastguard Worker        WebGPUDemo();
47*c8dee2aaSAndroid Build Coastguard Worker      } else {
48*c8dee2aaSAndroid Build Coastguard Worker        log("No WebGPU support.")
49*c8dee2aaSAndroid Build Coastguard Worker      }
50*c8dee2aaSAndroid Build Coastguard Worker
51*c8dee2aaSAndroid Build Coastguard Worker      function log(s) {
52*c8dee2aaSAndroid Build Coastguard Worker        document.getElementById("log").innerText = s;
53*c8dee2aaSAndroid Build Coastguard Worker      }
54*c8dee2aaSAndroid Build Coastguard Worker
55*c8dee2aaSAndroid Build Coastguard Worker      async function WebGPUDemo() {
56*c8dee2aaSAndroid Build Coastguard Worker        const adapter = await navigator.gpu.requestAdapter();
57*c8dee2aaSAndroid Build Coastguard Worker        if (!adapter) {
58*c8dee2aaSAndroid Build Coastguard Worker          log("Could not load an adapter. For Chrome, try running with --enable-features=Vulkan --enable-unsafe-webgpu");
59*c8dee2aaSAndroid Build Coastguard Worker          return;
60*c8dee2aaSAndroid Build Coastguard Worker        }
61*c8dee2aaSAndroid Build Coastguard Worker        const device = await adapter.requestDevice();
62*c8dee2aaSAndroid Build Coastguard Worker        console.log(adapter, device);
63*c8dee2aaSAndroid Build Coastguard Worker
64*c8dee2aaSAndroid Build Coastguard Worker        const wk = await WebGPUKitInit({locateFile: (file) => "/build/"+file});
65*c8dee2aaSAndroid Build Coastguard Worker        // https://github.com/emscripten-core/emscripten/issues/12750#issuecomment-725001907
66*c8dee2aaSAndroid Build Coastguard Worker        wk.preinitializedWebGPUDevice = device;
67*c8dee2aaSAndroid Build Coastguard Worker
68*c8dee2aaSAndroid Build Coastguard Worker        const demo = new wk.Demo();
69*c8dee2aaSAndroid Build Coastguard Worker        if (!demo.init("#webgpu-demo-canvas", 600, 600)) {
70*c8dee2aaSAndroid Build Coastguard Worker            log("Failed to initialize Skia context");
71*c8dee2aaSAndroid Build Coastguard Worker            return;
72*c8dee2aaSAndroid Build Coastguard Worker        }
73*c8dee2aaSAndroid Build Coastguard Worker
74*c8dee2aaSAndroid Build Coastguard Worker        let demoKind = wk.DemoKind.RUNTIME_EFFECT;
75*c8dee2aaSAndroid Build Coastguard Worker        demo.setKind(demoKind);
76*c8dee2aaSAndroid Build Coastguard Worker        document.getElementById("runtime-effect").style["text-decoration"] = "underline";
77*c8dee2aaSAndroid Build Coastguard Worker
78*c8dee2aaSAndroid Build Coastguard Worker        document.getElementById("solid-color").onclick = function() {
79*c8dee2aaSAndroid Build Coastguard Worker          demoKind = wk.DemoKind.SOLID_COLOR;
80*c8dee2aaSAndroid Build Coastguard Worker          document.getElementById("solid-color").style["text-decoration"] = "underline";
81*c8dee2aaSAndroid Build Coastguard Worker          document.getElementById("gradient").style["text-decoration"] = "none";
82*c8dee2aaSAndroid Build Coastguard Worker          document.getElementById("runtime-effect").style["text-decoration"] = "none";
83*c8dee2aaSAndroid Build Coastguard Worker        };
84*c8dee2aaSAndroid Build Coastguard Worker        document.getElementById("gradient").onclick = function() {
85*c8dee2aaSAndroid Build Coastguard Worker          demoKind = wk.DemoKind.GRADIENT;
86*c8dee2aaSAndroid Build Coastguard Worker          document.getElementById("solid-color").style["text-decoration"] = "none";
87*c8dee2aaSAndroid Build Coastguard Worker          document.getElementById("gradient").style["text-decoration"] = "underline";
88*c8dee2aaSAndroid Build Coastguard Worker          document.getElementById("runtime-effect").style["text-decoration"] = "none";
89*c8dee2aaSAndroid Build Coastguard Worker        };
90*c8dee2aaSAndroid Build Coastguard Worker        document.getElementById("runtime-effect").onclick = function() {
91*c8dee2aaSAndroid Build Coastguard Worker          demoKind = wk.DemoKind.RUNTIME_EFFECT;
92*c8dee2aaSAndroid Build Coastguard Worker          document.getElementById("solid-color").style["text-decoration"] = "none";
93*c8dee2aaSAndroid Build Coastguard Worker          document.getElementById("gradient").style["text-decoration"] = "none";
94*c8dee2aaSAndroid Build Coastguard Worker          document.getElementById("runtime-effect").style["text-decoration"] = "underline";
95*c8dee2aaSAndroid Build Coastguard Worker        };
96*c8dee2aaSAndroid Build Coastguard Worker
97*c8dee2aaSAndroid Build Coastguard Worker        let timestamp = 0;
98*c8dee2aaSAndroid Build Coastguard Worker        async function frame(now) {
99*c8dee2aaSAndroid Build Coastguard Worker          if (demoKind == wk.DemoKind.RUNTIME_EFFECT || timestamp == 0 || now - timestamp >= 1000) {
100*c8dee2aaSAndroid Build Coastguard Worker              timestamp = now;
101*c8dee2aaSAndroid Build Coastguard Worker              demo.setKind(demoKind);
102*c8dee2aaSAndroid Build Coastguard Worker              await demo.draw(timestamp);
103*c8dee2aaSAndroid Build Coastguard Worker          }
104*c8dee2aaSAndroid Build Coastguard Worker          requestAnimationFrame(frame);
105*c8dee2aaSAndroid Build Coastguard Worker        }
106*c8dee2aaSAndroid Build Coastguard Worker        requestAnimationFrame(frame);
107*c8dee2aaSAndroid Build Coastguard Worker      }
108*c8dee2aaSAndroid Build Coastguard Worker    </script>
109*c8dee2aaSAndroid Build Coastguard Worker</body>
110*c8dee2aaSAndroid Build Coastguard Worker</html>
111