始めようVRコンテンツ開発、前編 ～概要と開発環境編～

こんにちは。株式会社VOYAGE GROUP VR LAB室の@daybysay と申します。普段はインターネット広告のSDKエンジニアをしております。

今年の10月にVR LAB室を社内で立ち上げ、そちらでちょろちょろとVRアプリの開発をやっています。

今回は、これからVRコンテンツを開発する人向けに前編でVRの開発環境周りをまとめ、後編で実際にVRコンテンツの開発をやってみよう！という内容で書いてみました。

今後素敵なVRコンテンツ開発ライフを送るための参考にして頂ければなーと思います。

目次

• HMD(Head Mounted Display)について
  
  
  
  • ハイエンドHMD
  
  
  • モバイルHMD
  
  
  
  


• ネイティブかWebか
  
  
  
  • ネイティブ
    
    
    
    • ネイティブの開発環境
    
    
    • UnityによるネイティブVRアプリ開発
    
    
    
    
  
  
  • WebVR
    
    
    
    • WebVRの開発環境
    
    
    • A-Frame
    
    
    
    
  
  
  
  


• 前編まとめ

HMD(Head Mounted Display)について

VRコンテンツの開発を始める上で、そもそもどんなコンテンツが作れるのか？を知る必要があります。

基本的には360°見渡せる体験が出来るコンテンツ開発が可能なのですが、その際に利用するHMD*1によって操作方法や体験が異なってきます。

まずはどんなHMDが存在していて、それぞれどういう特徴があるのかをおさらいしましょう。

2016年末現在、VRアプリケーション開発が出来るHMDは下記2つに大別できます。

• ハイエンドHMD


• モバイルHMD

ハイエンドHMD

ハイエンドHMDは、いわゆるゲーミングPCなどの据え置き型の端末とセットで使うHMDで、次のような特徴があります。

良い点

• ディスプレイのリフレッシュレート*2が高いため、高FPSで酔いづらいアプリケーションの開発が可能


• ルームスケール*3に対応しているため、コンテンツ内を歩き回る体験を作り出せる


• 多くの場合ハンドコントローラに対応しているため、VR空間内にユーザの手を再現でき、ユーザが出来るアクションの種類が多い

悪い点

• ゲーミングPCとHMDが必要なため、初期のコストが高い(合わせて20万~)


• ルームスケールのコンテンツを体験する広いスペースを用意するのが大変

3Dお絵かきアプリであるTiltBrushや、VR空間で他のユーザと遊べるToyboxなど、全身を使う動きのあるコンテンツとの相性が良いです。

TiltBrush

モバイルHMD

モバイルHMDは、スマートフォン + HMDで利用できる端末で、ハイエンドのHMDに比べると扱えるユーザのアクション数が限定されてしまったり、扱えるポリゴン数が少ないなど、制約が多いです。

しかし、スマートフォンユーザなら安価なHMDを買うだけでVRコンテンツを体験できるので、体験までのコストは低いです。*4

また、モバイルHMDの中でもハイエンドとローエンドで分かれており、モバイルハイエンドのHMDは没入感が高いコンテンツが結構あります。

良い点

• 安いHMD + お手持ちのスマホでコンテンツが体験できるので、コンテンツ体験までのハードルが低い(1,000円~)


• HMD + スマホで動作するのでハイエンドHMDと違って場所を選ばない


• (モバイルハイエンド) ハイエンドHMDには劣るものの、ユーザの色々な入力を受けるインターフェイスが備わっている


• (モバイルローエンド) 既存のストアを利用してアプリを配布できる為、潜在的なユーザが多い*5

悪い点

• 現状のモバイルHMDだとポジショントラッキング*6ができないので、ユーザの自身の現実世界での移動をコンテンツに反映するのが難しい*7


• (モバイルローエンド) 多くの場合ハンドコントローラがないので、コンテンツ内の操作が視線ベースになることが多く、目と首が疲れやすい


• (モバイルローエンド) スマホのスペックによって扱えるポリゴン数などにかなり差があるので調整が大変

モバイルHMDは場所に関係なく使えるので、例えばNetflixやYoutubeのような動画を見るコンテンツや、リラクゼーション系など、頭だけで使えて動きが少ないコンテンツと相性が良いです。

Youtube VR

これら特性をしっかり把握した上で、どのHMD向けにコンテンツを提供していくか検討をするのが重要です。

ネイティブかWebか

次にVRアプリケーションの種類についてです。

スマートフォンで利用できるアプリケーションと同様に、VRにおいてもネイティブとWebがあります。

これらもそれぞれ特徴があるのでおさらいしましょう。

ネイティブ

ネイティブVRアプリは下記のような特徴を持っています

• WindowsやMacOS、GearVRやDaydreamなどのアプリストア経由でインストールして利用できるアプリケーション


• Unity、 UE4などのゲームエンジンがVR対応をしており、ゲーム開発をされていた人が参入しやすい


• Oculus RiftやHTC ViveなどのベンダからHMD用の公式SDKが提供されている


• WebVRに比べてリッチで作り込まれた表現がし易いのと、（多くの場合）Wi-Fiか有線が前提なのでネットワークの制約を気にしなくても良い

いま世の中に存在するVRコンテンツの殆どはネイティブで作られています。

ネイティブの開発環境

ネイティブのVRコンテンツ開発は、多くの場合下記2つのゲームエンジンで行われています。

• UNREAL ENGINE4(UE4)


• Unity

それぞれ特性がありますが、モバイルに強く情報量が多いUnityと、リアルなグラフィックに強く、ブループリントという使いやすいビジュアルスクリプト言語を擁するUE4というのがざっくりした特徴です。

個人的には情報量が多く、アセットも豊富でいろいろ試しやすいUnityがオススメです。

UnityによるネイティブVRアプリ開発

UnityにおけるVRアプリケーション開発は、基本的にベンダの提供しているSDKを利用します。

例えばHTC Vive向けにはSteamVR SDKがAssetStore*8上に存在しており、そちらを利用して行います。

HTC Vive向けの開発については弊社ブログの過去記事で公開しているので、そちらをご参照下さい。

また、モバイルのGoogleCardboardやDaydream向けの開発ではGoogle VR SDKを利用します。

こちらも弊社ブログの過去記事で公開しているので、そちらをご参照下さい。

WebVR

WebVRアプリは下記のような特徴を持っています

• Web上にホスティングされ、ブラウザでURLにアクセスするだけで簡単に体験できるアプリケーション


• 基本的にはWebVR APIを利用して開発を行う


• WebVR APIはHMD本体、HMD用カメラ(ポジショントラッキング)とブラウザの間をつなぐAPIで、Web GL、Web Audio、GamePad APIと組み合わせてアプリケーションを開発する

WebVR APIを正式実装しているブラウザはまだ存在せず、W3CにWebVR APIのドラフトが出ている段階です。

現在は多くのコンテンツがネイティブアプリケーションで作られていますが、開発環境やブラウザのWebVR API対応によって、今後はWebアプリケーションも増えてくると予想されます。

ちなみにブラウザのWebVR API対応状況に関しては Is WebVR Ready? で確認が可能です。

WebVRの開発環境

当然ですが、WebVRはHTML + CSS + JSでの開発が可能です。

また、WebVR開発支援のライブラリが存在しており、それらを活用すると簡単にWebVRアプリ開発が可能です。

現在WebVRで利用可能なライブラリは下記です。

• WebVR Boilerplate


• React VR


• A-Frame

これらはJSの3DライブラリであるThree.jsをベースに実装されています。

ライブラリ内にWebVR APIのラッパーが存在するので、Oculus RiftやHTC ViveなどのハイエンドHMD、ハンドコントローラなどの情報も簡単に扱うことが可能です。

例えば、A-Frameで作られているA-Painterというアプリは、HTC ViveでリリースされているTiltBrushのように、HTC Viveのコントローラを使ったお絵かきアプリをWebVRで実現しています！

A-Painter

WebVRアプリ開発を始めるに当たって、初心者の方に一番お勧めしたいのはA-Frameです。

A-Frame

A-FrameはWeb開発を支援するため、Mozilla VRチームが中心となって開発しているOSSのライブラリで、HTMLでVRアプリケーションを作成するためのオープンソースのWebVRフレームワークです。

独自のHTML拡張構文が用意されているのと、A-Frame Inspectorというビジュアルエディタが用意されているのが特徴です。

先日リリースされたA-Frame v0.4.0では、新たにA-Frame Registoryが公開されました。

これはUnityで言うところのAssetStoreの様なものであり、Registoryに登録されているコンポーネントを上記のInspectorから直接利用出来るという便利な機能を備えています。

上記InspectorやRegistoryなど、開発を支援するツールが充実している点で他のライブラリと比べて頭一つ抜けている印象です。

前編まとめ

ここまでのまとめです。

• HMDにはハイエンドとローエンドがあり、ものによってコントローラが違う


• アプリのタイプにはネイティブとWebがあり、それぞれに特徴がある


• 初心者であれば、ネイティブはUnity、WebVRはA-Frameを用いた開発がお勧め

後編では、A-Frameを利用して簡単なWebVRアプリケーションを作ってみたいと思います。

お手元にスマートフォンがある方は是非トライしてみて下さい。

後編へ続く

*1:頭にかぶるディスプレイ

*2:画面の更新頻度

*3:体験者のリアルな位置や移動をゲーム内に反映させる機能の中で、ある程度の広さが確保されるもの

*4:Galaxy, Pixelユーザ以外はローエンドに限る

*5:例えばGoogleCardboardのユーザは今年の1月時点で世界で500万以上。ちなみにGearVRのMAUは100万人以上と公式に発表されている

*6:ユーザのリアルな位置をゲーム内に反映させる機能

*7:加速度や角速度センサーの値を使えば多少は可能である

*8:Unityの開発に使えるアセットが売買出来るプラットフォーム

Copyright ©2016 VR Inside All Rights Reserved.