kazumalab tech log

流行りとリラックマと嵐が大好きです。技術的ログ。

Easy Movie Textureを使って平面と全天球動画を切り替えてみる

Kazuma.です。

ふとGearVRでブラウジングをしていた時にYoutubeの動画が平面、全天球に切り替えることができることを知りました。


動画を表示させるMovieTexureがありますが、モバイルでは表示させることができないので今回はEasyMovieTextureを使ってリアルタイムで切り替えしたいと思います。


Easy Movie Texure $65
Asset Store

今回はアセットの使い方は割愛します。
全天球の球体に関してはUnityの伊藤周さんのBlogに載ってますのでそちらを使うのがいいかと思います。
No hack, no work • UnityとOculusで360度パノラマ全天周動画を見る方法【無料編】


使い方も載ってます。


リアルタイムは非常に簡単なので記事にするほどではないかと思ったのですが一応書いておきます。
参考になれば幸いです。

Unityをセッティングする

まず全天球のPrefabを作りたいので伊藤さんから拝借したSphere100(僕は名前をangle360に変更)にMovieEasyTextureのMediaPlayerCtrl.csをアタッチします。

f:id:kazumalab:20160518210544p:plain
Inspectorの中身はこんな感じで、ここは何も動画の指定やTargetMaterialを指定しなくていいです。

<修正>
ご指摘をいただき、あまり大きくし過ぎると距離感を感じてしまうので...後で修正しますが
Scaleは15ぐらいが良さそうです。これも後に検証してみます。
Sphereの大きさは自由に変更してください。

今回はぬけ出す場合も必要なのでCanvasを作ってButtonを作ってやり子オブジェクトとします。
f:id:kazumalab:20160518212550p:plain
その後カメラを覆いかぶさる位置に移動して、Prefab化し、シーンからは消します。

切り替えをするのでMovieTexture/PrefabのVideoPlaneをシーン内に突っ込みます。
ちゃんとカメラに映るように移動させます。
f:id:kazumalab:20160518210754p:plain


VideoPlaneのInspectorはこんな感じです。
f:id:kazumalab:20160518211212p:plain
こちらに表示させたい動画のURL(mp4)やStreamingAssets内の動画を指定します。TargetMaterialをシーン内のVideoPlaneに設定します。

後必要なのは切り替えるためのボタンが必要なので適当にシーンに配置します。

スクリプトで切り替える

切り替えに必要なのはTargetMaterialを切り替えてやるだけです。
まずは VideoPlane -> 全天球

public void CreateAngle360() {
                // 全天球を作ってターゲットマテリアルを全天球に変更
		go =(GameObject)Instantiate (angle360Prefab);
                planePrefab.GetComponent<MediaPlayerCtrl> ().m_TargetMaterial [0] = go;

                // あとで説明
		GameObject cancelButton = GameObject.Find ("360CancelButton");
		cancelButton.GetComponent<Button> ().onClick.AddListener (Cancel360Mode);
	}

コレをクリックしたら切り替えるようボタンに適応させます。
先ほど子オブジェクトとしたボタンですがButtonをインスタンス生成する場合OnClickで適応させてセットしておいたとしても生成時に消えてしまうのでFindで取ってきて、その中にAddListenerで呼び出したい関数をここで入れているのでこんな形になってます。

(実際あんまり良くないかもなので他にいい方法があれば教えてください。)


今度は全天球から平面に戻す場合です。

public void Cancel360Mode() {
                // TargetMaterialを切り替えて消す。
		planePrefab.GetComponent<MediaPlayerCtrl> ().m_TargetMaterial [0] = planePrefab;
		Destroy (go);
	}

これだけです。
あとはAndroidにビルドして確認して見るとリアルタイムで切り替わるのがわかると思います。

完成形

VideoPlane時
f:id:kazumalab:20160518213158p:plain

全天球時
f:id:kazumalab:20160518213206p:plain

意外とスムーズに切り替わりますね。
ぜひ使って見ては〜。