ちょっとしたコードでWebにVRを埋め込める!Google製「VR View」ってすごくない?

2016/05/24

Patrick Catanzariti

24

Articles in this issue reproduced from SitePoint
Copyright © 2016, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2016, KADOKAWA ASCII Research Laboratories, Inc. Japanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

Web開発者が利用できる、Webで仮想現実(以下、VR)を構築する方法は驚くべきスピードで進化しています。私が昨年、WebでVRを構築する方法の記事を執筆したあとも、ずいぶん進歩しています。この2週間、オープンソースの拡張可能なWebVRフレームワークのA-FramePrimroseを使ったVR構築について調査していますが、2016年も新たな方法がたくさん登場しています。3月、グーグルはWebにこれまで以上のVR体験ができる新しいオプション、VRコンテンツを埋め込める「VR View」を発表しました。

VR Viewとは?

「VR View」を使って、開発者は360度VR画像や映像をPCやスマートフォンのWebサイトに埋め込めます。AndroidとiOS対応のネイティブアプリにも埋め込めます。この記事では、360度パノラマ画像を既存のWebサイトに埋め込む簡単な方法を説明しましょう。

デバイスの互換性

グーグルのVR Viewは、PC、スマートフォンともに、以下のブラウザーの最新バージョンで利用できます。

  • Android、iOS、Windows、OS X、Linux向けのChrome
  • iOSとOS X向けのSafari
  • Windows、OS X、Linux向けのFirefox
  • WindowsのIE11とEdge

PC版でのVR体験は風景をマウスでドラッグしてまわす、疑似パノラマです。「magic window」と呼ばれており、知っている人もいるとは思いますが、数年前に登場したPC用Quicktime VRのパノラマに似ています。しかし、今回発表されたグーグルのVR Viewはサードパーティー製のプラグインではなくJavaScriptを採用していて、Google Cardboardを使うとより一層、本当にその場にいるようなVR体験ができます。

パノラマ写真を撮影する

グーグルはAndroidで360度のパノラマ写真が撮影できるアプリ「Cardboard Camera」を提供しています。iOS向けには「Optonaut」というアプリで、360度写真を撮せます。Optonautで撮影した写真データの取り扱いやアプリの使用感についてはよく知りませんので、もしiOSデバイスを使っている人がいればぜひ使い心地を教えてください。

グーグルのCardboard Cameraは、立ち止まって身体を回しながら画面の指示に従っていけば、360度写真を撮影できます。この撮影に最適な風景は、広いオープンスペースで、画像の上下にディテールが写り込まないところでしょう。狭い部屋での撮影は、うまく見えるように画像を加工する必要があるかもしれません(以下でそのやり方を見てみましょう)。

Cardboard Cameraで写真を撮ったら、スマートフォンの/sdcard/DCIM/CardboardCameraに360度写真が保存されるはずです。そのデータをPCに移せば、好きなように使えます。

画像の準備

画像に広大な空や地平線がないと、少し変な風に見えます。特に室内での撮影では避けられない課題です。SitePointのオフィスの写真(Angelaさん、ありがとう!)を例に、画像に回避できないディテールがたくさん入っている場合、どのようになるかを見てみましょう。

01

画像の上下にディテールがたくさん入りすぎるのを避けるために、画像の上下に追加したスペースに、ぼかした逆転画像を配置すると、よりすっきりと見せられます。あまり不自然ではない程度に、スペースを追加するテクニックはたくさんありますが、私が気に入っている方法です。

Photoshopで2048×1024サイズの新規ドキュメントを作成し、そこに同じパノラマ画像を3枚ペーストしましょう。

02

3枚の画像をドキュメントのサイズに合わせて引き伸ばし、Edit > Transform > Flip Verticalの順で上と下の画像を反転します。

03

こんな風に見えるはずです。

04

上と下の画像を複製し、Filter > Blur > Gaussian Blurの順でぼかしを入れます。

05

Gaussian Blurの設定値にいろいろな数値を入れて試してみてください。ぼかしをきつくした方がよく見える場合やその反対もあります。設定が終わったら、OKをクリックします。

06

ぼかしの入った各レイヤーを元画像よりも大きく引き伸ばしてください(へりはフェードアウトしますが、ぼかしが画像の四隅に入るようにするためです)。

07

こんな風に仕上がるはずです。

08

Photoshopを上手に使える人ならば、もっと自然に画像の上下の加工ができるしれません。もっと簡単に、目立たないように背景を加工できるものもあります。

画像を埋め込む

VR Viewには画像を埋め込む方法が2つあります。グーグルホスト型VR Viewかセルフホスト型VR Viewです。現時点では、VR Viewと同じサーバーにセルフホストする方が信頼性が高いです。VR Viewと画像が違うサーバーに置かれた場合、iOS Safariではうまく動きません。グーグルホスト型VR Viewを使う場合は、画像を置くサーバーがCORS(Cross-Origin Resource Sharing)をサポートしていることも必要です。

グーグルホスト型VR Viewを使う

Webページに以下のコードを入れて、VR Viewがどのようなものか簡単に試してみましょう。

<iframe width="100%" 
    allowfullscreen
    frameborder="0"
    src="//storage.googleapis.com/vrview/index.html?image=//photovrse.com/examples/coral.jpg&is_stereo=true">
</iframe>

グーグルが提供するサンプルコードが実行されるとこのように見えます。

vr2

初期設定で、サンゴ礁の海を泳ぐ魚の美しい360度パノラマビューが見られます。iframeのURLのimage=パラメータを変更して、自分の画像に変更できます。画像を置くサーバーがCORSをサポートしている限り、動くはずです。

コードにあるis_stereo=true属性は1つの画像の中にパノラマの複製が設定されている場合の属性です。難しくならないように、この記事では触れません。詳しい情報を知りたい人はグーグルVR Viewのドキュメントをご覧ください。

セルフホスト型VR View

グーグルホスト型VR Viewは非常に便利です。YouTubeの動画を組み込むのと同じくらい簡単で、素早くパノラマコンテンツを埋め込める理想的な方法です。しかし、多くのプラットフォームで大勢のユーザー向けにVR Viewを使いたい場合は、自分でVR Viewをホストすることになります。そうしないと、iOS Safariでは画像位置決めの不具合が起きてしまいます。この問題は近いうちに改善され、iOS Safariのためだけのセルフホストが不要になることを期待しています!

セルフホストの設定はそれほど難しくありません。グーグルのVR View GitHubからコードをダウンロードし、パブリックアクセスができる場所にホストしてください。たとえばサーバー上の「vrview」フォルダに保存した場合、「//yourdomain.com/vrview/?image=examples/coral.jpg&is_stereo=true」でアクセスできるでしょう。

他の画像を追加するには、サーバー上の置きたい場所に画像(たとえばimages/yourimage.jpg)を入れ、上記のURLを変更すれば追加した新しい画像が見られます(たとえば//yourdomain.com/vrview/?image=images/yourimage.jpg)。

もし簡単にセルフホストを試す方法を調べているだけで、使用予定ホストの準備もまだできていない場合は、GitHubページを使うのも良いでしょう。

GitHubページでVR Viewをホストする

VR Viewのダウンロードやセルフホスト以外にも、グーグルのリポジトリをフォークして、自分のGitHubアカウントでGitHubページを使ってVR Viewをホストする方法があります。

最初に、GoogleのVR View GitHub repoにアクセスし「Fork」をクリックします。

09

次に、リポジトリのフォークの中の「CNAME」ファイルをクリックします。

10

CNAMEはGitHubページにドメイン名を割り当てます。独自ドメインを設定したい場合は、GitHubページで専用ドメインを使うためのGitHubガイドに目を通してください。独自ドメインを使わない場合は、右側にあるゴミ箱をクリックして、CNAMEをフォークしたリポジトリのバージョンから削除してください。定型的なアドレスhttp://you.github.io/を使うことになります。

11

変更をコミットします。

12

最後に、フォークしたVR Viewのバージョンの中に新しいブランチ「gh-pages」を作成します。gh-pagesにあるすべての画像に、GitHubページ上でアクセスできるようになります。

13

http://you.github.io/vrview/?image=examples/coral.jpgにアクセスすると、VR Viewが動いているはずです。

ここまでくれば、どこにでも画像を追加できます。gh-pagesに直接追加するか、マスターに追加してからgh-pagesに移動する必要があります。GitHubに慣れていないなら、コマンドラインを使って混乱しないように、画像のフォルダを開いて、追加したい画像をドラッグ&ドロップしましょう。

URLを更新した画像に変更すれば(たとえばhttp://you.github.io/vrview/?image=yourimage.jpg)、素晴らしい360度パノラマが見られるはずです。

やってみましょう!

SitePointのオフィスの様子を示す360度のプレビューがあります。遂にSitePointのスタッフ全員の手が空いているときに、仮想的にオフィスに立ち寄ることができるようになりました! 右下のフルスクリーンのアイコンをクリックすればフルスクリーンで表示できます。スマートフォンなら、プレビューの隣にあるVRアイコンでフルスクリーンになります。Google Cardboardがあれば、クリックして楽しんでみてください!

vr1

my VR View GitHub PageでVR Viewの全容を見られます!

(原文:Embedding Virtual Reality Across the Web with VR Views

[翻訳:和田麻紀子
[編集:Livit

Copyright © 2016, Patrick Catanzariti All Rights Reserved.

Patrick Catanzariti

Patrick Catanzariti

開発者に勢いのあるテック業界の情報を伝えるサイトDev Dinerのファウンダー。SitePointではHTML/CSSチャンネルのエディターで、インターネット関連情報、仮想/拡張現実などに関しての寄稿者でもあります。そのほかSitePoint PremiumとO'Reillyのインストラクター、メタ・パイオニア、そしてテックデモで新しいことを試すのが大好きなフリーランスのWeb開発者と幅広く活動しています。

Loading...