Tweet

Pocket

パノラマはA-Frameかkrpanoばかりやっていてましたが、ここに来てGoogle VR Viewの気になる度数が急上昇してきました。
　krpanoは2年前くらいから利用していますが、シナリオ機能を始めホットスポットや追加で図形を重ねられ、あとHTML5／Flashのどちらでも出力可能など、すばらしい機能を持っていますし、周囲でGoogle VRをフォローしている人がいなかった環境というのもあって見向きもしなかったのですが(すみません！)、ふと改めて見てみるとほぼ同等の機能が準備されているではありませんか。

そこで、何回かの掲載に分けてこのGoogle VR Viewをいじくりこんにゃくしてみようと思います。

やってみよう

私はネットワークとかサーバがあんまり強くないので詳しく解説できませんが、サーバ側に特定の設定が有効になっているときは、以下の記述のみで360度パノラマが掲載できちゃいます。

srcにhttp//storage.googleapis.com/vrview/index.html?image= ＋ 画像パスと書くだけです。

「簡単じゃん！　やったね！」で終わらせたかったんですが、photowork.jpはその設定が許可されていないのでちょっと遠回りします。自分のchristinayan01内に仕掛けを用意することで同じことができます。やってみましょう。

1.ダウンロード

GitHubにあるgooglevrからファイルをダウンロードします。

2.画像の準備とちょっとのコーディング

ダウンロード後、zipを解凍します。
さらに、私の場合ですがvrviewフォルダ以下にcontentsフォルダを新規作成し、その中にexhibition.htmlを作成しました。

HTML

内容はほぼ定型文でOKです。詳しくはGoogle VRのドキュメントでも確認できます。英語苦手な方でもChromeのサイト翻訳で十分きれいな日本語になります。
　　VR View for the Web – Google VR

360度パノラマ画像

あと画像が必要です。2枚用意しました。previewの方は任意です。これも　contents　フォルダに入れます。
　　・room1.jpg　：　4096x4096pxの1:1画像。equirectangularの360度パノラマ画像を
　　　　　　　　　　　　　　　上下2枚並べたものです。上が左目、下が右目。
　　・room1-preview.jpg　：　プレビュー用で、とりあえず左目の画像を1028pxに縮小したもの。

Google VRの助かるところは簡単にステレオ対応してくれるところです。視差ありの2枚の画像の準備が簡単で、360度パノラマ画像を上下に2枚並べて、1つの正方形の画像にしておけば良いのです。

3.サーバにアップロード

これをサーバにアップします　./christinayan01/architectural/vrview/・・・　としました。
この時点でのvrviewの階層はこんな感じになっています。

4.記事に埋め込む

さあ準備完了。さっそくこの記事に埋め込んでみます。

個人的にですが、埋込み型のパノラマ画像は正方に近いアスペクト比で表示するのがおすすめです。理由は横長だとパノラマ特有の伸縮が画面端で顕著に出て気持ち悪いからです。正方だとこの現象がほぼ出ませんので気持ち快適です。
　↓これ。個人的に両端の表現が嫌。

おわりに

余談ですが、Google VR Viewだとホットスポットとかも簡単に埋め込みができます。これができちゃうとなるとkrpanoがほとんど不要になっちゃうのですよね。全く不要ってわけではないんですけど、先日紹介した1億画素以上とか数千億とかの超高解像度の360度パノラマVR以外は出番がなくなっちゃいそう。

そして動画も簡単に実装できます。それも試してみよう。

さてさて、これだけでは終わりません。サンプルを見るとこんな素敵な表示も簡単に実装できてしまうのです。ということで次回はこういったパノラマコンテンツのさらなる楽しみ方に触れていきます。

参考サイト

• VR View for the Web – Google VR
• googlevr – GitHub
• Google VR Viewで360°コンテンツをサイトに埋め込む – 株式会社マグネッツ

続き

【VR】Google VR Viewを使って360度パノラマ画像/動画を載せてみよう (2)