WebGLGamemitThree.js
Zusammen mit dem Relaunch der neuen Demodern Website haben wir ein Mini WebGL Game umgesetzt. Zum einen als Prof-of-Concept, dass aufführt wie WebGL die Web Experience steigert und zum anderen da WebGL einfach unser digitales Herz schneller schlagen lässt.
Für die Umsetzung benutzten wir Three.js R68, eine JavaScript library/API zum Erstellen von WebGL-Animationen/Grafiken im Browser.
In diesem Artikel geben wir einen kurzen Überblick für ein simples "Hello Three.js" sowie Einblicke in die ein oder andere Herausforderung in der Umsetzung unseres WebGL-Games.
„Hello Three.js“
DER RENDERER
DIE SCENE
DIE KAMERA
DAS LICHT
DAS OBJEKT: BOX
Das Zwischenergebnis sollte nun so aussehen.
Falls nicht, keine Sorge. Den Code findet Ihr auch auf GitHub.
Nichtsdestotrotz sieht das ganze ein wenig langweilig aus, also lasst uns die Box animieren.
DAS OBJEKT: PLANE
DIE ANIMATION
Jetzt müsstet Ihr eine grüne und rotierende Box sehen, sowie einen grauen Untergrund.
Den Code findet Ihr ebenfalls auf GitHub.
„Three.js Game Parts“
Ok... alles schön und gut, aber wie kommen wir nun von einer grünen Box zu einem WebGL-Mini Game? Also lasst uns einmal die "Knackpunkte" auseinander nehmen.
DIE HEIGHTMAP
Wir nehmen uns eine noisemap zur Hand, eine Art grauskaliertes PNG und lassen es in einen 2D canvas rendern. Daraufhin gehen wir jeden einzelnen Pixel dieses canvas durch und konvertieren die Pixeldaten in für uns brauchbare Werte. Zum Beispiel bekommt ein grauer Pixel den Wert 15 und ein schwarzer den Wert 25.
Danach bestimmen wir die Höhe der Eckpunkte unserer verwendeten Three.js Geometrie anhand der konvertierten Pixelwerte. Das bedeutet, dass z. B. ein weißer Pixel den tiefsten Punkt abbildet und ein schwarzer den höchsten.
BILDDATEN AUSLESEN
TERRAIN ERSTELLEN
DIE KOLLISIONSABFRAGE
Aus Performancegründen wollten wir auf eine Physik-Engine verzichten. Somit behalfen wir uns der THREE.Raycaster Klasse, welche zusammen mit Three.js gebündelt ist.
FAZIT
Für unser WebGL-Game sind wir mit Three.js ganz gut gefahren um innerhalb kurzer Zeit ein Ergebnis zu erreichen. Three.js ist noch relativ neu, und es gibt noch viel Raum nach oben. Aber three.js entwickelt sich weiter, und andere WebGl Plattformen wie away3D und auch der UnityV5 WebGl export zeigen das wir erst am Anfang sind. Heißhunger haben wir auf jeden Fall.
Links: