ここまで来た！2017 年 Web VR でできること

VOYAGE GROUP VR 室長 伊藤淳

伊藤淳(@jujunjun110)

VOYAGEGROUP VR 室 室長

スマホアプリ、ウェブアプリのプロデューサーを 4 年ほどやる2016 年 10 月より VR 室立ち上げ

目次

1. Web VR とは2. Web VR 何がすごいの？3. Web VR の開発フレームワーク4. Web VR でできることたくさん

Web VR とは

Web VR とは

ウェブブラウザで楽しめる VR コンテンツ

・基本的には HTML + JavaScript で実装・ WebGL を駆使

・現状、大きく分けて 2 種類の環境がある

①PC ベース ② スマホベース

端末 + HMDWindows PC / (Mac?)

+ Oculus Rift / HTC Vive

iPhone / Android 端末+

スマホ向け VR ゴーグル

対応ブラウザ Chromium と　　　 Firefox Nightly のみ

　　　なんでも OK

HMD 状態の取得方法 Web VR API 経由スマホ ジャイロセンサー

HTML5 API 経由

ポジショントラッキング ◯ ×

ハンドコントローラー ◯△ Android Chrome +

Gamepad API のみ （ DayDream Controller 含

む )

Web VR における 2 種類の環境

今日話す内容は主にこっち！

まぎらわしい用語の整理

Web VR / ブラウザ VRWeb ブラウザで表示できる VR コンテンツ

Web VR API の利用は前提ではない

Web VR APIブラウザから HTC Vive や Oculus Rift 等の HMD の

位置や状態を取得できるブラウザの APIW3C が仕様策定中

現在 Firefox nightly と Chromium でのみ利用可能

Web VR 何がすごいの？

A-Painter (Tilt Brush の A-Frame 移植 )

描いた作品を リンク ひとつでシェア！→ さらに描き足すことも可能！

Web VR のすごいところ

圧倒的なアクセスしやすさ・シェアしやすさ

Web VR のメリット・デメリット

メリット・アプリのインストール不要

・ URL でコンテンツを誰にでもすぐ共有・アプリプラットフォームの審査不要

デメリット・歴史が浅いので Unity 等のゲームエンジンに比べ

便利ライブラリ・アセットが少ない・重いアセットを実行時に読み込むのがきつい

Web VR が向いているコンテンツ

・アクセスしやすさ・シェアしやすさが重要な意味を持つコンテンツ

・（スマホベースの場合）カーソルによるフューズなど

簡単な操作でストレスなく完結できるコンテンツ

Web VR が向かないコンテンツ

・重いモデルを扱ったりレンダリング量が多かったりするコンテンツ

・（スマホベースの場合）ハンドコントローラーが必要な複雑な操作のあるコンテンツ

Web VR の開発フレームワーク

Web VR フレームワークとは

Web VR フレームワーク

VR アプリケーション

Three.js

ブラウザ

スマホ / PC

オブジェクトの表示・アニメーション・シェーディングなど3D コンテンツ全般の機能を WebGL を用いて提供

ステレオレンダリング・ジャイロに合わせたカメラの回転などVR でよく使う Three.js の機能を使いやすく提供

Web VR APIHTML の各種 API

各種 Input ( ジャイロセンサーの値など ) HMD やハンドコントローラーの Input 値

HMD + コントローラー

HTML + javascript でアプリケーションを実装

開発元 特徴

Three.js （生） Three.js Authors

WebGLを使って 3次元 CGをリアルタイムレンダリングする JavaScriptライブラリ。大体のフレームワークで使われている。

A-Frame Mozilla HTMLを書くように VRアプリケーションを追加していけるのでとっつきやすい。 Three.jsのラッパー。

React VR Facebook React.js ベースなので Reactに慣れている人には使いやすい。 Three.jsのラッパー。

Solufa AMATELUS 実行が高速なのが売り。 Three.jsのラッパー。

Web VR の主な開発フレームワーク

どれも Three.js のラッパーなので、できることにそれほど大きな差はない。（個人の感想です。）コミュニティやライブラリの開発具合は A-Frame が一歩先を行っているように思える。

A-Frame の実装例

「 box 」や「 Sphere 」などの基礎的な形状の” Entity” に見た目（赤い）や機能（クリックされると回転する）を記述した” component”

を付与することで機能を実装していきます。 Unity 等に似ています。

Web VR でできること

できること① 3D モデル読み込み

DEMO

解説：例えば A-Frame では .obj と .collada をサポート。その他の拡張子のモデルもライブラリをインポートすることで

問題なく読み込み・描画できます。

できること② 物理演算

DEMO

解説：例えば A-Frame では 物理演算ライブラリ CANNON.js のラッパーとしてaframe-physics-system というライブラリがあり簡単に実装できます。

できること③ リアルタイムコミュニケーション

DEMO

解説：基本的に HTML5 + javascript でできることはなんでもできるので、WebRTC を使ったリアルタイムコミュニケーションは簡単に実装できます。

できること④ MMD参考リンク： a-mmd

解説：なんと MMD も ちなみに主要😍 Web VR フレームワークではFBX のボーンアニメーションに対応しているライブラリはまだなさそう。

コミットしてヒーローになるチャンス！

できること⑤ ページ遷移

参考リンク：WikiMuseum

解説：コンテンツにパーマネントリンクを付与し、HTML5 の PushState / PopState を利用することで、自在に行き来できます。

document.location を書き換えることで、外部リンクも可能です。

その他できること

全天球動画再生シェーダーの自作

Normal mapTerrain

パーティクルLeap Motion による操作

などなど…

まとめ

・ Web VR 思ったよりいろんなことできる！

・ビューワ系アプリケーション用途ならすでに実用レベルに達しているかも？

・ぜひ触ってみましょう！

VOYAGE GROUP ではA-Frame / Unity で

VR コンテンツの開発をしたいエンジニアを探しています