WebGL und Three.js – Einführung zu browserbasierten Echtzeit-3D-Anwendungen

(Bildquelle: Pixar)

Wir leben in drei Dimensionen: Viele Filme, die wir schauen, sind animiert. Die meisten Spiele sind dreidimensional. Und die Hersteller von Navigationssystemen geben uns die Möglichkeit, die Orte, die wir besuchen wollen, virtuell zu erkunden. Inzwischen sind 3D-Anwendungen auch im Netz verfügbar. Doch was verbirgt sich hinter dem Begriff Web 3D? Was hat Web 3D möglich gemacht? Wir bringen ein wenig Licht ins Dunkel.

Wirklich in Echtzeit?

Unter 3D Web bzw. Web 3D versteht man die Integration von in Echtzeit berechneten 3D-Inhalten in Webapplikationen. Nur zur Klärung: mit Web 3D ist das Rendering von 3D-Objekten in Echtzeit mit Interaktionsmöglichkeiten der Nutzer gemeint. Keine Vor-gerenderten Videoclips.

Da Browser heute in vielen Endgeräten integriert sind, sind Web-3D Inhalte plattformunabhängig und benötigen keine speziellen Betriebssysteme oder Programme. Sie funktionieren auf Desktop-Computern, Tablets, Smartphones sowie auf Fernsehern und VR-Brillen. Sie können in Websites, Apps, VR/AR Anwendungen, Onlineshops und Social Media Kanäle eingebettet werden. Sie haben daher heute ein genauso breites Anwendungsfeld wie Text-, Bild- und Videoinhalte. Web 3D Inhalte ermöglichen dem Nutzer den Einstieg in eine virtuelle Szene, in der er sich frei bewegen und interagieren kann.

HTML5: Ein neues Medium für visuelle Inhalte

Möglich gemacht hat das die Entwicklung des neuen Webstandards HTML5, der aktuellen Version der Hypertext Markup Language (HTML). HTML hat einen langen Entwicklungsprozess hinter sich. Angefangen hat Alles mit statischen Seiten, Formularen und Submit Buttons. Bei den grafischen Features war man durch HTML und CSS sehr limitiert. Wollte man darüber hinaus Effekte und Features integrieren, so war man auf Dritthersteller-Plugins wie Flash oder Quicktime angewiesen.

 
 
 
1
1

(Der Playcanvas BMW i8 Konfigurator läuft dank HTML5, WebGL und JavaScript direkt im Browser. Link: https://playcanv.as/p/RqJJ9oU9/)

Mit der Einführung von HTML5 hat sich Vieles verändert. Es bringt Syntaxverbesserungen mit, neue JavaScript Spracherweiterungen und Schnittstellen. Außerdem birgt es – in Kombination mit CSS3 – ein Set an erweiterten grafischen Möglichkeiten und Unterstützungen von multimedialen Inhalten. Was die meisten Entwickler unter HTML5 verstehen ist eine Sammlung an Technologien und Standards. Einige davon wurden bereits durch das W3C Konsortium ratifiziert und werden von allen Browsern unterstützt. Andere sind keine Standards, werden aber von den meisten modernen Browsern unterstützt. Wieder andere – wie WebGL – sind weit verbreitete Standards. Allerdings werden sie nicht vom W3C kontrolliert.

Was ist WebGL?

WebGL ist die Abkürzung für Web Graphics Library. Es ermöglicht die Darstellung von 3D-Grafiken direkt im Browser, ohne zusätzliche Plugins. WebGL ist selbst keine 3D-Engine, sondern eine JavaScript Programmierschnittstelle für Webbrowser, die auf OpenGL ES 2.0 basiert. WebGL wird oft im Zusammenhang mit HTML5 genannt, obwohl es genau genommen gar kein Bestandteil davon ist. Es nutzt HTML5 Canvas-Elemente, um darauf WebGL-Inhalte anzuzeigen und diese direkt in HTML zu integrieren.

Grundsätzlich gibt es die Möglichkeit, WebGL-Anwendungen nativ zu entwickeln. Diese Vorgehensweise setzt fundierte Programmierkenntnisse sowie Mathematik-Kenntnisse im Bereich Matrizentrechnung und räumliche Geometrie voraus. Programmierer müssen sich in die OpenGL Shading Language einarbeiten. Allerdings ist es sehr schwierig und teuer, Spezialisten für diesen Bereich zu finden.

Glücklicherweise sind in den letzten Jahren eine Reihe an Tools und Frameworks aufgetaucht, die die Programmierung von WebGL Anwendungen erleichtern.

Three.js – Aller guten Dinge sind 3

Ein Beispiele dafür ist Three.js: Three.js ist eine schlanke JavaScript Library, die einen einfachen Zugang zu WebGL schafft. Entwickler müssen dafür nur sehr wenig Code schreiben, um schnell Ergebnisse zu erzielen. Es hat bereits viele Standardfunktionen integriert, um komplexe Szenen zu rendern. Während man für die Darstellung eines einfachen 3D-Objektes mit WebGL hunderte Codezeilen benötigt, sind dafür mit Three.js nur ein paar wenige notwendig. Heute ist Three.js ein fester Standard bei der Entwicklung von Echtzeit-3D Anwendungen mit WebGL geworden.

Three.js ist eine schlanke JavaScript Library, die einen einfachen Zugang zu WebGL schafft.

Eine andere Möglichkeit, schlank 3D-Anwendungen mit WebGL zu entwickeln bietet Sketchfab. Sketchfab ist ein kommerzieller Service und wurde auf der JavaScript Library OSC.js entwickelt (eine Alternative API zu Three.js). Es ist ein Webservice, der genutzt wird, um 3D-Inhalte anzuzeigen, zu sharen und in Webanwendungen einzubetten. Wie Youtube für Videos ist Sketchfab sozusagen ein Player für 3D-Objekte. Sketchfab nutzt die WebGL JavaScript API, um 3D Modelle anzuzeigen. Es bietet neben den Hosting- und Playerfunktionalitäten auch einen einfachen Editor, um 3D-Modelle zu platzieren und auszuleuchten. Im Gegensatz zu Three.js können allerdings keine komplexen Bearbeitungen vorgenommen werden, Skripte für Abläufe geschrieben werden usw. und es muss immer der Sketchfab-Player zur Darstellung der 3D-Objekte genutzt werden.

Neben den oben genannten Beispielen gibt es eine Reihe an weiteren Tools, Editoren und Frameworks, die die Arbeit mit WebGL erleichtern.

Zusammenfassung

Die Einführung von HTML5 hat die Entwicklung von webbasierten 3D-Anwendungen für die breite Masse möglich gemacht. Über WebGL können 3D-Inhalte im Browser angezeigt werden. Sie funktionieren auf Smartphones ebenso wie auf Tablets, Computern, VR-Brillen oder anderen Geräten, die einen Browser besitzen. Über JavaScript Frameworks wie Three.js können relativ einfach und schnell Web 3D Anwendungen programmiert werden.

Kommentar hinterlassen