In dem folgenden Beitrag zeigen wir Ihnen auf, wie Sie aus einem 3D Shooter ein Virtual Reality(VR)-Spiel für VR-Headsets erstellen können.
Die Browser-Technologie hat sich in der letzten Zeit stark weiterentwickelt, mit einer Reihe von neuen aufregenden Funktionen, die in den Vordergrund rücken. In modernen Browser, die schon seit einiger Zeit WebGL unterstützen, gehört das neue WebXR jetzt zum Standard.
JavaScript ES5 wurde nun durch ES6 abgelöst. Mit diesen neuen Technologien hat sich die Entwicklung browserbasierter Anwendungen – und insbesondere von 3D-Spielen – deutlich vereinfacht. Auch die Hardware hat sich gut weiterentwickelt, so dass VR-Spiele heute deutlich kostengünstiger entwickelt werden können.
Mit einem mobilen Endgerät können Sie ein stereoskopisches Display für die Verwendung mit einem einfachen Cardboard-Viewer erstellen.
Wenn Sie ein altes Smartphone haben wie z.B. ein iPhone 6 oder Samsung Galaxy S7, können Sie ein Google Cardboard Headset für weniger Euro verwenden und es in einen rudimentären VR-Viewer verwandeln.
In diesem Artikel werden wir Ihnen aufzeigen, wie Sie einen 3D-Shooter so einrichten können, dass er nicht nur auf dieser Hardware läuft, sondern auch auf anderen Viewern wie dem Gear VR oder Daydream und sogar auf Gaming-Headsets wie dem Oculus, HTC oder Valve. All diese haben Webbrowser eingebaut, die WebXR oder einen 3D-Viewer unterstützen. Obwohl es einige Unterschiede in der Funktionsweise gibt, ist der Prozess der Anzeige einer 3D-Szene auf allen diesen Geräten meist derselbe, so dass wir die JavaScript-Bibliothek von Three.js verwenden können.
Es gibt eine große Auswahl an VR-Viewern und Headsets auf dem Markt, von Google Cardboard bis hin zu teuren Gaming-Headsets wie die Oculus-, HTC-, HP-, Microsoft– und Valve-Reihe.
Zunächst greifen wir auf einen bestehenden 3D Shooter zurück. Wir werden die gleichen Modelle und einen Großteil des gleichen Codes verwenden. Die erste Änderung wird darin bestehen, den Code so zu aktualisieren, dass er als ES6-Modul läuft. Die Nichtmodul-Version von Three.js wird Ende 2020 auslaufen, daher ist es wahrscheinlich am besten, mit der Zeit zu gehen und das neue Material zu verwenden. Dieser Code muss von einem sicheren Webserver ausführt werden, was bei mobilen Endgeräten und Gaming-Headsets bedeutet, dass Sie diesen an einen geeigneten Ort hochladen müssen.
Einfache VR-Viewer.
Jetzt müssen wir uns überlegen, mit welcher Hardware wir unser Spiel ausführen wollen. Wir beginnen mit Google Cardboard und arbeiten uns von dort aus weiter vor. Dieses Kit ist online über verschiedene Quellen wie dem Google PlayStore erhältlich und besteht aus einem ausgeschnittenen Bausatz, den Sie zusammenfalten müssen, um einen Viewer zu erstellen.
Sie können von einem Browserfenster aus in einer Gaming-Headset-Umgebung ein ThreeJS VR-Erlebnis starten.
Es gibt zwei Linsen zum Durchsehen, zwei Magnete in einer Aussparung an der Seite und Klettverschlusslaschen zum Halten eines Smartphones. Die Magnete an der Seite dienen als Auswahlmechanismus, auf die wir später etwas näher eingehen werden.
Als Nächstes betrachten wir Gear Viewer im VR-Stil.
Auf dem Markt gibt es viele verschiedene Typen zu Preisen von etwa 12 bis 40 Euro und es handelt sich dabei im Grunde um eine bessere Alternative zu einem Cardboard. Ein wesentlicher Unterschied ist ein Knopf oben, der als Auswahlbutton dient. Es können Smartphones unterschiedlicher Größe verwendet werden und solange das Gerät nicht älter als etwa vier Jahre ist, sollte es aktuell genug sein, um die 3D-Software ausführen zu können.
So ist zum Beispiel das Samsung Galaxy S5 durchaus in der Lage, VR darzustellen, aber es ist im Endergebnis zu langsam, um eine flüssiges VR-Erlebnis zu gewährleisten. Ein iPhone 6 hingegen, ist in der Lage, auch einfache VR-Szenen flüssig darzustellen.
Richtiges Profi-Kit.
Gaming Headsets sind etwas anders, da sie einen eingebauten Bildschirm und ein Android-Betriebssystem im Headset haben. Angebundene Headsets nutzen die Leistung eines angeschlossenen Computers, um die Anzeige zu erzeugen und alle verwenden ein etwas anderes ThreeJS-System, um die 3D-Darstellung zu erzeugen.
Mit der Zeit ist es wahrscheinlich, dass mehr Smartphones mit der VR-Software kompatibel sein werden, die von den Standalone Gaming-Headsets verwendet wird. Gaming Headsets verfügen auch über Sensoren, die sowohl Ihre Bewegungen als auch die Neigung des Headsets tracken und insgesamt sechs Freiheitsgrade bieten.
Vielen Dank für Ihren Besuch.