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

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

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

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

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

©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とは

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

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

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

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

©Project PLATEAU / MLIT Japan 0１　WebVR（A-Frame）の紹介３６０度写真を表示する場合のソース <!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>360° Image</title> <meta name="description" content="360° 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> 簡単に書けます。

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

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

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

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

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

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

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

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

Kawajiri Takayuki

More Decks by Kawajiri Takayuki

Other Decks in Technology

Featured

Transcript