WebGL - Die Zukunft des Internets

WebGL (Web Graphics Library) ist Momentan eine der spannendsten Innovationen im Webbereich.
Und sicher ein Thema wo sich Webmaster und Webpublisher bald ein wenig auskennen müssen. Darum hier eine Übersicht über WebGL, mit allen Informationen und vielen Links zu Tutorials, Beispielen und Ressourcen.

Was ist WebGL?

Es ist eine 3D Technologie zur Anzeige von hardwarebeschleunigten 3D-Graphiken. Hardwarebeschleunigt heisst, der Browser greift neu direkt auf die Rechenleistung der Graphikkarte zu um komplexe 3D-Inhalte anzuzeigen. Damit wird es möglich, rechenintensive Berechnungen zur Darstellung von dreidimensionalen Objekten, wie man schon aus Spielen wie den beliebten Ego Shootern kennt, auch im Browser anzuzeigen. Damit haben Webseitenbetreiber nun eine ganze Palette von neuen Möglichkeiten ihre Webseite zu gestalten.
Auf der Code Ebene funktioniert das ganze mit HTML5 Elementen. Es wird JavaScript benutzt um auf Funktionen einer angepassten Version von OpenGL ES (Open Graphics Library for Embedded Systems) zuzugreifen.


Wer hat es Entwickelt, und warum gibt es WebGL eigentlich?

WebGL wurde von der Kronos Group die in San Francisco beheimatet ist entwickelt. Die Version 1.0 der WebGL Spezifikation erschien im März 2011. Die Idee aber entstand schon im Jahre 2009 als sich verschiedene Firmen, darunter Browser- und Hardware Hersteller wie NVIDIA, Google, AMD, Opera, Mozilla, etc., zusammengeschlossen haben um einen gemeinsamen offenen Standard zu entwickeln. Der Fortschritt in der Hardwareentwicklung, und der Mangel an einem freien Standard bei 3D-Inhalten und Spielen im Browser, gaben den Ausschlag für diese Zusammenarbeit. Bisher war es nur mit proprietärer Software wie z.B.Adobe Flash möglich 3D-Inhalte im Browser anzuzeigen, und das wollte man ändern.


Welche Browser unterstützen WebGL?

WebGL wird im Moment von allen grösseren Browsern also von Apple Safari (WebKit), Google Chrome, Mozilla Firefox und Opera unterstützt. Einzig beim Internet Explorer gibt es erst einen inoffiziellen Workaround und noch keine Pläne diesen Standard ins Programm aufzunehmen. Microsoft setzt beim Internet Explorer eher auf DirektX für 3D Graphiken, und äussert bedenken wegen der Sicherheit.
Es ist aber fraglich, ob sich Microsoft noch lange diesem Standard wiedersetzten kann.

Hast du schon WebGL? Teste es hier:
http://get.webgl.org/


WebGL für Anfänger

Auf der Seite WebGL Playground kann man seine ersten Versuche mit WebGL machen. Diese Plattform bietet Online ein ganzes HTML5-Skelett aus HTML, CSS und JS schon an, so das man direkt im Browser WebGL Objekte entwickeln und den Code laufen lassen kann. Auch bietet die Seite neben einer schönen Dokumentation auch viele Beispiele die man sich anschauen und laufen lassen kann. Sicher eine sehr nützliche Seite für Anfänger.


Beispiele mit WebGL
Hier einige Beispiele die mögliche Anwendungen der WebGL Bibliothek zeigen. Man sieht das Potential von WebGL, obwohl es erst in einem frühen Stadium ist.

Ein lustiges Spiel mit Google Maps das mit WebGL läuft:

http://www.playmapscube.com/

http://www.ahoi.in/en/2012/supershape-js/

http://lab.aerotwist.com/webgl/

http://www.waterunderground.info/

Virtualisierung von Schweizer Adressen
http://29a.ch/sandbox/2011/addresscloud/

Fazit

Eine sehr interessante Technik die sehr viel Potential hat. Man kann sich z.B. dreidimensionale Webseiten vorstellen wo man mit einem Avatar durchlaufen kann. So haben User einen anderen Zugang zu den Inhalten als bei "normalen" Webseiten. Man stelle sich einen virtuellen Einkaufsbummel durch ein 3D Einkaufszentrum mit 3D Regalen vor, oder einen Museums-Rundgang, eine virtuelle Reise, etc...
Auch die Spiele-Industrie wird enorm davon profitieren. Spiele mit ausgeklügelten 3D-Graphiken wie man sie nur von Desktop Spielen kennt kann man nun auch im Browser spielen, und das ohne etwas zu installieren. Das wird die Spielbegeisterten sicher freuen, und durch die Einfachheit noch mehr Spieler anziehen. Und auch die Hersteller der Spiele werden profitieren, den die haben dann weniger Copyright Probleme, da der Inhalt nur flüchtig im Browser, oder besser gesagt in der Cloud läuft.
Allerdings muss man dazu auch die richtige, genügend Leistungsfähige Hardware haben sonst funktioniert es auch im Browser nicht.
Der wahrscheinlich grösste Vorteil von WebGL ist, das man nun Platformübergreifend, und auch für Mobile Geräte und Tablets, entwickeln kann und das unabhängig vom Betriebssystem. Chrome OS lässt grüssen.
Nur Microsoft scheint es wiederum vorzuziehen sein eigenes Süppchen im 3D-Bereich zu kochen und riskiert damit sich ins Abseits zu manövrieren.



Ressourcen und Links

https://www.khronos.org/registry/webgl/specs/1.0/ - Spezifikation
http://www.khronos.org/webgl/wiki/Tutorial - Offizielles Tutorial
http://aerotwist.com/tutorials/ - Sehr gutes WebGL Tutorial
http://webglplayground.net/documentation - WebGL Tutorial
https://developer.mozilla.org/de/WebGL - Sehr gute Mozilla Web GL Tutorials, auch auf Deutsch
http://www.chromeexperiments.com/webgl - Jede Menge Beispiele von WebGL
http://learningwebgl.com/blog/ - Jede Menge WebGL Tutorials
http://planet-webgl.org/ - Informationen und How to's
http://www.nihilogic.dk/labs/webgl_cheat_sheet/WebGL_Cheat_Sheet.htm - WebGL Cheat Sheet
http://de.wikipedia.org/wiki/WebGL - WebGL Wikipedia

Matrix Bibliotheken

• Sylvester, eine JavaScript Bibliothek für die Matrix Multiplikation
• mjs, etwas Ähnliches das speziell für WebGL entwickelt wurde.
• glMatrix, nochmals etwas Ähnliches aber sehr schnell.

 

WebGL Frameworks

• http://www.c3dl.org/ - C3DL ist eine JavaScript Bibliothek
• http://www.oak3d.com/ - Oak 3D ist eine einfach zu nutzende WebGL 3D Engine
• http://www.scenejs.com/ - SceneJS ist eine Szenen Graphik API basierend auf JSON
• http://www.ambiera.com/copperlicht/ - Copperlicht ist eine WebGL 3D Engine
• http://www.glge.org/ - GLGE JavaScript Bibliothek
• http://jax.thoughtsincomputation.com/ -  Jax WebGL Framework
• http://processingjs.org/- Processing ist ein Teil der Processing Visualization Language
• http://code.google.com/p/stormenginec/ - Stormenginec ist eine graphische 3D Bibliothek
• http://spidergl.org/ - SpiderGL ist eine 3D Graphik Bibliothek
• https://github.com/mrdoob/three.js/ - three.js ist eine JavaScript 3D Bibliothek
• http://sourceforge.net/projects/webglu/ - WebGLU ist eine 3D Bibliothek
• http://www.x3dom.org/ - Framework für X3D Szenen
• http://code.google.com/p/o3d/ - Google's WebGL Framework
• http://osgjs.org/ - OSGJS ist ein WebGL Framework basierend auf OpenSceneGraph

Welcher Browser für WebGL?

• https://www.google.com/chrome Google Chrome ab Version 9 (aktuell ist Version 18)
• http://my.opera.com/desktopteam/blog/2012/04/26/opera-12-beta Opera ab Version 12 (erst Beta)
• http://www.mozilla.org/de/firefox/fx/ Firefox unterstützt WebGL ab Version 4.0, es muss aber zuerst eingeschalten werden. Hier klicken um in die Einstellungen zu kommen: about:config oder selber about:config in Adressleiste eintippen. Dann den Eintrag webgl.force-enabled suchen und von false auf true setzen.  

• Internet Explorer unterstützt von sich aus kein WebGL, es gibt aber einen Workaround, ab Version 6 gibt es folgendes Plug-in http://iewebgl.com/index.html ist für Benutzer Gratis aber kostet für Developer. Eine andere Möglichkeit ist Chrome Frame zu benützen: http://code.google.com/chrome/chromeframe/
• http://www.apple.com/chde/safari/download/  Safari untersützt WebGL ab Version 5.1, man muss eventuell einmalig
  

  defaults write com.apple.Safari WebKitWebGLEnabled -bool YES 

  in die Console schreiben um es einzuschalten.

Viel Spass!