Tag: webgl

Unreal Engine 3: Erste Demo der HTML5-Version

Erst im März berichtete ich über die Portierung der Unreal Engine 3 in den Webbrowser, die Epic Games zusammen mit Mozilla realisiert hatte. Die HTML5-Demo war allerdings nur Besuchern der GDC 2013 vorbehalten. Seit letzter Woche kann die HTML5-Version der "Epic Citadel" nun auch öffentlich getestet werden. Bei der HTML5-Demo handelt es sich um die dreidimensionale Umsetzung einer mittelalterlichen Burg, die virtuell erkundet werden kann. Um die Demo ausführen zu können, wird ein Nightly Build von Firefox empfohlen, da in dieser Version spezielle JavaScript-Anpassungen enthalten sind, die für einen flüssigen Ablauf der WebGL-Demonstration sorgen.

In den FAQ der HTML5-Demo schreibt Epic Games Genaueres über die JavaScript-Erweiterungen und die unterstützten Browser. Unter Google Chrome läuft die Demo zwar, aber es kommt zu Abstürzen. Unter Safari oder Opera kann die Demonstration derzeit nicht angesehen werden, da die Browser nicht mit der Engine kompatibel sind. Es handelt sich also noch um eine sehr frühe Demo, die aber schon jetzt zeigt, was mit WebGL möglich ist. Erst kürzlich wurde bekannt, dass Microsoft auch in Internet Explorer 11 WebGL unterstützen will.

Microsoft: Internet Explorer 11 auch mit WebGL

Der Web-Entwickler Francois Remy hat kürzlich einen Einblick in die Vorschau-Version von Internet Explorer 11 gegeben, die zusammen mit einer frühen Version von Windows "Blue" im Netz aufgetaucht ist. Nun is auch bekannt geworden, dass in Version 11 des Microsoft-Browsers eine Implementierung des 3D-Standards WebGL integriert ist, die allerdings noch als experimentell anzusehen ist. Zur Aktivierung müssen nur ein paar Schlüssel in der Windows-Registry angepasst werden.

Der Zug von Microsoft, WebGL nun doch in ihrem Browser zu integrieren, ist auf der einen Seite verwunderlich: Immerhin hatte sich das Unternehmen im Sommer 2011 gegen WebGL ausgesprochen, da man Sicherheitslücken und Abstürze des Betriebssystems befürchtete. Doch angesichts der rapiden Entwicklung des Webstandards ist man sich wohl den Möglichkeiten bewusst geworden. Erst vor ein paar Tagen wurde eine erste Implementierung der Unreal Engine 3 in Firefox auf der GDC gezeigt. Microsoft hat sich also mit den Gegebenheiten abgefunden, muss aber nun bei der Implementierung von WebGL am Ball bleiben, denn Mozilla hat mit seiner JavaScript-Engine-Erweiterung Odinmonkey (asm.js) eine ordentliche Performance vorgelegt, mit der Internet Explorer 11 derzeit noch nicht mithalten kann.

Mozilla: Unreal Engine 3 nativ im Webbrowser nutzbar

Wer den Mozilla-Blog verfolgt, wird wahrscheinlich schon die Meldung über die Unreal Engine 3 gelesen haben: Mozilla und Epic haben es in einer ersten Demo geschafft, die 3D-Engine in den Browser zu portieren. Das Ganze ist ohne Plugin möglich und basiert auf dem Javascript-Subset asm.js sowie der JavaScript-Engine-Anpassung "Odinmonkey" (Firefox Nightly), welche das Ausführen von JavaScript-Anwendungen beschleunigt – JavaScript-Code kann dadurch halb so schnell wie nativer Code, also in der Geschwindigkeit von Java oder C# ausgeführt werden. Durch asm.js werden strikte Typen für Float- und Integer-Werte und ein virtueller Heap-Speicherbereich eingeführt, der mit einem typisierten Array realisiert wird. Etwas Ähnliches gab es kürzlich schon mit dem Mozilla-Compiler LLJS, der zudem Pointer oder Structs bietet.

Die Portierung der Unreal Engine 3 (über 1 Million Zeilen Code) basierte auf der Verwendung von Emscripten, einem LLVM-zu-JavaScript-Compiler. In dem Blog-Eintrag findet sich momentan nur ein Video der Demonstration und der Hinweis, dass man bei Mozilla derzeit mit Disney, EA und ZeptoLab zusammenarbeitet, um die Performance-Verbesserungen in modernen Browser-Spielen unterzubringen. Wer die GDC 2013 besucht, kann die Demo in Firefox am nVidia-Stand testen.
Das Portieren einer renommierten 3D-Engine in den Browser war eigentlich nur eine Frage der Zeit, denn erst im Januar wurde bereits mit BananaBread ein Ego-Shooter gezeigt, der auf WebGL und JavaScript basiert. Die Demo aus dem Video zeigt übrigens die Epic Citadel, die auch schon für die Flash-Version der Engine (Stage 3D) genutzt wird.

BananaBread: 3D-Ego-Shooter auf WebGL-Basis

Dass WebGL eine vielversprechende Technologie darstellt, zeigen schon seit geraumer Zeit die Demos von Three.js, die inzwischen einige interessante Effekte aufzeigen, die durch OpenGL ermöglicht werden (Shader, Bump-Maps, Normal Mapping, usw.). Einen ersten 3D-Ego-Shooter, der Gerbrauch von WebGL und der Sauerbraten-Engine (Cube 2) macht, stellt BananaBread dar. Das Projekt ist in C++ und OpenGL entwickelt worden und wird durch den LLVM-Compiler Emscripten in JavaScript und WebGL übersetzt.

Das Spiel lässt sich in gewohnter Manier mit den Tasten W, A, S, D und der Maus steuern. Es gibt verschiedene Waffen und Levels, in denen der Spieler gegen Bots antreten kann. Es wurde sogar eine Third-Person-Ansicht integriert, die über die Taste 9 aktiviert werden kann. Die beiden Entwickler Alon Zakai und Ehsan Akhgari von Mozilla möchten mit dem Projekt zeigen, was mit WebGL und modernen Webbrowsern möglich ist.

ThreeFab: Three.js-Szenen per WYSIWYG-Editor erstellen

Wer mit WebGL und der Three.js-Engine experimentieren möchte, kann sich diverser Tutorials bedienen. Womöglich wird es bald eine Erweiterung geben, mit der sich Three.js wie jQuery verwenden lässt.
Das Erstellen von 3D-Szenen in Three.js stellt noch eine gewisse Hürde da, denn 3D-Objekte müssen in JavaScript erzeugt und animiert werden. 3D-Anwendungen wie Blender schaffen Abhilfe, denn hierfür gibt es bereits einen WebGL-Exporter, mit dem sich Szenen als JSON-Objekt exportieren lassen. Darin können auch Animationen enthalten sein.
Eine andere Möglichkeit steht nun mit ThreeFab bereit, denn damit lassen sich Three.js-Szenen direkt im Browser erstellen.

ThreeFab versteht sich also als 3D-Editor, mit dem sich 3D-Objekte einfügen und anpassen lassen. So können Position, Größe, Farbe, Transparenz und Shading per Schieberegler eingestellt werden. Das Positionieren im dreidimensionalen Raum ist denkbar einfach, da die Objekte auf einem virtuellen Boden platziert werden. Die Szene kann dann einfach per Klick exportiert und zusammen mit der Three.js-Bibliothek eingesetzt werden.
ThreeFab befindet sich momentan noch in einer Alpha-Version und so ist das Feature für Animationen noch experimentell. Dennoch wird das Projekt in Zukunft sicherlich sehr interessant werden, wenn es darum geht, Three.js-Szenen im Browser zu erstellen.

Cannon.js: JavaScript-Physik-Engine für WebGL-Szenen

Wer mit WebGL und 3D-Szenen im Browser experimentiert, wird unter Umständen das Bedürfnis nach einer Physik-Engine hegen: Mit einer solchen Bibliothek lassen sich physikalisch korrekte Kollisionen von Objekten simulieren. Für Simulationen im zweidimensionalen Bereich hat sich Box2D bestens bewährt. Nun werden auch dreidimensionale Kollisionen interessant und aus diesem Grund hat sich der Entwickler Stefan Hedman aus Schweden eine eigene JavaScript-Physik-Engine gebaut. Sie heißt Cannon.js und steht bei GitHub zur Verfügung.

Das Beispiel setzt auf Three.js, wobei die Cannon-Bibliothek auch unabhängig genutzt werden kann. Eine Schwierigkeit bei der Erstellung einer Physik-Engine liegt in der Optimierung der Berechnungen (Number Crunching), die der Entwickler durch den Einsatz von typisierten Arrays (Float32Array) erreicht hat. Momentan lassen sich nur Sphären und Flächen (Planes) animieren, doch die Arbeit an der Engine wird stetig fortgesetzt.
Eine alternative Physik-Bibliothek wäre Ammo.js, die allerdings mit einer Größe von über 1 MB noch etwas sperrig ausfällt.

WebGL: Einführung und Grundlagen von Opera

Wer sich mit WebGL vertraut machen möchte, benötigt ein Grundverständnis der Technologie: Die Programmierung ist komplexer, da es schließlich um die Darstellung von dreidimensionalen Szenen geht, die zudem durch die Hardware beschleunigt werden. Wissen über Shader-Programmierung und 3D-Geometrie ist also Grundvoraussetzung. Eine gute Anlaufstelle ist nach wie vor die Seite "Learning WebGL", die viele Ressourcen und Tutorials bietet.
Dennoch schadet es nicht, auch andere Quellen heranzuziehen: Von Opera wurde vor einiger Zeit beispielsweise eine Tutorial-Serie über WebGL veröffentlicht, die sehr hilfreich sein dürfte. Nun wurde von Opera-Entwickler Erik Möller noch eine zweite Reihe ins Leben gerufen, die ebenfalls eine Einführung in WebGL darstellt. Teil 1 der "Raw WebGL 101"-Serie bietet einen guten Einstieg in die Materie.

Besonders gelungen ist die Veranschaulichung der Rendering-Pipeline von OpenGL ES 2.0, auf die WebGL aufbaut. Hier wird sehr deutlich, wie die Vertex-Informationen auf dem Bildschirm dargestellt werden und an welcher Stelle die Vertex- und Fragment-Shader zu finden sind. Ich bin gespannt auf die weiteren Teile dieser Serie, da die Opera-Entwickler sehr gute Arbeit leisten.

Three.js: Mit tQuery-Extension im jQuery-Stil arbeiten

Kürzlich hatte ich eine Idee, wie man die Verwendung der WebGL-3D-Engine Three.js noch vereinfachen könnte. Dabei kam der Gedanke auf, die Engine weiter zu abstrahieren und eine jQuery-ähnliche Funktionsweise einzuführen, um noch einfacher mit 3D-Szenen arbeiten zu können. Doch das war bisher nur eine grobe Idee — Jerome Etienne, der Kopf hinter Learning Three.js, hat dieses Konzept bereits in die Tat umgesetzt und eine sehr frühe Version von der Three.js-Erweiterung veröffentlicht. Sie trägt den Namen tQuery (Three.js + jQuery) und beinhaltet erste Funktionen und Beispiele.

Der Entwickler zeigt in seinem Blog-Eintrag, wie die Engine funktioniert. Auf der Seite findet sich auch eine Live-Coding-Session, in der er diverse 3D-Objekte mit tQuery erzeugt. Die Three.js-Extension arbeitet also nicht mit dem DOM (wie jQuery), sondern auf der Basis von Szenen (in Three.js wird eine Szene durch Object3D repräsentiert). Das Ganze wird später dann in etwa so aussehen:

• var world = tQuery.createWorld().fullpage().start();
• var object = tQuery.createTorus().addTo(world);

Ich finde das Projekt vielversprechend und es wird Einsteigern bei der Three.js-Programmierung sicherlich behilflich sein.