Wie schon im vorherigen Post erläutert, taste ich mich von unten an das Erforschen möglicher Interaktionsparadigmen eines Vektorgrafikeditors heran; sobald ich die nötigen technischen Grundlagen verinnerlicht habe, beginne ich mit dem Bau eines Prototypen. In diesem Beitrag schildere ich, was ich bisher über WebGL in Erfahrung gebracht habe.
WebGL
Um möglichst schnell experimentieren und lernen zu können, erkunde ich Grafikprogrammierung im Browser – das flexible JavaScript und die dynamische Natur des Webs bieten hierfür die perfekte Umgebung. Doch worum handelt es sich bei WebGL? WebGL bietet eine Schnittstelle zur Grafikkarte, in der Version 1.0 gleicht der Standard OpenGL ES (2.0), einer reduzierten Version von OpenGL, die besonders auf Smartphones Verwendung findet. Im Grunde kann ich alles, was ich anhand von WebGL erlerne auf OpenGL übertragen.
Zutaten
Um WebGL nutzen zu können, braucht es folgendes:
<canvas>: muss im HTML-Dokument existieren, bestenfalls mit ID versehen- Geometrie-Daten: eine Liste aus Koordinaten, die Eckpunkte von Dreiecken beschreiben, welche wiederum ein oder mehrere Objekte bilden
- Farb-Daten: auf die Geometrie-Daten abgestimmte RGB-Werte
- Shader-Code: Programme, die für jedes Pixel im Canvas-Element einzeln berechnen, in welcher Farbe es dargestellt werden soll
- JavaScript: bringt die einzelnen Komponenten miteinander in Verbindung und bestimmt, wann was gerendert wird
The Magic
Grob zusammengefasst, ist das JavaScript für folgende Schritte zuständig:
- Canvas-Element finden und WebGL initiieren
- Shader-Programm erstellen
- Shader-Code auslesen, kompilieren und mit Shader-Programm verlinken
- Buffer für Geometrie- & Farbdaten kreieren
- Buffer füllen und an Grafikkarte schicken
- Shader-Programm mitteilen, wo es nötige Daten findet
- zeichnen
Frameworks
Die oben angeführte Liste manifestiert sich als mehrere hundert Zeilen Code; das liegt daran, dass WebGL kleinteilige, exakte Instruktionen fordert – viele wiederholen sich mehrmals in ähnlicher Form. In der Praxis schlägt sich kaum jemand mit rohem WebGL herum, die meisten greifen auf Frameworks zurück, die repetitive, mühselige Arbeitsschritte übernehmen – auch manche Spiele-Engines können für’s Web exportieren.
Warum tue ich mir dann den Aufwand an, WebGL/OpenGL von Grund auf zu lernen? Um halbwegs effizient mit WebGL arbeiten zu können, fasse ich Arbeitsschritte mittels Objekten und Funktionen zusammen – ich bastle mir praktisch mein eigenes Framework. Womöglich greife ich schlussendlich dennoch auf eine bestehende Bibliothek wie three.js zurück – die ich dann effektiver nutzen kann.
