こんばんは。

腰がバグってるやつもうgood nightな @daybysay です。

関係ないですがSuchmos格好いいですね。 @jujunjun110に紹介してもらってからヘビロテです。聞いてるとお洒落な生き物になった気持ちになれるのでおすすめです。

さて、今回はUnity5.6で追加された VideoPlayerを利用する方法の紹介です。

※Unity5.6はベータリリースであり、こちらで紹介する内容は将来的に変更される可能性があります。

今回作業したリポジトリはこちら

github.com

Unityで全天球動画を再生する方法について

全天球動画プレイヤーを作る場合、全天球の動画を再生する必要があります。

Unity5.5以前で、アプリ内で動画再生をしようとした場合、下記の選択肢がありました。

MovieTextureを利用する
EasyMovieTextureやAVProなどのアセットを利用する

1のMovieTextureは、公式で用意されているAPIのため最初は期待していたのですが、再生時のCODECがOGGしか使えなかったり、

動的にMovieTextureを読み込みたい時に使うWWWクラスのmovieプロパティがバグっていたり、 iOSやAndroidでは全画面動画プレイヤーになってしまったりするため、かなり使いづらいものになっています。（このあたりの話はこちらの記事に詳しく書かれています

2の外部アセットは、特にEasyMovieTextureがコスパもよくおすすめです。しかし、有料だとなかなか簡単には試せません。

そんな中、Unity 5.6で華麗に登場した機能が、VideoPlayerです。

Unity5.6の VideoPlayer

VideoPlayerはMovieTextureの上位互換として実装される動画再生のコンポーネントです。

特徴を簡単にまとめると下記のようになります。

StreamingAssets、ローカルファイル、HTTP経由での動画読み込みが可能
CODECは H.264/AAC が利用可能で、それが利用できない環境においては VP8/Vorbis が利用可能
現時点でWindows OSX iOS WebGLがサポートされており、今後AndroidとTizenをサポートする予定あり

詳しくはドキュメントに記述があるのでそちらをご参照ください。

Video Player を利用した全天球動画プレイヤーの実装

では、さっそく Video Player を使ったプレイヤーの実装に入ります。

大まかなステップは下記になります

全天球動画の再生機能を実装
動的なファイルを読み込みの実装

全天球動画の再生機能を実装

動画再生用の球体を用意する

360度動画を再生するには、法線が内側を向いた球体を用意する必要があります。

今回はこちらのページで紹介されている方法を参考に作っています。

シーンを作成し、上記で作った球体を配置し、その真中にカメラをセットします。

f:id:DayBySay:20170213232615p:plain

なんらかのMaterialを用意し、Shaderは Unlit/Texture を設定しておいてください。

Video Playerの設定

次にVideoPlayerを配置します。

オブジェクトの新規作成時に Video -> VideoPlayer と選択することでシーン上に配置できます。

f:id:DayBySay:20170213232603p:plain

最初に動画をレンダリングする先を設定します。

RenderModeがRenderTextureになっているので、MaterialOverrideに変更したあとに、さきほどシーンに置いた球体を設定します。

f:id:DayBySay:20170213232730p:plain

これで球体に動画を写す準備が整いました。

動画を再生してみる

ここで一度動画を再生してみましょう。

VideoPlayerは、エディタ上からローカルの動画ファイルを読み込むことができます。

MovieTextureを使っていた頃の、プロジェクトに追加して動画をコンバートして。。みたいな手間がなくなってカナリ楽ちんです。

まずはVideoPlayerのSourceをURLに変更します。

すると、ブラウズ用のボタンが出てくるので押します。

そこから任意の動画ファイル（全天球が望ましい）を選択するだけです。

f:id:DayBySay:20170213233356p:plain

準備ができたら再生してみましょう！

f:id:DayBySay:20170213233555p:plain

かなり分かりづらいですが、360度動画が再生できています。

HMDをお持ちの場合、File -> Build Settings -> Player Settings -> Othre Settings -> Virtual Reality SupoortedをONにするだけで、すでに360度動画を体験することができます。

うーん、色々便利になっている。。

動的なファイルを読み込みの実装

さて、実際にアプリケーションとして完結させるためには、ファイル選択用のダイアログ部分をアプリケーション内に実装する必要があります。

実際はプラットフォーム毎に実装を行う必要がありますが、今回はWindows向けに実装を行いました。

ダイアログを実装する

Windows向けにダイアログを実装する方法として、今回はSystem.Windows.Formsを利用した方式にしました。（もっといい方法あったら教えてください。。

まず最初に、System.Windows.Forms.dllをUnity_Location\Editor\Data\Mono\lib\mono\2.0からコピーしてきて、プロジェクトのPlugins以下に追加したください。

f:id:DayBySay:20170213235109p:plain

次に File -> Build Settings -> Player Settings -> Othre Settings -> Configuration -> Api Compatible Level を.Net 2.0 Subsetから.Net 2.0に変更します。

これで、Windowsのダイアログを利用する準備が整いました。

実際に利用する箇所のコードを書きましょう。

using UnityEngine;
using UnityEngine.Video;
using System.Runtime.InteropServices;
using System.Windows.Forms;

public class Form : MonoBehaviour {
    [DllImport("user32.dll")]
    private static extern void OpenFileDialog();

    [SerializeField]
    private VideoPlayer videoPlayer;

    void Start () {
        OpenFileAndPlay();
    }

    public void OpenFileAndPlay()
    {
        string filePath = OpenFile();

        if (filePath == "")
        {
            return;
        }

        string filename = System.IO.Path.GetFileName(filePath);
        videoPlayer.url = "file://" + filePath;
        videoPlayer.Play();
    }

    private string OpenFile()
    {
        OpenFileDialog dialog = new OpenFileDialog();
        DialogResult result = dialog.ShowDialog();

        return dialog.FileName;
    }
}

上記はdllからWindowsのネイティブコードを呼び出す実装をしています。

このスクリプトをシーン内の何らかのオブジェクトにアタッチして、VideoPlayerをアサインしましょう。

f:id:DayBySay:20170214000759p:plain