© Studio Porto Sabbia,123RF

Webanwendungen gelingt der Spagat, bei dem ein Programm unverändert auf allen Plattformen läuft. Mit HTML  5 schließen die Browser-Apps funktional zu den Desktop-Toolkits auf. Das gelingt vor allem dank der Leinwand Canvas, des Vektorformats SVG, der 3-D-Funktionen von Web GL und Werkzeugen wie Raphaël.

HTML 5 verhilft dem Browser zu Zeichenkünsten, die bisher Desktop-Toolkits wie Qt oder Cairo vorbehalten waren. Ein anschauliches Beispiel dafür findet sich auf der Webseite [1] des Entwicklers Marius Watz: eine sich permanent wandelnde Canvas-Grafik aus bunten Luftschlangen. Simples Javascript zeichnet nach einem Mausklick immer neue Ornamente. Mit dem »canvas« -HTML-Element, auf dem diese grafische Spielerei basiert, steht Webdesignern endlich eine interaktive Freiform-Zeichenfläche zur Verfügung – und das auf nahezu jeder Plattform, wie die Aufstellung in Tabelle 2 zeigt.

Frühreif mit XML und SVG

Ähnliche Effekte lassen sich mit per Javascript manipulierten SVG-Grafiken erzielen. In HTML 5 dürfen Entwickler ihren XML-Code direkt in das HTML-Markup einbetten. Dies erleichtert den Zugriff auf einzelne Elemente über die DOM-Schnittstelle des Browsers. Ein Beispiel, dessen Gestaltungsprinzip sich auch für anschauliche Bedienungsanleitungen nutzen lässt, ist die animierte Explosionszeichnung der Trajanssäule des Wikimedia-Benutzers “Hk kng” (Abbildung 1, [2]).

Abbildung 1: SVG-Grafiken taugen nicht nur für Stillleben. Auch per Javascript animierte SVGs wie diese per Mausklick zerlegbare antike Säule fallen Webentwicklern dank des vertrauten Zugriffs über die DOM-Schnittstelle nicht schwer.

Aus der Reihe tanzt nur der Internet Explorer, der den Canvas- und SVG-Support erst im März 2011 mit der aktuellen Version 9 nachliefert und für Version 10 weitere Nachbesserungen verspricht. Es gibt aber Javascript-Bibliotheken, die das Canvas-API und SVG-Elemente transparent in Microsofts proprietäre, bereits im Internet Explorer 6 verfügbaren Grafiksprache VML übersetzen [3].

Ein Silberstreif am Horizont ist in Sicht: Der auf Microsofts Build-Konferenz vorgestellte Internet Explorer 10 sowie die Apps-Landschaft für Windows 8 (geplant für 2012) setzen intensiv auf HTML 5. Geduld braucht auch, wer darauf wartet, dass der Standard endlich fertig wird. HTML 5 hat beim W3C den Status “Last Call”. Das ist vergleichbar mit einem Release Candidate. Zwar soll der Standard erst 2014 [4] fertig werden, doch an dem Canvas-API dürfte sich – nach den Erfahrungen der letzten Jahre zu schließen – nur noch wenig ändern.

SVG 1.1 ist seit Anfang 2003 standardisiert, das Einbetten à la HTML 5 beherrschen viele Browser allerdings erst seit Kurzem. Außerdem verstehen die wenigsten Browser den vollen Umfang des SVG-Standards [5].

Mobilität gefragt

SVG und Canvas sind nicht auf den PC beschränkt, die meisten Smartphone- und Tablet-Browser nutzen die gleichen Rendering Engines wie ihre großen Geschwister (Abbildung 2). Lediglich Opera Mini haben die Entwickler bewusst stark abgespeckt. Beim Android-Browser fehlt bis Version 3.0 der SVG-Support wegen seines Umfangs.

Abbildung 2: Viele mobile Browser bieten SVG- und Canvas-Support. Der native Android-Browser (links) versteht SVG allerdings erst ab Android-Version 3.

Anders sieht es unter Microsofts wenig erfolgreicher Plattform Windows Phone 7 aus: Der eingebaute Browser basiert auf dem Internet Explorer 7, der von den neuen Standards noch nichts weiß. Bisher sperrte die von Microsoft diktierte Beschränkung, Apps nur in nativen Microsoft-Techniken wie C# und Silverlight zuzulassen, alternative Browser aus. Erst das für diesen Herbst erwartete Windows Phone 7.5 soll hier mit einem neuen nativen Browser nachbessern. Der jüngst angekündigte, überraschende Schwenk Microsofts hin zu HTML 5 dürfte die Situation deutlich verbessern.

Auch wenn manche für den Desktop-Browser konzipierten Programme an zu geringen CPU-Ressourcen oder einem zu kleinen Bildschirm scheitern: Grundsätzlich laufen Canvas-Anwendungen und Javascript-Skripte, die SVG-Grafiken manipulieren, auch auf dem Handy ohne Anpassung.

Nachbesserungsbedarf besteht jedoch bei der Bedienung. Zwar funktionieren die »onclick« -Handler, die die Mausklicks auf Buttons einfangen, auch wenn ein Handy- oder Tablet-Benutzer mit dem Finger darauf tippt. Multitouch jedoch gelingt nur mit dem speziell dafür geschaffen Javascript-API [6].

Um den plattformübergreifenden Support von Canvas-2-D und SVG steht es also besser als bei jeder Desktop-Bibliothek: Die neuen grafischen Fähigkeiten von HTML sind unter Linux, Mac OS und Windows, Android-Smartphones und dem iPhone verfügbar (Tabelle 2). Entwickler dürfen bei allen Desktop-Browsern (außer dem Internet Explorer) inzwischen nativen Support erwarten. Workarounds [7] sorgen jedoch auch beim Sorgenkind der Webentwickler für Abwärtskompatibilität bis zu Version 6.

Malkasten

In den Canvas zeichnet Javascript in Echtzeit Linien, Ellipsen und Rechtecke sowie die aus Zeichenprogrammen bekannten Bézierkurven. Eine Ausfüllen-Funktion verpasst den Elementen eine Füllung, auch Farbverläufe und Schatteneffekte sind möglich. Der ganze Canvas lässt sich drehen, zoomen und verschieben.

Ein Canvas-Element besteht lediglich aus dem »canvas« -Tag. Seine Methode »getContext()« gibt in Javascript ein Objekt zurück, das die Zeichenbefehle als Methoden enthält:

var canvas = document.getElementById("Canvas-Element");
var ctx = canvas.getContext('2d');

Der 2-D-Kontext ist leicht zu meistern. Das in diesem Code erzeugte Canvas-»2d« -Objekt stellt Befehle für Zeichenmethoden zur Verfügung. Verständlich dokumentiert sind sie unter [8], der entsprechende W3C-Standard ist unter [9] zu finden.

Listing 1 enthält ein einfaches Beispiel für die wichtigsten Canvas-Methoden (Abbildung 2). Die Zeilen 6 und 7 laden eine Bilddatei in ein Javascript-Objekt. Da der weitere Code erst ablaufen darf, wenn das Bild vom Server geladen ist, hängt er vom »onload« -Event des HTML-Dokuments ab.

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
03   <head>
04     <script type="text/javascript">
05       //Image-Objekt
06       var rose = new Image();
07       rose.src="rose.png";
08       //erst ausführen, wenn das Bild geladen ist
09       window.onload = function(){
10         //Canvas-Kontext
11         var canvas  = document.getElementById("mycanvas");
12         var ctx = canvas.getContext('2d');
13
14         //Füllung, Umriss
15         ctx.fillStyle = "rgba(0,255,50,0.5)";
16         ctx.strokeStyle = "rgba(150,75,0,1)";
17
18         //Schatten
19         ctx.shadowOffsetX = 2;
20         ctx.shadowOffsetY = 3;
21         ctx.shadowBlur = 5;
22         ctx.shadowColor = "#888888"
23
24         //Rechteck
25         ctx.fillRect(50,50,125,125);
26         ctx.strokeRect(50,50,125,125);
27
28         //Pfad-Objekt zeichnen
29         ctx.beginPath();
30         ctx.moveTo(25, 25);
31         ctx.lineTo(105, 25);
32         ctx.arc(125, 25, 20, -Math.PI, 0, false)
33         ctx.lineTo(145, 125);
34         ctx.bezierCurveTo(80, 145, 105, 105, 25, 125)
35         ctx.closePath();
36
37         //Pfad-Objekt füllen
38         ctx.fillStyle = "rgba(255,255,50,0.5)";
39         ctx.fill();
40         ctx.stroke();
41
42         //Bitmap
43         ctx.fillStyle = "rgba(0, 0, 0, 1)";
44         ctx.drawImage(rose, 55, 55, 50, 50);
45       }
46     </script>
47   </head>
48   <body>
49     <canvas id="mycanvas" width="200" height="200"></canvas>
50   </body>
51 </html>

Pfade und Linien

Die Zeilen 11 bis 12 initialisieren einen 2-D-Canvas-Kontext, Zeilen 14 bis 15 setzen Füllung und Umriss für künftige Zeichenoperationen, 19 bis 22 Schatten-Offset, Unschärfe und Farbe. Die ersten Zeichenbefehle folgen in den Zeilen 25 und 26: ein gefülltes Rechteck und ein passender Umriss in derselben Größe. Die Zeilen 29 bis 35 zeichnen einen Pfad aus geraden Linien, einem Kreisbogen und einer Bézierkurve. Die ersten zwei Zeilen eröffnen den Pfad und setzen den Startpunkt. Dann folgen eine gerade Linie, ein Halbkreisbogen und eine weitere gerade Linie. Zu beachten ist, dass die »arc()« -Methode Start- und Endwinkel (vierter und fünfter Parameter) nicht als Winkel, sondern als Radiant interpretiert.

Die Bézierkurve bildet die Unterseite des ockerfarbenen Kastens. Die ersten vier Parameter beschreiben die x- und y-Koordinaten der so genannten Kontrollpunkte, die wie in einem Zeichenprogramm Krümmungsrichtung und -tiefe festlegen (Abbildung 3).

Abbildung 3: Krümmung nach Maß: Die beiden Kontrollpunkte einer Bézierkurve (rot markiert) tauchen in der Canvas-Funktion »bezierCurveTo()« ebenfalls als Parameter auf.

Effekte

Effektvolle Beispiele auf Canvas-Basis sind bei [10] zu finden. Sie beweisen, dass sich auf aktuellen Rechnern auch bei komplexen optischen Effekten noch Frame-Raten für fließende Animationen erzielen lassen. Weitere Javascript-Bibliotheken, die den Umgang mit dem Canvas erleichtern, nennt Tabelle 1.

Der HTML-Canvas gleicht einem Malprogramm wie Gimp: Wie in einer Bitmap-Grafik lassen sich Bildbereiche auswählen und verändern. Soll ein von anderen Objekten überdecktes Element verändert werden, so ist daher der ganze betroffene Bildausschnitt neu zu zeichnen.

Wer mit einem Vektorzeichenprogramm wie Inkscape vertraut ist, der weiß, dass dies dort einfacher geht: Alle gezeichneten Formen bleiben unabhängig von der Umgebung manipulierbar. Wer das Vektorprinzip dem Canvas-Malkasten vorzieht, realisiert es in HTML 5 über direkt in den Seitencode eingebundene SVG-Grafiken. Das vom W3C standardisierte Dateiformat [11] ist auch deshalb von Vorteil, weil Programme wie Inkscape es als Standard benutzen.

Bewegende Künste

Mit statischen Grafiken sind die Möglichkeiten von SVG aber noch lange nicht ausgeschöpft: Der Browser kann das XML-Markup mit der eingebauten DOM-Schnittstelle von Javascript aus ansprechen – genau wie die Elemente einer gewöhnlichen Webseite. So lassen sich SVG-Grafiken im Browser interaktiv gestalten und animieren. Wie in HTML-Seiten legen Stylesheets die Attribute der Zeichnungselemente fest.

Ältere Browser (vergleiche Tabelle 2) zeigen SVG-Grafiken nur an, wenn sie über den »object« -Tag als externe Dateien eingebunden sind. Auch Javascript-Code für Manipulation zur Laufzeit muss in dieser externen Datei stehen, was die Entwicklung verkompliziert, die interaktiven Fähigkeiten aber nicht beschränkt.

Mit der SVG-1.1-Spezifikation hat das W3C einen enorm leistungsfähigen Standard für Vektorgrafiken geschaffen, der Adobes PDF-Format mit seinen Effektfiltern stellenweise überflügelt: Damit lassen sich realistische Schlagschatten, aber auch viele Licht- und Überblendungseffekte erzeugen, bei denen PDF auf eingebettete Bitmaps mit fester Auflösung angewiesen bleibt.

Als erste Anlaufstelle für Einsteiger eignet sich [12], etwas mehr in die Tiefe geht [13]. Tabelle 3 zeigt eine Liste der Grundfunktionen.

Helfer gefragt

Allerdings funktionieren die inzwischen beinahe unverzichtbaren Helfer beim Arbeiten mit der DOM-Schnittstelle und Javascript-Bibliotheken wie Jquery oder YUI, aber mit SVG nur begrenzt. Zwar klappt das Ansprechen einzelner Elemente, doch die SVG-Attribute sind nicht wie in HTML auf Strings beschränkt. Sie weisen eine Objektstruktur auf, mit der die für HTML konzipierten Javascript-Bibliotheken nichts anfangen können.

Für Jquery gibt es ein SVG-Plugin [15], das leider eine leichte Modifikation der Jquery-Basisbibliothek voraussetzt. Dafür lässt sich damit der XML-Code einer SVG-Grafik so verarbeiten, wie Webentwickler es von Jquery kennen.

Dass SVG im Internet noch immer eine nur geringe Rolle spielt, liegt vor allem an Microsoft: Erst der Internet Explorer 9 weist einen zudem noch recht lückenhaften SVG-Support auf (Abbildung 4). Zwei Workarounds sind verfügbar: Die von Google entwickelte Javascript-Bibliothek SVG Web verwandelt SVG-Grafiken in Flash-Objekte.

Abbildung 4: Mit dem Internet Explorer 9 (links) beginnt der SVG-Support bei Microsoft mit zehn Jahren Verspätung. Mangels Filterunterstützung fallen Grafiken – im Vergleich zu Firefox (rechts) – allerdings ein wenig schlicht aus. Besser soll das erst mit dem IE 10 werden.

Die ebenfalls in Javascript umgesetzte Zeichenbibliothek Rafaël [16] arbeitet nicht mit fertigen SVG-Dateien. Sie stellt Zeichenbefehle bereit, die sie je nach Browser entweder in SVG- oder dem vom Internet Explorer unterstützten proprietären VML umsetzt.

Das API von Rafaël lehnt sich an SVG an. Wer es beherrscht, kommt mit der Bibliothek sofort klar, der Einsteiger sogar schneller als beim direkten Umgang mit SVG: Rafaël stellt Hilfsfunktionen für Animationen und den Zugriff auf SVG-Elemente über die DOM-Schnittstelle des Browsers zur Verfügung. Das wichtigste Plus ist aber die Kompatibilität mit dem Internet Explorer 6 bis 9.

Zeichenkünstler Rafaël

Das Beispiel in Abbildung 5 zeigt die grundlegenden Fähigkeiten der Zeichenbibliothek und demonstriert, wie sich Inkscape als Hilfsmittel nutzen lässt. Die ersten Zeilen des Listings 2 enthalten den HTML-Kopf und binden Rafaël und Jquery ein. Letzteres ist für die Arbeit mit Rafaël nicht unbedingt nötig, doch Jquery erleichtert das Einrichten eines auf allen Browsern lauffähigen Event-Handlers (Zeile 54) und sorgt dafür, dass der Javascript-Code erst abläuft, wenn die DOM-Schnittstelle bereit ist (»$« -Funktion in Zeile 8).

01 <!DOCTYPE HTML>
02 <html>
03   <head>
04     <script type="text/javascript" src="raphael-min.js"></script>
05     <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
06     <script type="text/javascript">
07        //JQuery-Funktion zur Ausführung nach laden des Dokuments
08        $(function(){
09           //Farben, zwischen denen der Ball wechselt
10           var colors = ["#000", "#800", "#f00", "#f80", "#ff0"];
11           //Array-Zähler
12           var counter = 0, zoom = 1;
13
14           //Zeichenfläche 200x200 bei Position 50,50
15           var paper = Raphael(50, 50, 200, 200);
16           //Kreis an Position 40, 60, Radius 10
17           var circle = paper.circle(40, 60, 10);
18           //aus Inkscape kopierte Pfad-Definition
19           var path = paper.path("m 41.416257,61.90761 c 17.95308,-27.77874 " +
20               "56.06346,0.53741 56.06346,0.53741 0,0 38.055253,-28.20692 " +
21               "55.982363,-0.46836 34.96991,54.10886 -55.982363,112.02335 " +
22               "-55.982363,112.02335 0,0 -91.0840396,-57.90515 -56.06346,-112.0924 z");
23           //Rot für Füllung und Umriss
24           path.attr("fill", "#f00");
25           path.attr("stroke", "#f00");
26           //Text in der Mitte der Herzform
27           var text = paper.text(100, 100, "Please\nclick me!");
28           //Textfarbe Gelb
29           text.attr("fill", "#ff0");
30
31           //Animationen in Gang setzen
32           animateCircle();
33           colorChange();
34
35           //animiere den Ball alle 2000 ms neu
36           function animateCircle(){
37               //Rafaël-Methode für das Bewegen das Balls entlang path
38               circle.animateAlong(path, 2000, false);
39               //Timer neu setzen
40               setTimeout(animateCircle, 2000);
41           }
42
43           //ändere Farbe des Balls in zufälligen Zeitabständen
44           function colorChange(){
45               //Rafaël-Funktion verändert Element-Attribute
46               circle.attr("fill", colors[counter]);
47               //Elemente von Array colors hochzählen, ggf. zurück zu 0
48               counter = (counter < 5) ? ++counter : 0;
49               //Timer neu setzen
50               setTimeout(colorChange, Math.random()*50);
51           }
52
53           //Jquery-Click-Handler für das Herz
54           $(path.node).click(function(){
55               //> 1 -> mache kleiner und umgekehrt
56               zoom = (zoom > 0.95) ?
57                   zoom - 0.1:
58                   zoom + 0.1;
59               //animiere Herz-Skalierung mit Typ "bounce" (hin und her)
60               path.animate({scale:zoom}, 500, "bounce")
61           });
62        });
63     </script>
64   </head>
65   <body></body>
66 </html>

Abbildung 5: Das Open-Source-Zeichenprogramm Inkscape arbeitet mit SVG und zeigt den erzeugten Code in seinem eingebauten XML-Editor.

Ein Herz genommen

Zeile 15 initialisiert die Rafaël-Zeichenfläche, Zeile 17 zeichnet den kleinen Kreis (Abbildung 6). Zum Zeichnen kommen stets Methoden des Zeichenflächenobjekts »paper« zum Einsatz. Die Zeilen 19 bis 22 erzeugt das Herz aus mehreren Bézierkurven-Segmenten. Die Pfad-Definition folgt dabei dem SVG-Standard, der sich nicht gerade durch gute Lesbarkeit auszeichnet.

Abbildung 6: Rafaël kommt auch mit dem Uralt-Browser Internet Explorer 6 zurecht. Ohne dass der Entwickler davon etwas bemerkt, setzt Rafaël Zeichenbefehle und Animationen dann mit der Microsoft-spezifischen Zeichensprache VML um.

In der Praxis stört das kaum: Die Zahlen- und Zeichenfolge lässt sich leicht mit Inkscape erzeugen. Wer dort die Herzform mit dem Bézierkurven-Werkzeug zeichnet, den Pfad markiert und »Bearbeiten | XML-Editor« auswählt, muss nur noch den Inhalt des ersten Attributs »d« als Parameter für »path()« kopieren.

Die Zeilen 24 und 25 setzen die Pfad-Attribute »fill« und »stroke« (Füllung und Umriss) auf »#ff0« , den hexadezimalen Farbcode für Rot. Zeilen 27 und 29 schreiben Text in die Herzform und färben ihn gelb. Interessant wird es bei den Animationsfunktionen (Zeilen 36 bis 51), die die folgenden zwei Zeilen zur Initialisierung einmal aufrufen.

Immer in Bewegung

Die Anweisung »animateCircle()« ab Zeile 36 sorgt dafür, dass der kleine Ball sich pausenlos entlang der Kante der Herzform bewegt. Dazu kommt die Rafaël-Methode »animateAlong()« zum Einsatz. Sie erhält als Parameter mit »(path, 2000, false)« den bereits gezeichneten Pfad, die Animationsdauer und »false« , um die Rotation des animierten Objekts abzuschalten, die auf den Kreis keine sichtbaren Auswirkungen hätte. Zeile 40 setzt einen Javascript-Timeout, der die Funktion nach Ende der Animation erneut aufruft.

Die Funktion »colorChange()« zählt die fünf Elemente des Array »color« durch und weist der Füllfarbe des Kreises ihren Wert zu, und »setTimeout()« in Zeile 50 sorgt dann dafür, dass die Funktion in zufälligen Zeitintervallen immer wieder abläuft.

Bleibt noch der Klick-Handler für das Herz. Er nutzt die Event-Handler-Abstraktion von Jquery, damit er auch im Internet Explorer 6 funktioniert. Rafaël entfaltet seine Zeichenkünste selbst in diesem Browser-Urahn ohne Einschränkung (Abbildung 6). Bei einem Mausklick auf das Herz weist er diesem einen Skalierungsfaktor zu, der um den Betrag »0.1« um den ursprünglichen Wert »1« pendelt.

Der Code zeigt, dass Rafaël viele SVG-Attribute nicht nur auf einen Schlag verändert, sondern auch gleitend animiert. Es kommt die »animate()« -Methode zum Einsatz, die ein Objekt aus Attribut-Wertepaaren, die Animationsdauer sowie den Animationstyp als Parameter erwartet. »bounce« bewirkt, auf die Skalierung angewandt, einen Wackelpudding-Effekt.

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).

[19] sagt wegen fehlendem Web-GL-Support Nein zum Internet Explorer.” width=”300″ height=”284″ /> 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.

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.

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.

Bewegt und strahlend

Bereits das einfache Beispiel zeigt: Wer GLGE benutzt, muss sich nicht mit der Shader-Programmierung herumschlagen. Was noch nicht zum Vorschein kommt, ist der beeindruckende Leistungsumfang der Bibliothek: GLGE beherrscht Keyframe-basierte Animation, die für die Charakter-Animation auch ein Skelett-System bereitstellt.

Für realistische Ausleuchtung sorgen gerichtete Spot- und Punktlichter sowie Normalmapping, also das Interpolieren der Ausleuchtung zwischen den Mesh-Kacheln. Abbildung 9 zeigt das Environment-Mapping in Aktion. Wie im Beispiel lassen sich alle diese Features über ein objektorientiertes API und deklaratives XML ansprechen, Open-GL-Programmierung ist nicht erforderlich. Damit Entwickler auch die langen Matrizen für die Mesh-Definitionen (Listing 4, Zeilen 5 bis 10) nicht per Hand schreiben müssen, gibt es zwei Export-Plugins für den 3-D-Editor Blender, die leider beide im Test mit der aktuellen Blender-2.5-Version nicht funktionierten.

Abbildung 9: Glänzende Oberflächen spiegeln in mit GLGE gestalteten Szenen die Umgebung wider.

Mehr Licht als Schatten

Wer sich die jüngere Entwicklung von HTML ansieht, erblickt mehr Licht als Schatten: Mit Canvas und SVG, das – spät genug – nun auch der Internet Explorer unterstützt, gewinnt die Internet-Auszeichnungssprache beeindruckende Möglichkeiten für anspruchsvolle Weboberflächen. Um die Standardkonformität der Browser steht es bei Canvas und SVG viel besser als zu Zeiten des Browserkriegs: Was die aktuell verbreiteten Browser umsetzen, das folgt so gut wie immer den Spezifikationen.