Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for Kawajiri Takayuki Kawajiri Takayuki
October 01, 2023
Technology
0
2k

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

Avatar for Kawajiri Takayuki

Kawajiri Takayuki

October 01, 2023
Tweet

More Decks by Kawajiri Takayuki

See All by Kawajiri Takayuki
360度写真を使った 屋内地図の作成
Avatar for Kawajiri Takayuki kawajiritakayuki
0
2.4k

Other Decks in Technology

See All in Technology
Асинхронная коммуникация в Go: от понятного к душному. Дима Некрасов, Otello, 2ГИС
Avatar for Lamoda Tech lamodatech
0
1.6k
AI 코딩 에이전트 더 똑똑하게 쓰기
Avatar for nacyot nacyot
0
460
AIにおけるソフトウェアテスト_ver1.00
Avatar for fumisuke fumisuke
1
330
生成AIのユースケースをとにかく集めてまるっと学ぶ！/ all about generative ai usecases
Avatar for gakumura gakumura
3
360
Twelve-Factor-Appから学ぶECS設計プラクティス/ECS practice for Twelve-Factor-App
Avatar for k-ozawa ozawa
3
160
Winning at PHP in Production in 2025
Avatar for Benjamin Eberlei beberlei
1
270
2025-04-14 Data & Analytics 井戸端会議 Multi tenant log platform with Iceberg
Avatar for kamijin_fanta kamijin_fanta
0
180
Microsoft の SSE の現在地
Avatar for skmkzyk skmkzyk
0
280
クラウドネイティブ環境の脅威モデリング
Avatar for Kyohei Mizumoto kyohmizu
1
280
Mastraに入門してみた ~AWS CDKを添えて~
Avatar for つくぼし tsukuboshi
0
380
Perl歴約10年のエンジニアがフルスタックTypeScriptに出会ってみた
Avatar for papix papix
1
260
LINE 購物幕後推手
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
320

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Building an army of robots
Avatar for Kyle Neath kneath
305
45k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
49
7.8k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
41
2.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
45
9.5k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.7k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
276
23k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.3k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k

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ゴーグルで体験できる 環境用意しますので 気軽にどうぞ