VR点検シュミレーションをA-Frameで作った話

Transcript

1. VR 点 検 シュミレーションを
   A-Frameで作った話
   川尻　貴之
   

   View Slide

2. ©Project PLATEAU / MLIT Japan
   川尻 貴之
   自己紹介
   Kawajiri Takayuki
   ・MIERUNE入って１年ちょっと
   ・前職は、JR北海道のグループ会社
   ・趣味は、車でドリフト。去年からオフ
   ロードバイクにもハマってます。
   GISエンジニア
   

   View Slide

3. ©OpenStreetMap contributors
   01　WebVR（A-Frame)の紹介
   02　作ったシステムの紹介
   03　終わりに
   目次
   

   View Slide

4. ©OpenStreetMap contributors
   01
   WebVR(A-Frame)の紹介
   

   View Slide

5. ©Project PLATEAU / MLIT Japan
   0１　WebVR（A-Frame）の紹介
   ● WebVR（Web Virtual Reality）は、ウェブブラウザで仮想現実（VR）体験
   を可能にするためのJavaScript APIです。
   ● 主流のウェブブラウザと多くのVRヘッドセット、Oculus Rift、HTC Vive、
   Windows Mixed Realityヘッドセットなどと互換性
   ● HTML、CSS、JavaScriptといったウェブ標準のテクノロジーを使用して
   VR体験を作成できる
   Web-VRとは
   

   View Slide

6. ©Project PLATEAU / MLIT Japan
   0１　WebVR（A-Frame）の紹介
   ●A-Frame（HTMLライクな記述で作成）
   ●Babylon.js（TypeScriptで書かれた高機能な3Dエンジン）
   ●React 360（Facebookが開発、Reactベース）
   等々色々あります。（ほとんどがThree.jsがベースになってます。）
   主なフレームワークとしては
   

   View Slide

7. ©Project PLATEAU / MLIT Japan
   0１　WebVR（A-Frame）の紹介
   ● HTMLのようなシンプルなマークアップを使用
   して、3Dのバーチャルリアルティ (VR) シーン
   を簡単に作成・表示することができます。
   ● １ソースで、ブラウザ、スマホ、VRゴーグル等に
   対応できるのが特徴です。
   A-Frameの説明
   https://aframe.io/
   

   View Slide

8. ©Project PLATEAU / MLIT Japan
   02　作ったシステムの紹介
   ●多くが２眼カメラ（表裏に魚眼レンズ）
   ●ワンシャッターで360度撮影できる。
   ●死角が無いので、一脚等で撮影。
   ●入門機だと5万円以下で購入可
   360度写真の説明
   

   View Slide

9. ©Project PLATEAU / MLIT Japan
   02　作ったシステムの紹介
   360度写真の説明
   https://jp.cyberlink.com/learning/powerdirector-video-editing-software/694/360°動画を編集するには（撮影から編集の準備までの流れ）
   

   View Slide

10. ©Project PLATEAU / MLIT Japan
    02　作ったシステムの紹介
    360度写真の説明
    https://jp.cyberlink.com/learning/powerdirector-video-editing-software/694/360°動画を編集するには（撮影から編集の準備までの流れ）
    

    View Slide

11. ©Project PLATEAU / MLIT Japan
    0１　WebVR（A-Frame）の紹介
    ３６０度写真を表示する場合のソース
    
    
    
    
    360° Image
    
    
    
    
    
    
    width="6" position="-2.5 0.25 -1.5"
    rotation="0 15 0">
    
    
    
    簡単に書けます。
    

    View Slide

12. ©OpenStreetMap contributors
    02
    作ったシステムの紹介
    

    View Slide

13. ©Project PLATEAU / MLIT Japan
    02　作ったシステムの紹介
    ●行ったことがない所を説明するための教材
    ●点検等、定形作業の反復練習
    ●実物が近くにない、入出制限等で行けない場所の把握
    目的・用途
    

    View Slide

14. ©Project PLATEAU / MLIT Japan
    02　作ったシステムの紹介
    ●完全３D空間をVRで再現したものではない。（モデリングコストを
    考慮）
    ●360度写真の点間移動（GoogleStreetViewをイメージ）
    ○ 自由に移動できるVRではない。
    ●一部文字等は、３D空間でモデリング
    ●ユーザーがコンテンツの作成ができる様にする
    システムのコンセプト
    

    View Slide

15. ©Project PLATEAU / MLIT Japan
    02　作ったシステムの紹介
    シーン（地点）＜ターゲット（点検項目）
    移動経路は、点検と単純性を考慮して一筆書き経路のみとしてい
    る
    システムのコンセプト
    

    View Slide

16. ©Project PLATEAU / MLIT Japan
    02　作ったシステムの紹介
    システムの構成
    

    View Slide

17. ©Project PLATEAU / MLIT Japan
    02　作ったシステムの紹介
    デモ
    

    View Slide

18. ©Project PLATEAU / MLIT Japan
    03　副産物、発展形
    青い足跡：次のシーンへ
    緑の足跡：前のシーンへ
    シーン間移動
    

    View Slide

19. ©Project PLATEAU / MLIT Japan
    03　副産物、発展形
    文字、画像を配置可能
    ターゲットマークが点検箇所
    チェックすると次のターゲットへ
    （これを繰り返していく）
    ターゲット選択
    

    View Slide

20. ©Project PLATEAU / MLIT Japan
    03　副産物、発展形
    VRコンテンツ登録画面
    複数のシーンを設定
    シーンの中に複数ターゲットを設定
    ターゲットには、
    音、文字等のアクションを設定
    

    View Slide

21. ©Project PLATEAU / MLIT Japan
    03　副産物、発展形
    シーン内で、点検するポイントを表示
    して、クリックすると音がなったりし
    て、事前練習できる。
    VRゴーグルでやると非常にリアル。
    ターゲットの登録画面
    

    View Slide

22. ©OpenStreetMap contributors
    03
    副産物、発展形
    

    View Slide

23. ©Project PLATEAU / MLIT Japan
    04　まとめ
    ● 普段行けない所を、行ったことがない人に説明するには十分。
    ● VRゴーグルで見ると非常にリアル
    ● 点検訓練よりゲーム感覚になってしまう。
    ● 完全オフラインを目指したが、
    ○ VRゴーグルが定期的にネット接続が必要
    ○ VRゴーグルのスクリーンミラーリングにネット接続が必要
    使って見た結果
    

    View Slide

24. ©Project PLATEAU / MLIT Japan
    04　まとめ
    この後、
    VRゴーグルで体験できる
    環境用意しますので
    気軽にどうぞ
    

    View Slide