360度スナップショットを極めよう

2016年に開発版が発表されて、2021年の年末に公式ビューワ、2022年の3月22日にfirestorm 6.5.3で使えるようになりました。

Second Lifeで「上下左右全ての景色・空間」を撮影することができる機能です。 専用の環境があれば、擬似的な3D空間のような写真になります。 これは「エクイレクタングラー形式(equirectangular)」と呼ばれるVRでも利用される図法で作成されます。 日本語で「正距円筒図法」といいます。そうですね、これは世界地図で球体の地球を平面で見るときに使う図法のひとつなのです。

特別なファイル形式ではなく、1枚の画像に全方向の情報を写すという形ですね。 最近では、360度写真も取れるカメラも販売されているため、今後利用する機会が多くなるでしょう。

世界地図を360度スナップショットと同じ方法で表示してみました。

基本的なウェブサイト作成の知識が必要となります。

  • 画像ファイルのアップロードの知識
  • HTML、CSSの基本的な知識
  • Javascriptの基礎知識
  • Flickrのアカウント(利用する場合)

基本的には、Flickrなどのサービスをつかう方法が多いかと思いますが、画像によってはウェブサイト上のみで動く必要もあります。 それを実現させるにはPannellumを使いましょう。これはWebGLとJavaScriptで動いています。 細かな調整ができますし、対応環境が多いです。(iOS、Androidなど)

今回は複雑な画像URLだったため、直接スクリプトを記述と、スクリプト自体をこのサイトと同じ場所にアップロードしています。またiframeをつかって1行程度で埋め込むことも可能ですし、CDNをつかってスクリプトをアップロードしなくても使うことが可能です。WordPressの場合はプラグインもあります。

Flickrはとても簡単です。Second Lifeの住民なら誰でも使ってる写真共有サイトです。 画像を上げれば、Exif情報からエクイレクタングラー形式と読み取って、自動でパノラマ表示をしてくれます。 ブログなどに乗せる場合は、画像右下のSNSシェアボタンを押すと、小窓がでるのでタブをいじって「Embed」でHTMLタグを表示してくれます。

アップロードした画像がパノラマ表示にならないときは、「equirectangular」タグをいれてみると表示します。 sl360_Bloodlines_South_4096x2048_2048_20220404_143730