1<!DOCTYPE html> 2<title>Testing WebGPU compiled with Bazel</title> 3<meta charset="utf-8" /> 4<meta http-equiv="X-UA-Compatible" content="IE=edge"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 7<script type="text/javascript" src="/build/hello-world.js"></script> 8 9<p id="log"></p> 10 11<canvas id="webgpu-demo-canvas" width=500 height=500></canvas> 12 13<script type="text/javascript" charset="utf-8"> 14 if ("gpu" in navigator) { 15 log("WebGPU detected") 16 WebGPUDemo(); 17 } else { 18 log("No WebGPU support.") 19 } 20 21 function log(s) { 22 document.getElementById("log").innerText = s; 23 } 24 25 async function WebGPUDemo() { 26 const adapter = await navigator.gpu.requestAdapter(); 27 if (!adapter) { 28 log("Could not load an adapter. For Chrome, try running with --enable-features=Vulkan --enable-unsafe-webgpu"); 29 return; 30 } 31 const device = await adapter.requestDevice(); 32 console.log(adapter, device); 33 34 const wk = await WebGPUKitInit({locateFile: (file) => '/build/'+file}); 35 // https://github.com/emscripten-core/emscripten/issues/12750#issuecomment-725001907 36 wk.preinitializedWebGPUDevice = device; 37 38 const surface = new wk.WebGPUSurface("#webgpu-demo-canvas", 500, 500); 39 40 const triangleVertexShader = surface.MakeShader(`[[stage(vertex)]] 41fn main([[builtin(vertex_index)]] VertexIndex : u32) 42 -> [[builtin(position)]] vec4<f32> { 43 var pos = array<vec2<f32>, 3>( 44 vec2<f32>(0.0, 0.5), 45 vec2<f32>(-0.5, -0.5), 46 vec2<f32>(0.5, -0.5)); 47 48 return vec4<f32>(pos[VertexIndex], 0.0, 1.0); 49}`); 50 51 const redFragmentShader = surface.MakeShader(`[[stage(fragment)]] 52fn main() -> [[location(0)]] vec4<f32> { 53 return vec4<f32>(1.0, 0.0, 0.0, 1.0); 54}`); 55 56 const pipeline = surface.MakeRenderPipeline(triangleVertexShader, redFragmentShader); 57 58 const startTime = Date.now(); 59 function frame() { 60 const now = Date.now(); 61 surface.drawPipeline(pipeline, 62 Math.abs(Math.sin((startTime - now) / 500)), // red 63 Math.abs(Math.sin((startTime - now) / 600)), // green 64 Math.abs(Math.sin((startTime - now) / 700)), // blue 65 1.0); 66 requestAnimationFrame(frame); 67 } 68 requestAnimationFrame(frame); 69 } 70</script>