セッション内容を講演者自らが解説するという「HTML5 Conference 2016特集」の第三弾。今回のテーマは「Webのグラフィックス後編: WebGL2、そしてWebVR」。
すでに策定が始まっている次期バージョンWebGL2.0のお話や、WebでVRを実現する「WebVR API」を用いてVRコンテンツの実装の仕方を解説します。

VRとは？

今年、2016年はVR元年と言われ、様々なVRデバイス、VR関連ガジェット、VRコンテンツが世に生み出されています。 しかし、VR発祥は意外と古く、遡ること1960年代にVRの基礎となる理論、デバイスが発表されています。

ただ当時は個人で手が出るものではなく、体験自体はデパートのアトラクションとして登場するなど、体験は限定的でした。

参考

時を戻して2016年。世界が動き出します。
2016年6月時点のGoogle検索トレンドでは、検索回数が飛躍的に伸びているのが見てとれます。

きっとこれを読まれている方も、周りで「VR」というワードを聞くことが増えてきたのではないでしょうか。そしてこの波に乗るように、VRについてもWebでの体験を可能にする技術が公開されています。

WebVRは体験の話ではない

WebでのVR技術、それが「WebVR」です。
取りざたされているVRを手軽にWebで体験できるもの。それが「WebVR」。

…ではなく。
あくまでWebVRはイチ仕様に過ぎません。
つまり、WebVRに対応したからといって、即座にWeb上でVRコンテンツを提供できる、という類のものではないということです。

WebVRはAPIの仕様

誤解を恐れずに言えば、WebVRはセンサーからの情報を扱うためだけのAPIです。
要は、HMD（ヘッドマウントディスプレイ）からの位置、回転、視野情報など様々な、ハードウェアの情報を取り扱うAPIということです。もっと言ってしまえば、モバイルで利用しているジャイロセンサーとなんら変わることはない、ということです。

事実、WebGLの仕様と比べると格段に少ない内容の仕様となっています。（仕様はこちら）

VRコンテンツの構築

Webで手軽に体験できるVRコンテンツ、と書きましたが提供する側が同じく手軽であるとは限りません。
（とはいえ、その他のネイティブなVRコンテンツと比較すると格段に手軽だと思いますが）

WebVRはただのAPIだと書きました。
つまり、VRコンテンツ自体は別のAPI、具体的にはWebGLを利用して3Dコンテンツを制作する必要があります。事実、VRコンテンツの制作について既存の3Dコンテンツの制作と違いはほとんどありません。

WebGLコンテンツでは通常、requestAnimationFrameなどを利用して、一定時間置きに画面を更新しアニメーションやインタラクションを実現します。ジャイロセンサーを使ったコンテンツの制作を行ったことがある方であれば、どういったコンテンツが制作できるのかのイメージがわくでしょう。

そして上でも書いたように、ジャイロセンサーで行っていたような処理をWebVR APIに替えて画面を更新してやればいいのです。

ただし、（当然ではありますが）通常のWebGLコンテンツとWebVRコンテンツでは決定的に違うところがあります。それは「VR体験を作り上げる必要がある」という点です。

具体例を上げましょう。
今までの3Dコンテンツはカメラの位置は製作者側で制御可能でした。
ということはつまり、都合の悪い、カメラの後ろ側を映さないようにカメラを制御することができた、ということです。 しかし、VRコンテンツはそのカメラの操作はユーザーの視点という形で使われるため、当然、その後ろ側を見られる可能性があります。
（というより、ほとんどの場合、ユーザーはあたりを見渡すでしょう）

このように、裏側が見られてしまうということは、悪く言えば手抜き、よく言えば無駄を省いた部分までもしっかりと作り込まないとならないということを意味しています。

基本的なセットアップ方法

さて、それではざっくりとですが、WebVR APIを使ったセットアップのコードを紹介しましょう。
本コードはこちらのサイトのサンプルを引用させていただいています。

▼ HMDハードウェアの参照を取得する

navigator.getVRDisplay().then(function (displays) { if (!displays.length) { return; }

vrDisplay = displays.length[0];

}).catch(function (err) { console.error('Could not get VRDisplay', err.stack); };

▼ 描画対象として必要なサイズを取得する

var eyeParameter = vrDisplay.getEyeParameters('left'); var width = eyeParameter.renderWidth; var height = eyeParameter.renderHeight;

▼ WebGLのCanvasおよびVRモード移行のための処理を記述 var webglCanvas = document.querySelector('#webglcanvas'); var enterVRBtn = document.querySelector('#entervr');

vrDisplay.exitPresent();

▼ 画面のアニメーションループを処理する var id = vrDisplay.requestAnimationFrame(onAnimationFrame);

vrDisplay.cancelRequestAnimationFrame(id);

▼ HMDのセンサーからの値を取り出す var pose = vrDisplay.getPose();

var position = pose.position;

▼ ハードウェアに設定された個々の設定を読み取る（瞳孔間距離など） var eyeParameters = vrDisplay.getEyeParameter('left');

var eyeMatrix = makeProjectionMatrix(vrDisplay, eyeParameters);

▼ 取得した情報から、プロジェクション行列を生成する function fieldOfViewToProjectionMatrix (fov, zNear, zFar) { var upTan = Math.tan(fov.upDegrees * Math.PI / 180.0); var downTan = Math.tan(fov.downDegrees * Math.PI / 180.0); var leftTan = Math.tan(fov.leftDegrees * Math.PI / 180.0); var rightTan = Math.tan(fov.rightDegrees * Math.PI / 180.0); var xScale = 2.0 / (leftTan + rightTan); var yScale = 2.0 / (upTan + downTan);

var out = new Float32Array(16);
out[0] = xScale;
out[1] = 0.0;
out[2] = 0.0;
out[3] = 0.0;
out[4] = 0.0;
out[5] = yScale;
out[6] = 0.0;
out[7] = 0.0;
out[8] = -((leftTan - rightTan) * xScale * 0.5);
out[9] = ((upTan - downTan) * yScale * 0.5);
out[10] = -(zNear + zFar) / (zFar - zNear);
out[11] = -1.0;
out[12] = 0.0;
out[13] = 0.0;
out[14] = -(2.0 * zFar * zNear) / (zFar - zNear);
out[15] = 0.0;

return out;

}

Three.jsを使えばお手軽

WebGLといえばThree.js、というくらいデファクトスタンダードなライブラリとなったThree.js。
実はThree.jsのリポジトリにはWebVRに対応するためのプラグインがすでに存在しています。

それは VRControl.js と VREffect.js の2種類です。
これはどちらもThree.jsでVRを実現するのを手助けしてくれるプラグインです。
VRControl がHMDのセンサーの処理を、 VREffect.js がフルスクリーンモードへの移行や、VRモードの表示を手助けしてくれます。

基本的に、Three.jsを使った3Dコンテンツ制作の方法はVR化すると言っても大きな違いはありません。
その証拠に、VR化するためのコード断片は以下のようにとても短いものとなります。

var controls = new THREE.VRControls(camera); var effect = new THREE.VREffect(renderer);

// clickイベントなどのユーザ操作のタイミングで実行される関数 function toVRMode() { effect.requestPresent(); }

対応ブラウザ

対応ブラウザは、執筆時点（2016/09/28）ではまだ限定的にしか存在していません。
安定版で動作するものは今のところないのが現状です。

対応状況は以下のサイトから確認することができます。
Is WebVR Ready?

VR成功の鍵を握るのはWebVR

個人的な見解ですが、VR成功の鍵をにぎるのはWebVRにあると思っています。
その理由はいくつかあります。

一つ目が、プラットフォーム（Oculus Rift、HTC Viveなど）に依存しないこと。
つまり今までのWebアプリと同様に、モバイル、PCなどのプラットフォームに依存しないコンテンツ展開ができることです。

二つ目に、インストールが不要なこと。ネイティブアプリにしてしまうとどうしてもこの「インストール」という手順が必要になってしまいます。しかし、WebVRであればWebサイトに訪れたユーザが、VRモードの開始ボタンを押すだけでVR体験をすることが可能になります。

そして最後の三つ目として、「ちょっとだけVR」が使えること。
例えばECサイトの商品をVRで見てみる、例えば不動産サイトの部屋の感じをVRで体験してみる、などなど、VRが活用できればユーザの利便性が上がることはたくさんあります。

しかし、例えばこれらを、アプリをインストールしたのちにしか行えないとしたら大部分の人はそれを倦厭するでしょう。

またコンテンツ制作側からしても、そんなちょっとしたVRアプリだけをプラットフォームに載せて配信する、というハードルの高さも出てくるでしょう。

こうしたように、今までの「Webならではの良さ」がそのままVRにも当てはめることができると考えています。そしてこれが結局、VRとユーザの接点となり、より多くの人にVRとはなにか、VRでどんなことができるかを広める機会になると考えています。

まとめ

まとめると、

• WebVRはAPIの名称
• WebVR APIがやってくれるのはセンサーの値を取るなどの最低限の処理のみ
• Three.jsを使えば手軽にVRコンテンツの制作が可能
• とはいえまだサポートブラウザが（ほぼ）ない
• しかし、Webでの活用はまだまだ（いい意味で）未知数

ということです。
詳細についてはカンファレンスで使用したスライドがアップされているので、そちらを参照ください。

当日の動画は下記で公開されていますので、こちらも参照してください。（編集部注：動画は3：26：10あたりから比留間さんの講演となります）

そこで今回は、「今からWebVRに備えよう！」ということで、WebVRとはなにか、それを利用して何ができるのか、利用シーンはどうか、といったことに焦点を当てたいと思います。

VR元年

本格的になりそうなのはなぜか。まずひとつ挙げられるのはOculus Rift（詳細は後述）に代表される、いくつかのヘッドマウントディスプレイ（以下、HMD）が比較的安価に家庭で利用できるようになったことです。
今年に発売される予定のものだけでも、Oculus Rift、HTC Vive、PlayStation VR、FOVE(開発キット版)など様々なHMDが市場に登場する予定になっています。
またこれらが注目される理由として、現在のPCのハードウェア性能が、HMDの必要としている要件を満たしてきた、という点も大きいでしょう。

しかしながら、Oculus Riftに関して言えば 2,160 x 1,200 という高解像度の画面を90FPS、つまり1秒間に90回もレンダリングをしなければなりません。
これは最近のPCであっても、ミドルハイクラス〜ハイエンドクラスのGPUが搭載されているPCが必要であり、安価と言っても「今までに比べて」という側面があることは否めません。

とはいえ、一般ユーザーが手にできるPCでそれを実現できる、というのはやはり大きなポイントでしょう。
現在に至るまでVRは、研究所や政府機関、あるいは財力のある企業に限定されていました。
Oculus Riftの登場により、その敷居が格段に下がったのが今年、というわけです。

例えば今までは大きなアミューズメントパークでしか体験できなかったようなことが家庭でもできる、と考えるとその凄さが実感できるでしょう？

Oculus Rift

さて、そんな話題のOculus Riftとはなにか。
VRの火付け役とも言えるOculus Riftは、ヘッドマウントディスプレイ、つまり頭にかぶるようにして利用するディスプレイです。
今までのHMDとの大きな違いは、その視野の広さとヘッドトラッキング／ポジショントラッキング機能が搭載されたことです。

これらがなにをもたらしてくれるか。それは、圧倒的な没入感です。
視野の広さにより、目に映るVRの世界はとても広く、「本当にそこにいるように」感じることができます。
さらに、ヘッドトラッキング／ポジショントラッキングの機能により、右を向いたり、左を向いたり、当然上下も見ることができ、360度の世界を「見渡す」ことが可能となります。
これらの機能によって圧倒的な没入感が生まれ、3D空間に入り込んでしまったような感覚を味わうことができるのです。

とはいえ、VRを説明する上で一番むずかしいのは、この没入感はHMDの機能によって「脳に錯覚」させている点です。
つまりVRを体験したことがない人に言葉や動画だけではすべてを説明することができません。
百聞は一見にしかず、という言葉が本当にぴったりです。

しかし逆を返せば、一度でも体験してもらえさえすれば、そのすごさと魅力を伝えることができるはずです。

VRをWebに持ち込む意味

そんな中、VRの波はWebの世界にもやって来ました。それが「WebVR」という仕様です。
WebVRが何かと言うと、前述したOculus Riftに代表されるHMDをWeb上で動かそう、というものです。
そうです。つまりOculus RiftをJavaScriptで動かすことができるのです。

WebVRの仕様や使い方についてはもう少しあとでお話しましょう。
まずはVRをWebの世界に持ち込むことの意味を、筆者の考えを元に説明したいと思います。

URLだけでコンテンツをシェアすることができる

VRに限らず、Webのいいところはアプリなどのインストールなしに、ブラウザでアクセスするだけでコンテンツが体験・利用できるところです。
これはVRについても同様のことが言えます。
WebVRを利用したサイトとしては、MozVRという、Mozillaの運営するサイトがWebVRを用いて実装されています。
（Oculus Riftをお持ちの方は、アクセスしてみるとすぐにでも見ることができます。このように、URLをシェアするだけで体験してもらえるのも大きなポイントのひとつですね）

またWebということはデバイスを限定しない、という側面もあります。
まぁ実際のところハードウェア性能だったり画面解像度だったり、理想と現実で違う部分もありますが、環境を限定しないようにしていく、という視点は大事なポイントでしょう。
つまりなにが言いたいかと言うと、WebにVRを持ち込むことでひとつのVRコンテンツをOculus Rift向けとスマートフォン向けに提供できる、ということです。

実際に、筆者が勤める面白法人カヤックのVR部のサイトはWebGLで実装しており、Oculus Riftが接続されたPCかスマートフォンで閲覧するとVRモードで見れるようになっています。
WebGLに対応したものであれば、お手持ちのスマートフォンで見ることができるのでぜひ見てみてください。

WebVRをどうコンテンツに活用するか

では実際に、VRをどうWebコンテンツにしていったらいいのでしょうか。
正直なところを書いてしまうと、いかようにでもできる、というのが現時点での感想です。
VRは3D空間に入り込んだように見せることができるため、本当に様々な分野に活用されています。
ゲームはもちろんのこと、介護や医療などにも応用されています。

また最近では、VR空間上でコミュニケーションできる「BigScreen」というソーシャルVRアプリが発表されました。
FacebookもソーシャルとVRについて注目しています。
個人的には、Skypeなどで行っている動画チャットによる会議なども、VRにすることでより自然な形で、オンライン上のやりとりができると考えています。

VRミーティングみたいなものはWebと相性のいい例です。なにせ、URLをシェアしてそこにアクセスするだけでミーティングが始められるわけですから。

以上のように、VRは様々な活用方法があり、あとはアイデア次第でいかようにもできる、というポテンシャルを秘めていると考えています。

今からでもできる！　スマホVR

さて、ではいよいよWebVRの仕様や使い方について解説していきます。

実のところ、スマホでのVRはWebVRはまったく関係ありません。
というより、スマホにはVRコンテンツを表示する上で必要な機能がすでに備わっています。
スマホには

• 高解像度の画面
• ジャイロセンサーによる頭の向きのトラッキング
• VRコンテンツを表示するための高性能なCPU／GPU

つまり、制作者側が準備さえすれば、すでにVRを体験する土台は整っている、というわけです。
（実際のところはやはりそれなりのハードウェア性能が求められるので、iPhone6などの最近の端末が必要になることは否めませんが）

ある程度ユーザー環境を限定してしまうものの、Oculus RiftなどのHMDデバイスを持っていないユーザーに対して、それも圧倒的多数のユーザーに対してVRコンテンツを届けられるのは事実です。
ただ一点だけ、解決しなければならない問題があります。
それは、例えVRコンテンツを表示する準備ができたとしても、それを立体視する道具がなければ意味を成さないことです。

しかしご安心を。GoogleのCardboardやハコスコに代表される、段ボール製のゴーグルも最近では活発に発表されています。
また、「VRゴーグル」などで検索してみると、プラスチック製の比較的しっかりしたゴーグルも様々なものが発売されていることも分かります。
そしてどれもが1000〜3000円以内で購入することが可能です。

このように、圧倒的に安価にVRを始められるのもスマホVRのメリットです。

実際にスマホVRを作ってみよう

安価に体験できることは分かりました。しかしまだ読者の方の中には「でも作るのは大変なんでしょ？」と思われている方がいらっしゃるかもしれません。
しかし、それも心配無用です。

WebVRの波に乗るように、すでにいくつかのフレームワークが登場しています。
今回紹介するのは「WebVR Boilerplate」です。

これを使えば、非常に手軽にWebVR（とスマホVR）の環境を構築することができます。
このフレームワークはWebGLのライブラリとして有名なThree.jsをベースに構築されています。

Three.jsに触れたことがある読者の方であれば、いくつかのスクリプトを読み込ませ、数行書き出すだけですぐにでもWebVRに対応させることが可能です。
今回はこれを使って、ごく簡単なシーンのセットアップコードを見ながら、実際にVRコンテンツが手軽に作れることを実感してもらいたいと思います。
（もしすでにThree.jsでコンテンツを作ったことがある方は、ぜひご自分のコンテンツをWebVR化してみてください）

シーンの構築

まずはThree.jsを使ってシーンを構築していきます。
今回は長くなってしまうのでThree.jsの使い方などについての説明は割愛します。
が、ごく簡単なシーンですので使ったことがない方でも、なんとなくどんなことをやっているかは分かるかと思います。

ちなみに今回のデモはGithubにソースコードをアップしています。
また実際に動くものも公開しているので、どんなものかをすぐ見ることができます。

スマホで実際に実行した状態は以下のようになります。

アニメーションgif

// WebGLレンダラを生成 var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio);

// VRマネージャの生成 var manager = new WebVRManager(renderer, effect);

まずはシーンのベースを構築します。
シーンオブジェクト、カメラオブジェクト、あとはそれらをコントロールするコントローラにマネージャ、と名前を見ればなんとなくどんなことをやってくれるかが分かるオブジェクトたちをセットアップしています。
Three.jsを触ったことがある人であれば何度も目にしている記述とほぼ同じことが分かると思います。

さて、土台を作ったらシーンの登場人物たちを作ります。
冒頭で説明した通り、今回は宇宙空間に地球が浮いているようなものを想定しているのでそれらを作っていきます。

// Skysphereの生成（星空） var skysphereLoader = new THREE.TextureLoader(); skysphereLoader.load('img/bg_skyplane.png', onSkysphereTextureLoaded); function onSkysphereTextureLoaded(texture) { texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(4, 4);

var geometry = new THREE.SphereGeometry(5000, 128, 128);
var material = new THREE.MeshBasicMaterial({
    map: texture,
    color: 0xffffff,
    side: THREE.BackSide
});

var skysphere = new THREE.Mesh(geometry, material);
skysphere.position.z = 0;
scene.add(skysphere);

var geometry = new THREE.SphereGeometry(0.3, 32, 32);
var material = new THREE.MeshLambertMaterial({
    map: texture,
    color: 0xffffff
});

earth = new THREE.Mesh(geometry, material);
earth.position.z = -1;
scene.add(earth);

// ライトの生成（地球を斜め上から照らしたような演出にします） var light = new THREE.DirectionalLight(0xffffff); light.position.set(1, 1, 1); scene.add(light);

これで宇宙（星空）と地球、そして太陽に照らされているような演出ができあがりました。
現時点で実行して見ると宇宙空間に地球が浮いている様子が描画されます。

さぁ、いよいよ最後の部分です。
VRモードで見るにはジャイロで動かして、さらに立体視できるように画面を分割して表示する必要があります。

ジャイロで動かしたり、地球を回転させたり、といったことを実現するにはそのためのループ処理（アニメーションループ）を実装します。
そのループ処理の中で地球の回転や、ジャイロをカメラに伝える処理を記述します。
それを実現するのが以下の記述です。

// アニメーションループ var lastRender = 0; function animate(timestamp) { var delta = Math.min(timestamp - lastRender, 500); lastRender = timestamp;

earth.rotation.x += delta * 0.000015;
earth.rotation.y += delta * 0.000025;

// VRコントローラのupdate
controls.update();

// VRマネージャを通してシーンをレンダリング
manager.render(scene, camera, timestamp);

// アニメーションループ
requestAnimationFrame(animate);

// アニメーションの開始 animate(performance ? performance.now() : Date.now());

アニメーションループ部分です。
どうですか？　拍子抜けしましたか？
見てみるとアニメーションのループの中で実際になにかしら計算っぽいことをしているのは、地球を回転させる処理だけです。
それ以外はすべて、VRコントローラとマネージャが引き受けてくれます。

あとはこれを実際に実行してみれば、冒頭で紹介したデモと同じ状態が再現されます。

いかがでしょうか。こうしたフレームワークを使うことで、WebVRとスマホVRは驚くべき手軽さで実現することができるのです。

WebVRでOculus Riftを動かそう！

前述まででいかに手軽にスマホVRが制作できることが分かっていただけたかと思います。
さて、だいーぶ前置きが長くなってしまいましたが、ここから本題です。

WebVRのAPIを利用してOculus Riftを動かすところを見てみましょう。
実のところ、このAPI自体も自分自身で触ることはほぼないでしょう。
前述したWebVR BoilerplateにはWebVRをラップしたいくつかの便利ライブラリが含まれています。

※ 現時点の最新仕様はWebVR1.0となっており、執筆時点ではまだ正式対応がされていないようですが、WebVR1.0向けのブランチが存在しているので、そちらをダウンロードしてきて利用してもいいでしょう。

WebVR Boilerplateを使って実装した上記の地球デモはすでにWebVRのAPIに対応した状態になっています。
（ただし、上でも触れた通り、Oculus Riftの最新のRuntimeが入った状態だと、masterブランチのものでは動作しません。また、WebVR1.0に対応したブランチであっても、WebVR1.0に対応しているのはChromiumの専用ビルドだけなので注意してください）

ごく簡単なセットアップだけでOculus RiftとスマホVRに両対応できるのはとてもメリットです。

ではいよいよWebVRのAPIを説明していきましょう。
・・・といきなり言われても、おそらくOculus Riftを持っている方のほうが少ないでしょう。
（なんせ製品版は10万円近くもしますからね）

なので今回は、WebVRのAPIがどんなものなのか、それをどう使うのか、ということを解説したいと思います。
最初に断っておくと、WebVRのAPI自体はとても簡単なものです。
事実、APIから取得できる頭の位置、回転の情報を取得してそれをThree.jsのカメラの位置や回転に変換して適用してやるだけです。
極論な例を挙げるなら、ジャイロセンサーの値をなにかしらのスマホコンテンツに利用するのとほぼ同じことと言えます。

デバイスから値を取り出し、それを使う。

本当にただこれだけです。

しかしVRを表現する上でスクラッチで書くには大変な部分もあります。
下のキャプチャのように、中央から半分に分割されたVRの動画や画像をよく見かけると思います。

画面を半分にし、それぞれの視点（左右の目）から見た状況をレンダリングする必要があるのです。
（上の画像をよーく見ると、若干左右の画面に違いがあるのが分かると思います）

しかし今回は、WebVR APIの使い方のイメージを掴んでいただくために、上記のレンダリングについては触れません。
これをスクラッチでやろうとすると、行列の知識や3Dの表現方法についての前提知識が必要となってしまい、説明するにはさらに多くの文章を必要としてしまうため、今回は割愛させていただきます。
ただ上でも書いた通り、このあたりの処理を自前で書く、ということはほぼゼロと言っていいでしょう。

そのため、内部的にどういう動作をしているか、を理解するにとどめておくだけで十分だと考えています。

今回はThree.jsのリポジトリに含まれている、VRControlsの実装を参考に、WebVR1.0に対応させたコードを紹介します。

var vrDisplay;

vrDisplay = displays[0];

var pose = vrDisplay.getPose();

var orientation = pose.orientation;
camera.quaternion.fromArray(orientation);

var position = pose.position;
camera.position.fromArray(position);

}());

とてもざっくりですが、WebVRのAPIを使った処理になります。

navigator.getVRDisplaysメソッドを利用してVRデバイスオブジェクトを取得します。
基本的にこのオブジェクトを介して処理を進めていくことになります。

注意 先にも書きましたが、getVRDisplaysはWebVR API1.0の仕様であり、それ用にビルドされたChromiumでしか動きません。（執筆時：2016.03.15）
FirefoxもWebVRに対応していますが、以前の仕様で実装されており、getVRDevicesメソッドがその役割になります。
しかし、取得できるデバイスオブジェクト自体が異なるため、今回紹介した方法では動きません。

上記で利用しているメソッドは以下です。

• requestPresent
• requestAnimationFrame
• getPose
  • pose.position
  • pose.orientation

requestPresentメソッドはその名の通り、VRモードを表示するメソッドです。
フルスクリーンになり、上のほうで掲載した歪んだ画面を表示するためのものです。

requestAnimationFrameはwindowに生えているものとは別のものになります。
というのも、windowに生えているものは基本的に60Hzで動作するのに対し、VRではさらにその上の、90〜120Hzが要求され、frame数が合わないためです。
なので、VRモードではこちらを利用します。

一番注目してもらいたいのがgetPoseで取り出される値です。
読んで字のごとく、HMDの姿勢（pose）を取得するものです。

ここに、HMDがトラッキングした位置と回転情報が格納されています。
これをそのままカメラの制御に利用すれば、HMDの情報がそのままカメラに伝播し、結果としてVR空間を好きなように見渡すことが可能になる、というものです。

Three.jsを利用すれば、こうしたカメラなどが抽象化され、3Dに対しての知識があまりなくても実装することが可能です。
Oculusを持っている方はぜひ、簡単なサンプルでも構わないので作ってみてみてください。
自身が作ったものが目の前で動いているのは、どんなにシンプルなものでも感動するはずです。

コードを見てもらうと気づくと思いますが、カメラやエフェクトの部分以外はWebGLでコンテンツを作ることとまったく同じです。
あとはこれらを組み合わせてなにを作るか。アイデアさえ出てくれば、きっと様々なVRコンテンツを作ることができることと思います。
ぜひ、これを機会にVRコンテンツ制作に手を出してみてください。

ちなみに、WebVR1.0の実装についてもっと詳しく知りたい方は、こちらの記事にセットアップから実行までの解説が載っているので参考にしてください。（仕様はこちら）

最後に

いかがだったでしょうか。
VRと言っても、コンテンツの作り方はWebGLとそう大きくは変わりません。
コンテンツの良し悪しはWebGLでのコンテンツの良し悪しに直結します。

ただVRならではの問題もあり、例えば目の前を覆ってしまうため、キーボードやマウスなどのデバイスを使っての操作はあまり向かないでしょう。
ゲームパッドのようなものはまだ大丈夫かもしれません。
そのため、UIに関してはまだまだこれだ、という状況になっておらず、今後も様々な研究結果が出てくるものと思われます。

ただどちらにせよ、UIの作り方自体はWebGL（3D）上での話になるため、制作過程についてはVRのために、というよりもWebGLでどう作るか、を学ぶことで解決できると思います。

VRという新しい技術をどう活かすか。それは制作者である読者の方の考え方次第で無限に広がっていくと思っています。
ぜひこの機会にVRコンテンツの制作を開始してみてください。
（例えばモデルルームをVRで観ることができる、というものは実際に行っている例があります）

筆者はスマホVRが市場を牽引してくれると信じています。
さらに言えば、Webで展開されるスマホVRがよりその力が強いでしょう。

しかしそのためにはみなさんの力が必要です。
ぜひいろいろなVRコンテンツを世に広め、VRを体験したことがある人を増やせるようにしていただけると幸いです。

HTML5 Canvasを利用した冷気の演出が話題となった「RAIZIN JAPAN」のデモサイト。エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ第二弾は、RAIZIN Coolの実装を徹底解説します。

HTML5 Canvasを利用した簡易的な冷気の演出

最近の仕事で実装したものが海外の、しかも米シリコンバレーで話題になりました。
社内でもそうした簡単にできる（けど簡単そうに見えない）簡易的な実装に注目が集まり、ちょっとした話題になったので解説しつつ紹介したいと思います。

※今回の解説用に、jsdo.itに実際に動くサンプルをアップしました。
さらに今回の解説用に特別に動作が分かりやすくなるオプションも追加しています。↓ (invalid jsdo.it code)

今回紹介するのはRAIZINというエナジードリンクの新バージョン「Cool」のLPです。
当初はとても時間がタイトで限られた予算での実施ということもあり、まったく動きのないペライチにしようという話になっていました。

しかしそれだとどうしてもインパクトが出ない。
「時間と予算が限られた中で、それでも少しでもインパクトのあるものが作りたい」
とエンジニアとデザイナーで話し合いました。

あ、ちなみにこの記事を書いているのは私ですが、方向性、実装方法などおおまかに話したあとは実装は社内の別のエンジニアが行なっています。

どこに人はリアリティを感じるか

話し合いは、まずはどうしたらリアリティが出るか、という話をメインに行いました。
話し合い時点である程度デザインはでき上がっていたので、それを元にどうしたらリアリティが出るか、どういう演出が考えられるかを話し合いました。

最初に着目したのは冷気。まぁここは当然ですね。なにはなくとも冷気がなければ冷えている感、Cool感は出ません。問題はこれをどう動かすか、でした。
当然、高度な物理演算を用いて冷気をリアルに動かす、ということも考えましたが、当然時間が足りない。（それこそ、1～2日くらいしか時間が残されていなかった）

みんなであれこれ話していて、冷気の動きは実は3種類くらいしかないのでは、とひらめきました。

• 缶から出て下に落ちる縦の動き
• それが地面に到達してわだかまり、渦を巻いている状態
• たまった冷気が缶から離れていく横の動き

おおまかに動きを分解すると、この3つの動きだけで実装できそうだと気づきました。
閃いてからは話は早く、あとはそれをどう実装するか、という話になります。

Canvas要素を使って冷気表現

今回選択したのはHTML5から定義されたCanvas要素。
冷気の動きには回転を含んでいたのと、冷気同士の色みを合成することを考えて選択しました。

実際に実装を始めてみるといくつか問題がありました。

• 冷気の画像は左右で対象なので同じタイミングで出すとバレる
  違う画像をデザイナーに頼もうかと思いましたが、時間も素材を用意できるか微妙だったので、左右で煙の出るタイミングをずらしたらほとんど目立たなくなりました。
• 回転する冷気は縦横に比べて速度を落とす
  回転する冷気は、縦と横で動いている冷気よりも目立ってしまったので、回転速度をだいぶ遅くしたら違和感がなくなりました。
• 冷気の最初はグラデーションマスク
  縦に動く画像の出始めの部分は、缶から冷気が出ているというより空中から出ているようになるので、上からグラデーションで透明にしたマスクを置きました。

最終的には冷気の出現の仕方・速度を調整することでだいぶリアリティのあるものができました。
やはり、予算や時間がタイトな案件は多くあるもの。その中でどうしたら表現したいものに最大限近づけることができるか。
本当に計算をして表現する以外に方法がないか模索してみるといいと思います。

構造を分解

今回作成したものは上記で書いた通り比較的簡易な表現になっています。
そのため、レイヤー構造もとてもシンプル。
おおまかに構造を分解したものが以下の画像です。

全体は3つのレイヤーのみ

見てもらうと分かる通り、メインとなる缶の画像を含めても3つのレイヤーしかありません。
構造は

• メインの缶画像レイヤー
• 冷気を表現するCanvasレイヤー
• マスクレイヤー

の3つです。

DOM要素的にはもっとありますが、レイヤーとしては3つです。

Canvas内のレイヤーも3つ

さらに演出のメインとなるのはCanvas要素のみです。
そのCanvas要素内で動いているものも3つのレイヤーからなっています。

冒頭に書いた「気付き」を元に構成したものです。つまり、「縦・横・回転」の3レイヤーです。　　 これをそれぞれ個別にアニメーションさせながら今回の演出を表現しています。

アニメーション自体は実にシンプルで、縦・横ともにひとつのPNG画像をうまくループするように配置しアニメーションさせるだけです。
回転に関してはさらにシンプルで、移動はせず、単純に配置された場所でゆっくりと回転させるだけです。Canvasアニメーションを実装したことがある人ならそれこそものの数分で作れる演出です。

それぞれのアニメーションで使用した画像は以下の3つだけです。

縦にループさせている画像

横にループさせている画像

回転させている画像

jsdo.itのサンプルを動かして理解しよう

冒頭でも書きましたが、今回制作したものがどういう仕組で動いているのか確認できるものをjsdo.itにアップしました。
各項目をOn/Offすることで動作がどういうものか理解できるかと思います。参考にしてみてください。

ちなみに3Dをオンにしたあとはさらにドラッグで回転することができます。
どういう構造になっているのかを理解するのに役立つと思うのでそちらも参考にしてみてください。
※jsdo.it上にアップしたサンプルは、実際のサイトに公開されているものとは別物です。
動作確認がしやすいように、処理を最適化しています。

(invalid jsdo.it code)

話題にされた記事

• 「RAIZIN JAPAN」HTML5 CANVASを使用した冷気の表現が話題に 【@maskin】
• HTML5で冷気を表現したサイトがすごいな
• 「HTML5で冷気を表現したサイトがすごいな」を分解してみた！