IF Open - InterFace AG

Dieser Blogeintrag soll einen kurzen Überblick über das Thema WebGL geben und ein paar Einstiegspunkte bieten, um sich genauer mit dem Thema zu beschäftigen.

WebGL ist eine Möglichkeit, 3D-Inhalte in Webseiten darzustellen, die dann im Browser direkt angezeigt werden und sich nahtlos in eine Website integrieren lassen. „Moment..“, werden jetzt sicher einige sagen, „… das ist doch nicht neu?“. Natürlich gab es auch schon vorher mehr oder weniger erfolgreiche Versuche das Internet in die dritte Dimension zu heben. Beispielsweise mittels Flash, Java Applets, Microsoft Silverlight, Googles O3D, oder dem WebPlayer für die bei Spieleentwicklern beliebte Unity Engine. Einen großen Nachteil den jedoch alle der genannten Technologien teilen, ist die Notwendigkeit eines Plugins, welches extra für den Browser installiert werden muss. WebGL hingegen ist ein offener Cross-Plattform Standard, der direkt von den Browsern unterstützt wird (bzw. werden sollte) und ohne die Hilfe von speziellen Plugins eine low-level Grafik-API für die Benutzung mit JavaScript bereitstellt. Entwickelt wurde der Standard von der Khronos Group, welche auch für die Spezifikation von OpenGL und OpenGL ES (worauf WebGL beruht) zuständig ist. Dies geschah unteranderem auch in Zusammenarbeit mit der Mozilla Foundation.

Wer sich jetzt immer noch nicht konkret vorstellen kann, was bereits mit WebGL im Browser möglich ist, der sollte einmal auf folgenden Seiten stöbern und staunen:
(Ob der genutzte Browser WebGL unterstützt lässt sich hier feststellen)

Wie funktioniert WebGL?

Die WebGL API kann sehr einfach über JavaScript-Code angesprochen werden und der 3D-Inhalt wird dabei in das, bei HTML5 neu hinzugekommene Canvas-Element gezeichnet. Solche Inhalte können also sehr bequem in Webseiten eingebunden werden und sind voll mit dem HTML-Standard kompatibel. Wie bereits gesagt, ermöglicht WebGL einen sehr hardwarenahen Zugriff auf die Funktionalitäten der Grafikkarte, was den Vorteil hat, dass vergleichsweise performante (da Hardwarebeschleunigte) 3D-Anwendungen geschrieben werden können.

Durch den Low-Level Ansatz kann jedoch der Einstieg gerade für Anfänger in der 3D-Programmierung sehr schwer fallen. Hilfreich können unter anderem Grundkenntnisse in linearer Algebra (Vektorrechnung, Matritzen, Transformationen, Projektionen) und der Computergrafik (zB.: Model/View/Projection-Matrix, Grafikpipeline) werden, um zu verstehen, was überhaupt im Hintergrund abläuft. Ansonsten benötigt man zum Entwickeln mit WebGL nur einen Texteditor und einen passenden Browser. Da WebGL nur eine Schnittstelle zu den OpenGL ES Funktionen bietet, empfiehlt es sich außerdem noch eine Bibliothek für die Matrix- und Vektoroperationen zu verwenden, wie beispielsweise glMatrix oder j3diMath.js, die die Arbeit sehr erleichtern bzw. erst möglich machen, da JavaScript derartige Datentypen nicht nativ unterstützt.

Einen guten Einstieg in die Programmierung mit reinem WebGL liefert die Seite Learning WebGL, bei der die bekannten NeHe OpenGL Tutorials, über die jeder 3D-Anfänger früher oder später stolpern wird, mit JavaScript und WebGL nach implementiert und im Detail beschrieben wurden. Reines WebGL kann jedoch durch die niedrige Abstraktionsebene sehr mühsam werden.

Wem das eigenständige herum basteln mit Shadern zu viel ist (oder nicht weiß was ein Shader ist) und nicht unbedingt die volle Kontrolle über jeden Buffer auf der Grafikhardware benötigt, dem sei die Benutzung eines der vielen Frameworks empfohlen, die auf WebGL aufbauen. Diese bieten viele Annehmlichkeiten wie vorgefertigte Kameras, Lichtquellen, oder die Benutzung von hierarchischen Szenengraphen, welche man ohnehin für größere 3D-Projekte nach implementieren müsste. Wieso also das Rad neu erfinden? :-)

Als kleines Beispiel, wie sehr diese die Arbeit erleichtern, kann man sich folgende zwei Beispiele ansehen. Das erste Beispiel zeigt einen farbigen Würfel und wurde nur mit WebGL realisiert, das zweite Beispiel zeigt eine ähnliche Szene, wurde aber mithilfe des Frameworks Three.js realisiert.

Wie man schnell sehen kann, nimmt einem das Framework viel mühsame und umständliche Arbeit ab. Mit obiger Demonstration soll jedoch niemand von einer „reinen“ WebGL Anwendung abgeschreckt werden und es empfiehlt sich für jeden, zumindest ein paar Tutorials zu überfliegen, um die Grundlegenden Abläufe „behind the scenes“ zu verstehen.

Für das tägliche Arbeiten oder dem schnellen Erstellen von Prototypen, kann man die Benutzung von Frameworks jedoch ohne schlechtes Gewissen empfehlen. Besonders weit entwickelt und relaitv weit verbreitet ist hierbei das Framework Three.js. von Mr. Doob. Trotz einer etwas verbesserungswürdigen Dokumentation fällt das Arbeiten damit sehr einfach und es gibt eine Menge Beispiele, an denen man sich orientieren kann. Ein großer Vorteil von JavaScript Bibliotheken ist es ja auch, dass man ohne weiteres in den SourceCode schauen kann, was bestimmte Funktionen denn tatsächlich bewirken.

Three.js liefert neben vorimplementierten Kameras, Steuerungsmöglichkeiten einem Szenengraph und 3D-Primitiven außerdem einen weiteren sehr nützlichen Vorteil: Man kann die 3D-Inhalte auch komplett ohne die Verwendung von WebGL auf einen HTML5-Canvas zeichnen lassen und dies als Fallback für Browser benutzen, welche noch kein WebGL unterstützen. Man muss man sich dabei aber im klaren sein, dass man dadurch einen großen Geschwindigkeitsverlust in Kauf nimmt, da die Hardwarebeschleunigung teilweise wegfällt und die Anzeige in der aktuellen Version nicht immer komplett fehlerfrei ist. Speziell für die Spiele-Entwicklung entstehen seit kurzer Zeit auch komplette WebGL-Engines. Der Markt hierfür ist jedoch noch sehr jung und das Angebot ist noch einigermaßen überschaubar.

Verbreitung

So wie der allgemeine Trend aussieht, entwickelt sich WebGL schon seit einiger Zeit zum Standard für 3D Inhalte im Web. Leider wird dieser Standard von den Browserherstellern nur unterschiedlich schnell umgesetzt und der Verbreitungsgrad ist immer noch eines der größten Stolpersteine bei der Benutzung von WebGL. Obwohl die Version 1.0 des WebGL Standards bereits anfangs 2011 vorgestellt wurde, wird er noch von sehr wenigen Browsern standardmäßig unterstützt. Einzig Chrome und Opera stellen momentan einen vollständigen Support zur Verfügung, was zusammengenommen nur knapp 20% aller Internetnutzer einen einfachen Zugriff auf WebGL-Anwendungen ermöglicht. Bei den aktuellen Firefox- und Safari-Versionen, welche knapp 24% der Internetnutzer verwenden, ist eine WebGL-Unterstützung zwar integriert, jedoch standardmäßig deaktiviert und nur kompliziert über versteckte Einstellungen aktivierbar – ein Vorgang, der für den Durchschnittlichen Internetnutzer kaum zumutbar ist, wenn er eine Webanwendung benutzen will.

Internet-Explorer-Nutzer, die mit 56% den Löwenanteil der Internetnutzer ausmachen, haben nur über die Installation eines Add-ons die Möglichkeit, ihren Browser fit für die dritte Dimension zu bekommen. Microsoft hat bisher (Version 10 des Internet Explorers) die offizielle Unterstützung von WebGL komplett verweigert und verwies dabei auf Sicherheitsbedenken aufgrund des Hardware-nahen Zugriffs auf das System, das beispielsweise neue Methoden von Denial-of-Service-Attacken ermöglichen kann und deshalb nicht mit den Microsoft Security Policies vereinbar ist. Diese Probleme scheinen jedoch nun behoben und Microsoft hat für den Internet Explorer 11 fest angekündigt, WebGL-Unterstützung zu integrieren. Berücksichtigt man jedoch, dass selbst die aktuellste Version 10 nur ca. 10% des Browsermarktes ausmacht, wird es noch einige Zeit dauern, bis der größte Teil der Internetnutzer in den Genuss von unkomplizierten WebGL kommt.

Besonders Problematisch sieht jedoch die momentane Lage im Mobilbereich auf Tablets und Smartphones aus. Die einzigen dem Autoren bekannten Browser, die „Out-of-the-Box“ WebGL unterstützen sind der auf Webkit basierende Samsung-Android Browser, Firefox for Android und Opera Classic, nicht jedoch der Opera Mini. In Chrome for Android muss es noch extra mit einem Flag aktiviert werden. Eine genaue Übersicht, ob und in welcher Form ein Browser WebGL unterstützt, findet man auf http://caniuse.com/webgl.

Was aber bei der Benutzung von WebGL vor allem im Businessbereich noch ein Problem sein kann ist, dass es im Vergleich zu anderen Technologien (wie bei jeder JavaScript-Anwendung) sehr einfach möglich ist, den Quelltext, sowie eingebundene Media-Inhalte, Texturen oder ähnliches zu speichern. Man hat zwar die begrenzten Möglichkeiten, den Quelltext zu verschleiern jedoch kann dies einen Diebstahl nie komplett verhindern. Texturen lassen sich fast immer mit einfach zu benutzenden Tools direkt aus dem Speicher der Grafikkarte auslesen. Ein wenig mehr über diese Problematik und einige Ansätzen wie man geistiges Eigentum (IP) wenigsten in Ansätzen schützen kann (und wie sinnvoll das ist), lässt sich in diesem Blog-Eintrag nachlesen.

Fazit – Was kann man bisher über WebGL sagen:

WebGL ist eine sehr nützliche Technologie, die immense Möglichkeiten für neue Konzepte von Webseiten und die Online-Spiele-Industrie bietet. Auch wenn sie zum jetzigen Zeitpunkt noch nicht flächendeckend von allen neuen Browsern unterstützt wird, lohnt es sich schon jetzt damit zu beschäftigen.

Die Vorteile und Nachteile von WebGL nochmals auf einem Blick:

Vorteile:

  • 3D-Inhalte im Browser ohne Plugin
  • Hardware-beschleunigt
  • Standardisiert
  • Mit Javascript und HTML benutzbar (Ideal für Webentwickler)
  • Verwendung von eigenen Shadern möglich
  • Low-Level Zugriff auf die Grafikkarte

Nachteile:

  • Noch nicht 100% Verbreitungsrate (z.B.: auf Mobilgeräten)
  • Sourcecode und Resourcen der Anwendung sind nur schwer zu schützen
  • Die Hardware-nahe Programmierung macht eine Benutzung ohne Framework für Einsteiger sehr kompliziert
  • Potentielles Sicherheitsrisiko durch Zugriff auf Hardware (DoS, möglicherweise neue Sicherheitslücken in Zukunft)

Anschließend hier noch ein paar nützliche Links:

Kann mein Browser WebGL?

Tutorials

Nützliche Tools

Frameworks:

  • ThreeJS: Das am weitesten verbreitete Framework
  • SceneJS: Ein weiteres OpenSource Framework

1 Kommentar zu “Was ist WebGL und warum der ganze Hype?”

  1. Christof (Dezember 4th, 2013 at 11:37)

    Klasse Überblick, endlich wird auch hier Wirklichkeit was vor HTML5 eher Träume waren – vielen Dank Andreas!

Kommentar verfassen