Home
1 Setup und Systemvoraussetzungen
2 Hallo WebGPU (Initialisierung)
Kontakt / Impressum
webgpu ([ät)] peter-strohm Punkt de
|
2 Hello WebGPU
>>>> Direkt zum Beispiel <<<<
Zunächst benötigen wir eine einfache HTML-Datei webgpubeispiel2.html, durch die eine js-Datei (Javascript) nachgeladen wird, die dann die WebGPU-Funktionen enthält.
| 1 | <!DOCTYPE html>
| | 2 | <html lang="de">
| | 3 | <meta charset="UTF-8">
| | 4 | <head>
| | 5 | <title>WebGPU Hello WebGPU</Title>
| | 6 | <script src="webgpubeispiel2.js" type="module"></script>
| | 7 |
| | 8 | </head>
| | 9 | <body>
| | 10 |
| | 11 | <canvas id="mywebgpucanvas"></canvas>
| | 12 | <div id="output></div>
| | 13 |
| | 14 | </body>
| | 15 | </html> |
Kommen wir nun zur js-Datei webgpubeispiel2.js. Im derzeitigen experimentellen Stand von WebGPU müssen wir (leider) noch ein externes
Hilfs-Javascript laden, das das Kompilieren der Shader (mehr dazu später) übernimmt.
| 15 | import glslangModule from 'https://unpkg.com/@webgpu/glslang@0.0.8/dist/web-devel/glslang.js'
|
Dann schauen wir zunächst ans Ende der Datei. Hier wird der Browser veranlasst, nach dem vollständigen Laden der HTML-Datei (einschl. der inkludierten js-Dateien),
eine bestimmt javascript-Funktion namens myWebGPUInit() auszuführen:
| 109 | document.addEventListener("load", myWebGPUInit());
|
Diese Funktion myWebGPUInit() ist der Hauptteil von webgpubeispiel2.js und enthält die grundlegenden Schritte zu WebGPU-Nutzung.
| 16 | async function myWebGPUInit() {
|
Jetzt fragen wir beim Browser nach dem Zugriff auf das GPU-Device ("Grafikkarte") an. Dies geschieht in zwei Schritten:
| 18 | const GPUadapter = await navigator.gpu.requestAdapter(); // Der Browser ("navigator") wird nach Zugang zur GPU in Form eines Adapters angefragt.
| | 19 |
| | 20 | const myDevice = await GPUadapter.requestDevice({}); // Aus dem Adapter kann ein Device geholt werden.
|
Kommentar hinterlassen:
|