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

Transcript

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

2. 2 最初に質問

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

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

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

6. 6 ・・・ これが

7. 7 こうなる

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

   動機とゴール - Motivation & Goal -

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

10. 10 さっそくデモします

11. 11 demo

12. 12 外部ウェブコンテンツ Youtube / 各種webサイト Internet システム構成 Leap Motion Oculus

    Rift 外部サービスAPI Awesomium VR-Ready PC 仮想サーバ

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

14. 14 開発の話

15. 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

16. 16 ウェブサーバー ・Cent OS 7 ・LAMP ・Yii2 フレームワーク ・HighCharts 開発環境

    : 仮想サーバ（ConoHa）

17. 17 VRを 構成する 3要素 没入感 インタラク ティブ性 リアル タイム 開発ポイント

    1. 空間作り ライティング オブジェクトの色・配置 2. 違和感のない演出 オブジェクトの動き 情報のリアルタイム性 3. インタラクション オブジェクトの選択 オブジェクトの操作

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

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

20. 20 線形補完 球面線形補完 spherical linear interpolation linear interpolation 違和感のない演出 ズームアニメーションの工夫

    縮小 2点の座標と角度の中間を求め アニメーションの軌跡を算出 奥でも手前でも視認性を 保つためにスケールを調整

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

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

    ユーザーの視線でクリックする処理を実現

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

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

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

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