zurück zum Artikel

WebGL-Grafikentwicklung im Browser

WebGL setzt sich zunehmend als plattformübergreifender Standard für die hardwarebeschleunigte Grafikberechnung und -wiedergabe im Browser durch. Mozillas Firefox und Googles Chrome unterstützen die Technik und auch für Microsofts Internet Explorer gibt es einen Ansatz, die OpenGL-Schnittstellen auf Microsofts DirectX-API abzubilden [1]. Wer selbst mit WebGL experimentieren möchte, kann sich jetzt im WebGL Playground [2] austoben – die Seite bietet einen Online-Editor für WebGL-Skripte, der Code kann "on-the-fly" ausgeführt und noch auf der gleichen Seite in Aktion getestet werden.

Die von Krystian Samp entwickelte Plattform fasst den Editor und das Ausgabefenster auf einer Seite zusammen, Entwickler brauchen sich nicht um das sonst übliche Paket aus HTML-, CSS-, JavaScript und GLSL-Dateien kümmern. Die Seite unterstützt JavaScript-Code und GLSL-Vertex-/Fragment-Shader, zudem stellt das System verschiedene JavaScript-Bibliotheken wie jQuery [3] oder auch three.js [4] zur Verfügung. Eine ausführliche Dokumentation [5] liefert hier weitere Details.

Um externe Ressourcen wie Bilder oder 3D-Modelle trotz der Same-Origin-Policy [6] laden zu können – das Sicherheitskonzept beschränkt für serverseitiges JavaScript den Zugriff auf externe Datenquellen – empfiehlt Samp den Einsatz von CORS (Cross-Origin Resource Sharing [7], wird nicht von allen Browsern unterstützt) oder den Umweg über die Einbindung externer JavaScript-Dateien (die dann statt Code die entsprechenden Daten enthalten). Der WebGL playground stellt zudem eigene Dateien bereit, die für Tests genutzt werden können.

Screenshot: WebGL-Demo

Dynamische Wellenmuster, im WebGL playground im Browser entwickelt

(Bild: webglplayground.net, Beispiel von Felix Woitzel)

Läuft der eigene Programmcode zufriedenstellend, kann er als Projekt unter webglplayground.com gespeichert werden. In einer Edit-Version kann man seinen Code zur Weiterverarbeitung teilen, eine Stand-alone-Version genügt zum Betrachten und über eine Embed-Version kann das erstellte WebGL-Projekt auch in eigene Seiten eingebunden werden. (rl [8])


URL dieses Artikels:
http://www.heise.de/-1391322

Links in diesem Artikel:
[1] https://www.heise.de/meldung/Googles-Grafiksystem-ANGLE-fuer-OpenGL-ES-2-0-zertifiziert-1389904.html
[2] http://webglplayground.net/
[3] http://jquery.com/
[4] https://github.com/mrdoob/three.js/
[5] http://webglplayground.net//documentation
[6] http://de.wikipedia.org/wiki/Same-Origin-Policy
[7] http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing
[8] mailto:rl@ix.de