360°写真をUnityに取り込む方法

WammysではこれまでGoogleストリートビューを始め、
数多くの360°写真を撮影してきました。

しかしながら360°写真は移動や視点切り替えは出来るものの
「遊び」の要素が足りないように思います。

そこでUnityに取り込んで
面白いことが出来ないかと考えています。

現在開発中ですので、本日は360°写真をUnityに取り込む方法について
記述していきます。

Unityとは?

このブログを読んでくださる方は既にご存知とは思いますが、念のため!

一言で言うと、無料で使用でき、ゲームを作れるものです。

2D、3D、VR、AR、様々なゲームを作れるだけでなく
CMに使われるようなクオリティの高い3Dモーション動画まで作成可能な(ゲーム)エンジンです。

そのため、学生から社会人まで多くの方が利用し、
開発に尽力しています。

360°写真とは?

360°写真について改めておさらいです。

「上下左右、くるくる見れる画像」という事は多くの方がご存知ですが
元々のデータは、(複数枚の写真を繋ぎ合わせた)1枚のJPG写真です。

その1枚のJPG写真のことをエクイレクタングラー(equirectangular)と言い、
日本語では正距円筒図法と言います。

地球儀のような球体を無理やり長方形の写真として表示させたものです。

こんな画像です。

unityに取り込むための準備

360°写真を用意

RICOH THETAなどで撮影した写真をお持ちの方はそちらをご利用下さい。
持ってないけど試してみたいという方はネットで「エクイレクタングラー」と検索すると
サンプル画像が出てくるので利用してみて下さい。

※くれぐれも著作権にはご注意を!

Unityで利用するための準備

エクイレクタングラーは球体に張り付けてこそ
綺麗な画像としてみることが出来るので、こちらのリンクから
全天球モデルをダウンロードしてください。

「.FBX」という形式のファイルになりますが
元Unityの社員の方が公開しているモデルですので
安心してご利用いただけます。

unityでの作業手順

インポートと設定

1.Projectタブ内にある「Assets」の中に”JPG”と”FBX”のデータをドラッグ&ドロップ

2.Hierarchyタブ内に、1.でインポートした「Sphere100」をドラッグ&ドロップ

3.Hierarchyタブ内の「Sphere100」を選択しInspectorタブ内の「Transform」→「Scale」を以下の値に変更

X =-100、Y =100、Z =100

(X がマイナスなのは反転を直すためで、プラスの値にすると鏡の世界になってしまいます)

JPG画像の貼り付け

1.Projectタブ内の「Assets」→「Materials」→「phong1」を選択

2.Inspectorタブ内の「Shader」を開く(初期設定は「Standard」)

3.「Standard」から「Unlit」→「Texture」に変更

※「Shader」とは陰影処理のことなので「Standard」のままだと物凄く暗い画像が貼り付けられますので注意!

4.「Unlit/Texture」のすぐ下「Base(RGB)」の右に四角の中に「Select」と書いてある場所に「Assets」のJPGデータを選択

以上の手順で設定は完了です。

実際に取り込んだ画像はこちらです。

これだけでは、まだまだ面白くありませんが
今後3Dモデリングデータなども取り込み、HTC Viveで操作するという事もやってみる予定なので
以降の記事もお楽しみに!