WebGL – 3D-Inhalte direkt im Internet Browser darstellen

webgl_header

3D-Inhalte direkt im Internet Browser darstellen? WebGL machts möglich. Mit diesem Beitrag stellen wir Euch eine noch relativ junge Web-Technologie vor, mit der 3D-Inhalte ohne zusätzlichen Viewer in einem Internet Browser angezeigt werden können.

Was ist WebGL?

WebGL (Web Graphics Library) ist eine Web-Technologie, mit der 3D-Inhalte direkt im Browser dargestellt werden können. WebGL wird von der Khronos-Gruppe  entwickelt und ist technisch eine Verbindung aus JavaScript und OpenGL (Open Graphics Library).

Durch den neuen Webstandard HTML5 können mit WebGL 3D-Inhalte direkt in Websites implementiert und ohne zusätzliche Plugins oder Viewer im Browser angezeigt und bedient (zoomen, drehen, verschieben) werden.

Wo wird WebGL eingesetzt?

Die WebGL-Technologie kommt sehr häufig in der Entwicklung von Browsergames zum Einsatz. Gesamte Browsergames werden als WebGL-Anwendung umgesetzt und können in einem Internet Browser eigener Wahl gespielt werden. Eine kleine Beispielanwendung ist Helloracer. Ein Formel-1-Wagen kann über die Tastatur im Browser gesteuert und aus verschiedenen Perspektiven betrachtet werden (Mit einem Klick auf das Bild wird das Browsergame in einem neuen Fenster geöffnet) .

Helloracer

Quelle: helloracer

WebGL eignet sich auch zur Visualisierung von 3D-Szenen. In folgender WebGL-Anwendung befindet man sich in einer Lobby mit Springbrunnen. Das Wasser ist animiert und die Szene ist mit auditiven Elementen versehen. Per Maus- sowie Tastensteuerung kann der Betrachtungswinkel verändert werden (Mit einem Klick auf das Bild wird die 3D-Szene in einem neuen Fenster geöffnet).

elefant

Quelle: blend4web

Die simple Darstellung eines 3D-Modells ist per WebGL-Anwendung ebenso möglich. Das folgende Beispiel zeigt ein interaktives 3D-Modell, das als Explosionszeichnung dargestellt werden kann. Es ist zudem für die Verwendung auf mobilen Endgeräten optimiert. Für mobile Endgeräte optimiert bedeutet, dass das Modell nicht nur per Maussteuerung, sondern auch über Touch-Events mit den Fingern bedient werden kann (Mit einem Klick auf das Bild wird das 3D-Modell in einem neuen Fenster geöffnet).

Quelle: x3dom

Wie werden 3D-Inhalte mit WebGL erstellt?

Man kann aus verschiedenen Ansätzen wählen, um WebGL-Anwendungen zu erstellen.

  • Native Entwicklung
  • Frameworks
  • Tool-Framework-Kombination

Native Entwicklung

Der wohl komplizierteste und aufwändigste Weg ist die native Entwicklung, also WebGL-Anwendungen von Grund auf selbst erstellen. Diese Vorgehensweise setzt grundlegende Programmierkenntnisse sowie fundierte Mathematik-Kenntnisse im Bereich Matrizenrechnung und räumlicher Geometrie voraus. Ein kleines Projekt verursacht dabei schon einen sehr hohen Entwicklungsaufwand. Wer sich davon nicht abschrecken lässt und die mathematischen Basics für WebGL-Anwendungen verstehen möchte, dem kann ich die Tutorials von Peter Strohm  empfehlen.

Frameworks

Neben der nativen Entwicklung gibt es (glücklicherweise!) eine ganze Reihe an Open-Source-Frameworks sowie Tools, die zur Erstellung von WebGL-Anwendungen geeignet sind.

Welcher Ansatz zur Erstellung gewählt wird, hängt hauptsächlich von der WebGL-Anwendung ab, die erstellt werden soll. Für Browsergames und 3D-Szenen werden häufig Frameworks verwendet, da 3D-spezifische Eigenschaften wie Schattierung, Belichtung oder physikalische Eigenschaften bereits definiert sind und vereinfacht auf Objekte angewendet werden können. Es ist kaum möglich, eine vollständige Liste der zur Verfügung stehenden Frameworks zu erstellen, da ständig Frameworks mit neuen Funktionen entwickelt und bereitgestellt werden. Die WebGL-Entwickler der Khronos-Gruppe pflegen ein Wiki  zum Thema WebGL, das unter anderem eine Liste über die aktuellen Frameworks enthält.

Tool-Framework-Kombination

Für die Darstellung interaktiver 3D-Modelle als WebGL-Anwendung reichen meist Tools und kleinere Frameworks aus. Eine Tool-Framework-Kombination ermöglicht es, native 3D-Modelle zu bearbeiten und so zu exportieren, dass sie in eine HTML-Anwendung eingefügt und in einem Internet Browser dargestellt werden können. Das 3D-Modell wird dabei in ein spezifisches Format (abhängig von verwendetem Tool) exportiert. Zu dem exportierten 3D-Modell generiert das Tool JavaScript-Dateien, welche die Darstellungseigenschaften des 3D-Modells im Browser definieren. Nachfolgende Grafik visualisiert den Prozess vom nativen 3D-Modell zum WebGL-Modell im Browser mit einer Tool-Framework-Kombination.

natives-3d_zu_webgl

 

Beispiele für solche eine Tool-Framework-Kombination sind blend4web  oder WegGL Publisher .

blend4web verwendet die 3D-Open-Source-Software Blender als Tool zur Erstellung und Bearbeitung der nativen 3D-Modelle und ermöglicht einen Export zur WebGL-Anwendung. Wer sich bereits mit Blender befasst hat, findet einige Tutorials auf deren Website.

Der WebGL Publisher ist eine Software, mit der aus gängigen, nativen CAD-Daten interaktive WebGL-Anwendungen erstellt werden können. Über die Erstellung einer WebGL-Anwendung mit dem WebGL Publisher wird es in Kürze einen eigenen Beitrag geben. Dabei wird der oben visualisierte Prozess exemplarisch durchgeführt – man darf gespannt sein.

Wann lässt sich WebGL für die Technische Dokumentation verwenden?

WebGL wird dann interessant, wenn HTML-basierte Technische Dokumentation erstellt wird: mobile Dokumentation wie Web-Apps oder elektronische Ersatzteilkataloge. Aus den drei genannten 3D-Inhalten Browsergames, 3D-Szenen und einfache 3D-Modelle finden in der Technischen Dokumentation wohl einfache 3D-Modelle die größte Verwendungsmöglichkeit. Dabei kann das 3D-Modell funktional verschieden eingesetzt werden. Sinnvolle Funktionen für das 3D-Modell sind Verlinkungen auf weiterführende Informationen, das Ein- und Ausblenden oder das Einfärben relevanter Bereiche oder Animationen.

Da die einzelnen Modelle in den meisten Fällen bereits vorhanden sind (in Entwicklung, Konstruktion), müssen diese nur noch für die WebGL-Anwendung aufbereitet werden. Das bedeutet, es ist keine höhere Mathematik oder das Durcharbeiten von Framework-Libraries notwendig, sondern man benötigt nur ein geeignetes Tool, um die vorhandenen 3D-Modelle für die Technische Dokumentation aufzubereiten und für das Web bereitzustellen.

Browsergames oder komplette 3D-Szenen finden in der Technischen Dokumentation eher weniger Verwendung. Dennoch sind Anwendungen im E-Learning-Bereich oder für Serious Games durchaus denkbar, da einige Überschneidungen mit der Technischen Dokumentation bestehen.

Mehrwert durch WebGL für die Technische Dokumentation

WebGL vereinfacht den Einsatz von 3D-Modellen in HTML-basierter Technischer Dokumentation erheblich. Dadurch sinkt die Barriere, ein 3D-Modell einzusetzen. Einerseits muss dem Nutzer keine Anwendung bereitgestellt werden, mit der das 3D-Modell verwendet werden kann – das nötige Tool, ein Internet Browser, ist bereits vorhanden. Andererseits verbessert sich durch das 3D-Modell die Informationsvermittlung. Der Nutzer kann anhand der interaktiven Visualisierung das entsprechende Produkt oder einen bestimmten Prozess besser nachvollziehen.

Zusätzlich können neue Wege der Informationsvermittlung definiert werden. Ein interaktives 3D-Modell kann beispielsweise das obligatorische Inhaltsverzeichnis einer mobilen Dokumentation ersetzen. Anstatt mit einem listenartigen Inhaltsverzeichnis auf die Informationen zu einem Produkt zu verweisen, könnten an einem 3D-Modell alle relevanten Komponenten eines Produkts bspw. farblich gekennzeichnet und verlinkt werden. Die Links führen zu den weiterführenden Informationen, die der Nutzer zu dieser Komponente benötigt. Der Nutzer gelangt dadurch spielerisch  zu den Informationen. Die Verwendung einer Bedienungsanleitung entwickelt sich folglich durch ein interaktives Inhaltsverzeichnis gleich zu Beginn vom unpopulären Lesen zu einer multimedialen Informationsrecherche.

Wie wird WebGL in einer Website implementiert?

WebGL-Anwendungen sind seit dem neuen Internetstandard HTML5 möglich. Mit HTML5 wurden neue Elemente eingeführt, die unter anderem eine breitere Unterstützung für multimediale Inhalte bieten. Ein neues Element ist das canvas-Tag. Durch das canvas-Tag werden WebGL-Inhalte in eine Website implementiert, das heißt, das canvas-Tag umschließt alle WebGL-spezifischen Informationen.

Vorteile

  • Direkte Darstellung von 3D-Modellen in einem Internet Browser ohne zusätzliche Viewer/Plugin
  • Erstellung basiert auf offenen Standards (JavaScript, OpenGL)
  • Bessere Informationsvermittlung durch Visualisierung und erhöhte Interaktivität mittels 3D-Modell
  • Darstellung auf mobilen Endgeräten sowie Desktop-PCs

Nachteile

  • Performanz der WebGL-Anwendung abhängig von der Leistungsstärke des Anzeigemediums
  • WebGL-Anzeige in Browser-Einstellungen häufig deaktiviert (muss manuell aktiviert werden)
  • WebGL wird von älteren Browser-Versionen nicht immer unterstützt

2 comments

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *