馃悕馃悕馃悕
ponder.ooo
1
2$css(`
3 canvas.webgpu {
4 position: absolute;
5 top: 0;
6 left: 0;
7 width: 100%;
8 height: 100%;
9 user-select: none;
10 }
11`);
12
13let webgpu_working = true;
14
15if (!navigator.gpu) {
16 console.error("WebGPU not supported.");
17 webgpu_working = false;
18}
19
20const adapter = await navigator.gpu.requestAdapter();
21
22if (!adapter) {
23 console.error("No WebGPU adapter.");
24 webgpu_working = false;
25}
26
27
28const device = await adapter.requestDevice();
29// todo ensure device
30
31const canvasFormat = navigator.gpu.getPreferredCanvasFormat();
32
33// TODO make more robust
34async function loadShader(shaderName) {
35 const response = await fetch(`./${shaderName}.wgsl`);
36 const shaderSource = await response.text();
37 const module = device.createShaderModule({ code: shaderSource });
38 const info = await module.getCompilationInfo();
39 if (info.messages.some(m => m.type === "error")) {
40 return null;
41 }
42 return module;
43}
44
45
46window.$gpu = {
47 device,
48 canvasFormat,
49 loadShader
50};
51
52export async function main(target) {
53 if (!webgpu_working) {
54 console.error("WebGPU not working; aborting module load.");
55 return;
56 }
57
58 const canvas = document.createElement("canvas");
59 canvas.className = "webgpu";
60
61 canvas.tabIndex = 0;
62
63 canvas.addEventListener("keydown", (e) => {
64 console.log(e);
65 if (e.key === "f") {
66 if (document.fullscreenElement) {
67 document.exitFullscreen();
68 }
69 else {
70 canvas.requestFullscreen();
71 }
72 }
73 });
74
75
76 const context = canvas.getContext("webgpu");
77
78 context.configure({ device, format: canvasFormat });
79
80 target.appendChild(canvas);
81
82 return {
83 replace: true,
84 canvas,
85 context
86 };
87}
88