WebページへのVR画像埋め込み、初心者の覚書

360°カメラ等で撮影したコンテンツをGoogle VR Viewで表示する

Google VR ViewのコードをGitHubから取得し、サーバに置いてホスティングするのがいいらしい。スクリプト埋め込みや、iframeでもできるけれど、一部のブラウザ等で表示ができないなどがあるとのこと（かなり読み飛ばし）。

マーカーをつけて、JavaScriptのイベントを追加することもできるようです。

ジャイロセンサーはJavascriptとかで、ONにしてもらわないと、iOS12以降はデフォルトがOFFらしい。確かにこのサイトのでもサイトを見た時、最初何も動かなかった。 a-frameは、ONニシマスカ？のダイアログが出ました。

これでONにした後だと、Googleでも見られた。

この記事ではジャイロセンサーによる手振れがGoogle VR Viewは気になるとあったが、私は対して気にならなかった。

ただ、描画が結構ぼやける気がした。Google。

a-frameの方が、その点は綺麗。

Pennellumも綺麗。Pennellumは、横にぐるっと回すだけで、ジャイロセンサーで自分でやるわけではないようだ。

webサイトだったらこれでもいいかも。

有料なら、360°カメラのTHETAの付属サービスとかがあるみたい（法人のみ有料）だが、これのViewerだけに有料は基本ないだろう。

そうなると、Pennellumかな。

上記ページでかなり詳しく実装方法を載せてくれていたので、これで実装はできそう。

でもこれだと、360°カメラがそもそもいる。いくらくらいなのかな？

RICOHのTHETAという、スマホとも連携できるらしい軽いものが、3万2千円ほど。

思っていたより安いですね。

今想定しているのは、店舗とか部屋の360°画像をぐるぐるできることなので、スタンドに取り付けて、撮る感じですかね。

作れるみたいです。 PhotoshopのPhotomergeという機能を使えば、360°のパノラマ画像を作ることができる。

というか、これは、全球とか半球ではなく、360°ってことですね。

言葉が入り乱れて使われているので、違いを明確にしておかないと実装が全然変わってきます。

この360°のパノラマ画像は、jQueryのビューワーで表示ができるようですね。

この記事で、色々たくさん紹介されていますが、パッとでもサイトが見られたものの中で、

というのが良さそうでした。

おそらくですが、これらを使えば、普通の手元にあるスマホとかカメラとかで撮った写真をPhotoshopのPhotomergeでパノラマ写真化して、それを使って、ぐるっと周囲を表示するjQuery プラグインで表示ができそうです。

360度カメラっていうのは、全球とか半球とかで撮影ができるやつで、それを平面に表示するのは、案外そんなに綺麗に表示できないのかも（まだ）

なので、360°パノラマ画像ビューワーくらいでちょうどいいのかもしれません。

一旦これで調査は一段落かなぁ。

やってみるかもしれません。（やってみた方がいいですよねw）