先週は、UnrealEngine の BluePrint について紹介しました。
今週は、THETA S で撮影した複数の写真を行き来するロジックについて説明します。
■本記事で説明したいこと
THETA S で撮影した写真は、360度パノラマ写真です。
撮影したポイントの前後左右が、すべて映っています。
ここで、図1のような場所で、道なりに撮影を行ったとしましょう。

図1 写真を撮影したと仮定します
今、PCの画面上で見ているポイントが、①の場所であったとすると、
たとえば②や③の位置は、①のポイントから視認できる位置にあります。
今回は、②の方向を向いていた時に、「前に進む」(②のポイントに移動する)ためには、
どのようなことを行えばよいのか、をまとめます。
■必要となる情報について
①の写真をPC上で見ていて、今向いている方向が②の位置である、
と判断するためには、大まかに3つの情報が必要になります。
情報1 THETA Sで写真を撮影したときの方角
情報2 図1のような、各写真の位置関係
情報3 図1全体の方角
■情報1-1 THETA Sで写真を撮影したときの方角について
情報1については、言い換えると「カメラのレンズはどっちを向いていたのか」となります。
撮影した写真は、360度パノラマ画像のため、どこが映っているのか、ではなく、
撮影時に起点としたポイントを知る必要があります。
この情報ですが、実は THETA S で撮影した画像(jpeg)の meta データの中に含まれています。
※3Dの物体の傾きには、「方位角」「水平角」「仰角」の3種類がありますが、
いずれの値も、THETA S で撮影した画像に含まれています
meta データ内に含まれているデータを抜粋すると、以下のようになっています。
この値は、JavaScriptでも取り出すことが出来ますので、PCブラウザで3Dパノラマ表示をする
場合でも、問題なく扱えます。
※取り出す方法については割愛します
■情報1-2 撮影方向にあわせて、3Dパノラマを表示時の初期表示位置を決める
3Dパノラマ画像を表示する際、たとえばPCブラウザでは Three.js のようなライブラリを使用しますが、
どのようなものを利用するにしても、実現することは同じで、図2のような形を作ります。

図2 3Dパノラマ画像を見るときの形
この時、特に方角を考慮せずに、3Dパノラマ画像を貼り付けた場合、
1)北にカメラを向けた状態で撮影した3Dパノラマ画像を使って、図2の形を作ったときの初期表示位置
2)南にカメラを向けた状態で撮影した3Dパノラマ画像を使って、図2の形を作ったときの初期表示位置
では、180度違うことになるのですが、Three.js 側からすると、同じように映しているつもりになっています。
※写真を撮影したときの状況がわからないため
このため、初期位置を、実際の世界での北側に向けたいと思った場合は、
meta タグの中に入っている方位角を元に、初期表示位置を補正します。
■情報2 図1のような、各写真の位置関係
情報1-1、1-2まで行うことで、今見ている方角を知ることが出来るようになりましたが、
そっちの方向に写真があるのかどうかを判断するためには、
撮影した写真の位置関係を、データとして持っておく必要があります。
たとえば、図1に、図3のようなマス目を設定したとします。

図3 マス目を設定
このとき、図1で言う①は「四-5」で、②は「六-4」になります。
この図は、世界を真上から見下ろしたときの図になるので、仮にこの図の上の方が「北」だとすると、
「四-5」を起点とすると「六-4」は「東北東」の位置にあることになります。
このように、図4の角度がわかれば、現在いる位置から、どの方角に別の写真があるのかを判断できることになります。
x , y の長さがわかっている状態で、図4の角度を求める場合には、アークタンジェントを利用します。
※アークタンジェントの説明については割愛します

図4 算出したい角度
■情報3 図1全体の方角
先ほどの話は、あくまでも、「この図全体として、上方向 = 北である」という決め打ちで行っていましたが、
実際のところは、そうではないかもしれないです。
もし、「この図全体として、上方向 = 南である」なら、カメラの位置を「西南西」に向けると、
②のポイントに移動できると判断してしまい、実際の世界とは真逆の位置関係になってしまいます。
従って、最後に、「この図全体として、上方向 = XXXである」の情報が必要になります。

図5 これですべての情報がそろいました
■まとめ
今回説明した内容で、プログラムを実装すれば、複数のポイントで撮影した
3Dパノラマ画像の間を、移動することができるようになります。
移動中のアニメーションを組み込めば、自前で Googleのストリートビューのようなものも作ることが出来ます。
また、今回は複数の写真の相対関係を、マス目で説明しましたが、もし距離が離れているならGPSの情報でもよいです。
ただ、GPSは数メートル単位で誤差が生じてしまうので、それよりも短い間隔で撮影していたり、
GPSの電波が届かないような場所で撮影した場合には、このマス目の考え方を用いると良いです。
最後までご覧いただき、ありがとうございました。
弊社では全国各地の請負い(ご自宅)で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。