3D-Animation mit WebGL

Dieser Post zeigt wie man im Browser eine 3D-Animation mit WebGL programmieren kann. WebGL ist eine Mischung zwischen JavaScript und OpenGL. Der Vorteil davon ist, dass die Berechnung der Bildbearbeitung auf der Grafikkarte passiert und dadurch performanter ist. Weil WebGL eine relativ neue Technologie ist, gibt es auch einige Einschränkungen, welche beachtet werden müssen:

• WebGL läuft nur auf Browsern, welche HTML5 unterstützen
• Im IE ist WebGL nicht implementiert, es gibt jedoch ein kostenpflichtiges Plugin (http://iewebgl.com/) um dieses Problem zu beheben
• Auf dem Client ist eine Grafikkarte die OpenGL unterstützt erforderlich

Wir programmieren einen 3D-Würfel mit einem Logo, welcher mittels der Maus um sämtliche Achsen gedreht werden kann. Das Resultat kann hier betrachtet werden. Im folgenden werden einige Aspekte angeschaut, Details können dem Blog Learning WebGL entnommen werden.

Shaders

Shader sind Miniprogramme, welche direkt auf der Grafikkarte ausgeführt werden um eine Grafik zu berechnen. Für jede WebGL Grafik gibt es zwei Shaders, ein Vertex-Shader und ein Fragment-Shader, welche in der Sprache GLSL geschrieben werden. Um Berechnungen durchzuführen wird als erstes der Vertex-Shader aufgerufen. In diesem werden die einzelnen Koordinaten (Vertices) mit einer Matrize multipliziert um die Positionen einer 3D-Grafik in Pixel zu berechnen. Der Output dieser Berechnung wird dem Fragment-Shader übergeben, welcher die einzelnen Punkte linear interpoliert um die 3D-Grafik als Ganzes darzustellen. Dieser Abschnitt ist keine Definition, sondern beschreibt nur den Ablauf des Renderings auf einem sehr abstrakten Level!

Vertex

Vertex oder in Mehrzahl Vertices sind Koordinaten von einzelnen Punkten in einem 3D-Koordinatensystem mit einer X-, Y- und Z-Achse. Diese dienen dazu, Objekte auf einer Leinwand (Canvas) zu positionieren. Jeder 3D-Grafik besteht aus n Vertices, welche ihr aussehen beeinflussen.

Aufbau des Programms

In ein HTML-Dokument wird ein canvas eingebettet, welches seit HTML5 zum Funktionsumfang gehört. Deshalb muss der Browser HTML5 unterstützen um WebGL-Objekte darstellen zu können.

Beim laden der Seite wird die JavaScript-Funktion webGLStart aufgerufen, welche dafür verantwortlich ist, dass das canvas mit der 3D-Grafik angezeigt wird. In dieser Funktion werden nacheinander die Funktionen initGL, initShaders, initBuffers, initTextures und tick aufgerufen.

Die Funktion initGL überprüft ob WebGL auf dem Client unterstützt wird und füllt im Erfolgsfall das GL-Objekt ab. In der Funktion initShaders werden die Shaders kompiliert und an das GL-Objekt angehängt. In initBuffers werden die Koordinaten für das Objekt in ArrayBuffers gefüllt und dem GL-Objekt angehängt. Dasselbe geschieht in initTextures mit den Textures. Textures sind Bilder, welche auf die 3D-Grafik gelegt werden.

Die tick-Funktion wird in einer Endlosschleife (requestAnimFrame) aufgerufen und zeichnet die Grafik mittels drawScene neu auf den Bildschirm.