Web技術でVRコンテンツ作成 - スマホブラウザでお手軽VR 第2回-

前回は、VRの現状と、スマホでのお手軽VRを紹介しました。今回は予告通り、Web技術を使った手軽なVRコンテンツ作成にチャレンジしてみます。

ソフト道場のがっつり試し食い！
- 2016年08月17日公開

はじめに

こんにちは。NTTソフトウェアの鈴木雅貴です。ソフト道場がっつり試し食い！の「スマホブラウザでお手軽VR」コーナー、第2回です。

前回は、VRの現状と、スマホでのお手軽VRを紹介しました。今回は予告通り、Web技術を使った手軽なVRコンテンツ作成にチャレンジしてみます。ちなみに、人参の皮ですが、皮ではありません。栄養素も香りも多いところなので、ぜひ剥かずにそのまま調理してみてください。

その前に宣伝

とその前に1つ宣伝を。私も執筆に参加している書籍『HTML5プロフェッショナル認定試験レベル1 対策テキスト＆問題集』(マイナビ出版)ですが、このたびめでたく重版が決定いたしました。

読んでいただいたみなさま、ありがとうございます。なおこの本ですが、2016年8月3日に開始されたAmazonの定額制読み放題サービスKindle Unlimitedの対象になっています。サービスをご利用のみなさま、この機会にぜひどうぞ。

WebVR APIを使ったコンテンツ作成

Webの世界でVRというと、まず最初に上がるのが、「WebVR」なる仕様です。簡単にいってしまうと、デバイスに接続されたゴーグルやセンサーを認識して、Webブラウザ上で使えるようにするAPIです。仕様はこちらをご覧ください。

まだまだ新しい仕様のため情報は少ないのですが、対応ブラウザや不足機能を補うpolifill、サンプルコード等の情報はWebVR - Bringing Virtual Reality to the Webからたどれます。

と紹介しました、このWebVRですが、実はこれだけではVRコンテンツを作ることはできません。WebVRはあくまでWebブラウザとゴーグル、センサー等を連携して制御するものです。コンテンツを作るためには、Webブラウザ上で3Dグラフィックスを表示するためのWebGLや、必要に応じて音声を扱うWeb Audio API、ゲームコントローラとの連携を制御するGamepad APIを使う必要があります。

これらを理解し使いこなすのはなかなか敷居が高いですね...

Webブラウザ向けVRフレームワーク A-Frame

ありがたいことに、そのあたりの大変なところをうまいこと吸収してくれるものがあります。

ここでは、A-Frameを使ってみます。

A-Frameは、Mozillaが開発しているWebVRコンテンツ作成用のフレームワークで、HTMLのようなマークアップで、簡単にWebブラウザ向けの3DVRコンテンツを作成することができます。

TOP画面左のメニューにExampleがあります。こちらを見ると、どのようなコンテンツが作れるかわかると思います。

空間に物体を配置したり

ショッピングサイトのようなものを作ったり

と、いろいろなことができます。

A-Frameを使った全天球写真の公開

ひとまず、簡単なVRコンテンツとして、全方位を見回せる全天球写真を公開してみましょう。非常にシンプルですがインパクトのあるコンテンツを作成することができます。

全天球写真の用意

Web技術とは直接関係ないですが、まず全天球写真を用意する必要があります。じつはこれが少し手間なのですが、以下のような方法で撮影可能です。

RICOH THETA等の全天球カメラで撮影
スマホアプリのGoogleストリートビューで合成(Android|iOS)

前者がシャッタ−1つで撮影できて便利なのですが、とりあえず試したいときは後者もおすすめです。後者での撮影方法については、「A-Frame」でVR開発入門！HTMLの追記だけでスマホブラウザから好きな場所を360度パノラマ画像体験 - paiza開発日誌が参考になるかと思います。

とりあえず試すのであれば、flickrの全天球画像(ライセンスは左上Any licenseで絞り込めます)などからも入手できますが、サンプルとして弊社横浜オフィスの受付写真を用意しました。よろしければご利用ください。怖い目で写り込んでいるのは私です。

このように、全天球画像は何もしないで見ると歪んでいますが、これをA-Frameがいい感じに表示してくれます。

公開用HTMLの作成

続いて、公開用のHTMLを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>VRサンプル</title>
<!-- A-FrameのライブラリをCDNで読み込む -->
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
<!-- シーンの定義 -->
<a-scene>
<!-- 全天球の背景画像として全天球写真を読み込む -->
<a-sky src="office.jpg"></a-sky>
</a-scene>

</body>
</html>

たったこれだけ。しかも、基本的なHTMLのベースから全天球画像表示のために追加したのは4行。これで完成です！

A-Frameではa-sceneやa-skyのように、HTML同様のタグを書くだけでVRコンテンツを作成できるのが大きな特徴です。とても簡単ですね。

作成したページはこちらからご覧いただけます。

表示結果は次のようにPCのブラウザでも確認できます(ChromeではWebサーバ上への配置が必要ですのでご注意ください)。このように、画像の歪みがいい感じに補正されています。

スマートフォンでは次のように表示されます。

そして、スマホを傾けたり、周囲を見回したりすると、動きに表示が追随するのが確認できるはずです。さらに右下のボタンを押すと、次のように右目用・左目用に別れた立体視用の表示に変わります。

ここに、前回紹介した立体視用デバイスをつければ、立体視が楽しめるわけです。

ご覧のように、全天球写真さえ用意すれば、あっという間にWebVRのコンテンツを作成することができます。本当に簡単ですので、みなさんもぜひお試しください。

次回予告

次回は、全天球画像に何か物体を配置してみようと思います。暑い日が続きますので、夏バテに気をつけて元気でお過ごしください。

連載シリーズ

ソフト道場のがっつり試し食い！