Skip to content

Latest commit

 

History

History
140 lines (101 loc) · 13 KB

README.md

File metadata and controls

140 lines (101 loc) · 13 KB

UnityとOculusで360度パノラマ全天周動画を見る方法【無料編】

「UnityとOculusで360度パノラマ全天周動画を見る方法」のシリーズとしては第3回目なのですが、今までの2回は全て有料アセットを使ったりしていてイマイチ一般性がなかったのではないかと思います。今回は「無料」ということにこだわり(Oculus をUnityで使うのも無料になりましたし)、パノラマ動画アプリを作ってみたいと思います。

素材作り

まずは RICOH Theta でパノラマ動画を撮影します。最近発売される(2015/10/19現在)、「RICOH Theta S」いいですね!これはマストバイですよ!奥さん!パノラマ好きだったらしのごの言わずに買いましょう。今のところこれ以上のモノは世界中にはないでしょう。
iPhone/Androidアプリでパノラマ動画を持ってきます。Theta Sからアプリで持ってくるだけで、正距円筒図法の動画になるので楽です。
Theta m-15の方はMac/Windows 側で正距円筒図法にステッチ(複数カメラからの映像を一つのパノラマ映像にする作業)をする必要があります。専用Mac/Winアプリで自動ステッチしてください。
Theta Sなんてないよ、とかいう人はとりあえず、このこの動画をダウンロードして使ってください。

Unity で動画を扱うための準備

Windows はQuick Time をインストールすることを忘れないで下さい。Quick Time がないとUnityに動画をインポート出来ません。始めてのQuickTimeインストールした際は一度Windowsを再起動した方がいいかもしれません。 動画ファイルのQuickTimeへの関連付けも大事です。もし一回Reimport。再起動。

投影する天球をシーンに置く

Unity を立ち上げてください。
とりあえずUnity エディタの説明をしようと思いましたが、面倒なので「Unity仮面が教える! ラクしてゲームを作るためのAssetStore超活用術」を参考にしてください。
とりあえずシーンを保存しましょう。File → Save Scene とすると、名前を聞かれるので、適当に「 Sphere Movie 」とかにしましょうか。
だいたいエディタの使い方を学んだところで、先ほどのパノラマ動画をUnityのProject ビュー にドラッグアンドドロップ(以下D&D)します。するとインポート処理が始まります。インポート処理が終わると、画像のように音声と動画が分離されます。
天球モデルは 「Sphere100.fbx」 を私の方で提供しているので、そちらをお使いください。 Blender から作るやり方 は天球の極点で動画が歪んでしまうので、あまりお勧めしません。そして、「 Sphere100 」を Hierarchy ビューにD&Dします

マテリアルを作る

Project ビューで右クリックしてメニューを出し、 Create → Material を選択して新しいマテリアル(素材)を作ります。適当な名前をつけます。ここでは「SampleMovieMat」とかにしましょうか。
「 MovieMat 」を選択して、Inspector ビューで Shader を Unlit → Texture にします。これで、影つかなくなりました。ムービーに天球の影がついたらおかしいですからね。
先ほどインポートした ムービーファイルを Inspector の None (Texture) という箇所にD&Dします。
そしてこのマテリアルを先ほど Hierarchy ビュー の 「 Sphere100 」にD&Dします。

再生スクリプトを作る

ただ、このままでは再生してくれません。再生するスクリプトを作らなくてはいけないのです。
Project ビューで Create → C# Script でC#スクリプトを作成します。名前はなんでもいいのですが、「 SampleMoviePlay 」にしましょうか。
作ったC# スクリプトをダブルクリックすると、スクリプトを書けるエディタが立ち上がります。

void Start () {

の次の行に以下の行を追加します

(GetComponent<Renderer>().material.mainTexture as MovieTexture).Play();

書けたら保存します。そしてUnityに戻ってみます。左下に赤いエラーが出ていなければokです。出ていたらよーく見比べてみましょう。
問題ないようなら、このスクリプト「 SampleMoviePlay 」を動画が貼っている「 Sphere100 」にD&Dします。
これでプレイボタン(画面中央上の▲)を押してみて、動画が動くか確認しましょう。確認したらもう一度プレイボタンを押して止めましょう。

音声をつける

Project ビューのムービーの▲をクリックして、サウンドを表示します。
このサウンドを Hierarchy ビューの「 Sphere100 」にD&Dします。
またプレイボタンを押してみて、音が再生されるか確認します

マウスで方向が向けるように

MouseLook.csというスクリプトを利用しましょう。
これをダウンロードして、「Camera」オブジェクトにD&Dでいけます。

エフェクト

カラーコレクションをかけて、色調整をしましょう。

https://github.com/keijiro/ColorSuite

keijiroさんの「ColorSuite」を使います。こちらをダウンロードして、「ColorSuite」フォルダをプロジェクトにD&Dします。
そして、CameraオブジェクトにD&Dしたら、色調整が可能になります。各色を変更して調整しましょう。

Oculus Rift 対応

メニューから Edit → Project Settings → Player を選択して、PlayerSettings を開きます。ここで、 Virtual Reality Supported にチェックを入れたらオーケーです。あとは Oculus を繋いで、Editor プレイするだけで、トラッキングできるはずです。簡単ですよね!

デスクトップアプリとしてのビルド

File → Build Settings でビルド設定画面を表示します。
最初はアプリとしてはいるシーンが一つもないので、現在作っているシーン 「 SphereMovie 」を追加します。追加する方法は Scene In Build にシーンファイルをD&Dする方法と、Add Current で現在開いているシーンを追加する方法があります。
そして、出力したいターゲットを選んで、Buildすればアプリが作られます。Build And Run すればそのまま立ち上がります。どうです?アプリとして立ち上がりましたか?

AVProの紹介

正直、フレームレートが低くて実際の運用(展示会とか)はなかなか厳しいと思います。 そういう際は、AssetStore の「AVPro」シリーズがオススメです。こちらのブログで紹介しているので、 興味あったらそれを参考に実装してください。基本的に実装方法は同じです。

ーーー以下スマホ対応ーーー

Easy Movie Texture

スマホでパノラマ動画をやりたい時は、Unityの機能だけでは実装できません。
そこで、AssetStoreにある「 Easy Movie Texture 」を購入して、利用しましょう。$45です。自力でプログラム組むより遥かに楽なので、是非時間をお金で買いましょう。

iOSパッチ

このままだとXcode でビルド時にエラーが出てしまうので、 EasyMovieTexture/Unity5_Patch_IOS/Untiy5_Patch_iOS をダブルクリックして、パッチを適応しましょう。Unity5用ですので、4.6系は適宜対応してください。

準備

「 Sperer100 」を選択して、Inspector から先ほど自分で付けた、「Movie Play」スクリプトがあると思うのですけど、それのチェックボックスを外します。これでオフになるはずです。一旦オフにしましょう。
そして、今度は以下の場所のスクリプト

EasyMovieTexture/Scripts/MediaPlayerCtrl

を 「 Sphere100 」にD&Dして、その機能を付加します。
「 Spherer100 」 の 「 Media Player Ctrl 」の項目で Target Material というところには自分自身つまり 「 Spherer100 」自体をD&Dします。Hierarchy ビューから「 Spherer100 」をD&Dしましょう。

StreamingAssets について

Str File Name というところにムービーファイル名を書くのですけど、実はこの場所は StreamingAssets フォルダ以下にないといけないのです。なので、先ほど置いたムービーファイルを StreamingAssets フォルダの下に移動させてください。
そうした上で、Str File Name に先ほど置いたファイル名を書きましょう。「.mp4」等の拡張子も忘れずに書いておきましょう。(Unity エディタ内は拡張子が表示されないので気をつけてください)

とりあえず、サンプルシーンをやってみる

実は Easy Movie Player はエディタ上から再生できません。ですので、イチイチ確認のために書き出す必要があるのです。
File → Build Settings でビルド設定画面を表示します。一旦現在のシーンは捨てて、Assets/EasyMovieTexture/Scene/Demo をD&D します。まずはデモで正常に動くか確認しましょう。

iOSビルド

iOS 7.0以上 では順番に行きましょう。まずはiOSビルド。引き続き Build Settings 画面でPlatform を iOS に変更して、Switch Platform と押すと変換が始まります。そして、Build ボタンを押すと、プロジェクト名を聞かれるので、適当な名前を付けてください。MovieDemo とかでしょうか。
Code Sign を入れておきます。 おっと、ビルドエラーがでますので、先ほどMoviePlay.cs の中で書いたコードがモバイルでは動かないということなので、

    (GetComponent<Renderer>().material.mainTexture as MovieTexture).Play();

というコードを

#if UNITY_EDITOR || UNITY_STANDALONE
    (GetComponent<Renderer>().material.mainTexture as MovieTexture).Play();
#endif

と、上下で #if〜 と #endif を加えてください。

そして出来たプロジェクトファイルの Unity-iPhone.xcodeproj をダブルクリックしてXcode を立ち上げてください。
それで、iPhone を繋げてビルドして動くことを確認してください。真ん中に二つのムービーが再生されたら成功です。

Androidビルド

Android 4.0 以上です。 Androidはもっと簡単です。引き続き Build Settings 画面でPlatform を Android に変更して、Switch Platform と押すと変換が始まります。
すぐにビルド、と行きたいですが、その前に設定するところがあります。Unity → Preference (Mac) /Edit → Preference (Winの場合) でPreference を表示させます。
External Tools を選んでいただいて、Android の SDK の項目を Browse でAndroid SDKのパスを入力すればOKです。
Graphics Level → Open GLES2 Internal Access → Require Write Access External(SDCard)

Google Cardboard SDK

このままではスマホで書き出しても、ハコスコやCardboardで見ても画面に追従してくれないんですよね。
なので、Google Cardboard SDK を利用します。これは無料なので使いやすいです。iOSも使えますのでご安心ください。
ここからSDKをダウンロードしてください。
ダウンロードした CardboardSDKForUnity.unitypackage をUnity エディタ の Project ビューにD&Dします。すると、Import するか旨を聞かれるので、インポートしてください。
インポート終了すると、エラーが表示されるかもしれませんが無視してください。Console で Clear して何も出ていないのならOKです。
で早速、 Cardboard/Prefab/CardboardMain を Hierarchy ビューにD&Dします。これでスマホがカメラと連動するような挙動になります。あ、既存のCamera を一旦オフ(Camera を選択して、Inspector ビューの一番上のチェックボックスをオフに)にしておきましょう。