70 lines
2.2 KiB
HTML
70 lines
2.2 KiB
HTML
<!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> |