Tag: webgl

201419Nov

THREE.BasicThirdPersonGame: Ein WebGL-Game-Starterkit

Für die englische Version meiner Website habe ich ein kleines WebGL-Spiel entwickelt, bei dem es sich um einfaches Jump 'n' Run-Prinzip im dreidimensionalen Raum handelt. Dabei kommen die Bibliotheken THREE.js (3D-Engine) und Cannon.js (Physik-Engine) zum Einsatz. Während der Entwicklung des Spiels ist die Idee zu einem kleinen Framework gekommen, das jetzt unter dem Namen THREE.BasicThirdPersonGame als Open Source-Projekt bereitsteht.

THREE.BasicThirdPersonGame - Game Starter Kit in THREE.js + Cannon.js

Dabei handelt es sich also um eine Basis für mögliche 3D-WebGL-Browserspiele, bei denen der Spieler aus der Perspektive der dritten Person verfolgt wird. Während THREE.js die Darstellung übernimmt, sind durch Cannon.js physikalisch korrekte Berechnungen möglich, was sich unter Anderem durch die Verwendung von Starrkörpern (Rigid bodies) auszeichnet. Eine virtuelle Spielwelt kann dank Rigid bodies mit Eigenschaften wie Gravitation, Reibung und Federung versehen werden.

Weiterlesen...
201419Aug

PlayCanvas: WebGL-Game-Engine für HTML5/JS-Games

Auch wenn sich in Sachen JavaScript-3D-Engines THREE.js inzwischen zum Platzhirsch gemausert haben dürfte, kann es nicht schaden, Alternativen auszuprobieren. Die im April 2011 gestartete WebGL-Game-Engine PlayCanvas ist Mitte diesen Jahres bei GitHub als Open-Source-Projekt unter der MIT-Lizenz veröffentlicht worden. Im Gegensatz zu THREE.js kommt PlayCanvas gleich noch mit einer integrierten Physik-Engine, mit der sich Rigid Bodies, Joints und auch Fahrzeuge umsetzen lassen.

PlayCanvas - 3D HTML5 Game Engine

Natürlich sind auch die Grundfunktionalitäten einer Game-Engine in PlayCanvas vertreten: 3D-Model Loading, Shadow Mapping, Post-Effekte, Keyframes, Skeletal Blending, Skinning, Audio-Integration sowie Support für sämtliche Eingabegeräte (Maus, Tastatur, Touch, Gamepad, Leap Motion) sind in PlayCanvas integriert. Weiterhin steht ein Entity-Component-System zur Verfügung, mit dem sich im Szenengraph sehr leicht Objekte hinzufügen lassen. Ein Beispiel:

  • var game = new pc.fw.Application(canvas, {});
  • game.start();
  •  
  • var cube = new pc.fw.Entity();
  • game.context.systems.model.addComponent(cube, {
  • type: "box"
  • });
  •  
  • game.context.root.addChild(cube);

Weiterhin steht mit dem "PlayCanvas Designer" ein Echtzeit-Editor zur Verfügung, in den 3D-Modelle per Drag 'n' Drop importiert werden können und auch Änderungen in einem kollaborativen Projekt direkt für andere Teilnehmer sichtbar werden.
Demos von bestehenden PlayCanvas-Projekten finden sich hier.

201312Nov

Firefox: Shader Editor ermöglicht Echtzeit-Bearbeitung

Für OpenGL- bzw. WebGL-Entwickler dürfte dank Mozilla ein kleiner Traum in Erfüllung gehen: Ab Firefox 27, der momentan über den Nightly-Kanal heruntergeladen werden kann (inzwischen schon Version 28), wird in den Firefox Developer Tools ein "Shader Editor" integriert sein. Wie in diesem Artikel nachzulesen ist, kann der Shader Editor über die Einstellungen des Entwickler-Panels aktiviert werden. Die Seite muss neu geladen werden, damit der WebGL-Kontext erkannt werden kann. Ist dies geschehen, können alle einzelnen Shader-Programme der laufenden WebGL-Anwendung in Echtzeit bearbeitet oder deaktiviert werden. Dabei ist besonders hilfreich, dass die Codes des Vertex- und Fragment-Shaders separat voneinander bearbeitet werden können.

Firefox - Live editing WebGL shaders with Firefox Developer Tools

Allein die "Epic Citadel"-Anwendung, eine Web-Demo der Unreal Engine, verwendet über 200 verschiedene Shader — also kleine Programme, welche direkt auf der GPU der Grafikkarte ausgeführt werden und grafische Echtzeit-Effekte erlauben. Mit Shadern lassen sich hochkomplexe Visualisierungen und Animationen umsetzen, die allerdings nicht immer leicht zu verstehen sind. Daher stellt der Shader Editor eine große Hilfe dar, wenn es um das Verständnis eines Shader-Programms geht. Wer den Editor ausprobieren will, kann beispielsweise auch die Shader der GLSL Sandbox verändern und die Auswirkungen sofort betrachten.

201304Jul

Three.js: Komfortable Partikel-Engine mit Anleitung

Über die Erstellung eines einfachen Partikel-Systems mit Three.js hatte ich bereits vor über einem Jahr berichtet: Die JavaScript-3D-Engine bietet mit "THREE.ParticleSystem" ein Basis-Objekt zur Erstellung von Partikel-Effekten an, die über ein Shader-Material visualisiert werden. Da dies in der Praxis durchaus etwas Denkarbeit erfordert, kann eine Anleitung wie die von Lee Stemkoski sehr behilflich sein. In seinem Artikel beschreibt er die Eigenschaften seiner Partikel-Engine, die zwar kompakt ist, aber dennoch sehr gut funktioniert.

Three.js - Komfortable Partikel-Engine mit Anleitung

So lassen sich mit der kleinen Engine verschiedene Effekte wie Feuer, Rauch, Regen oder Schnee simulieren. Jeder Partikel-Effekt basiert auf einer transparenten PNG-Grafik, die dann auf ein geometrisches Grundobjekt (Würfel oder Kugel) übertragen und bewegt wird. Die Steuerung der Bewegungen erfolgt bei dieser Engine über eine einfache Tween-Klasse, welche die Werte von definierten Eigenschaften interpoliert und auf die Partikel überträgt. Neben den eigentlichen Partikeln ist die Einstellung des Partikel-Emitters wichtig, da hier Anzahl und Lebensdauer der Partikel festgelegt werden. Die Quelldatei der Beispiele zeigt, wie wenig Code für die Erstellung der unterschiedlichen Partikel-Effekte notwendig ist. Der Quelltext der Engine ist ebenfalls übersichtlich und gibt Aufschluss über die Funktionsweise der Simulation.

201331Mai

Scrubby: JavaScript-Werte in Echtzeit verändern

Wer sich für Animationen, Spiele und interaktive Grafikanwendungen in HTML/JavaScript interessiert, wird Seiten wie CreativeJS oder die GLSL Sandbox bereits kennen. Für das Erstellen und Bearbeiten von Canvas-Animationen direkt im Browser hatte ich vor einem Jahr den Canvas Animation Playground entwickelt, der das Schreiben von Animationen beschleunigen soll.
Ein interessantes Skript in diesem Zusammenhang stellt Scrubby dar: Damit können die Zahlenwerte von JavaScript-Codes per Schieberegler verändert werden, wodurch sich eine HTML5-Canvas-Anwendung in Echtzeit manipulieren lässt.

Scrubby - Tweak values in JavaScript without having to reload

Für das direkte Bearbeiten von Animationen im Browser eignet sich Scrubby also hervorragend, da gerade für die Berechnungen von Positionen, Farben und Effekten etliche Anpassungen erforderlich sein können. Ein Skript-Block muss nur mit dem Typ "text/scrubby" gekennzeichnet werden, damit sich Werte interaktive verändern lassen.
Scrubby setzt dafür die ECMAScript-Tools Esprima und Escodegen ein. Bei GitHub findet sich der Quellcode zu Scrubby und eine Roadmap. So sind bereits weitere interessante Features geplant, wie etwa das Verändern von Strings oder das Einblenden eines Farbwählers.

201305Mai

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.

Epic Citadel HTML5

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.

201330Mär

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.

Evan Wallace - WebGL Water

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.

201328Mär

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.

The Mozilla Blog - Mozilla is Unlocking the Power of the Web as a Platform for Gaming

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.