Tag: webgl

201504Nov

Platforms: 3D-WebGL-Spiel wird Open Source

Es gibt wieder ein kleines Update in eigener Sache: Auf eine Anfrage hin habe ich mein WebGL-Browserspiel Platforms in ein Open Source-Projekt umgewandelt. Der Quelltext steht ab sofort bei GitHub bereit. Entwickelt wurde Platforms zusammen mit dem Framework THREE.BasicThirdPersonGame, das auf THREE.js und Cannon.js basiert.

Platforms - A THREE.BasicThirdPersonGame project

Bei GitHub steht lediglich der Quelltext bereit, eine Dokumentation für Platforms gibt es nicht. Der Code ist weitestgehend kommentiert und selbsterklärend. Wer sich für die grundlegenden Konzepte des Spiels interessiert, kann einen Blick in die Dokumentation von THREE.BasicThirdPersonGame werfen.

201509Sep

ShaderFrog: WebGL-Shader im Browser kombinieren

Für Entwickler von hardwarebeschleunigten Computer- und Browserspielen stellen Shader ein wichtiges Werkzeug dar, wenn es darum geht, besondere Effekte zu simulieren. Dabei stehen Entwicklern Fragment- und Vertex-Shader zur Verfügung, die unterschiedlich vom Grafikprozessor verarbeitet werden. Eine Hürde für angehende WebGL- oder OpenGL-Entwickler kann die dazu benötigte Mathematik sein, da Shader eine gewisse Komplexität aufweisen.
Für WebGL gibt es mittlerweile schon Tools wie das Shader Toy oder die GLSL Sandbox, mit denen sich der Shader-Code direkt im Browser bearbeiten lässt. Eine andere Variante stellt nun ShaderFrog dar, ein browsergestützter Shader-Editor, mit dem sich Shader auch kombinieren lassen.

ShaderFrog - WebGL Shader Editor and Composer

ShaderFrog bietet also die Möglichkeit, gewöhnliche Shader per Code (Basic Shader) oder einen zusammengesetzten Shadern (Composed Shader) aus mehreren Shadern zu erzeugen. Letzteres ermöglicht das Kombinieren bestehender Shader, ohne dass Code eingegeben werden muss. Die Shader können auf der Website ausgewählt werden. In einer Vorschau wird das Resultat des kombinierten Shader-Programms angezeigt. Werte lassen sich per Schieberegler oder Eingabefelder anpassen.
Fertige Shader lassen sich nach THREE.js exportieren. Wer seinen Shader in Unity, iOS oder reinem GLSL nutzen will, benötigt einen Pro-Account. Ein Marktplatz für Shader ist ebenfalls geplant, so dass Entwickler gezielt nach fertigen Effekten suchen können.

201507Sep

WebGLStudio: Komplette 3D-Szenen im Browser erstellen

Mit WebGL lassen sich nicht nur Spiele oder Betrachter für 3D-Modelle umsetzen, sondern auch ganze 3D-Editoren. Mit WebGLStudio steht ein ausgereiftes Exemplar dieser Art bereit. Dabei handelt es sich also um eine interaktive Webanwendung, mit der sich komplette 3D-Szenen erzeugen lassen. Es können verschiedene Grundkörper angelegt oder auch 3D-Modelle importiert werden. Natürlich können auch Lichter und Kameras hinzugefügt werden. Zudem sind Animationen durch Keyframes möglich und auch ein Node-Editor steht bereit, so dass auch komplexere Szenen erstellt werden können.

WebGLStudio - 3D Development environment for the web

Die Online-Demo zeigt, was der Editor bisher zu bieten hat. Neben den genannten Funktionen können einer Szene auch eigene Shader hinzugefügt werden. Szenen können zudem exportiert und lokal gespeichert werden (hierfür kommt ein eigenes Format zum Einsatz).
Die Idee eines solchen Editors nicht neu: Mit ThreeFab oder ThreeNodes stehen schon seit geraumer Zeit ähnliche Projekte bereit, die allerdings auf THREE.js ausgelegt sind.

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.