360 Grad Video in Google Daydream mit Unity

Einleitung

Um ein 360 Grad Video in Virtueller Realität darzustellen, muss eigentlich nur die Kamera (die die Augen der Daydream darstellen) in eine Kugel gesteckt werden.

Die Kugel muss auf der Innenseite anschließend das Video abspielen.

Um das in Unity umzusetzen für die Google Daydream sind folgende kleineren Herausfoderungen zu meistern:

  • Die Kamera in eine Kugel stellen
  • Die Innenseite der Kugel soll die Textur darstellen
  • Herunterladen eines 360 Grad Videos in guter Qualität
  • Ein Video auf einer Textur abgespielt werden
  • Integration in Goolge Daydream

Unity mit Kamera in der Kugel

Zunächst ist ein neues Projekt zu erstellen:

*Eine Kugel zu erstellen:

Die Kugel auf Position 0,0,0 stellen und auf 5 in alle Richtungen vergrößern:

Auch die Kamera ist auf die Position 0,0,0 zu stellen, so dass sich diese innerhalb der Kugel befindet:

Bisher ist das alles noch recht einfach, allerdings sieht man in der Game View nun nicht das man sich innerhalb der Kugel befindet:

Warum ist das so?

Weil aktuell nur die Außenseite die Textur bekommt, aber nicht die Innenseite, daher muss die Darstellung geändert werden

Die Innenseite der Kugel soll die Textur darstellen

Damit die Innenseite auch dargestellt wird, muss der Kugel ein spezieller Shader zugewiesen werden, der dafür sorgt, dass dies auch korrekt dargestellt wird.

Hierzu erstellen wir einen neuen Shader:

Den Shader nennen wir einfach "InsideVisible":

Inhaltlich geben wir den folgenden Code:

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

// Based on Unlit shader, but culls the front faces instead of the back

Shader "Custom/InsideVisible" {  
    Properties{
        _MainTex("Base (RGB)", 2D) = "white" {}
    }

        SubShader{
        Tags{ "RenderType" = "Opaque" }
        Cull front    // ADDED BY BERNIE, TO FLIP THE SURFACES
        LOD 100

        Pass{
        CGPROGRAM
#pragma vertex vert
#pragma fragment frag

#include "UnityCG.cginc"

        struct appdata_t {
        float4 vertex : POSITION;
        float2 texcoord : TEXCOORD0;
    };

    struct v2f {
        float4 vertex : SV_POSITION;
        half2 texcoord : TEXCOORD0;
    };

    sampler2D _MainTex;
    float4 _MainTex_ST;

    v2f vert(appdata_t v)
    {
        v2f o;
        o.vertex = UnityObjectToClipPos(v.vertex);
        // ADDED BY BERNIE:
        v.texcoord.x = 1 - v.texcoord.x;
        o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
        return o;
    }

    fixed4 frag(v2f i) : SV_Target
    {
        fixed4 col = tex2D(_MainTex, i.texcoord);
    return col;
    }
        ENDCG
    }
    }

}

Als nächstes erstellt man ein neues Material:

Dem neuen Material geben wir einen Namen und weisen den neuen Shader zu:

Anschließend weisen wir das Material per Drag and Drop das neue Material zu:

Nun sollte die Game View "Weiß" sein und damit das aktuell noch weiße Material auch nach innen zur Kamera sichtbar sein:

Herunterladen eines 360 Grad Videos in guter Qualität

Zum herunterladen von Youtube Videos gibt es verschiedene Möglichkeiten, ich benutze den Firefox und das folgende Plugin: https://addons.mozilla.org/sv-se/firefox/addon/media-downloader/

Allerdings gibt es auch weitere gute. Wichtig ist nur dass man die höchste Qualität herunterlädt und ein hoch qualitatives Video zum Download auswählt:

https://www.youtube.com/watch?v=MgJITGvVfR0

Als Format wähle ich in diesen Beispiel die 4K Version aus:

Das "webm" Format benötigen wir in MP4, daher wird noch ein Konverter benötigt. Ich verwende "ffmpeg" in diesen Beispiel und habe das Command-Line-Tool hier heruntergeladen:
http://ffmpeg.zeranoe.com/builds/

Mit dem folgenden Kommando startet man die Konvertierung:

ffmpeg -i "C:\Users\Christian\Downloads\Maldives VR 360 - 4K Video [4K].webm" -qscale 0 c:\temp\maldives.mp4  

Nach ein paar Minuten ist die Konvertierung dann beendet (mir ist durchaus bewusst das es schnellere Wege der Konvertierung gibt):

Das Ergebnis ist anschließend nach Unity zu kopieren:

Als nächstes muss das Video noch auf die Sphere projiziert werden.

Ein Video auf einer Textur abgespielt werden

Zunächst ist ein neues Video Player Element in die Scene einzufügen:

Mit Drag and Drop wird das Malediven Video nun dem Video Player zugewiesen:

Als nächstes prüfen wir die Auflösung der Videos:

Die Auflösung "3840x1920" benötigen wir nämlich jetzt um eine Textur anzulegen:

Der Textur ist jetzt diese Auflösung zuzuweisen:

Den Video Player konfigurieren wir, dass er nun an diese Textur seine Ausgabe macht:

Die Textur weisen wir dem Sphere Material zu:

Spielt man nun Unity ab, dann zeigt die Kugel das Video:

Integration in Google Daydream

Bisher ist die gezeigt Lösung unabhängig vom Zielsystem und kann mit kleineren Abwandlungen auch für Oculus, HTC Vive etc verwendet werden. Ab jetzt wird auf die Google Daydream eingegangen.

Hierzu ist nun die Google SDK in das Projekt zu importieren. Das Paket ist unter folgenden Link herunter zu laden: https://developers.google.com/vr/unity/download#google-vr-sdk-for-unity

Anschließend ist der Download zu importieren:

Bei der Nachfrage sollte man alles importieren:

Anschließend sollte die "Scene" gespeichert werden:

Als Name für die Scene habe ich "VideoDemo" gewählt:

Nun öffnen wir die Demo Scene von Google:

Die folgenden drei Elemente sind auszuwählen und in die Zwischenablage zu kopieren:

Anschließend wechseln wir wieder zu unserer Scene und fügen den Inhalt der Zwischenablage ein:

Die Position des Player ist auf 0,0,0 zu korrigieren:

Die bisherige "Main Camera" kann nun gelöscht werden, da der Player auch eine Kamera enthält:

Die Pointer werden deaktiviert, da sie nur stören. Löschen sollte man diese nicht, da in einer besseren Lösung diese bspw. für Filmauswahl oder Menübedienung benötigt werden. In diesem einfachen Beispiel sind diese aber nur störend.

Leider scheint die Google API einen Bug zu haben, so das ein Starten einen Kompiler Fehler wirft:

Damit alles funktioniert habe ich "yield" hinzugefügt:

Nun können wir zu den Build Settings gehen:

Da das Ziel ein Android Gerät ist, muss das Ziel gewählt werden und anschließend klicken wir auf Player Settings:

Anschließend sind die Einstellung wie abgebildet durchzuführen:

Nun kann auf "Build and Run" geklickt werden und die Ziel APK definiert werden:

Zusammenfassung

360 Videos in VR darstellen ist nicht so schwierig, wenn man alle Ansätze zuammen hat. Diese Demo ist natürlich nur der Anfang und es fehlen noch Menüs und andere GUI Elemente.

Unter folgenden Link kann man die APK auch herunterladen (205 MB wegen dem Video!): http://cloud.vr-worlds.de/index.php/s/9AZe6QEIXXBAaDE

Das komplette Projekt finden Sie unter folgenden Link(460 MB): http://cloud.vr-worlds.de/index.php/s/xc9xknagbvmc5kl