3D-Spiele im Web

Für reichhaltige Spielerlebnisse im Web ist die Waffe der Wahl WebGL, das auf HTML-<canvas> gerendert wird. WebGL ist im Grunde OpenGL ES 2.0 für das Web — es ist eine JavaScript-API, die Werkzeuge zur Verfügung stellt, um reichhaltige interaktive Animationen zu erstellen und natürlich auch Spiele. Sie können dynamische 3D-Grafiken mit JavaScript generieren und rendern, die hardwarebeschleunigt sind.

Dokumentation und Browser-Kompatibilität

Die WebGL-Projektdokumentation und Spezifikation wird von der Khronos Group gepflegt, nicht wie die meisten anderen Web-APIs vom W3C. Die Unterstützung in modernen Browsern ist sehr gut, sogar auf mobilen Geräten, sodass Sie sich darum nicht allzu viel Sorgen machen müssen. Die Hauptbrowser unterstützen alle WebGL und Sie müssen sich nur darauf konzentrieren, die Leistung auf den von Ihnen verwendeten Geräten zu optimieren.

Es gibt eine laufende Anstrengung, WebGL 2.0 (basierend auf OpenGL ES 3.0) in naher Zukunft zu veröffentlichen, was viele Verbesserungen bringen und Entwicklern helfen wird, Spiele für das moderne Web mit aktueller, leistungsfähiger Hardware zu erstellen.

Erklärung der grundlegenden 3D-Theorie

Die Grundlagen der 3D-Theorie konzentrieren sich auf Formen, die in einem 3D-Raum dargestellt werden, wobei ein Koordinatensystem verwendet wird, um ihre Positionen zu berechnen. In unserem Artikel über die Erklärung der grundlegenden 3D-Theorie finden Sie alle notwendigen Informationen.

Erweitere Konzepte

Mit WebGL können Sie viel mehr machen. Es gibt einige erweiterte Konzepte, in die Sie eintauchen und mehr darüber lernen sollten — wie Shader, Kollisionsabfrage oder das neueste heiße Thema: Virtual Reality im Web.

Shader

Es lohnt sich, Shader zu erwähnen, die eine eigene Geschichte für sich sind. Shader verwenden GLSL, eine spezielle OpenGL-Shadersprache mit einer Syntax, die C ähnlich ist und direkt von der Grafik-Pipeline ausgeführt wird. Sie können in Vertex-Shader und Fragment-Shader (oder Pixel-Shader) unterteilt werden — erstere transformieren Positionsformen in reale 3D-Zeichenkoordinaten, während letztere Rendering-Farben und andere Attribute berechnen. Sie sollten sich definitiv den Artikel über GLSL Shader ansehen, um mehr über sie zu lernen.

Kollisionsabfrage

Es ist schwer, sich ein Spiel ohne Kollisionsabfrage vorzustellen — wir müssen immer herausfinden, wann etwas auf etwas anderes trifft. Wir haben Informationen, von denen Sie lernen können:

WebXR

Das Konzept der virtuellen Realität ist nicht neu, erlebt aber dank technischer Fortschritte wie der Meta Quest und der (derzeit experimentellen) WebXR API einen Aufschwung im Web, um Informationen von XR-Hardware zu erfassen und in JavaScript-Anwendungen nutzbar zu machen. Weitere Informationen finden Sie in WebXR — Virtual and Augmented Reality for the Web.

Es gibt auch den Artikel Aufbau einer einfachen Demo mit A-Frame, der zeigt, wie einfach es ist, 3D-Umgebungen für die virtuelle Realität mit dem A-Frame Framework zu bauen.

Der Aufstieg von Bibliotheken und Frameworks

Das Codieren von rohem WebGL ist ziemlich komplex, aber auf lange Sicht sollten Sie lernen, damit umzugehen, da Ihre Projekte fortschrittlicher werden (siehe unsere WebGL-Dokumentation, um loszulegen). Für reale Projekte werden Sie wahrscheinlich auch ein Framework verwenden, um die Entwicklung zu beschleunigen und Ihnen bei der Verwaltung des Projekts zu helfen, an dem Sie arbeiten. Die Verwendung eines Frameworks für 3D-Spiele hilft auch, die Leistung zu optimieren, da vieles von den verwendeten Werkzeugen übernommen wird, sodass Sie sich auf den eigentlichen Bau des Spiels konzentrieren können.

Die populärste JavaScript-3D-Bibliothek ist Three.js, ein vielseitiges Werkzeug, das übliche 3D-Techniken einfacher umsetzbar macht. Es gibt auch andere beliebte Spieleentwicklungsbibliotheken und Frameworks, die es sich anzuschauen lohnt; A-Frame, PlayCanvas und Babylon.js gehören zu den bekanntesten, mit umfangreicher Dokumentation, Online-Editoren und aktiven Communities.

Aufbau einer einfachen Demo mit A-Frame

A-Frame ist ein Web-Framework zum Erstellen von 3D- und VR-Erlebnissen. Im Kern handelt es sich um ein Three.js-Framework mit einem deklarativen Entity-Component-Muster, was bedeutet, dass wir Szenen nur mit HTML erstellen können. Im Unterartikel Aufbau einer einfachen Demo mit A-Frame finden Sie den Schritt-für-Schritt-Prozess zur Erstellung der Demo.

Aufbau einer einfachen Demo mit Babylon.js

Babylon.js ist eine der beliebtesten 3D-Spiel-Engines, die von Entwicklern verwendet wird. Wie jede andere 3D-Bibliothek bietet sie eingebaute Funktionen, die Ihnen helfen, gängige 3D-Funktionen schneller zu implementieren. Im Unterartikel Aufbau einer einfachen Demo mit Babylon.js finden Sie die Grundlagen zur Verwendung von Babylon.js, einschließlich der Einrichtung einer Entwicklungsumgebung, der Strukturierung des notwendigen HTML und dem Schreiben des JavaScript-Codes.

Aufbau einer einfachen Demo mit PlayCanvas

PlayCanvas ist eine beliebte 3D-WebGL-Spiel-Engine, die auf GitHub als Open Source verfügbar ist, mit einem Online-Editor und guter Dokumentation. Der Unterartikel Aufbau einer einfachen Demo mit PlayCanvas enthält Details auf höherer Ebene, und weitere Artikel zeigen, wie man Demos mit der PlayCanvas-Bibliothek und dem Online-Editor erstellt.

Aufbau einer einfachen Demo mit Three.js

Three.js bietet, wie jede andere Bibliothek, einen großen Vorteil: Anstatt Hunderte von Zeilen WebGL-Code zu schreiben, um etwas Interessantes zu bauen, können Sie es mit eingebauten Hilfsfunktionen viel einfacher und schneller tun. Im Unterartikel Aufbau einer einfachen Demo mit Three.js wird der Schritt-für-Schritt-Prozess zur Erstellung der Demo beschrieben.

Andere Werkzeuge

Sowohl Unity als auch Unreal können Ihr Spiel nach WebGL mit asm.js exportieren, so dass Sie deren Werkzeuge und Techniken verwenden können, um Spiele zu erstellen, die ins Web exportiert werden sollen.

Illustration von drei 3D-Geometrieformen: ein grauer Torus, ein blauer Würfel und ein gelber Zylinder.

Wohin es als nächstes gehen soll

Mit diesem Artikel haben wir nur an der Oberfläche dessen gekratzt, was mit den derzeit verfügbaren Technologien möglich ist. Sie können immersive, schöne und schnelle 3D-Spiele im Web mit WebGL und den darauf aufbauenden Bibliotheken und Frameworks erstellen.

Quellcode

Den gesamten Quellcode zu dieser Serie finden Sie demos auf GitHub.

APIs

Frameworks

Anleitungen