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

Transcript

1. VR 点 検 シュミレーションを A-Frameで作った話 川尻　貴之
2. ©Project PLATEAU / MLIT Japan 川尻 貴之 自己紹介 Kawajiri Takayuki ・MIERUNE入って１年ちょっと ・前職は、JR北海道のグループ会社 ・趣味は、車でドリフト。去年からオフ ロードバイクにもハマってます。 GISエンジニア
3. ©OpenStreetMap contributors 01　WebVR（A-Frame)の紹介 02　作ったシステムの紹介 03　終わりに 目次
4. ©OpenStreetMap contributors 01 WebVR(A-Frame)の紹介
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とは
6. ©Project PLATEAU / MLIT Japan 0１　WebVR（A-Frame）の紹介 •A-Frame（HTMLライクな記述で作成） •Babylon.js（TypeScriptで書かれた高機能な3Dエンジン） •React 360（Facebookが開発、Reactベース） 等々色々あります。（ほとんどがThree.jsがベースになってます。） 主なフレームワークとしては
7. ©Project PLATEAU / MLIT Japan 0１　WebVR（A-Frame）の紹介 • HTMLのようなシンプルなマークアップを使用 して、3Dのバーチャルリアルティ (VR) シーン を簡単に作成・表示することができます。 • １ソースで、ブラウザ、スマホ、VRゴーグル等に 対応できるのが特徴です。 A-Frameの説明 https://aframe.io/
8. ©Project PLATEAU / MLIT Japan 02　作ったシステムの紹介 •多くが２眼カメラ（表裏に魚眼レンズ） •ワンシャッターで360度撮影できる。 •死角が無いので、一脚等で撮影。 •入門機だと5万円以下で購入可 360度写真の説明
9. ©Project PLATEAU / MLIT Japan 02　作ったシステムの紹介 360度写真の説明 https://jp.cyberlink.com/learning/powerdirector-video-editing-software/694/360°動画を編集するには（撮影から編集の準備までの流れ）
10. ©Project PLATEAU / MLIT Japan 02　作ったシステムの紹介 360度写真の説明 https://jp.cyberlink.com/learning/powerdirector-video-editing-software/694/360°動画を編集するには（撮影から編集の準備までの流れ）
11. ©Project PLATEAU / MLIT Japan 0１　WebVR（A-Frame）の紹介 ３６０度写真を表示する場合のソース <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>360&deg; Image</title> <meta name="description" content="360&deg; Image - A-Frame"> <script src="../../../dist/aframe-master.js"></script> </head> <body> <a-scene> <a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky> <a-text font="kelsonsans" value="Puy de Sancy, France" width="6" position="-2.5 0.25 -1.5" rotation="0 15 0"></a-text> </a-scene> </body> </html> 簡単に書けます。
12. ©OpenStreetMap contributors 02 作ったシステムの紹介
13. ©Project PLATEAU / MLIT Japan 02　作ったシステムの紹介 •行ったことがない所を説明するための教材 •点検等、定形作業の反復練習 •実物が近くにない、入出制限等で行けない場所の把握 目的・用途
14. ©Project PLATEAU / MLIT Japan 02　作ったシステムの紹介 •完全３D空間をVRで再現したものではない。（モデリングコストを 考慮） •360度写真の点間移動（GoogleStreetViewをイメージ） ◦ 自由に移動できるVRではない。 •一部文字等は、３D空間でモデリング •ユーザーがコンテンツの作成ができる様にする システムのコンセプト
15. ©Project PLATEAU / MLIT Japan 02　作ったシステムの紹介 シーン（地点）＜ターゲット（点検項目） 移動経路は、点検と単純性を考慮して一筆書き経路のみとしてい る システムのコンセプト
16. ©Project PLATEAU / MLIT Japan 02　作ったシステムの紹介 システムの構成
17. ©Project PLATEAU / MLIT Japan 02　作ったシステムの紹介 デモ
18. ©Project PLATEAU / MLIT Japan 03　副産物、発展形 青い足跡：次のシーンへ 緑の足跡：前のシーンへ シーン間移動
19. ©Project PLATEAU / MLIT Japan 03　副産物、発展形 文字、画像を配置可能 ターゲットマークが点検箇所 チェックすると次のターゲットへ （これを繰り返していく） ターゲット選択
20. ©Project PLATEAU / MLIT Japan 03　副産物、発展形 VRコンテンツ登録画面 複数のシーンを設定 シーンの中に複数ターゲットを設定 ターゲットには、 音、文字等のアクションを設定
21. ©Project PLATEAU / MLIT Japan 03　副産物、発展形 シーン内で、点検するポイントを表示 して、クリックすると音がなったりし て、事前練習できる。 VRゴーグルでやると非常にリアル。 ターゲットの登録画面
22. ©OpenStreetMap contributors 03 副産物、発展形
23. ©Project PLATEAU / MLIT Japan 04　まとめ • 普段行けない所を、行ったことがない人に説明するには十分。 • VRゴーグルで見ると非常にリアル • 点検訓練よりゲーム感覚になってしまう。 • 完全オフラインを目指したが、 ◦ VRゴーグルが定期的にネット接続が必要 ◦ VRゴーグルのスクリーンミラーリングにネット接続が必要 使って見た結果
24. ©Project PLATEAU / MLIT Japan 04　まとめ この後、 VRゴーグルで体験できる 環境用意しますので 気軽にどうぞ