Unity3DとOculus Riftで VR空間にWebコンテンツを表現する

by GMO次世代

Slide 1

Slide 1 text

1 Unity3DとOculus Riftで VR空間にWebコンテンツを表現する GMOインターネット株式会社次世代システム研究室 2016年10月12日

Slide 2

Slide 2 text

2 最初に質問

Slide 3

Slide 3 text

3 なにかしらVRを体験したことがある方

Slide 4

Slide 4 text

4 Oculus Rift, HTC Vive, PS VRなどのハイエンドVRを体験したことがある方

Slide 5

Slide 5 text

5 体験しないとわからない

Slide 6

Slide 6 text

6 ・・・これが

Slide 7

Slide 7 text

7 こうなる

Slide 8

Slide 8 text

8 • ゲーム・エンタメ以外のVR活用したい • VR空間内でウェブコンテンツを表現したい • Oculus Riftを利用したハイエンドVRアプリを開発したい動機とゴール - Motivation & Goal -

Slide 9

Slide 9 text

9 複数のディスプレイをVR空間に再現

Slide 10

Slide 10 text

10 さっそくデモします

Slide 11

Slide 11 text

11 demo

Slide 12

Slide 12 text

12 外部ウェブコンテンツ Youtube / 各種webサイト Internet システム構成 Leap Motion Oculus Rift 外部サービスAPI Awesomium VR-Ready PC 仮想サーバ

Slide 13

Slide 13 text

13 (メモリ2GBプラン) ×2month コスト

Slide 14

Slide 14 text

14 開発の話

Slide 15

Slide 15 text

15 ・Unity 3D 5.4.1 ・Oculus Runtime ・Awesomium SDK 1.7.5.1 WebViewテクスチャプラグイン・Leap Motion SDK 3.1.3 VRに最適化されたハンドトラッキングエンジン Orion 開発環境 : VR-Ready PC

Slide 16

Slide 16 text

16 ウェブサーバー・Cent OS 7 ・LAMP ・Yii2 フレームワーク・HighCharts 開発環境 : 仮想サーバ（ConoHa）

Slide 17

Slide 17 text

17 VRを構成する 3要素没入感インタラクティブ性リアルタイム開発ポイント 1. 空間作りライティングオブジェクトの色・配置 2. 違和感のない演出オブジェクトの動き情報のリアルタイム性 3. インタラクションオブジェクトの選択オブジェクトの操作

Slide 18

Slide 18 text

18 VR空間のバックグラウンドカメラ･ライティングオブジェクトの配置空間作り 3Dデータが作れる無料のソフト

Slide 19

Slide 19 text

19 違和感のない演出ズームアニメーションリアルタイム更新

Slide 20

Slide 20 text

20 線形補完球面線形補完 spherical linear interpolation linear interpolation 違和感のない演出ズームアニメーションの工夫縮小 2点の座標と角度の中間を求めアニメーションの軌跡を算出奥でも手前でも視認性を保つためにスケールを調整

Slide 21

Slide 21 text

21 インタラクション－ウェブオブジェクトの選択視線が合ったオブジェクトの色を変えて視認させる ActiveIndicator ゲームオブジェクト（Quad）を追加 ActiveIndicator スクリプトでフォーカスイベントを管理

Slide 22

Slide 22 text

22 入⼒の仕組みの変更が必要 ◎ リモコンで入⼒、クリック VRでマウスを使えないインタラクション : ウェブリンクをクリックする視線をトラッキングする必要があるユーザーの視線でクリックする処理を実現

Slide 23

Slide 23 text

23 LeapMotionを活用し、手と指による入⼒操作。ウェブオブジェクトをタッチすることで、表⽰するコンテンツが切り替わる。インタラクション : ウェブオブジェクトの操作プレイヤーの手として使うので、カメラの子オブジェクトとして設定

Slide 24

Slide 24 text

24 インタラクション－オブジェクトの操作・ボタンを押下する処理タッチするX,Y座標にAwesomiumのクリックイベントを発火・新ページの切り替え AwesomiumのLoadURL機能を利用

Slide 25

Slide 25 text

25 ハイエンドVRコンテンツの開発紹介 VR空間内でのウェブコンテンツの表現・ウェブページ・動画・実装した独自なウェブコンテンツ VR空間内でのインタラクション ※センサーの精度が若干の物足りなさを感じた本日のまとめ

Slide 26

Slide 26 text

26 ご清聴ありがとうございました！