【Unity】スマホで簡易360度（パノラマ, 全天球）ビューワを作る

2018/05/29 Tue [edit]

　タイトルは "スマホ"（※Android）となっているが、実際には他のプラットフォームでも関係ないので、作り方を覚えおけば色々応用が効くだろう。特に全天球への画像（動画）貼り付けは VR に使えばそのまま背景にできるので、Cardboard VR や GearVR、Oculus Go などにも簡単に流用できる（というより、元々「VRコンテンツ開発ガイド 2017」を以前読んでいたので、それをスマホに応用した）。ミクシータ（RICHO THETA）など360度カメラを持っている人は、保存した画像をそのまま使えるので試してみると良い（持ってなくても Google Play のアプリのサンプルでスマホに画像を保存すれば確認できる）。ARに応用してる例もあるね。

そう言えばギャラリーって画像以外に動画も取得できそうだな～と思って、プラグインに少し手を加えて、スマホにある動画をUnityに取り込んで再生してみた。うん、UI-ImageやMeshのテクスチャに読み込んだり、全天球動画で360度ビューワにもなるね(笑)。動画再生は負荷高いので、使い処は難しいけどね。 pic.twitter.com/YTJGvqNfCX
— ヽ｜∵｜ゝ(Fantom) (@fantom_1x) 2018年5月23日

　なお、今回の記事はプラグインのギャラリー読み込みデモ（GalleryPickTest）のセットアップも兼ねている。サンプルシーンを使えば１から構築する必要はないので、すぐに試してみたい人はプラグインをダウンロードして欲しい。AssetStore版（ver.1.15以降[無料]）とGoogleDrive版の２つがあるが、基本的にはどちらも同じものだ。好きな方で構わない。

＞＞GoogleDrive版プラグイン＆サンプルをダウンロード
(Google Drive を利用。画面右上にあるダウンロードアイコンを押す)

＞＞AssetStore版をダウンロード

※とりあえず試してみたい方は、最新版をビルドした apk デモをダウンロードできます。動作確認にもどうぞ。

プラグインデモをダウンロード

(Google Drive を利用)

Android 4.2以上
※「提供元不明アプリのインストール」許可が必要です。

　プラグイン自体のセットアップは以前の記事を参照して欲しい（＞＞GoogleDrive版 | ＞＞AssetStore版）。デモが入っているパスは GoogleDrive 版では「Assets/_Test/」に、AssetStore版は「Assets/FantomPlugin/Demo/」となっているので適宜置き換えて欲しい。ファイル名は基本的に同じだ。

■プラグインのセットアップ（GoogleDrive 版） [※別ページ]
■プラグインのセットアップ（AssetStore 版） [※別ページ]
■全天球素材のダウンロードと設定（360度ビューワ）
■更新履歴

(※) Unity 2018.1.0f2 / Windows10(x64) / Galaxy S7 Edge (Android 7.0) で確認

■全天球素材のダウンロードと設定（360度ビューワ）

　360度のビューワを作る際には法線が内側を向いている球状メッシュを使う必要がある（Unityのデフォルトの球状メッシュは外側向き）。要するに球の内側から覗いたとき映像が見える必要があるので、通常は3Dモデリングツールなどで素材を作らなくてはならない。しかし幸いにも素材を提供してくれている方がいるので、有り難く使わせて頂こう（素材を提供してくれる人は神ですね(笑)）。以下のページにある「Sphere100.fbx」（※ページ内で検索するとすぐ見つかる）をダウンロードして欲しい。

・UnityとOculusで360度パノラマ全天周動画を見る方法【無料編】で「Sphere100.fbx」をダウンロード（※直接ダウンロードが簡単）。

　ダウンロードが完了したら、プラグインのサンプルシーンを使って実際にセットアップしてみよう。プラグインを利用している箇所はスマホから画像や動画のパスを取得しているだけなので、あらかじめプロジェクトに素材を含んでいる分にはプラグイン機能を使う必要はない。画像や動画を動的に貼り付ける部分は Unity の機能なので、コピペして色々なアプリに応用すれば良いだろう（「GalleryPickTest2.cs」にまとめてある）。それでは以下の方法で、サクッと簡単に360度のビューワを作ってみよう(笑)。

１．ダウンロードした「Sphere100.fbx」を Unity のプロジェクトにドラッグ＆ドロップしよう（任意のフォルダで良い）。またインポートした「Sphere100」をクリックして、インスペクタで「Model＞Scale Factor」を「1000」にしておく（大きさは任意でも良い）。

２．次にギャラリーから画像を取得するデモシーン「GalleryPickTest」（GoogleDrive版は「Assets/_Test/Scenes/」, AssetStore版は「Assets/FantomPlugin/Demo/Scenes/」内にある。検索を使うと簡単）を開こう。このデモはスマホの標準ギャラリーアプリを開き、画像や動画のパスを取得して Unity に取り込むものだが、オプション（形状）の「360 degrees」にはダミーのテキスト「Please replace with 'Sphere100', and set 'TextureMat' as material.」が表示されるのみで何も表示されない（プレイして「360 degrees」を押してみるとテキストが表示される）。このダミーテキストを全天球メッシュに置き換えることで、簡易360度ビューワにすることができる。

３．ヒエラルキーから「Stage」を開こう。この中にある「Sphere100 (360degrees Dummy)」（画像用）と「Sphere100Video (360degrees Dummy)」（動画用）が全天球ダミーなわけだが、この階層にインポートした「Sphere100」をドラッグ＆ドロップしてオブジェクトを配置しよう。「Sphere100 Video」となってる方は「Sphere100」を複製（Ctrl-D）して名前を変えただけのものである。

４．各オブジェクトの Position が (0, 0, 0) となっているのを確認したら、次に Scale を変更しておこう。大きさは任意で良いが、ポイントは X軸を負の値にしておくことだ。これは正の値で試して見ればわかると思うが、カメラは球の内側から覗く感じになるので、正の値だと画像が左右反転して見える。なので、負の値にしておけば人の目には正しい方向に見えるというわけだ。またついでにオブジェクトに影を付ける処理は必要無いので、すべてオフにしておくのも良い（このデモでは影の無いマテリアルを使うので必須ではないが[※後述↓手順５]）。

●画像用全天球「Sphere100」

●動画用全天球「Sphere100 Video」

※マテリアルのセットは下記（↓手順5）

５．あとは全天球に画像を映し出すためにマテリアルをセットしよう。GoogleDrive版では「Assets/_Test/Metarials/」に、AssetStore版は「Assets/FantomPlugin/Demo/Metarials/」に画像用の「TextureMat」、動画用の「VideoRenderTextureMat」があると思うので（プラグイン ver1.15以降）、それらをそれぞれ「Sphere100」「Sphere100 Video」の「Materials」にセットして欲しい。上記（↑手順４）のインスペクタのような感じになる。

　ちなみにこの「TextureMat」と「VideoRenderTextureMat」は特別なものではなく、「TextureMat」はプロジェクトビューで右クリックして「Create＞Material」で新規マテリアルを作成し、インスペクタで「Shader」を「Unlit＞Transparent」にしただけのもので、「VideoRenderTextureMat」の方は、先に「Create＞Render Texture」を作っておき、同じように新規マテリアル（Create＞Material）で「Shader」を「Unlit＞Texture」にして、テクスチャに作っておいた「Render Texture」をセットしただけのものだ。ほぼデフォルトのままなので、必要あれば調整などは適当にやって欲しい（※ただし、このデモでは GalleryPickTest2.fitRenderTexture = true のとき、Render Texture を動画サイズに合わせて動的に生成するので、実際には使ってない。fitRenderTexture = false にするとセットした「VideoRenderTexture」を使うようになる[※解像度が固定サイズで良いときなどに使うと、負荷が少し軽くなる]）。

６．最後にデモスクリプトの「GalleryPickTest2」をヒエラルキーで選択して、「Sphere」と「Video Sphere」にそれぞれ「Sphere100」「Sphere100 Video」のオブジェクトをセットしよう（初期状態では「Dummy」がセットされている）。これで準備は完了だ。

　エディター上でプレイして「360 degrees」をクリックしたら、背景が真っ白になったら成功だ（画像が読み込まれてないので白いだけ）。ビルドして実機で確認する方法はこちらの記事を参照して欲しい。

・デモのビルド

　通常の画像を読み込んでも良いが、天井と底面の方を見ると収束してるので、せっかくなので全天球画像を読み込んでみよう。なんとあの日本列島360の全天球静止画がBOOTHにて無料で配布されている（まさに神！）。これをダウンロードしてスマホのストレージにコピーしよう。ギャラリーから読み込むと超美麗な360度画像を楽しむことができる（利用方法は規約に従ってね）。

＞＞BOOTHでダウンロード

スマホで360度ビューワの記事書いたばかりで、あまりにタイムリーだったので、さっそく試してみた。おおー！なんと美しい…。確かにこれはVR内で観たいですね。Unityちゃんでも飛ばしてみるかな(笑)。 pic.twitter.com/QaE7N6OOa8
— ヽ｜∵｜ゝ(Fantom) (@fantom_1x) 2018年6月3日

　また以下のミクシータのアプリをインストして、保存したサンプルの画像を読み込んでみるのも良い。VR空間で見ると、まるでその場所にいるようで更に面白い。GearVR はそのままホーム＞ギャラリーで観れるが、Cardboard なら色々ビューワアプリが出てるので観てみると良いだろう。ちなみに Unity 使える人なら、Cardboard VR も GearVR も作るのはそう難しくはない（むしろVR内操作 UI 作る方が難しいね(笑)）。しかし、全天球メッシュにあらかじめ画像を貼り付けておけば簡単に360度にできるので、挑戦してみるのも良いだろう。

・RICOH THETA Type HATSUNE MIKU (Google Play)　※カメラが無くても、サンプル画像が入っているので、保存すれば360度画像を試せる。
・VU Gallery VR 360 Photo Viewer (Google Play) ※Cardboard の360度ビューワアプリ
・【Unity】GearVR アプリをビルドする

VoxelKeiさんご本人に問い合わせしてみたところ、CardboardVRやGearVRにも使っても良いとの事なので、ちょっとCardboardで試してみた。うむ、なかなか絶景(笑)。GearVRの没入感にはかなわないけどね。CardboardでもBluetoothコントローラ１つ持ってるとなかなか快適に楽しめるよ。 pic.twitter.com/1xs5HkjBjh
— ヽ｜∵｜ゝ(Fantom) (@fantom_1x) 2018年6月4日