Plattformunabhängig Grafik und 3-D programmieren mit HTML 5

Die Tiefe des Raumes

Schon vor Jahren gab es mit VRML den Versuch, interaktive 3-D-Szenen in HTML-Seiten einzubetten. Ihm war wenig Erfolg beschieden, kein Browser unterstützte die 3-D-Modellierungssprache nativ. Viel besser sieht es heute für Web GL [17] aus, einem auf Open GL ES 2.0 basierenden 3-D-API. Der Browser erhält damit direkten Zugriff auf die Hardwarebeschleunigung der Grafikkarte.

Aktuelle Browser, ausgenommen der Internet Explorer, unterstützen es bereits. Da Microsoft angeblich Bedenken bezüglich der Sicherheit beim Freigeben der Hardware für einen Zugriff aus dem Internet plagen [18], ist Unterstützung aus Redmond auch in Zukunft nicht zu erwarten (Abbildung 7).

Abbildung 7: Ein Vorbote für Microsofts Zukunft im Web? Die HTML-5-Spieleseite Tubagames [19] sagt wegen fehlendem Web-GL-Support Nein zum Internet Explorer.

Web GL klinkt sich in den HTML-Canvas ein. Wer ihn einsetzen will, der ruft »canvas.getContext();« mit dem Parameter »webgl« auf. Zurzeit müssen Entwickler allerdings noch damit rechnen, dass der Browser stattdessen Bezeichnungen wie »experimental-webgl« , »moz-webgl« und »webkit-3d« erwartet und diese Varianten erst durchtestet, bis »getContext()« ein gültiges Objekt zurückgibt.

Web GL beruht auf 3-D-Technik der 80er Jahre

Web GL ermöglicht direkten Zugriff auf Open-GL-Shader aus Javascript. Praktisch alles, was sich in Open GL programmieren lässt, zaubern in der 3-D-Programierung versierte Entwickler damit ohne Plugin in das Browserfenster. Ausgenommen sind numerisch aufwändige physikalische Berechnungen, wie sie aktuelle Spiele-Engines oder Blender beherrschen. Als hochperformante Rechenmaschine für Vektoren und Matrizen eignet sich der Javascript-Interpreter nämlich trotz großer Fortschritte in letzter Zeit noch nicht.

Manchen Webentwicklern fällt der Einstieg in die Web-GL-Programmierung wegen des Low-Level-Ansatzes leider schwer. Das Designprinzip von Web GL weicht stark von den heute üblichen objektorientierten APIs ab – kein Wunder, die Wurzeln von Open GL liegen in den 80er Jahren. Doch es gibt bereits einige Bibliotheken, die in der C- oder GL-Shader-Programmierung unerfahrenen Entwicklern auf die Sprünge helfen. Einen ausgereiften Eindruck machen GLGE [20] und Scene JS [21].

Das einfache Beispiel in den Listings 3 und 4 definiert den Würfel aus Abbildung 8 mit Hilfe von GLGE. Es besteht aus zwei Teilen: einer HTML-Datei inklusive Javascript-Code und einer XML-Datei, die die Elemente der räumlichen Szene definiert. Die HTML-Datei (Listing 3) enthält ein »canvas« -Element und bindet die GLGE-Bibliothek ein, deren »load()« -Methode nach Initialisierung des GLGE-Objekts die XML-Szenendatei lädt (Zeilen 5 bis 12). Die nach dem Laden der Szene aufgerufene Funktion von Zeile 14 bis 20 erledigt die eigentliche Arbeit. Zunächst initialisiert sie den Canvas als Renderer und die 3-D-Szene.

Listing 3

Web-GL-HTML-Code

01 <!DOCTYPE HTML>
02 <html>
03     <head></head>
04     <body>
05         <canvas id="canvas" width="300" height="300"></canvas>
06         <script type="text/javascript" src="glge-compiled-min.js"></script>
07
08         <script type="text/javascript">
09             var canvasElement = document.getElementById("canvas");
10             var doc = new GLGE.Document();
11
12             doc.load("defs.xml");
13
14             doc.onLoad = function() {
15                 var renderer = new GLGE.Renderer(canvasElement);
16                 var scene = new GLGE.Scene();
17                 scene = doc.getElement("mainScene");
18                 renderer.setScene(scene);
19                 renderer.render();
20             }
21         </script>
22     </body>
23 </html>

Abbildung 8: Der Browser als Renderer: Web GL verknüpft Open GL ES 2.0 und Javascript.

Die Variable »doc« enthält bereits die Szenendefinition als per DOM parsbares XML-Dokument (Listing 4). Darin ist eine Szenendefition mit der ID »mainScene« enthalten, die die Zeilen 16 und 17 an den Renderer ankoppeln. Nun fehlt nur noch der Aufruf von »render()« . Im Browser erscheint ein natürlich ausgeleuchteter Würfel.

Listing 4

Szenendefinition für Abbildung 8

01 <?xml version="1.0"?>
02 <glge>
03     <mesh id="cube">
04         <positions>
05              1,  1, 1,   1,  1, -1,   -1,  1, -1,   1,  1, 1,   -1,  1, -1,   -1,  1, 1,
06             -1, -1, -1,   -1, -1, 1,   -1,  1, 1,   -1, -1, -1,   -1,  1, 1,   -1,  1, -1,
07              1, -1, -1,   1, -1, 1,   -1, -1, -1, 1, -1, 1,   -1, -1, 1,   -1, -1, -1,
08              1,  1, -1,   1,  1, 1,   1, -1, -1,   1,  1, 1,   1, -1, 1,   1, -1, -1,
09              1,  1, 1,   -1,  1, 1,   1, -1, 1,   -1,  1, 1,   -1, -1, 1,   1, -1, 1,
10              1,  1, -1,   1, -1, -1,   -1, -1, -1,   1,  1, -1,   -1, -1, -1,   -1,  1, -1
11         </positions>
12     </mesh>
13
14     <material id="cubeMat" specular="1" color="#8822bb" />
15     <camera id="mainCamera" />
16     <scene id="mainScene" camera="#mainCamera" ambient_color="#fff">
17         <object id="cube" mesh="#cube" loc_x="0.5" loc_y="-0.1" loc_z="-10"
18                 rot_x="0.8" rot_y="0.9" rot_z="-0.1"  material="#cubeMat" />
19         <light id="mainlight" loc_x="20" loc_y="16g" loc_z="1" rot_x="-1.5" color="#ff8" type="L_POINT" />
20     </scene>
21
22 </glge>

Die Szenendefinition kombiniert die räumlichen Koordinaten von sechsmal sechs Dreiecken zu einem 3-D-Gitternetz (Mesh, Zeilen 5 bis 10). Das Dreieck ist die Grundform jedes 3-D-Programms, auch von GLGE. Die Koordinaten sind so gewählt, dass ein Würfel mit der Kantenlänge 1 entsteht. Ein Mesh-Objekt braucht ein Material, das seine Oberflächeneigenschaften festlegt. Im Beispiel sind bloß die Stärke der Spiegelung und die Farbe definiert (Zeile 16). Das »scene« -Element platziert Mesh, Kamera und ein Licht, ohne das nichts erkennbar wäre.