Tag: webgl

201502Sep

Pixi.js: 2D-Render-Engine für WebGL- und Canvas-Spiele

Anfang 2013 wurde die Alpha-Version der Engine veröffentlicht, mittlerweile ist das Projekt ausgereift und hat viele neue Features spendiert bekommen: Mit Pixi.js steht eine Render-Engine zur Verfügung, die auf WebGL oder Canvas zurückgreift und an Adobe Flash/ActionScript angelehnt ist. Die Bibliothek basiert auf dem Scene Graph-Konzept und bietet unter Anderem Touch-Support, Unterstützung von SpriteSheet-Animationen, WebGL-Filter, Blend-Modi und vieles mehr.

Pixi.js - 2D WebGL renderer with canvas fallback

Die Beispiele der Engine zeigen verschiedene Szenarien. Mittlerweile gibt es ein breites Spektrum an Projekten, da sich Pixi.js zu einer soliden Render-Engine für HTML5-Browserspiele gemausert hat. Das Open Source-Projekt steht bei GitHub zum Download bereit.

201516Aug

Update: Web Development Tools mit allen Projekten

Heute gibt es noch eine weitere Neuigkeit in eigener Sache: Ich wollte meine bisherigen Anwendungen und Skripte für Webentwickler in einer großen Übersicht sammeln und darstellen. Dazu habe ich mein User-Repository bei GitHub verwendet. Dort finden sich jetzt die Web Development Tools. Hierbei handelt es sich um eine interaktive 3D-Darstellung, die ich mit der Famous Engine umgesetzt habe.

Web Development Tools - the complete collection

Die Seite besteht aus einer abstrakten Landschaft, auf der die verschiedenen Projekte verteilt sind. Zudem gibt es die vier Kategorien "Web Development", "User Interface Design", "Comparisons" und "Game Development", in denen die Tools zu finden sind. Die Landschaft wird um zukünftige Projekte erweitert werden. Viel Spaß beim Ausprobieren!

201526Jan

Texgen.js: Prozeduraler Texturen-Generator

Wer schnell und unkompliziert mit JavaScript prozedurale Texturen erzeugen will, kann dazu jetzt die Bibliothek Texgen.js von Mr. doob nutzen. Dabei handelt es sich um ein einfaches Canvas-Skript, das mit wenigen Methoden komplexe Muster ermöglicht. Zu den Grundfunktionalitäten gehören Rechtecke, Sinus-Funktionen, Schachbrettmuster, Rauschen und OR-/XOR-Verknüpfungen. Die Textur wird schließlich durch das Aneinanderreihen verschiedener Funktionen generiert, wobei die entsprechenden Ebenen durch Überlagerungen der einzelnen RGB-Pixel-Informationen (Addieren, Subtrahieren, Multiplizieren, Dividieren) zusammengefügt werden.

Texgen.js - Procedural Texture Generator

Der folgende Code ist aus dem "Waves"-Beispiel der GitHub-Seite von Texgen.js entnommen.

  • var texture = new TG.Texture( 493, 200 )
  • .add( new TG.SinX().frequency( 0.004 + 0.002*Math.sin(1/100)) )
  • .mul( new TG.SinY().frequency( 0.004 + 0.002*Math.sin(1/100)) )
  • .mul( new TG.SinX().offset( 16 ).frequency( 0.04 + 0.02*Math.sin(1/100) ) )
  • .mul( new TG.SinY().offset( 16 ).frequency( 0.04 + 0.02*Math.sin(1/100) ) )
  • .div( new TG.SinX().frequency( 0.02 ).color( 2, 4, 3 ) )
  • .mul( new TG.SinX().frequency( 0.003 ).color( 0.2, 0, 0 ) )
  • .toCanvas();

Eine Dokumentation gibt es in der Hinsicht nicht, wobei der Quellcode des Skripts überschaubar ist und sich daraus die jeweiligen Methoden ablesen lassen.

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.

201303Jul

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.