360 VR-App in 10 Minuten mit Unity - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:18

Wie bauen wir diese App?

Im Gegensatz zu normalen Videos mit rechteckigem Frame hat 360-Video die Form einer Kugel. Wir müssen also zuerst einen kugelförmigen Bildschirm erstellen, auf den wir unser 360-Grad-Video projizieren können. Der Spieler (oder Betrachter) befindet sich in dieser Kugel und kann das Video in jede Richtung ansehen. Die folgenden Schritte sollten Ihnen das Gefühl geben, Ihre eigenen Änderungen vorzunehmen, indem Sie erklären, wie alles unter der Haube funktioniert. Für Schritt-für-Schritt-Anleitungen

Schritt 1: Was Sie brauchen

Ein Android-Telefon mit einem Gyroskop zum Erfassen von Kopfbewegungen, das auf KitKat oder einem neueren Betriebssystem läuft.

Ein Headset aus Karton. Wenn Sie keinen besitzen, können Sie viele bei Amazon für weniger als 10 Dollar finden.

Unity3D, eine plattformübergreifende Spiel-Engine, die Sie auf Ihrem Computer installieren müssen, Version 5.6 oder neuer. Wir werden diese Software verwenden, um unser gesamtes Projekt zu erstellen.

Das GoogleVR SDK für Unity, das Sie vorher herunterladen können.

Ein 360-Grad-Video. Nehmen Sie eine mit einer 360-Grad-Kamera auf oder Sie finden 360-Videos auf Youtube, Facebook oder einer beliebigen 360-Video-Website

Schritt 2: Baue eine Kugel

Lassen Sie uns zunächst ein neues Unity-Projekt öffnen, wenn Sie bei Null anfangen (oder eine neue Szene, wenn Sie den 360-Videoplayer in ein vorhandenes Projekt integrieren möchten). Stellen Sie sich eine Szene als eine Ebene eines Videospiels und ein Projekt als ein volles Spiel.

Fügen Sie anschließend in der Szene ein Kugelobjekt hinzu, das in seiner Mitte (Position = 0, 0, 0) mit einem Radius von 50 (Scale = 50, 50, 50) platziert ist. Die Position der Kamera sollte ebenfalls auf 0, 0, 0 gesetzt werden. Die Kamera ist die Augen des Spielers/Zuschauers, also wollen wir sie in der Mitte der Kugel haben. Wenn Sie es an einer anderen Stelle platzieren, würde das Video verzerrt aussehen. Sobald die Kamera in der Kugel platziert ist, ist diese in der Szene nicht mehr sichtbar. Keine Sorge, dafür gibt es eine Erklärung! Tatsächlich rendern die meisten Game-Engines standardmäßig nicht die Innenseite von 3D-Objekten. Dies liegt daran, dass wir sie selten sehen müssen, es wäre eine Ressourcenverschwendung, sie zu rendern. Wir werden das als nächstes beheben.

Schritt 3: Umkehren der Normalen der Kugel

In unserem Fall müssen wir unsere Sphäre von innen sehen. Das ist der springende Punkt der App, also werden wir sie umkrempeln.

In Unity sind Kugeln nicht wirklich Kugeln (was? Wir wurden die ganze Zeit belogen!), sondern Polygone mit Tausenden von winzigen, winzigen Facetten. Die Außenseiten der Facetten sind sichtbar, die Innenseiten jedoch nicht. Aus diesem Grund werden wir ein Programm erstellen, um diese kleinen Facetten wie Pfannkuchen umzudrehen. In der 3D-Geometrie nennen wir diese Transformation „Umkehrung der Normalen“oder „Umkehrung der Normalen“. Wir verwenden ein Programm namens Shader, das wir auf das Material der Kugel anwenden. Materialien steuern das Erscheinungsbild von Objekten in Unity. Shader sind kleine Skripte, die die Farbe jedes gerenderten Pixels basierend auf Beleuchtung und Informationen aus ihren Materialien berechnen. Erstellen Sie daher ein neues Material für die Kugel und dann einen neuen Shader, der auf dieses Material angewendet wird. Wir müssen benutzerdefinierten Code für den Shader schreiben… aber keine Angst, Sie können den folgenden Code kopieren und einfügen:

Klicken Sie auf diesen Link für Code-Link

Dieser kleine Shader wird jedes Pixel der Kugel umkrempeln. Jetzt erscheint unsere Sphäre wie eine große weiße Kugel, von innen betrachtet, in unserer Szene. Der nächste Schritt besteht darin, diese weiße Kugel in einen Videoplayer zu verwandeln.

Schritt 4: Projizieren Sie Ihr 360-Grad-Video in die Kugel

Hier müssen Sie ein 360 mp4-Video zur Hand haben. Importieren Sie es in das Projekt und ziehen Sie es dann auf die Kugel. Und dann passiert die Magie: Eine „Video Player“-Komponente erscheint und boomt, das Video ist abspielbereit. Sie können mit den Einstellungen wie Loops und Audio spielen. Es unterstützt auch Streaming!

Schritt 5: Google Cardboard einrichten?

In diesem Schritt sorgen wir dafür, dass sich das Erlebnis wirklich immersiv anfühlt. Deshalb wollen wir es in einem VR-Headset betrachten, hier ein Google Cardboard.

Wir werden mit dem GoogleVR SDK eine „stereoskopische“Ansicht erstellen (der Bildschirm wird in zwei Teile geteilt, mit einigen Fischaugeneffekten auf beiden Seiten – eine Seite für jedes Auge). Der Fischaugeneffekt auf jedem Auge in Kombination mit der Verzerrung der Kunststofflinsen des Cardboards gibt Ihnen die Illusion von Tiefe und Immersion.

Um das GoogleVR SDK zu unserem Projekt hinzuzufügen, laden Sie das Plugin herunter und importieren Sie es. Anschließend passen wir eine Reihe von Android-Einstellungen an:

• Gehen Sie zum oberen Menüleisten > Datei > Build-Einstellungen. Fügen Sie Ihre offene Szene hinzu, falls sie noch nicht hinzugefügt wurde, und wählen Sie dann Android in der Liste der unterstützten Plattformen aus.
• Klicken Sie auf Plattform wechseln. Beim ersten Wechsel sollte es eine Weile dauern.
• Klicken Sie auf Player-Einstellungen. Komponenten werden im Kursleiterfenster angezeigt.

Im Instruktor der Spielereinstellungen im Abschnitt „Andere Einstellungen“:

• Überprüfen Sie, ob Virtual Reality unterstützt wird. Wählen Sie unter Virtual Reality SDKs das Symbol + und dann Karton aus, um es der Liste hinzuzufügen.
• Geben Sie einen Paketnamen in das Feld Bundle Identifier ein (z. B. com.ihredomain.demo360). Sie muss eindeutig sein und dient dazu, unsere App von anderen im Google Play Store zu unterscheiden.
• Setzen Sie das Dropdown-Menü Minimum API Level auf „Android 4.4 ‚Kit Kat‘(API level 19)“.

Nehmen Sie anschließend das Element „GvrViewerMain“aus dem Ordner GoogleVR\Prefabs im Projektbrowser und ziehen Sie es in die Szene. Geben Sie ihm im Inspektor dieselbe Position wie das Zentrum der Kugel - (0, 0, 0).

Das GvrViewerMain Prefab steuert alle Einstellungen des VR-Modus, wie z. B. die Anpassung des Bildschirms an die Linsen des Cardboards. Es kommuniziert auch mit dem Gyroskop Ihres Telefons, um Ihre Kopfbewegungen zu verfolgen. Wenn Sie Ihren Kopf drehen, drehen sich die Kamera und das, was Sie sehen, auch im 360-Video-Player. Jetzt können Sie in alle Richtungen schauen, wenn das Video eingeschaltet ist und der Bildschirm in zwei Teile geteilt ist, um beide Linsen des Cardboards unterzubringen.

Schritt 6: Führen Sie die App auf Android aus?

Als letzten Schritt führen wir die App auf einem Android-Telefon aus und teilen sie mit Freunden! Dazu gibt es zwei Möglichkeiten: Gehen Sie zurück zu Datei > Build-Einstellungen. Sie können ein Android-Telefon mit einem USB-Kabel an Ihren Computer anschließen und auf Build & Run klicken. Dadurch wird die App direkt auf Ihrem Telefon installiert. Die andere Möglichkeit besteht darin, auf Nur erstellen zu klicken. Dadurch wird es nicht auf einem Telefon installiert, sondern eine APK-Datei generiert. Sie können die APK per E-Mail mit jedem teilen, der das gerade gebaute Meisterwerk ausprobieren möchte. Sie müssen zweimal auf den APK-Anhang tippen, um ihn auf ihren Telefonen zu installieren. Während des Build-Vorgangs werden Sie möglicherweise aufgefordert, den Android SDK-Stammordner auszuwählen. Wenn dies der Fall ist, laden Sie das Android SDK herunter und wählen Sie den Speicherort des Ordners aus. Starten Sie die App, stecken Sie Ihr Telefon in ein Cardboard-Headset, und schon kann es losgehen! Sie können das Video durch alles im 360-Format ersetzen und VR 360-Immersion zu Hause erleben.

Weitergehen

Herzlichen Glückwunsch, Sie haben eine 360-Grad-Video-App erstellt und sind nur noch einen Schritt davon entfernt, eine VR-Video-App zu erstellen! Obwohl die Begriffe oft gleich verwendet werden, definieren 360 und VR zwei unterschiedliche Erfahrungen: 360-Videos werden aus allen Blickwinkeln aufgenommen, mit einer speziellen Kamera oder einem Zusammenbau von mehreren. Der Benutzer kann in jede gewünschte Richtung schauen, aber es gibt keine Interaktivität für das Erlebnis. VR bezieht sich normalerweise auf eine computergenerierte Umgebung, in die der Benutzer eintaucht. Es ist ein interaktives Erlebnis: Der Spieler kann sich bewegen und Objekte steuern, zusätzlich zum Blick in alle Richtungen.

Schritt 7:

Ihre neue App kann als Ausgangspunkt für ein umfassenderes VR-Erlebnis dienen. Unity bietet viele Funktionen, die Sie nutzen können, wie das Hinzufügen von 3D-Elementen oder coolen Partikeleffekten ✨, um Ihr Video zu überlagern und zu verbessern, oder das Einfügen einiger interaktiver Elemente.

Schritt 8: Kein Step-Walking-Skript (optional)

Sie können auch eine vollständige 3D-Umgebung im 360-Videoplayer platzieren und diesen als Skybox verwenden. Der Benutzer kann mit diesem raffinierten Walking-Skript in der Szenerie navigieren.