[THETA] 撮影した複数の写真を行き来するロジックについて

先週は、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の電波が届かないような場所で撮影した場合には、このマス目の考え方を用いると良いです。

最後までご覧いただき、ありがとうございました。


弊社では全国各地の請負い(ご自宅)で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*