2ndredBlog

< canvas id="WebGL" width="500" height="500" >< /canvas >

Grafiken im Web waren bisher immer relativ statisch, wollte man wirklich aufwendige Animationen erstellen, so musste man auf Flash zurückgreifen.
Mit HTML 5 wurde jedoch ein neues Element eingeführt, das Abhilfe verspricht – Canvas. Canvas stellt im Prinzip eine Zeichenfläche dar, auf der sich dynamisch Inhalte rendern und manipulieren lassen. Auf dieser Zeichenfläche kann man mit Hilfe von Javascript Bilder erzeugen, Formen zeichnen und selbige animieren.
Damit lassen sich wunderbar interaktive Grafiken erstellen, doch richtig spannend wird es erst, wenn man noch WebGL ins Spiel bringt.

WebGL basiert (wie der Name vermuten lässt) auf OpenGL und ermöglicht hardwarebeschleunigte 3D-Grafiken im Web-Browser. Auch hierbei verwendet man Größtenteils Javascript um diese zu erzeugen, jedoch unterstützen bereits einige 3D-Programme den Export als WebGL. Was sich damit machen lässt, kann man auf den vielen Demo-Seiten im Web bewundern.

Die Beispiele reichen von Kamerafahrten durch on-the-fly gerenderte Landschaften inklusive dynamischer Schatten und Reflexionen, über 3D-Spiele (auch Portierungen von alten Klassikern finden sich darunter), bis hin zu aufwendigen Interfaces und Animationen. Aber am besten schaut man sich das alles einfach selbst an. Die passenden Links dazu gibt es wie immer am Ende.

Apropos testen. Wie bei jedem neuen, coolen, innovativen Feature mag Microsoft mal wieder nicht mitmachen. Canvas wird zwar seit Version 9 des Internet Explorers unterstützt aber WebGL lässt sich selbst im IE 10 nur auf Umwegen darstellen. Zum Testen sollte man also auf Firefox, Chrome, Opera oder Safari zurückgreifen, wobei nach meinen Erfahrungen Chrome und Opera dabei die beste Performance liefern. Genug Theorie, schaut einfach selbst:

Mozilla Demo Studio
https://developer.mozilla.org/de/demos/

Chrome Experiments
http://www.chromeexperiments.com/

Für alle die direkt selbst entwickeln wollen, hier ein deutsches Tutorial:
http://www.peter-strohm.de/webgl/index.php