VR – HTML5Experts.jp

VR、AR、MR……各領域のプロフェッショナルが語るxR技術の最先端──Webの未来を語ろう 2018

ちゃんとく — Mon, 19 Mar 2018 01:00:01 +0000

連載： Webの未来を語ろう 2018 (2)

こんにちは、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盛り上がっているぞ」という一体感ですね。熱量のある人が増えて、ビジネスも増えて、私自身この領域の仕事にもっともっと関われたらいいなと期待しています。

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

VR初心者にお勧め！ひらやまともよ氏が伝授する─デザイナー・プランナー向けのVR表現方法「Graphic VR」講座

馬場美由紀 — Tue, 26 Dec 2017 01:00:28 +0000

VR元年といわれた2016年から急激な進化を遂げ、最近ではゲームなどのエンターテイメント領域だけに留まらず、医療・教育・産業などの領域でも広がりを見せつつあるVR(仮想現実)。実際に業務でVRを取り入れたいと考えたものの、コストや専門エンジニアのアサインが難しいなどといった問題からあきらめている人は少なくないのではないだろうか。

そこで今回はPC/スマホ向けにクリエイティブ業務を行っているデザイナーや、サイト・アプリ・イベントなどのプロジェクトでVRを使ってみたいと考えているディレクター向けに、マインドスケープアーキテクト・ひらやまともよ氏が「TECH PLAY CONFERENCE 2017」で語った、気軽に使えるVRの表現方法を紹介したい。

▲マインドスケープアーキテクトクリエイティブディレクター/デザイナー　ひらやまともよ氏
グラフィックデザイナーとしてキャリアをスタートし、トヨタメディアサービス、DeNA、トランスコスモスなどの企業でデジタルコンテンツ企画、デザイン・ディレクションなど、前職のInstaVRではエバンジェリストと活躍。様々なOSでのアプリ開発、IoT、AR、VRを活用したビジネス構築、企画提案やUI設計を行っている。また、Techコミュニティのイベント運営にも参画し、VRクリエーターを増やすべく関連イベント運営やセッション登壇、講師活動も行う。

簡単にVR画像編集ができる全天周イメージ投影法

インターネットは文字の表示から始まり、写真・画像や動画、ついにVR(仮想現実)という360度の表現ができるようになった。ひらやま氏はこの表現のキャンバスが平面から360度になったことを、クリエイターとして使わないのはもったいないと考えた。

それは直視するだけの動画と比べ、まるでその場にいるかのような没入感のあるVRなら、よりコンテンツの世界観を実感してもらえるからだ。VRを使ったクリエイティブというと高機能なマシンや専門知識、コストが必要だと思われがちだが、Photoshopなどを活用したデザイナーならではのさまざまな“見せ方”があるという。

VR空間のしくみは大きく分けて、全天周イメージ投影(プリレンダリング)と、3DCG(リアルタイムレンダリング)の二つがある。3次元のイメージを常に高速でレンダリングしている3DCGは、主にゲーム制作などで使われることが多い。いろいろな表現ができるが、CGやゲームエンジンなどの専門知識やハイスペックなデバイスも必要となる。

一方、全天周イメージ投影はすでにプリレンダリングされたCGや撮影済みの画像や映像を使って仮想空間を作るので、基本的な画像や映像編集の知識・経験があれば3DCGに比べて学習コストは低い。あらかじめレンダリングされているので、リアルタイムで演算を行う必要がない分、メモリの消費が抑えられてWeb上での表示も速いというメリットもある。そこで、今回は全天周イメージ投影に絞って紹介していく。

全天周投影法では、エクイレクタングラー方式を使う。世界地図の投影法でも使われているもので、この投影方式を理解すれば簡単にVRコンテンツを作ることが可能だ。エクイレクタングラーの特性として画像中心の横線（地平線）に接する付近は正しく描画されるが、地平線から離れるにつれて、画像が歪んでしまう。

実際にTHETAで撮影された以下の画像を見てみよう。中心部分は綺麗に描画されるが、上下は歪んでいる。その歪みも柄だと目立つが、無地はわかりにくい。

例えば、地平線から離れた空や海・地面などは作りやすくなる。形のハッキリしているものを配置する場合、歪みにくい中央部に置く必要があるが、VR空間で見るとオブジェクトは思ったより大きく表示される。

上の方に配置すると頭が疲れやすく、下の方はうつむく動作を人はあまりしないので気づかれないことが多い。従って効果的に配置するためにも、小さめに画像中心を基本とした水平に配置することが望ましい。

以下のようなエクイレクタングラーの特性を理解すると、デザイン表現の幅が広がる。

画像の中心の横線は地平線となる
メインのオブジェクトは画面中心に作成する
ファーストビューで画面に切り取られるエリアを意識する
画像の上部と下部にオブジェクトを配置しない
配置オブジェクトは思ったより小さくて良い

エクイレクタングラーの特性を活かした全天周画像編集

画像の編集はPhotoshopで行うが、エクイレクタングラー形式の全天周画像・映像の360度視聴の検証を行うためのツールを活用する。PCであればGoPro VR PLAYER、スマートフォンであればジャイロでSingle/Dual表示も見れるTHETAアプリが便利だ。

実際に作ってみた画像がこちらだ。球体に壁画が立体的にレイアウトされているが、これは画像編集のみで作成しており、一切CGは使っていないという。

これらはPhotoshopで画像を作ることができる。まず、画像の中心に横線を引く。この中心がファーストビューになるので、最初に表示された時に目の前に見せたいものを作っていく。

右端と左端が円筒になるので、シークエンスするように写真をコピーなどして画像を合成していく。

上下は画像が歪んでしまうため、グラデーションで無地にする。

メインのオブジェクトを中心線の位置に置く。360度画像でも人間の目に最初に映る範囲は限られているので、ファーストビューを意識したほうが良く、画像や文字は小さくても問題ないとのこと。

ちなみに、画像内の地平線の位置をを上げたり下げたりすると、中心の自視点に対して周りの風景が上下し、見え方が変わる。地平線を下げると自分が高いところにいるようになり、上げると自分が落とし穴のような穴の中に落ちたようにも見える。

実際にVRを制作する場合は、酔いを起こさせないようにすることが大事。そのためには広範囲にコンテンツを置くのを避け、頭の動きが最低限になるようにレイアウトしたい。

特に上下の頭の振りは左右に振る場合より負荷がかかり酔いやすい。エリアをめいっぱい使わないで360度の意味はあるの？と考えがちだが、全体の世界観や没入感、空気感を表現することに360度見渡せるVRは有効なツールで意味はある。

その空間の中でユーザーが快適にコンテンツを楽しむためには見せたいオブジェクトのレイアウトする位置に留意する必要があると考える。実際、多くの人はコンテンツ内の真後ろを見ることはあまりせず、ファーストビューから離れるほど滞在時間は少なくなっている。

しかし、見る人がいることを考えて重要なものではないが、何か遊び心をあるものを置いておくと宝物を見つけたような気持ちになり、面白いかもしれない。それもVRならではの楽しみ方である。

特に画面の上下にオブジェクトをレイアウトすることを避けたいその他の理由として、全天周の球体へマッピングした時に歪んでしまうので避ける必要がある。

ただし、どうしても上下に置きたいものがある際は、Photoshopで歪みを気にせず全天周画像が作成できる「Flexify 2」というプラグインがあるので活用しよう。

▲「Flexify 2」キュービック方式からエクイレクタングラー方式に変換して出力し、上下を見せることができる。

VRの画面表示には全画面で見せるSingle Viewとヘッドマウントディスプレイ（以下、HMD）用のDual Viewがある。VRのコンテンツを作る際は、両方選べるように留意して作ったほうが良い。それぞれの特徴は以下の通りだ。

VRコンテンツの展開方法

SNSでのVRコンテンツの展開方法として代表的、かつお手軽なのは、YouTubeとFacebookだ。どちらもアップロードするだけで世界中のユーザーに簡単にリーチできる。YouTubeは動画のみのアップロードとなるが、ジャイロやSingle View/Dual Viewの表示も可能。Facebookは360度画像・動画ともにアップロード可能だが、ジャイロとSingle Viewでの視聴となる。インタラクションはつけられない。

WebはGoogleの無料フレームワーク「Google VR View」、mozillaが提供する無料フレームワーク「A-Frame」があり、どちらも数行のHTMLを書くだけでVRページができる。HTMLにあまり詳しくない人でもソースコードをコピペして埋め込むだけで簡単にVRコンテンツが作れる。回転させる動作やゲーム性を加えることも可能だ。

ソースコード例（A-Frame）



  
    
    A-FrameSample

ソースコード例（Google VR View）


Google VR View Sample

VRのオーサリングツールは無料から使える日本製のInstaVR、Krpanaが提供するPanotourがある。インターフェイスから操作でき、コードを見なくていいので直感的に作ることができる。

ゲームエンジンで代表的なのはUnity、Unreal Engine。無料のアセットやサンプルコードもあるので、ノンプログラマでも挑戦しやすい。

VRコンテンツの基本をまとめると、以下のようになる。

傾きのあるコンテンツは酔うのでNG
顔の縦運動より横運動をさせる
360度いっぱいにものを置かない
ファーストビューを決める
配置オブジェクトは思ったより小さくて良い
全天周投影法では解像度を可能な限り上げることで没入感が増す

これらは、「酔わない、疲れない、極力頭を動かさない」ことにつながる。

Adobe Stockのような画像素材サイトで「エクイレクタングラー」と探すと素材が出てくるので、これらを上手く活用しながらVRコンテンツにチャレンジしてみよう。

React VRでここまでできる！VRでジオラマを作ろう

原一浩 — Mon, 31 Jul 2017 01:30:45 +0000

連載： React VR (4)

今回は、こんなVRジオラマをつくるぞ！

前回、3Dプリミティブオブジェクトを使って、レイアウトやライティングの仕方について一通り試しました。前回扱わなかったコンポーネントに、3DモデルのためのコンポーネントModelがあります。Modelコンポーネントを使うと「obj」形式の3Dモデリングデータを読み込み、VR空間に配置することができます。

3Dのモデリングデータを使うと、リアルな物体だったり、複雑な形状を持ったオブジェクトを自由にVR上で扱えるため、VR空間における表現力が飛躍的に高まります。実際VRコンテンツを作る際に使うのはBoxやCylinderではなく、Modelコンポーネントになるでしょう。

今回は、3Dのモデリングデータを読み込み、ジオラマを作ってみましょう。子どもの頃、作ったプラモデルに顔を近づけて遊んだ経験はないでしょうか。VRでは、巨大な物体を目の前に表示させるのもお手のものです。

新規プロジェクトの作成

既に本連載の読者であれば何度か行ってきていることですが、今回もサンプルを作るにあたって新規プロジェクトを作成し、プロジェクトディレクトリへ移動します。HelloDioramaというプロジェクト名で進めることにします。

$ react-vr init HelloDiorama
$ cd HelloDiorama

ジオラマに必要なものは何でしょうか? 一つは飾る対象物です。これはロボットなのかもしれないし、戦車かもしれないし、船かもしれません。3Dモデリングデータさえあれば、そしてそれをReact VRで読み込めさえすれば、なんでもジオラマにすることができます。

ちなみに「React VRで読み込めさえすれば」と書いているのは、Webで公開されている3Dモデリングデータの中には何故か表示できないものがあります。表示はできるけど変な形状になったりするものもあります。これはきっと時間と共に解決されていくタイプのものでしょう。気になることがあればReact VRのGitHubリポジトリでIssueを立てるとよいです。

続いてジオラマに必要なもう一つのものは何でしょう? それは雰囲気を与えてくれる背景です。緻密なモデルをさらに引き立ててくれる背景は、ロボットなら宇宙船の内部かもしれないし、船なら海上かもしれません。こちら背景は、今回は3Dプリミティブオブジェクトを利用してそれっぽいものを作ってみます。

用意するもの

ジオラマコンテンツを作るにあたって、用意するものは以下となりました。

配置する対象物としての3Dモデリングデータ
背景の壁と床のテクスチャ

まずは、配置する対象物としての3Dモデリングデータから用意しましょう。

1930年代に使われたソ連製のトラックのモデルデータ

今回ジオラマとして、シーンに配置するのは、GAZ-AAという1930年代に使われたソ連製のトラックにしてみました。筆者は、このトラックを好きだったわけではないですが、様々な3Dモデルを探す中でふとこのトラックを見かけ、素朴な中にも車両全面に漂う気品を魅力に感じ、採用した次第です。

このトラックは、ポリゴン数が4,380と、そこそこ複雑な形状をしており、テクスチャなどを含んでいてなかなかにリアリティがあります。

下記より、objフォーマット形式のものをダウンロードしましょう。もし他の3Dデータで試す場合、ライセンスについてチェックしておきましょう。

GAZ- AA furgon-Bread free VR / AR / low-poly 3D Model MAX OBJ 3DS FBX MTL

ちなみに、上記ダウンロードサイトでは、ユーザー登録が必要です。なので、ほかのものを用意できる人は好きな3Dデータを利用してOKです。「gaz-aa_bread OBJ.zip」をダウンロード、解凍したら、下記のディレクトリにそれぞれ配置します。

static_assets/gaz_aa/gaz-aa_bread.mtl
static_assets/gaz_aa/gaz-aa_bread.obj
static_assets/gaz_aa/gaz-aa_bread_cabin.jpg
static_assets/gaz_aa/gaz-aa_bread_detail.jpg
static_assets/gaz_aa/gaz-aa_bread_frame.jpg
static_assets/gaz_aa/gaz-aa_bread_furgon.jpg
static_assets/gaz_aa/gaz-aa_bread_wheel.jpg
static_assets/gaz_aa/gaz-aa_bread_wing.jpg

上記ファイルのうち、実は「gaz-aa_bread.mtl」については変更する必要があります。

テキストエディタなどでファイルを開き、「D:\Program Files\Autodesk\3ds Max 2009\scenes\GAZ-AA free models\gaz-aa_bread_3ds_max*.jpg」となっているところを「*.jpg」に書き換えましょう。これはきっと作ったときそのままのローカルのパスが入ってしまったのですね。公開する際の要注意ポイントと言えそうです。

ジオラマの背景に必要な素材は、角となる2面分の壁用のテクスチャと、床に使うテクスチャです。前回使ったPanoコンポーネントで、6面にテクスチャを貼り、部屋状にしてしまうこともできますが、それだとリアルな空間になりすぎ、ジオラマっぽくなくなるからです。3面しか壁を用意しないことで、後ろには漆黒の空間が広がる感じになり、なんだか超現実的な世界になります。

背景の壁のテクスチャ

床のテクスチャ

壁と床のテクスチャは以下からダウンロードしてください。

diorama

ちなみに、壁と床のテクスチャは、僕がそのへんで適当に撮ってきたものなので、フリーでお使いいただいて構いません。

ダウンロードしたら、「プロジェクトディレクトリ/static_assets/diorama」以下に「floor.jpg」と「wall.jpg」を配置しましょう。

STEP 1. まずは、ジオラマのベースづくりから

早速トラックを配置したいと、はやる気持ちを抑えてまずはジオラマのベースとなる背景の壁と床を作るところから始めましょう。床は、1000 x 1000の大きさを持った板を想定しました。これは、Panoコンポーネントで作った空間と同じ大きさとなります。そして、奥の壁は床から500の高さを持つ平面です。これにテクスチャをつけることで、リアリティを持たせます。では、具体的な作業をしましょう。

「index.vr.js」のViewの中を一旦空にし、下記のように修正します。

それと、importも変更しておきましょう。この先に使うModelコンポーネントやライティング関係のコンポーネントも加えておきます。

import {
  AppRegistry,
  asset,
  View,
  Plane,
  Model,
  DirectionalLight,
  PointLight,
  AmbientLight,
} from 'react-vr';

Viewコンポーネントが入れ子になっているのは、内側のViewは、ジオラマの背景セットで、セット全体を変形させたい場合はこのように入れ子にしておくと、壁や床を一つの塊として扱えます。ここではジオラマのセット全体をちょっと回転させています。というのも、最初に表示したときに部屋の中央ではなく、部屋の角を見せたいためです。

ジオラマのセット自体を回転させずに、カメラを回転させるという表現方法もありますが、普通ジオラマというのは、インテリアの側面もあり、一番かっこいいポジションで飾るものだと思います。そこで、View自体をY軸に対して-20度回転させました。

さらに細部を見ていきましょう。3つのPlaneが、内側のViewコンポーネント内に配置されていますが、先頭2つのPlaneコンポーネントは壁として配置してあります。位置を遠くに置いたのと、Y軸方向に90度回転させて垂直にそれぞれのコンポーネントが交わるようにしています。

Planeコンポーネントに関わらず、3Dプリミティブコンポーネントは、テクスチャを設定することができます。テクスチャはtexture属性で設定します。

ここではtexture属性に、「diorama/wall.jpg」を指定しました。これによりのっぺりとした壁が質感のある壁となりました。ちなみに、この壁は近くの公園の壁を撮影したものです。

一番最後のPlaneは、床として配置しています。X軸方向に-90度回転させ、テクスチャを貼りました。これは海に行った時の砂岩の岩肌です。深い意味があるわけではないですが、オフロードっぽい印象になる写真が見つからなかったので、こちらを採用しました。

$ npm start

を実行し、ブラウザでURLを開いてみましょう。ただし、こんどは「http://localhost:8081/vr/?hotreload」で開いてみてください。「?hotreload」を付けてブラウザから開くと、ホットリロードが可能になります。これで、エディタで編集したコンテンツが自動でブラウザ側に反映されるようになります。

配置した背景

3方向のみPlaneを配置しただけの簡素なジオラマセットですが、VRで角のほうを見るとなかなかどうして迫力がありますね。

STEP 2. 3Dモデリングデータを配置しよう!

続いて、お待ちかねの3Dモデルの読み込みです。3Dモデリングデータの読み込みには、Modelコンポーネントを使います。Modelコンポーネントには、source属性を記述することができます。渡す内容は、objとmtlというキーを持ったオブジェクトで、それぞれobj形式のファイルとmtl形式のファイルへのパスを渡します。

今回であれば、「配置するモデリングデータ」で保存しておいた「static_assets/gaz_aa」以下にあるobjファイルとmtlファイルが対象になります。

Modelコンポーネントは、「index.vr.js」の入れ子の内側のView以下に配置します。サイズは小さめにし、位置調整とrotateYプロパティを修正して、若干の回転を加えます。これは、ちょうど左前に向いた形がきれいだからです。コードは下記のようになります。

これで、ブラウザをリロードしてみてください。3Dモデルが表示されるはずです。

まだ光が当たっていないので真っ黒

ただし、真っ黒なシルエットになってしまっていますが。ということで、続いて光源を用意して、明るくしていきましょう。

STEP 3. ライティングしてトラックを美しく!

ライティングは、前回3Dプリミティブオブジェクトで遊んだ際に試したのを思い出してください。メインの明かり、部分的な明かり、ちょっとした調整です。今回も同じような感じで進めます。

実は、React VRで使われている3DライブラリのThree.js本体には、ライティングに関する様々なヘルパー機能が用意されています。例えば、照明の向き、範囲などを視覚的に表示して微調整をする機能などです。ただ、現時点のReact VRではもっと限定的なサポートとなっているのでそこまで細かくは扱いません。

「index.vr.js」にDirectionalLightとPointLight、AmbientLightコンポーネントを配置しました。これで、トラックが綺麗に表示されるでしょうか。

トラックがちゃんと表示された！

ブラウザをリロードしてトラックを再表示してみましょう。明るくなったでしょうか。

STEP 4. トラックをゆっくりと回転させてみる

以上で一旦はジオラマは完成しましたと言ってもいいかもしれません。ただ、今まで物体を空間に置いてみて歯がゆかったのは、その物体の裏側がどうなっているのか、それが見えないということでした。ということで、アニメーションの練習がてらトラックを回転させてみましょう。

回転に関しては、ピッタリのサンプルが公式のリポジトリに用意されています。

react-vr/Examples/ModelSample at master · facebook/react-vr

このサンプルを参考にトラックのアニメーションを作ってみます。ちょっとサンプルと異なるのは、Reactのコンポーネントとして作るというのと、細かなロジックを修正した点です。Reactコンポーネントとして、回転速度を定義するspeed属性と、表示位置や大きさを定義するstyle属性を渡せるように作っておきましょう。「src/component/GazAa.js」として下記のように作成します。ちょっと長くなるので、細部の話は置いておいて、まずは一気に掲載してしまいます。

import React from 'react';
import {
  asset,
  View,
  Model,
} from 'react-vr';

export default class GazAa extends React.Component {

  constructor() {
    super();
    this.state = {
      rotation: 0
    };
  }

  componentDidMount() {
    this.rotate();
  }

  componentWillUnmount() {
    if (this.frameHandle) {
      cancelAnimationFrame(this.frameHandle);
      this.frameHandle = null;
    }
  }

  rotate(timestamp) {
    const delta = timestamp - this.lastUpdate || 0;
    this.setState({rotation: this.state.rotation + delta / this.props.speed});
    this.lastUpdate  = timestamp;
    this.frameHandle = requestAnimationFrame(this.rotate.bind(this));
  }

  render() {
    return (
              
            
    )
  }
}

ポイントは、GazAaコンポーネントのローカルステートとそれを変更するためのrotate関数、そしてそこで使われているrequestAnimationFrame関数とcancelAnimationFrame関数です。

GazAaコンポーネントは、シーンに配置した瞬間、つまりコンポーネントがマウントされた時から回転を始めます。逆にコンポーネントをアンマウントすると回転をやめる処理をします。回転の状態はコンポーネントのローカルステートとして定義されているrotationです。

rotationは、3DモデルのrotateYとしてY軸方向にどれだけ回転するかという値として使われることになります。その値をコントロールしているのがrotate関数です。requestAnimationFrame関数は、ブラウザの再描画のタイミングでrotate関数を呼び出すことになるので、呼び出すたびに前に呼び出された時間からの回転をrotationに反映していきます。requestAnimationFrame関数から返った値は、アニメーションをキャンセルするときにcancelAnimationFrame関数にて使われます。

requestAnimationFrame関数について一つ知っておきたいことは、この関数はもともとブラウザに実装されていますが、ブラウザによってはサポートされていないことがあります。そこで、React VRでは、requestAnimationFrame関数のpolyfillとして用意されています。

これで大体のGazAaコンポーネントの仕組みが理解できたでしょうか。今はこういうスタイルでアニメーションを実現したりしますが、将来的にはもっと洗練されたアニメーション機構が用意されていくのだろうと推測します。

では、先ほど作ったGazAaコンポーネントを使っていきましょう。「index.vr.js」で使うので、まずはインポートします。ファイルの先頭あたりにimport文を書きます。

import GazAa from './src/component/GazAa'

続いて、入れ子になったViewコンポーネントの内側に、GazAaコンポーネントを配置します。プロパティとしては、回転速度を定義するspeed属性と、表示位置や大きさを定義するstyle属性を渡しています。これら属性は、GazAaコンポーネント内のthis.props.XXXにて受け取ることが可能です。これらを記載したコードが以下になります。

以上で、トラックが回転するジオラマの完成です。ブラウザをリロードして、じっくり見てみましょう！

完成したVRジオラマ

もし興味があれば、React VR×360度画像！Web上でパノラマVR表示を試すを参考に、GearVRで眺めてみましょう。子供の頃叶わなかった、巨大サイズのジオラマを見ることができますよ。

JSだけでVRできる！『WebVR』ことはじめ

比留間和也 — Wed, 23 Mar 2016 00:00:08 +0000

今年はVR元年と呼ばれています。
実は過去にも何度かVR元年と呼ばれ、VRが来る、と言われていた年があります。
ですが、今年はいよいよそれが本格的になりそうな状況になってきました。

そこで今回は、「今から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);



// CanvasをDOMツリーに追加
document.body.appendChild(renderer.domElement);

// シーンを生成
var scene = new THREE.Scene();

// カメラを生成
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);

// VR用コントローラを生成
var controls = new THREE.VRControls(camera);

// VR用エフェクトを生成（2分割の画面を構築する）
var effect = new THREE.VREffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);

// 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 earth = new THREE.Object3D();
var earthLoader = new THREE.TextureLoader();
earthLoader.load('img/earth.jpg', onEarthTextureLoaded);
function onEarthTextureLoaded(texture) {
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;

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;



// VR Displayオブジェクトを取得
navigator.getVRDisplays().then(function (displays) {
    if (displays.length === 0) {
        console.log('WebVR API is not supported.');
        return;
    }

vrDisplay = displays[0];


});

// VRモードに移行
function toVRMode() {
    var canvas = document.getElementById('canvas');
    vrDisplay.requestPresent({
        source: canvas
    });
}

//////////////////////////////////////////////////

// カメラの位置、回転を制御
(function loop() {
    // VRDisplayに実装されているrequestanimationframeを利用する
    vrDisplay.requestAnimationFrame(loop);

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