$30 off During Our Annual Pro Sale. View Details »

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

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

Kawajiri Takayuki

October 01, 2023
Tweet

More Decks by Kawajiri Takayuki

Other Decks in Technology

Transcript

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

    View Slide

  2. ©Project PLATEAU / MLIT Japan
    川尻 貴之
    自己紹介
    Kawajiri Takayuki
    ・MIERUNE入って1年ちょっと
    ・前職は、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
    01 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
    01 WebVR(A-Frame)の紹介
    ●A-Frame(HTMLライクな記述で作成)
    ●Babylon.js(TypeScriptで書かれた高機能な3Dエンジン)
    ●React 360(Facebookが開発、Reactベース)
    等々色々あります。(ほとんどがThree.jsがベースになってます。)
    主なフレームワークとしては

    View Slide

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

    View Slide

  8. ©Project PLATEAU / MLIT Japan
    02 作ったシステムの紹介
    ●多くが2眼カメラ(表裏に魚眼レンズ)
    ●ワンシャッターで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
    01 WebVR(A-Frame)の紹介
    360度写真を表示する場合のソース




    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 作ったシステムの紹介
    ●完全3D空間をVRで再現したものではない。(モデリングコストを
    考慮)
    ●360度写真の点間移動(GoogleStreetViewをイメージ)
    ○ 自由に移動できるVRではない。
    ●一部文字等は、3D空間でモデリング
    ●ユーザーがコンテンツの作成ができる様にする
    システムのコンセプト

    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