テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】Unity-VR360-OverlayGridで、全方位写真の一部にポスターを貼ったり動画を仕込んだり

f:id:tsubaki_t1:20170112224424g:plain

今回は全方位写真(360度写真)で用意した風景の一部に動画を仕込む方法についてです。

全方位写真

全方位写真は、Googleストリート等でお馴染みの「マウス操作やVRヘッドマウントディスプレイで見渡す事の出来る」写真です。

周辺の情報を得たり、HMDを使うことで「まるで現地に居るような臨場感」を体験する事が出来ます。

f:id:tsubaki_t1:20170112225510j:plain

今回はこんな全方位写真のポスターや壁紙の変更、もしくは動画を仕込んでみます。

Unity-VR360-OverlayGrid

Unity-VR360-OverlayGridは、全方位写真に写真をハメ込む事の出来るアセットです。上手く設定すると、かなり馴染んだ感じで画像をはめ込む事が出来ます。

ちなみに、天井の模様、某超有名な映画のポスター、それとモニターがはめ込んだ動画です。結構わかりにくくなったんじゃないかなと。

f:id:tsubaki_t1:20170112230017j:plain

まずは全方位写真にポスターやモニターの中身をはめ込みます。

使い方(下準備)

まずは下のリンクから、Unity-VR360-OverlayGridを入手します。入手と言ってもパッケージとして公開されてる訳ではないので、Zipか何かでプロジェクトを落としてしまえば良いです。

github.com

f:id:tsubaki_t1:20170112230814j:plain

 

testシーンを開くと、中央の球体があります。その中が、全方位写真になっているので、球体の中に移動します。
ちなみに、ココで使用している画像はCubemapではなくTextureです。もし全方位写真を更新したい場合はSphereのTextureを差し替えれば良いです。

f:id:tsubaki_t1:20170112232131j:plain

f:id:tsubaki_t1:20170112232733j:plain

さて、さっそく全方位写真に物を配置していく訳ですが、ここで重要なポイントが、CameraとSceneViewのカメラの座標が(x:0, y:0, z:0)である事が望ましいという事です。

なので、メインカメラとSceneViewを中央へ移動させます。具体的には、MainCameraの座標を(x:0, y:0, z:0)に移動してもらい、Align View To Selectedでメインカメラの位置にシーンビューを移動させます。

この辺りの操作については Unity初心者が知っておくと少しだけ幸せになれる、シーンにオブジェクトを配置する時に使える18のTips+10 辺りを見てもらえると良いかと。

f:id:tsubaki_t1:20170112232552g:plain

使い方(物の配置)

次に全方位写真に物を配置していきます。

まずは空のGameObjectを座標(x:0, y:0, z:0)に配置し、VR360Gridコンポーネントをアタッチします。なおオブジェクトの名前は何でも良いです。

f:id:tsubaki_t1:20170112234723j:plain

次にVR360GridのPositionsを4つ以上に増やし、上手い感じに配置します。なお、Pos0が左上、Pos1が右上です。これを間違えると反転したり向きが逆だったりします。

上手く作れたらVR360Gridコンポーネント下にあるCreate Gridボタンを押してメッシュを構築します。

なお、構築後でもPositionsの位置は調整出来ます。

f:id:tsubaki_t1:20170112234916j:plain

後はMeshRendererのMaterialがNoneになっているので、好きな絵が貼ってあるマテリアルを設定すればOKです。

f:id:tsubaki_t1:20170112234526g:plain

より馴染ませる為に

より絵を馴染ませる為に、IBLの効果を活用します。

Skyboxを全方位写真と同じ内容の物に変更し、Direct Environment LightingをSkyboxに設定します。

f:id:tsubaki_t1:20170112235439j:plain

後はDirectional Lightのような光源を全て削除し、先程VR360Gridで作成したメッシュにLightingStaticのフラグを入れ、それらの光源処理をIBLにおまかせします。

これで、かなり色が馴染むようになります。

f:id:tsubaki_t1:20170112235827j:plain

動画を仕込もう(Unity 5.6版)

次は動画を仕込みます。折角なので、Unity 5.6で新しくなったVideoPlayerを使用します。VideoPlayerはMovieTextureと異なり、最初からテクスチャとして扱われないので、少し工夫します。
(特に何も設定しなければ、指定カメラの最前面もしくは背景としてムービーが流れます)

f:id:tsubaki_t1:20170113000927g:plain

マテリアルのMainTexにムービーを流し込む

レンダラーにVideoPlayerのムービーを流し込む一番手っ取り早い方法が、Material Overrideの設定でマテリアルの指定のテクスチャを上書きしてしまう方法です。

これで指定のマテリアルの任意のプロパティにVideoPlayerの内容が流し込めば、OKな訳です。

今回の場合は、Unity-VR360-OverlayGridで上書きしたテレビの画面にムービーの情報を流し込んでやれば良いです。

f:id:tsubaki_t1:20170113000549j:plain

f:id:tsubaki_t1:20170113001510g:plain

なお、動画はディスプレイなので、発光させたほうがソレっぽく見えるかもしれません。その場合はMaterialのEmissiveを弄るとか、まぁ臨機応変に。

感想

「全方位ムービーだと凄いデータが喰うので、一部のみを変更したい」みたいな場合や、「全方位写真に広告を仕込みたい」場合、後は全方位写真でも「ドアやタンス等に何らかのアクションを仕込みたい」場合、この技術は面白いかもしれません。

なおマニュアルがなかったので本来の使い方と異なる可能性がアリます。

関連

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp