fc2ブログ
ヽ|∵|ゝ(Fantom) の 開発blog? ホーム » Unity »【Unity】スマホで簡易360度(パノラマ, 全天球)ビューワを作る

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


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


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

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

>>AssetStore版をダウンロード


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

プラグインデモをダウンロード
(Google Drive を利用)


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


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


(※) 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度のビューワを作ってみよう(笑)。


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





2.次にギャラリーから画像を取得するデモシーン「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度ビューワにすることができる。



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



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

●画像用全天球「Sphere100」


●動画用全天球「Sphere100 Video」

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


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


 ちなみにこの「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」を使うようになる[※解像度が固定サイズで良いときなどに使うと、負荷が少し軽くなる])。


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






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

デモのビルド




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




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

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







(関連記事)
【Unity】AssetStore版 FantomPlugin のセットアップ
【Unity】Androidのトーストやダイアログ、通知、音声認識、ハード音量操作など基本的な機能を使えるプラグインを作ってみた
【Unity】GearVR アプリをビルドする
【Unity】ARCore を使って現実世界にプロ生ちゃんを召喚してみる



初音ミク」はクリプトン・フューチャー・メディア株式会社の著作物です。
© Crypton Future Media, INC. www.piapro.net (PCL)

このコンテンツの一部には『ユニティちゃんライセンス』で許諾されたアセットが使用されています。
Portions of this work are licensed under Unity-Chan License

関連記事
スポンサーサイト



category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: Unityライブラリ  Unityプラグイン  FantomPlugin  VR 
tb: 0   cm: --


トラックバック

トラックバックURL
→http://fantom1x.blog130.fc2.com/tb.php/297-bde8336d
この記事にトラックバックする(FC2ブログユーザー)

プロフィール

Social

検索フォーム

全記事一覧

カテゴリ

ユーザータグ

最新記事

リンク

PR

PR

▲ Pagetop