Unityで360度動画を観る

この記事は、Unityの公式チュートリアル https://docs.google.com/document/d/1JjOQ0dXTYPFwg6eSOlIAdqyPo6QMLqh-PETwxf8ZVD8/edit から作成したものです。

UnityにビデオをImportする

まず、Unity Editorを起動して、新規プロジェクトを作る。

次に、https://drive.google.com/file/d/13ZV8euKaDVU6dbjOc496y9kfA1pjJVit/view?usp=sharing から、サンプル動画をダウンロードする。

 

ダウンロードしたファイルは、Unity EditorのProjectタブのAssetsフォルダへドラッグアンドドロップすればImportできる。ファイル名はoutputTrimのはず。

f:id:oitsmalab:20180601091225p:plain

次に、Importした動画ファイルをHierarchyにドラッグアンドドロップする

f:id:oitsmalab:20180601091350p:plain

そうすると、ファイル名と同じ名前のゲームオブジェクトoutputTrimが作成され、そのゲームオブジェクトにはVideo Playerというコンポーネントが見られる。

f:id:oitsmalab:20180601091512p:plain

f:id:oitsmalab:20180601091531p:plain

RenderTextureを設定する

Editor上部のAssets->Create メニューから、RenderTextureを選択する。名前はVideoTextureにしておく。

Assetsフォルダ内に作られたVideoTextureファイルをクリックすると、Inspectorタブ内で設定が可能になる。ここでSizeを 3840*1920(先ほどImportしたVideoの画面サイズ) に設定し、Depth BufferのオプションをNo Depth Bufferにする。 

f:id:oitsmalab:20180601092253p:plain

VideoPlayerを設定する

先ほどHierarchyに作ったoutputTrimオブジェクトを選択し、VideoPlayerコンポーネントを設定する。Render ModeをRenderTextureにして、上で作ったVideoTextureをVideoPlayerのTargetTextureにドラッグアンドドロップする

f:id:oitsmalab:20180601093215p:plain

SkyBoxマテリアルを設定する

上のメニューのAssets->CreateからMaterialを選択し、新しいマテリアルをつくる。名前はPanoramicにする。

次に、Panoramicファイルを選択し、インスペクタ上でShaderをSkyBox→Panoramicに設定する。

f:id:oitsmalab:20180601093752p:plain

引き続き、Inspector内のPanoramicマテリアルの設定画面で、右にあるTextureのボックスに先ほど作ったVideoTextureをドラッグアンドドロップする。

f:id:oitsmalab:20180601094002p:plain

SkyBoxを設定する

上のメニューのWindows->Lighting->Settingsを選択し、Inspectorタブ内でLightingの設定を行う。

f:id:oitsmalab:20180601094202p:plain

EnvironmentのSkyBox Materialに上で作ったPanoramicマテリアルをドラッグアンドドロップする。

f:id:oitsmalab:20180601094245p:plain

 

動作を確認する

Playボタンで再生すると、SceneおよびGame画面で、360度動画が再生される。

 

 (おまけ)スマホで360度動画を視る

Unity Editor + iPhone(あるいはiPod Touch)で360度動画を視るときは、GoogleのMagic Windowのスクリプトを使うと、iPhoneの動きに合わせてカメラの方向を変えることができる。

UnityのiOSビルドサポートの準備 

そのために、まずUnityでiOSのビルドサポートを入れる必要がある。下記の通り、File → Build Settingsを選ぶ。

f:id:oitsmalab:20180620114414p:plain

 

Build Settingsのウィンドウで、下図のようにPlatformでiOSを選んだ時に"No iOS module loaded"となっていたら、"Open Download Page"を押して、iOSモジュールのダウンロードを行う。

f:id:oitsmalab:20180620114608p:plain

 

 ダウンロードしたアプリを起動し、インストーラーを実行する。

f:id:oitsmalab:20180620130634p:plain

 

以下の画面のとき、Unity Editorの保存場所が表示されていることを確認する。そうでなければ、Browse...のボタンを選んで、Unityのインストールフォルダを選ぶこと。

f:id:oitsmalab:20180620130750p:plain

 

Unity Editorのインストールフォルダは、以下のように"Editor"フォルダを内包するフォルダ(つまり、"Editor"の一階層上のフォルダ)を選択する。

f:id:oitsmalab:20180620131439p:plain

 

次に、もし下図のように"Applications are blocking the installer"が出てきたら、Unity Editorを閉じる。すると、インストールが進行する。

f:id:oitsmalab:20180620131652p:plain

 

後は、インストールが終わるまで待つ。インストールが終わったら、Unity Editorを起動し、File → Build Settingsを選び、Build Settingsのウィンドウで、PlatformでiOSを選んだ時に下図のようになっていればOK。

f:id:oitsmalab:20180620132605p:plain

iTunesの準備

PCの方にiTunesが入っていることを確認する。入っていなければこちらから

www.apple.com

インストールすること。そして、iPhoneをUSBケーブルでPCにつなぐ。

 

Unity Remoteの準備 

そのためには、まずiPhoneapp storeからUnity Remote 5をダウンロード、インストールして開いておく。

次に、PCの方にiTunesが入っていることを確認する。入っていなければインストールすること。そして、iPhoneをUSBケーブルでPCにつなぐ。

 

次に、Edit -> Project Settings -> Editorで"Unity Remote"を"(iPhoneの機種名)"にする。

f:id:oitsmalab:20180613000215p:plain

 

GyroControllerを使う

そして、新しくC#スクリプトファイル GyroController.csを作り、GoogleのMagic Windowのスクリプトのページの最後のスクリプトをコピペする。最後に、GyroController.csをMain Cameraにアタッチする。

 

これでUnity Editorを再生すると、Game画面がiPhoneの方にも表示され、iPhoneを動かすとカメラの方向が変わるはずである。