このサイトPhoto Sphere (フォトスフィア)対応していますかね?

グーグルマップとかストリートビューで見かけるフォトスフィア (Photosphere)の360度パノラマ写真ですが上手く表示される環境だとマウスや指でグリグリ動かしながら違う方向を見ることができます。


フォトスフィア

以前使っていたグーグルのネクサス系のアンドロイドスマホだと標準のカメラアプリ『Googleカメラ』がフォトスフィアの撮影に対応していたので頻繁に撮影していましたが、Googleカメラは対応していない端末がいくつかあるみたいです。

この記事を書いているでは、アンドロイド/アイフォン共にグーグルのストリートビューのアプリを使えばフォトスフィアが撮影できるみたいです。


また、同じくネクサス系のスマホだと標準でインストールされているグーグルの『Googleフォト』で表示して指でグリグリ動かせますが、対応していない機種だとフォトスフィア対応のビューワー(『360 Sphere Viewer Lite』など)が必要だったり、一度、Googleのストリートビューにアップロードしてインターネット経由で閲覧しないとグリグリ動かせないみたいです。

因みにフェイスブックもフォトスフィアに標準で対応しているのでフォトスフィアの画像を投稿するとブラウザー上でグリグリ動かせます。 Google+というサービスのアカウントに画像としてUPしても出来るらしいですが、Google+はにサービス終了になるのでスルーします。

画像はJEPGフォーマットで保存されていて、JPEGのヘッダーにフォトスフィアの情報が埋め込まれているのでそれを基にパノラマ表示を再現しているみたいです。 なので普通のビューアーでフォトスフェィアのファイルを開くと普通のJPEG画像と処理されて👇みたいにねじれたパノラマ画像になってしまいます。


正距円筒図法

Federation Square
@フェダレーション・スクエア

昔、社会の時間でやった『正距方位図法』みたいな感じになってますが、正確には正距円筒図法という方法で保存されているそうです。というのも正距円筒図法だと3Dグラフィックスの処理で球体に張り付ける処理が比較的に簡単だそうです。


以前はグーグルAPIで表示出来たらしい

ネットを検索してみたら『Google expands photo sphere viewing from Android and Google+ to the Web with new widget』という付けの記事にJavaScript埋め込みでフォトスフィアの表示が出来ると書いてありましたが。。。 👇現在では表示されないみたいです。

*上の実線のボックス内にJavaScriptを埋め込んであります。

WebGLで表示出来るらしい

他のネット検索で、MasterMapsというサイトを運営しているBjørn SandvikさんがJavaScriptを使ってフォトスフィアをレンダリングしてマウスでグリグリ出来る様にするスクリプトを『Photo spheres with three.js』のブログ記事で公開しているのを発見しました。 フォトスフェィアのファイルをthree.jsというライブラリを使ってJavaScriptAPIのWebGLでレンダリングしているみたいです。

JavaScriptのソースもGitHub上で[https://github.com/turban/photosphere]公開されていて、ブログ記事の方には『Feel free to improve it on GitHub. 』とあるので『(コードの編集など)勝手にどうぞ』の意にとっていずれ使わせてもらおうかと思います。


結果

JavaScriptはこのサイトで使えるみたいなのでフォトスフィアの表示はWebGLを使えば可能みたいですが、Facebookの様にアップロードしただけではグリグリ出来るようにはなっていないみたいです。

(時間を見つけたら実際に埋め込んで試してみたいかと。。。)


[関連記事]



コメント