こんにちは、dotstudioのちゃんとくです。HTML5Experts.jpでは、昨年に引き続き新春企画として「Webの未来を語ろう 2018」を開催することになりました！

ブラウザ編に続く第2弾の今回は、2017年初頭のHoloLens発売に始まり、ARKit/ARCoreとスマートフォン対応の拡充、各地にVR Zone誕生と話題を集め、一挙にホットトピック入りしたxR技術の現在と未来について。各領域のプロフェッショナルを招き、編集長の白石氏をMCに、さまざまな立場から意見交換を行っていただきました。

広がるxR領域の現状と課題、そして未来への期待について、なかなか聞けない学会話や開発事情など、たっぷりとお楽しみください！

ゲスト紹介

諸星 一行氏（いっこう氏）

Mercari, Inc. R4D
株式会社メルカリの研究開発組織”R4D”でVR/AR/MR領域を担当するリサーチエンジニア。 業務の傍らで”xR Tech Tokyo”や”例のハッカソン”といった勉強会やハッカソンなどのコミュニティ運営を行なっている。日本バーチャルリアリティ学会認定VR技術者。

前本 知志氏

株式会社ホロラボ / システムフレンド Co-founder（取締られ役 兼 取締役）
数年前よりモーションセンサーの面白さに取りつかれKINECTを趣味で触り始め、会社にXRや医療機器開発のチームができる。 センサー系飲み会コミュニティTMCNや、HoloLensに特化した株式会社ホロラボの立ち上げメンバー。 米国MicrosoftよりMixedReality分野のMVPとして認められている。

千葉 慎二氏

日本マイクロソフト株式会社
ハドソン中央研究所でゲームのベースシステム等を開発後、Microsoftに転職。ゲーム機向けWindows OSやXbox SDKの開発などを行う。 近年はKinect、HoloLensといった新技術を啓蒙し、研究者や学生向けの支援活動を担当。

2017年に印象に残ったxR領域のトピックは？

白石: 皆さま、本日はお集まりいただきありがとうございます！まずは簡単に自己紹介と、2017年のxR界隈で1番印象に残ったことを教えてください。

いっこう: こんにちは、メルカリのいっこうです。2017年のホットトピックは、MicrosoftがxR領域に本腰を入れてきたことですね。HoloLens、immersiveと、デバイスをいろいろと出してきたのが衝撃的でした。

前本: 株式会社システムフレンドや株式会社ホロラボで取り締まられ役をしている前本です。僕にとっても、HoloLensが発売されたことは大きな出来事でした。HoloLensが出たから、ホロラボという会社もHoloMagiciansというコミュニティもできましたし。HoloMagiciansでのHoloLens日本発売直後のイベントで、80人もの購入者が一同に集まってみんなで繋げたワクワク感はすごかったです。

白石: 80人×約30万……2400万円……。お金の話になるとすぐ計算しちゃう（笑）。

▲ 発売からわずか2週間後に80人が集ったHoloMagiciansミートアップ

千葉: Microsoftの千葉です。もともとはハドソンというゲーム会社でゲームの根底となる部分のシステム開発をしていて、Microsoftに転職してからは16年くらいずっとXboxチームにいました。HoloLensはKinectから派生してできたところがあって、Xboxチームでは一部Kinectの開発にも携わっていたので私がHoloLensのプロトタイプを見たのは実はかなり前のことなんですよね。その頃から開発を続けて、ようやく世に出てきたな、という感覚です。

▲ Xboxをローンチした人にだけ配られるというジャンパーを着た千葉氏

前本: 千葉さんのことはKinect時代から尊敬しているんですよ！僕は当時からKinectで遊んでいて、それがどんどん進化してHoloLensの形になるのを目の当たりにして、感動です。

千葉: お二人がHoloLensをトピックに挙げてくださったように、私にとっては多くの人にHoloLensを使っていただいているということが2017年最も印象深いことです。それとMicrosoftに勤めながら、東京女子医科大学で学生としてHoloLensを使った医療の研究をしています。業務でも研究でもHoloLensを使っています。

白石: えーっ、じゃあ千葉さんは女子大生？周りは女子ばっかりですか？

千葉: 私がいるのは大学院なので、おじさんばかりですよ（笑）。

白石: ちなみに私はHTML5Experts.jpの編集長と、TechFeedというエンジニア向けのキュレーションサイトを作っています。私自身はWeb領域の人間でxRについては素人なので、今日はバンバン質問させていただきます！

VR/AR/MRとは何か？デモで見る各領域の現在

現実と仮想が複合するMRの世界観

白石: 2017年のホットトピックはお三方とも「HoloLens」に関することで一致しましたね。まずはMRについて、現在の様子を伺っていきたいと思います。

千葉: まず伺ってみたいんですが、「Mixed Reality（MR）」という言葉について正しく理解している自信があるという方？

（会場、手が挙がらない）

千葉: なかなかいないですよね。それが一つ、現状の課題なんです。簡単に言うと、MRは現実の世界と仮想の世界が融合しているという形です。どう融合するかにも、現実世界の中に仮想世界を入れ込むとか、逆に仮想世界に現実世界を入れ込むとか、いろいろな考え方があります。MRは、テレビの中に入り込んで、仮想のつくられた世界を見渡すことができ、そこから現実の世界も覗くことができる、というような考え方です。

白石: 仮想と現実がMixする、という意味合いなんですね。HoloLensのデモでは、現実世界をキャラクターが動いたり、現実の壁を割っていたり、というのを見ますが、それはどちらなんですか？

前本: その捉え方は宗教論争に近いものがあるんですよ。

いっこう: Microsoftさんの提唱するMRと、もともと日本バーチャルリアリティ学会が学問として20年以上研究している考え方とで違う部分があるんです「VimかEmacsか」という話に近いです（笑）。

白石: あー、よくわかりました。それは大変だ（笑）。どういう部分でお互いに違うなと思っているんですか？

千葉: デバイスを主体で見るか、現実世界を主体で見るかなど……考え方の違いですね。揉めているわけではなく、「そういう考え方もあるよね」という感じなんですが。

白石: なるほど。話の抽象度が高まってきたので、HoloLensの現在がわかるデモがあるといいんですが。

▲ DNP「AR/VR/MRを活用した体感型デジタルショールーム」（動画リンク）

前本: これはHoroLensだけでなく他のデバイスや技術を組み合わせたデジタルコンテンツエキスポでの展示なんですが、シェアリングという技術を使って同じ空間を共有する仕組みです。

白石: これはHoloLensと、スマートフォン？

前本: そうです。HoloLensとGoogle Tangoの技術を使って、デバイス同士がお互いの位置を認識し、他の人が操作したことを他のデバイスでも検知できるようになっています。「いま隣の人がこの商品をいいねした」とか、「この商品を買った」とか、デバイスを介して共有できる仕組みです。

千葉: 複数の人が同じ世界をそれぞれ見ることができる、というのがシェアリングですね。

前本: 実はtoBの事例も増えてきて、製造業とかデザインの現場とかで活用が進んでいるんですよ。 ▲ ホロラボ「AR CAD Cloud」（動画リンク）

前本: AR CAD Cloudは、CADデータをHoloLensにダウンロードしてその場ですぐに見られるサービスです。モノを作る前に、作ったらどうなるかが確認できる時代になっています。

千葉: 日本で一番最初に業務にHoloLensを取り入れた事例は、日本航空さんですね。1つはパイロットの訓練向け、もう1つは整備士の訓練向けシミュレーションです。飛行機は飛ばしていないと利益効率があがらないので実機での練習は難しく、シミュレータも好きな時に使えるわけではなかった。新人の方なんかは、机の上に印刷した紙を広げて手を置いて、ということをしていたらしいです。

VRでもいいんじゃないかと思うかもしれないですが、訓練では自分の手が認識できることが重要だそうで、外の世界をシースルーで見ることができるHoloLensが向いていたようです。

白石: MRとVRは似たようなことができそうだけど、確実な違いがあるんですね。MRのいいところは「現実世界も見えている」というところですかね。

千葉: そうですね。VRにも現実世界を取り込むことはできるんですが、結局カメラであって目で見る現実とは違うものなんですよね。

白石: Windows MRというのがありますけど、どういうものなんですか？

千葉: 最初のデバイスとしてHoloLensが発売されたんですが、やはりコンシューマー向けとしては高額じゃないですか。裾野を広げたいという意図で、Windows MRと名前を変えて、HoloLensはその一つということになりました。

白石: HoloLensはハイエンドなWindows MR対応デバイスの一つ、というところでしょうか。

千葉: 開発者視点でいうと、HoloLensの開発ノウハウでWindows MRが開発でき、逆も然りと。デバイスも複数社から出ていて、4〜5万円程度とそれほど高額ではないので手軽さは広がったかと思います。

被るだけではないVRの領域

白石: 続いてVRについても伺っていきたいです。

いっこう: 実はVRの歴史は長く、日本バーチャルリアリティ学会は25年ほど、研究分野としてのVRは50年ほど前からあります。ちなみに学会的にはVRを「仮想現実」と訳すのは少しNGで、アカデミア的には「人工現実感」を推していきたいです。……細かいんですが、一応（笑）

白石: 訳にも違いが出るんですか。いまVRではどんなことが実現できるんですか？

いっこう: バーチャルというのは「仮想」ではなく、「姿形はそのままだけど実際にはないもの」なんです。VRというとヘッドマウントディスプレイのイメージですが、実際には被らなくてもそこにあるという捉え方です。例えばドームスクリーンとか、匂い系のデバイスとかもVRですし、舌に電気を流して味を感じるのもVRです。頭に電気を流して、幼女にビンタされる感覚を味わうというのもVRです（笑）。

白石: 世界はそんなところまで行っているんですか（笑）！？

いっこう: 開発者レベルなんですけどね。学術としてのVRとコミュニティのVRはやや溝があり、もう少しうまく繋がったらいいなと思っています。VRはMRに比べてデバイスが多いので、一般のガジェット好きが手軽に楽しめるのがいいところかなと思います。

白石: 先ほどMRはシースルーなところが利点という話がありましたけど、VRの利点はやはり没入するというところですかね？

いっこう: 被るタイプのものだと完全没入型というメリットは1つ大きいですね。あとは学会的な見方ですが、VRは「3C/3E」のための道具なんです。3CはCreation（創造）、Control（制御）、Communication（通信）。3Eは、Elucidation（解明）、Education（教育）、Entertainment（娯楽）です。

Control（制御）はいわゆるロボット制御だけでなく、例えば人が入れない原発などを遠隔で見る、というもVRの領域です。

Communication（通信）というと、最近だとVirtual YouTuber（VTuber）やVRChatが流行っていますよね。VTuberではキヅナアイちゃんがいて、去年くらいから他のVTuberがどんどん出てきてかなり盛り上がっています。アイちゃんを知っている人？

（会場、ほとんどが挙手）

白石: VTuber、VR Chat、初耳です……！流行っているんですね。

いっこう: アイちゃんに関しては既にかなり稼いでいて、スタイルとして確立しているかなと。加えて、最近は割と簡単にVTuberになれる仕組みが整ってきたと思います。ちょうど先日UnityとWindows MR（Lenovo Explorer）を使って、ほぼコードを書かずにVTuberになるという記事が上がっていました。

⇒ 参考: windowsMRでバーチャル生放送をするためのセットアップ

白石: これは、配信をする側がデバイスを被っているということなんですか？

いっこう: そうです。鏡を置いて、ボイスチェンジャーを使って。最近はあえて声はおっさんのままというVTuberが流行っていますが（笑）。

白石: うーん、すごいですね。VR Chatというのは？

いっこう: VR Chatはここ最近でグッとユーザが伸びているんですが、セカンドライフのようなイメージで、自分のアバターを使ってワールドワイドにコミュニケーションできるものです。まだ高いんですが、一般人でも自分の身体を3Dスキャンしてアバターに使う人も出てきました。

⇒ 参考: 3Dスキャンした実写アバターで「VRオフ会」する猛者が登場　これもうオフかオンかわかんねぇな……

白石: これはどうやって移動するんですか？実際に歩いて動く？

いっこう: 手に持ったコントローラが紐付いて手の動きを自然に見せてくれ、足の動きは補完されます。

白石: なるほど。3Eの方だとどのような具体例があるんでしょうか？

いっこう: Entertainment（娯楽）ではVR ZoneやVR PARK TOKYOなどが流行っていますし、開発者もエンタメ系の用途で使っている人が多いですよね。HoloLensでもエンタメはできるんですけど、広く受けているのは没入感の違いかなと思います。

千葉: 現実世界から離れたいこと、ありますもんね（笑）。

各OS対応で盛り上がるAR領域

白石: AR領域でいうと、ARKit、ARCoreがすごく盛り上がりましたよね。

千葉: GoogleのハイエンドなARプラットホームTangoは終了が決まってしまいましたね……。後続でマス向けのARCoreが発表されました。

いっこう: ARKitの方はアップデートで、これまで水平だけだったのが垂直も検出できるようになり、できることが増えましたね。

白石: スマートフォンの普及率からいうと、xRの中では一般普及するのはARが早いんでしょうか？

千葉: 手軽に使えるという意味ではそうでしょうね。

前本: VR、MRの課題は、手軽じゃないという部分がありますからね。買わないと、被らないといけない。最近のARはARKit/ARCoreの登場で、すごく現実感が出てきました。10cm動かすと10cm動くように精度が上がって、一つ上のステージに上がったなと思います。

▲ AR World Sharing Demo（動画リンク）

いっこう: Web技術の文脈では、WebVR、WebARが有用ですね。これまでアプリでしかARが実現できなかったのが、ブラウザがgetUserMediaに対応して、Webベースでカメラ情報を取得して実現できるようになったのが大きいです。MozillaさんがWebVRとWebARを統合したWebXRを推していて、W3CではWebVRは既にAPIが用意されていますが、次のバージョンアップではWebXRにしようということになっています。

⇒ 参考: WebXR Device API Specification

いっこう: 簡単にVRアプリケーションを開発できる、WebVRフレームワークのA-Frameもかなり盛り上がっていて、コミュニティが成熟してきていますね。

⇒ 参考: A-Frame

さらなる発展へ向けて技術的課題の解決が必要

白石: ここまではそれぞれの技術の現状を伺ってきましたが、さらなる進歩へのボトルネックや技術的な課題といった部分も聞いてみたいですね。

千葉: デバイスの制約は一つ大きな課題ですね。例えばデバイスを被らないといけないし、デバイスの処理能力がそれほど高くないし、バッテリーの持ちの問題もある。VRでもバッテリーとは逆にケーブル接続の制約があるかと思います。

白石: HoloLensって、実際には電池はどれくらい持つものですか？

千葉: 通常の使い方だと3〜4時間、積極的に使っていると2時間ほどです。技術の進歩で、将来的には解決されていく課題だとは思いますが。

白石: 逆に2012年頃に作っていたプロトタイプから考えるとどうですか？

千葉: 当時はいろいろ剥き出しで、サイズも大きくケーブルも多く、本当に最終製品になるんだろうか？と不安でした。でもやっぱり技術の進歩があって、5年経ってわずか579グラムです。今の課題も5年後、10年後と解決されていくはずですね。

前本: 2017年後半は開発環境の課題が多かったですね。HoloLensのアプリケーションはまずUnityで開発して、Visual Studioに書き出して、HoloLensにデプロイするという流れなんですが、それぞれのバージョンの違いで整合性が取れないようなことがあってかなりバッドノウハウが蓄積していました。

白石: 開発環境の問題があったんですね。

前本: いまはだいぶ落ち着いて、初めての人でも開発しやすくなりました。発売当初に初めてHoloLensを触ったときは、こんなことが生きている間にあるんだ！と思ったのに、すぐに視野が狭いとか腕が疲れるとか、思うところがでてきて、終わりがないです（笑）。

千葉: 本当ですよね。今から10年前を考えてみると、2017年にこんなデバイスがでていると想像できなかった。10年先は想像できないけど、たぶん10年後も満足していないと思います。人間の探究心って便利じゃないところを見つけてしまうので終わりはないけど、気がついたらみんな普通に使ってましたという感じになるんじゃないかと思っています。

xRで盛り上がるビジネス領域

白石: xRの技術的な側面をたくさん聞かせてもらいましたが、実際にはxR界隈ではどういうビジネスが生まれているんでしょうか？

いっこう: VRでいうと、アメリカのVR/AR専門ファンドのThe Venture Reality Fundが年に2回作成しているVRカオスマップが参考になります。

▲ The Venture Reality FundによるVRカオスマップ

いっこう: 機械、ソフト、ハードとだいぶプレイヤーが多くなっていると思います。その中で一部日本の企業も入っていて、健闘しているなあと思いますね。

白石: 大カテゴリが「Applications/Content」「Tools/Platform」「Infrastructure」。ホロラボさんはアプリケーション領域ですよね。どういうお仕事がメインですか？儲かっていますか（笑）？

前本: まあ、お陰様でぼちぼち……（笑）。受託で作る場合と、AR CAD Cloudのように自社パッケージとして作る場合とがあり、始めたばかりなのでなんでもアリ、という感じです。

いっこう: ゲームカテゴリだとバンダイナムコさんが入っていますね。もともとが大きい会社ですけど、VR Zoneもかなり盛り上がっていますし、VR領域では日本で一番じゃないかなと思います。

白石: Tools/Platformというと、去年Oculas Riftが値下げをしたじゃないですか。正直、売れてないのかな？と思ったのですが……。

いっこう: 逆に、値下げをしたことでめちゃめちゃ売れたと思います。Windows MRも手頃な値段なので、結構売れているのではと思っています。

千葉: そうですね、各社お互いの価格を意識しつつ値段をつけていると思います。

xRでどうやって「URL」にアクセスするか

白石: 会場からも質問を受け付けてみたいと思うんですが、どうでしょうか？

参加者: 現在のマウスとキーボードで扱うコンピュータのUIは、平面を前提にしているじゃないですか。xRのような3Dで見られるHPやメディアって、どういう形になっていくんでしょうか？例えばWebページにアクセスしたい時、URLの入力はどうするんだろうって想像がつかないんです。

前本: 一つあるのは、リアリティがあるからといって、リアルと同じようにしないといけないと疲れるんですよね。マウスやキーボードのように、操作性を上げる入力装置があったほうがいいだろうと思います。

いっこう: HoloLensってエアタップなど手を前に出して操作しますけど、結構腕が疲れるんですよね。VR空間の移動も、ワープ方式やコントローラを使う方式があるけど、あまりしっくり来ていなくてまだ確立していない。

千葉: これまでのUIが生きる部分と、人間の通常の行動がそのままUIになる部分とあると思います。URLでいうと声を発したら文字になって適用されるというのも いいかもしれない。

いっこう: いろいろな方法を試していかないとなあというところですよね。

2020年に向けた期待

白石: たっぷりと伺ったところで締めたいと思いますが、最後に2020年の少しだけ未来に、xRはどうなっているか想像や期待を伺わせてください。

いっこう: 2年後かあ……。VRはハード面では一体型が出てきて、画質も上がって、さらに進歩すると思うんですけど、一般普及するのは正直まだまだかなあと思っています。

白石: どうしたら一般普及するんでしょうね？キラーコンテンツの登場？

いっこう: Yahoo!BBがモデムを無料で配ってADSLが普及したように、国や機関が無料で配るくらいしないと普及しないんじゃないかと思います。

白石: 無料で！確かにそうですね。前本さんはどうでしょう？

前本: 現実的には通信が5Gになったり、視野が広がったりと、技術的な課題がクリアされていくと思います。期待でいうと、xRネイティブな世代が遊びとしてVRやARとAIを連携したりしていて、そういう遊びの中からすごいものが出てくるんじゃないかと密かに思っています。もしかしたら攻殻機動隊も実現するんじゃないかな。

千葉: 技術的な進歩はもちろんですけど、私が期待したいのは「xR盛り上がっているぞ」という一体感ですね。熱量のある人が増えて、ビジネスも増えて、私自身この領域の仕事にもっともっと関われたらいいなと期待しています。

白石: それぞれの熱いお気持ち、ありがとうございます。本日は大変勉強になりました！

そこで今回は、「今から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を体験したことがある人を増やせるようにしていただけると幸いです。

年間読まれた記事ランキングTOP20！

＜1位＞
Googleはなぜモバイルに力を入れるのか？これからのWebパフォーマンスで注力すべきポイント
── 川田寛

＜2位＞
モバイルWeb開発に役立つ！Chrome DevToolsの新機能「デバイスモード」
── Tomomi Imura

＜3位＞
Googleのベストプラクティスに沿ったモダンな製作の出発点「Web Starter Kit」
── 中島 直博

＜4位＞
Web Componentsが変えるWeb開発の未来
── 泉水翔吾

＜5位＞
HTML5とかモバイルとかJSフレームワークとか、ぶっちゃけどうなの座談会
── 村地彰

＜6位＞
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
── 小山田 晃浩

＜7位＞
いまや最も優れたJavaScriptフレームワーク「AngularJSリファレンス」出版記念会
── 佐川 夫美雄

＜8位＞
HTML5で実現できる！環境光に合わせたレスポンシブなUI
── Tomomi Imura

＜9位＞
いま、UXを語るのはなぜ悩ましいのか？─長谷川恭久ロングインタビュー
── 白石 俊平

＜10位＞
エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方
── 酒巻瑞穂

＜11位＞
Web技術者も知るべきデモ・プレゼンの極意（西脇資哲氏）「Microsoft de:code」イベントレポート
── 岩瀬 義昌

＜12位＞
HTML5が変える、エンタープライズITの可能性とこれから
── 川田寛

＜13位＞
【速報】Google I/O 2014 キーノート ライブレポート
── 岩瀬 義昌

＜14位＞
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！
── 石本 光司

＜15位＞
キミはionicを知っているか？AngularJS+PhoneGap+美麗コンポーネント群！
── 金井 健一

＜16位＞
話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そう
── 佐藤歩

＜17位＞
HTML5ハイブリッドアプリ開発、最新動向はやわかり！
── 久保田 光則

＜18位＞
ミツエーリンクスのCTOに「UXとWebアクセシビリティ」について聞いてきた─木達一仁ロングインタビュー
── 白石 俊平

＜19位＞
Web Componentsを構成する4つの仕様 ー Web Components基礎編
── 泉水翔吾

＜20位＞
NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(ハード組立編)
── 高橋 登史朗

モバイルWeb、WebComponets、AngularJS…

モバイルWebというキーワードは今年注目を集めましたね。関連記事がいくつかランクインしています。また、WebComponets、AngularJSという今年話題になった技術の記事もランクインしています。特集では、GoogleI/O特集やExperts Opinions「UX」特集が注目を集めました。UX特集は年明けにも記事公開を予定していますので、お楽しみに！

HTML5 Experts.jpは2014年も多くの方々にご愛読いただきまして、執筆陣・編集部共々感謝しています。ありがとうございました。来年も引き続き宜しくお願いいたします。

WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します)

three.jsを手に入れる

three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れましょう。

ダウンロードしたファイルを展開すると多くのファイルが格納されていますが、必要なライブラリー本体はbuildフォルダ内にthree.min.jsとして配置されています。three.min.jsのみを取り出しましょう。three.min.js以外のファイルは不要です。

three.jsにおける抽象化された概念

まずは、基本的なコードを書きながらthree.jsにおける概念を知りましょう。ここでは皆さんの理解が深まるように図を見ながらコードの解説を進めます。

コードを書き始める

HTMLファイルを新規作成し、three.min.jsを読み込みます。合わせて、あなたがコードを書いていく場所も用意しましょう。今回はこれをmainという名前の関数とし、DOM構築完了を待ってから実行します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>get started with three.js</title>
</head>
<body>

<script src="three.min.js"></script>
<script>
var main = function () {
  // ここにあなたのコードを書いていきます
};

window.addEventListener( 'DOMContentLoaded', main, false );
</script>

</body>
</html>

シーンを作る

まずはシーンを作ります。シーンはこれからあなたが作る3Dの世界となります。ただし、この段階ではシーンの内容は空の状態です。

var main = function () {
  var scene = new THREE.Scene();
};

カメラを作る

シーンの状態を撮影するカメラを作ります。カメラに写った内容が最終的にブラウザー上で表示されることになります。

var main = function () {
  var scene = new THREE.Scene();

  var width  = 600;
  var height = 400;
  var fov    = 60;
  var aspect = width / height;
  var near   = 1;
  var far    = 1000;
  var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
  camera.position.set( 0, 0, 50 );
};

PerspectiveCameraは4つの引数が必要です。これらは、カメラが写す範囲を示しています。

• fovは画角を示します。
• aspectは撮影結果の縦横比を示します。
• nearはニアークリップの距離を示します。nearより近い領域は表示されません。
• farはファークリップの距離を示します。farより遠い領域は表示されません。

つまり、指定した画角と縦横比によって作られる四角錐の内、nearからfarまでの間が表示されるわけです。

このあと3Dオブジェクトを追加することを考え、カメラの位置を中心から少し手前に引いておきます。カメラインスタンスはpositionという位置を示すプロパティーがあり、positionはx、y、zの3つのプロパティーを持っています。初期ではx、y、zの値は全て0です。この値を変更するにはsetメソッドを利用します。setメソッドの引数はx, y, zの3つを順に渡します。上記のコードではset( 0, 0, 50 )としているので、カメラはzの正方向、つまり手前に50の位置に設置されるわけです。

※ 古いリビジョンのthree.jsでは、作成したカメラインスタンスをscene内に追加する必要がありましたが、現在はその必要がありません。

レンダラーをDOM上に設置する

ここまでで基本状態が用意できました。ただし、この状態ではHTMLと紐づいておらず表示結果を求めることができません。three.jsでは、レンダラーをDOMに設置することでこれを実現します。

var main = function () {
  //ここまでの内容は省略

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( width, height );
  document.body.appendChild( renderer.domElement );
};

レンダラーのサイズとして渡しているwidthとheightは、先ほどカメラのアスペクトを求める際に利用した値を流用します。これでbody要素内に、横600px縦400pxのレンダラーを展開することができます。

光源を追加する

ここまでのコードでは空（から）のシーンとそれを写すカメラを用意できています。ここに光源を追加してみましょう。three.jsでは様々なタイプの光源を利用できますが、今回は平行光源を追加します。

平行光源はインスタンスを作る際に2つの引数を渡します。第一引数は光の色、第二引数はオプションで光の強さを渡します。この例では第一引数に0xffffffを渡し、白色の光としています。

var main = function () {
  //ここまでの内容は省略

  var directionalLight = new THREE.DirectionalLight( 0xffffff );
  directionalLight.position.set( 0, 0.7, 0.7 );
  scene.add( directionalLight );
};

平行光源は光の角度を変えることができます。その場合、positionプロパティーで光源の角度を決定します。directionalLight.position.set( 0, 0.7, 0.7 )であれば上方向と手前方向、つまり斜め上前からの光となるわけです。

物体を追加する

物体を追加してみましょう。今回は箱を設置します。three.jsでは、原始的な図形を作成するためのクラスがいくつか用意されています。もちろん、3Dモデリングツールでつくった3Dモデルを読み込むこともできますが、自作のモデルを読み込む方法はまたの機会に解説します。

three.jsではジオメトリー(形状)とマテリアル(表面素材)を用意した上で、メッシュ(物体)を作成するという手順が必要です。

var main = function () {
  //ここまでの内容は省略

  var geometry = new THREE.CubeGeometry( 30, 30, 30 );
  var material = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
  var mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );
};

まずはジオメトリーを作ります。箱型のジオメトリーはCubeGeometryクラスで作成可能です。横幅、高さ、奥行きの順に数値で引数を渡します。

次に、マテリアルを作ります。three.jsでは様々なタイプのマテリアルが用意されていますが、今回はフォンシェーディングで表示できるMeshLambertMaterialを利用します。引数には色やカラーテクスチャ、光沢などをオブジェクトで指定することができます。今回は赤色（0xff0000）のカラーのみを指定します。

そして、ジオメトリーとマテリアルからメッシュを作成し、メッシュをシーンに追加します。

表示する

これで、シーン、カメラ、レンダラーを用意しシーンの中には光源と物体がある状態ができました。これをレンダリング（表示）してみましょう。

レンダラーインスタンスはrenderというメソッドを持っており、ここに任意のシーンとカメラを渡すことで、該当のシーンをレンダリングします。

var main = function () {
  //ここまでの内容は省略

  renderer.render( scene, camera );
};

レンダリング結果は次の通りです。

(invalid jsdo.it code)

これを見ただけでは3Dには感じられないかもしれませんね。しかし、この状態でしっかりと3Dで赤色の箱が真正面から静止した状態で表示されています。

回転アニメーション

止まった状態で正面からレンダリングしても面白い結果にはなりませんでした。3Dのよさを引き出すために、箱を少しずつ回転させながら、レンダリングを繰り返してみましょう。こうすることでアニメーションで表示されます。

(invalid jsdo.it code)

var main = function () {
  //ここまでの内容は省略

  ( function renderLoop () {
    requestAnimationFrame( renderLoop );
    mesh.rotation.set(
      0,
      mesh.rotation.y + 0.01,
      mesh.rotation.z + 0.01
    )
    renderer.render( scene, camera );
  } )();
};

名前付きの即時実行関数を用意し、requestAnimationFrameで自分自身を呼び出し続けることで、レンダリングを繰り返すことができます。

関数内部ではmesh、つまり箱のrotationプロパティーの値を少しずつ変え、直後にレンダリングを行います。これにより箱が回転するアニメーションとなるわけです。rotationプロパティーはpositionプロパティーと同様にsetメソッドで内容を変更することができます。

まとめ

最後にコード全文を示します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>get started with three.js</title>
</head>
<body>

<script src="three.min.js"></script>
<script>
var main = function () {
  var scene = new THREE.Scene();

  var width  = 600;
  var height = 400;
  var fov    = 60;
  var aspect = width / height;
  var near   = 1;
  var far    = 1000;
  var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
  camera.position.set( 0, 0, 50 );

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( width, height );
  document.body.appendChild( renderer.domElement );

  var directionalLight = new THREE.DirectionalLight( 0xffffff );
  directionalLight.position.set( 0, 0.7, 0.7 );
  scene.add( directionalLight );

  var geometry = new THREE.CubeGeometry( 30, 30, 30 );
  var material = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
  var mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  ( function renderLoop () {
    requestAnimationFrame( renderLoop );
    mesh.rotation.set(
      0,
      mesh.rotation.y + .01,
      mesh.rotation.z + .01
    );
    renderer.render( scene, camera );
  } )();
};

window.addEventListener( 'DOMContentLoaded', main, false );
</script>

</body>
</html>

three.jsでは、今回解説した流れが最も基本であり、お決まりです。この抽象化された概念とシーン構築から表示までの流れを覚えておきましょう。

HTML5に関連する技術のひとつに、WebGLがあります。WebGLは、ブラウザー上で3DCGプログラミングを実現できる技術です。今回のレポートでは、WebGLプログラミングの基礎知識についてご紹介します。

WebGLって？

WebGLでどんなことができるのか──百聞は一見にしかず。まずは例を見てみましょう。demo内のスライダー部分をドラッグすることでカメラの位置などを任意に変更できますので、リアルタイムでレンダリングされていることがわかるでしょう。

(invalid jsdo.it code)

このように、ブラウザー上でプラグインに頼ることなく、なめらかな表面、自然な影、高FPSでのリアルタイムレンダリング（アニメーション）など、まるで最近の家庭用ゲーム機にも匹敵する高度な3DCG表現ができるわけです。

WebGLは2013年10月現在、Chrome、Firefox、Operaで標準対応されており、加えてIE11でも対応される予定です。また、Safariも現状では設定が必要なものの、WebGLを利用する準備は整っており、WebGLは多くの環境で利用できるようになりつつあります。

Can I use WebGL?より

WebGLの仕様自体は、クロノスグループからWebGL 1.0が2011年3月に正式リリース（W3Cでいう勧告）されています。従って今後APIが変更されることはなく、またWebGLのAPIはブラウザ上で「WebKit」や「Moz」といったような接頭辞なしで利用することができます。さらに2013年9月にはWebGL 2.0の仕様策定が開始されています。

【コラム】WindowsなのにOpenGL系?

WebGLはその名前の通り、OpenGL由来のAPIです。一方で、Windowsの一般的なグラフィックAPIはOpenGLではなく、DirectXです。しかし安心してください。Windows上でのWebGLは、最終的にDirectXに自動翻訳されて実現しています。つまり、WindowsでもMacでもAndroidでも、WebGLはプラットフォームの垣根を気にせず利用できる、共通のグラフィックAPIというわけです。

例えば、以下はWindows IE11におけるWebGLの仕組みです。なお、Windows用のChromeやFirefoxでも、ブラウザー内部に組み込まれたANGLEというライブラリにより、IE11と似た仕組みでWindows上のWebGLを実現しています。

Hyper-Fast Web Graphics with WebGLより

WebGLプログラミングで実現できること

WebGLはJavaScriptから利用するAPIです。Web開発者はJavaScriptを書くことで、閲覧者のOSに関係なくブラウザーを通してデバイスのGPU（CPUと対となる、描画処理を専門に行うためのハードウェア）にアクセスすることができます。これによりWebGLは高度な3DCG表現を実現できるわけです。

筆者のPC内に搭載されているGPU、Geforce GTX 760。ノートPCなどではGPUがCPUに内蔵されている場合も多い。

さて、WebGLはGPUにアクセスできるという点に少し注目してみましょう。非Web技術の話になりますが、PCで動作する3Dのオンラインゲームなどは、ネイティブのグラフィックAPIを通して、GPUでその描画を行っています。一方で、ブラウザー上で動くWebGLも同様にGPUでその描画を行います。つまりデバイスのGPUの性能にも依存しますが、WebGLは近年のPC用3Dオンラインゲームと同じレベルの描画ができるということになります。

例えば以下は2013年5月に公開されたEpic Citadel HTML5というデモで、WebGLで動いています。( 「Firefoxに最適化されている」と表示されますが、Chromeでも問題なく動作します)

もし今あなたがモバイル端末などでこの記事を読んでいてWebGLを再生できない場合は、以下の動画を見てみるといいでしょう。

また、WebGLの実態はJavaScriptと先に少し触れましたが、これはWebGLが他のWeb標準技術との相性がいいということを意味します。XHRでデータを取得したり、HTMLで用意したボタンやinput要素で3Dモデルを操作したり、JavaScriptのイベントを利用したり、といった応用が可能なのです。これにより、ただ表示するだけではなく、さまざまなWebアプリケーションへの応用も期待できます。

例えば、地図に利用したり、教育目的に利用したり、あるいはWebの技術でゲームを作ったりすることも可能です。

現在プレビュー版として提供中の新しいGoogleマップでもWebGLが使われている。東京都庁周辺の様子を見ると、高層ビル群が立体的に表示されている。

ロンドンの地下鉄マップ。3Dで表現するなら、複雑な立体構造の情報も提供しやすい

銀河の観察。WebGLは、教育目的のWebアプリケーションにも応用できるだろう

WebGLは難しい？

ここまで「WebGLはJavaScript」と繰り返しましたから、Web制作者にとって、WebGLを利用するための敷居が低く感じるかもしれませんね。しかし実際のところ、WebGLを利用するにはとても冗長な手順を踏む必要があります。さらに加えて、3DCGプログラミング（OpenGLやDirectX）の基礎知識、行列やベクトルといった線形代数学の知識、GLSLという言語の知識など、これまでWeb制作者にとってほとんど馴染みがなく、かつ学習コストの高いさまざまな知識を要します。

WebGLを利用する手順を図にしてみました。これを見るとWebGLの冗長さがわかるでしょう。

しかし安心してください。こうした、手間のかかるところ、難しいところを吸収し、より直感的にJavaScriptでWebGLを扱うためのライブラリーがあります。

WebGLのラッパーライブラリー「three.js」

three.jsは、現在最も有名なWebGLのラッパーライブラリーです。WebGL界のjQueryのような存在です。WebGLを採用した多くのプロジェクトは、既に当たり前のようにthree.jsを利用しています。

three.jsの事例

• Find Your Way to Oz
• Web Lab
• Pajama Club : 3D

Web制作者は、OpenGLのお作法、GLSLという未知の言語、線形代数学などのWebGLのための学習コストが高い関連知識がなかったとしても、JavaScriptと、わずかな3Dの基礎知識さえあればthree.jsを利用し、WebGLをコントロールすることができます。もしあなたがWebGL初心者であるならば、three.jsを利用してみるといいでしょう。

three.jsはWebGL上級者にも愛されているライブラリーです。行列計算のためのAPI、自身で用意した頂点データをVBOに適用するAPI、自作のGLSLをシェーダーに適用するAPIなども備えています。

また、海外のWebGL関連のジョブボードを見てみても、three.jsがWebGL界のディファクトスタンダードライブラリーという裏付けにもなります。いくつかのWebGL関連の求人では、three.jsの経験が求められています。

three.js本体の開発はGitHubで管理されており、three.js制作者であるMr.doob氏が中心となり、世界中の多くのコミッターに支えられています。このこともthree.jsがディファクトスタンダードなライブラリーとして支持される理由でしょう。

こうしたさまざまな背景もあるので、もしあなたがWebGLに興味を持ったのなら、まずはthree.jsを使ってみることをおすすめします。

まとめ

今回はWebGLがいかに汎用的であるか、そしてそのWebGLをより簡単に利用するための手段となる、three.jsの存在についてレポートしました。 また近いうちに、three.jsの実際の利用方法についてご紹介していきます。