Für die Entwicklung mit WebGL benötigst du technisch gesehen nicht mehr als einen Webbrowser. Plattformen wie jsfiddle.net, jsbin.com oder codepen.io ermöglichen dir einen schnellen Start, indem du externe Skripte bei Bedarf referenzieren kannst. Doch diese Online-Umgebungen haben ihre Grenzen: WebGL unterliegt strengeren Restriktionen beim Laden von Bildern als beispielsweise Canvas2D, was den Zugriff auf Bilder aus dem Web erschwert. Zudem ist es in der Regel effizienter, direkt mit lokalen Dateien zu arbeiten.
Nehmen wir an, du möchtest die Beispiele dieser Website ausführen und bearbeiten. Der erste Schritt ist, die Website herunterzuladen. Du findest die benötigten Dateien hier zum Download. Entpacke die Dateien anschließend in einen beliebigen Ordner auf deinem System.
Animation zeigt den Download-Link für die WebGL2-Fundamentals-Beispiele auf GitHub.
Einen einfachen lokalen Webserver einrichten
Als Nächstes solltest du einen kleinen Webserver installieren. Das Wort „Webserver“ mag vielleicht einschüchternd wirken, aber tatsächlich sind Webserver äußerst einfach aufgebaut.
Eine sehr unkomplizierte Lösung mit einer grafischen Oberfläche ist Servez.
Benutzeroberfläche von Servez, einem einfachen lokalen Webserver für WebGL-Entwicklung.
Zeige Servez einfach auf den Ordner, in den du die Dateien entpackt hast, klicke auf „Start“ und navigiere dann in deinem Browser zu http://localhost:8080/webgl/. Dort kannst du ein Beispiel auswählen und ausführen.
Falls du die Kommandozeile bevorzugst, ist Node.js eine ausgezeichnete Alternative. Lade es herunter, installiere es und öffne dann eine Kommandozeile, Konsole oder ein Terminalfenster. Unter Windows fügt der Installer ein spezielles „Node.js-Eingabeaufforderung“ hinzu – nutze dieses.
Installiere anschließend das servez-Paket, indem du folgenden Befehl eingibst:
npm -g install servezAuf macOS verwendest du:
sudo npm -g install servezNachdem die Installation abgeschlossen ist, gib ein:
servez pfad/zum/ordner/wo/du/dateien/entpackt/hastEs sollte eine Ausgabe erscheinen, die der folgenden ähnelt:
Kommandozeilen-Ausgabe von Servez, die den Start des lokalen Servers unter localhost:8080 anzeigt.
Öffne dann in deinem Browser http://localhost:8080/webgl/. Wenn du keinen Pfad angibst, dient Servez den aktuellen Ordner.
Die Entwicklertools deines Browsers nutzen
Die meisten Browser verfügen über umfangreiche, integrierte Entwicklertools, die für die WebGL-Entwicklung in Chrome unerlässlich sind.
Screenshot der Google Chrome Entwicklertools, geöffnet auf einer Webseite mit WebGL-Inhalt.
Die Dokumentation für die Chrome DevTools findest du hier, und für Firefox hier. Lerne, wie man diese Tools effektiv einsetzt. Überprüfe immer die JavaScript-Konsole. Bei Problemen wird dort oft eine Fehlermeldung angezeigt. Lies diese Meldungen genau durch; sie geben dir oft wichtige Hinweise auf die Ursache des Problems.
Animation zeigt die JavaScript-Konsole in Chrome DevTools mit Fehlermeldungen für WebGL-Debugging.
WebGL Lint zur Fehlererkennung
Ein hilfreiches Skript zur Überprüfung gängiger WebGL-Fehler ist WebGL Lint. Füge dieses Skript einfach vor deinen anderen Skripten auf deiner Seite ein:
Dein Programm wird dann eine Ausnahme auslösen, wenn ein WebGL-Fehler auftritt, und mit etwas Glück weitere Informationen dazu ausgeben. Du kannst auch Namen für deine WebGL-Ressourcen vergeben (Puffer, Texturen, Shader, Programme, …), sodass Fehlermeldungen die Namen der relevanten Ressourcen enthalten.
Erweiterte Debugging-Tools: WebGL-Inspektoren
Es gibt verschiedene WebGL-Inspektoren. Spector.js ist eine Erweiterung für Chrome und Firefox.
Beachte: Lies die Dokumentation!
Die Erweiterungsversion von Spector.js erfasst Frames. Das bedeutet, sie funktioniert nur, wenn deine WebGL-Anwendung erfolgreich initialisiert wird und dann in einer requestAnimationFrame-Schleife rendert. Du klickst auf den „Record“-Button, und sie erfasst alle WebGL-API-Aufrufe für einen „Frame“. Ohne zusätzliche Anpassungen hilft sie dir also nicht direkt bei Problemen während der Initialisierung.
Um dies zu umgehen, gibt es zwei Methoden:
- Nutzung als Bibliothek statt als Erweiterung.
Siehe dazu die Dokumentation. Auf diese Weise kannst du gezielt den Befehl „Erfasse jetzt die WebGL-API-Befehle!“ geben. - Ändere deine App so, dass sie erst nach einem Klick auf eine Schaltfläche startet.
So kannst du in der Erweiterung „Record“ auswählen und dann deine App starten. Wenn deine App keine Animationen enthält, füge einfach ein paar „Fake-Frames“ hinzu. Zum Beispiel:
function main() { // Get A WebGL context /** @type {HTMLCanvasElement} */ const canvas = document.querySelector("#canvas"); const gl = canvas.getContext("webgl"); if (!gl) { return; } const startElem = document.querySelector('button'); startElem.addEventListener('click', start, {once: true}); function start() { // run the initialization in rAF since spector only captures inside rAF events requestAnimationFrame(() => { // do all the initialization init(gl); }); // make so more frames so spector has something to look at. requestAnimationFrame(() => {}); requestAnimationFrame(() => {}); requestAnimationFrame(() => {}); } } main();Jetzt kannst du in der Spector.js-Erweiterung auf „Record“ klicken, dann auf „Start“ auf deiner Seite, und Spector wird deine Initialisierung aufzeichnen. Safari verfügt ebenfalls über eine ähnliche integrierte Funktion mit vergleichbaren Problemen und Workarounds.
Beim Einsatz solcher Hilfsmittel klicke ich oft auf einen Draw-Call und überprüfe die Uniforms. Wenn ich dort eine Reihe von NaN (Not a Number) sehe, kann ich in der Regel den Code, der dieses Uniform gesetzt hat, zurückverfolgen und den Fehler finden.
Den Quellcode immer einsehen
Vergiss nie, dass du den Code immer überprüfen kannst. Oft genügt ein Rechtsklick und die Auswahl von „Seitenquelltext anzeigen“.
Animation zeigt das Kontextmenü mit der Option 'Seitenquelltext anzeigen' im Browser.
Selbst wenn du auf einer Seite keinen Rechtsklick ausführen kannst oder der Quelltext in einer separaten Datei liegt, kannst du den Quelltext immer in den Entwicklertools einsehen.
Animation zeigt, wie der Quellcode einer Webseite über den 'Sources'-Tab in den Chrome DevTools eingesehen werden kann.
Starten Sie jetzt Ihre WebGL 2.0 Projekte
Dieser Leitfaden sollte Ihnen dabei helfen, Ihre WebGL 2.0 Entwicklungsumgebung in Chrome optimal einzurichten und grundlegende Debugging-Techniken zu beherrschen. Mit einem lokalen Webserver, den Browser-Entwicklertools, WebGL Lint und erweiterten Inspektoren wie Spector.js sind Sie bestens gerüstet, um WebGL-Projekte effizient zu entwickeln und Fehler zu beheben. Tauchen Sie nun tiefer in die Materie ein und kehren Sie zu den umfassenden Lektionen zurück, um Ihr Wissen und Ihre Fähigkeiten zu erweitern.