LocationBaseARを簡単に実装してみた。
Denunciar
TakayukiKawajiri1Seguir
16 de Dec de 2022•0 gostou•226 visualizações
0 gostaram
Seja o primeiro a gostar disto
mostrar mais
visualizações
Vistos totais
0
No Slideshare
0
De incorporações
0
Número de incorporações
0
LocationBaseARを簡単に実装してみた。
16 de Dec de 2022•0 gostou•226 visualizações
0 gostaram
Seja o primeiro a gostar disto
mostrar mais
visualizações
Vistos totais
0
No Slideshare
0
De incorporações
0
Número de incorporações
0
Baixar para ler offline
Denunciar
Internet
MIERUNE Meetup Mini#5での発表資料です。
TakayukiKawajiri1Seguir
LocationBaseARを簡単に実装してみた。
- HTML16行で実装します LocationBaseARを簡単に実現してみた 川尻 貴之
- ©Project PLATEAU / MLIT Japan 川尻 貴之 自己紹介 KAWAJIRI Takayuki 5月からMIERUNEに所属。 前職は、鉄道系の会社で 社内向けにソフトを作ってました。 趣味：車を横に滑らせること フロントエンド エンジニア
- ©OpenStreetMap contributors 01 ARの種類について 02 A-Frameというライブラリについて 03 LoacionBaseARの実装 04 現地実験の様子紹介 05 まとめ 目次
- ©OpenStreetMap contributors 01 ARの種類について
- ©Project PLATEAU / MLIT Japan 01 ARの種類について 「拡張現実」 実在する画像に、バーチャルの視覚情報を重ねて表示。 ●マーカーベース(QRコード等) ●イメージベース（画像） ●ロケーションベース（位置＝緯度経度） ARとは
- ©Project PLATEAU / MLIT Japan 01 ARの種類について 位置（緯度経度）を指定して、 その場所にバーチャルオブジェクトを表示するものです。 ● GPS ● ジャイロ＆コンパス ● カメラ ＝スマホorタブレット端末が必要になります。 GPSを使用するので、屋外での使用が前提です。 LocationBaseARとは
- ©Project PLATEAU / MLIT Japan 01 ARの種類について ●外部公開できるWebページ(HTML１枚、16行)を作るだけ 使う技術 ● HTML/Javascript ● aframe.js ○ aframe-ar-nft.js 今回は、LocatinBaseARを 簡単に実装します。
- ©OpenStreetMap contributors 02 A-Frameというライブラリについて
- ©Project PLATEAU / MLIT Japan 02 A-Frameというライブラリについて Tree.jsベースのWebVR用のライブラリです。 ・オープンソース ・Webページだけで、VR空間を構築したり、３６０度写真を表示できます。 ・１ソースで、すべてのデバイスに対応。 ・PCブラウザ ・スマホVR（１画面、２眼簡易VRゴールも対応） ・VRゴーグル（コントローラにも対応） ・似たWebVRのライブラリに、babilon.jsがあります。 A-FRAMEとは A-FRAMEサイト
- ©OpenStreetMap contributors 03LocationBaseARの実装
- ©Project PLATEAU / MLIT Japan 03 LocationBaseARの実装 ●書くのはHTML１ページ ●作成したHTMLをスマホから見れる環境に配置する必要があります。 ●今回は一番シンプルな実装にしています 完成イメージは、 屋外で、スマホカメラを向けると、指定緯度経度に赤い箱が表示される 早速コードをご紹介します。
- ©Project PLATEAU / MLIT Japan 03 LocationBaseARの実装 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Location-based AR.js demo</title> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script> </head> <body style="margin: 0; overflow: hidden;"> <a-scene vr-mode-ui="enabled: false" embedded arjs="sourceType: webcam; debugUIEnabled: false;"> <a-box material="color: red" gps-entity-place="latitude: 43.065112; longitude: 141.361493;" scale="0.5 0.8 0.5"> </a-box> <a-camera gps-camera rotation-reader></a-camera> </a-scene> </body> </html>
- ©Project PLATEAU / MLIT Japan 03 LocationBaseARの実装 <a-scene vr-mode-ui="enabled: false" embedded arjs="sourceType: webcam; debugUIEnabled: false;" > ●a-sceneでシーン（空間）を設定しています。 ●ar拡張ライブラリを使用して、webcamを背景に設定してます。
- ©Project PLATEAU / MLIT Japan 03 LocationBaseARの実装 <a-camera gps-camera rotation-reader></a-camera> ●gps-cameraで、カメラとGPSを紐付けています。
- ©Project PLATEAU / MLIT Japan 03 LocationBaseARの実装 <a-box material="color: red" gps-entity-place="latitude: 43.065112; longitude: 141.361493;" scale="0.5 0.8 0.5" > ● a-boxが今回の目標地物です。 ● 緯度43.065112,経度141.361493 の位置 ○ （札幌ファクトリー赤レンガ館前） ● 横0.5m、高さ0.8m、奥行0.5mの赤い箱を配置
- ©OpenStreetMap contributors 04 現地実験の様子紹介
- ©Project PLATEAU / MLIT Japan 04 現地実験の様子紹介 実験の位置関係 サッポロファクトリ-レンガ館前 ・赤四角に目標物を配置 ・青丸の位置に立ち、 スマホを向けながら、 近づいていきます。
- ©Project PLATEAU / MLIT Japan 04 現地実験の様子紹介 実験時は、屋外に出てから、 数分GPS測位が安定するのを待ちました。 スマホブラウザで、作成したWebページを表示 （カメラと、位置情報へのアクセスを許可） ビデオで紹介
- ©Project PLATEAU / MLIT Japan 04 現地実験の様子紹介
- ©Project PLATEAU / MLIT Japan 04 現地実験の様子紹介 テスト結果 ●目標物の水平方向（緯度経度）は、概ね合っている ●垂直方向が全然合っていない。 （そもそも赤い箱に高さを指定していない。） ●近づきすぎると、AR物内に入って見えなくなってしまう ・・・。（当たり判定未実装）
- ©OpenStreetMap contributors 05 まとめ
- ©Project PLATEAU / MLIT Japan 05 まとめ ●かなり少ないコード量で、LocationBaseARの実装ができました。 ●高さ方向を意識しない、現地での位置把握には有効。 ●ただし、スマホのGPS測位精度の影響が大きい。 まとめ
- ©Project PLATEAU / MLIT Japan 05 まとめ ●北海道の冬は、多くのものが雪に隠れてしまう。 ○ 消火栓の位置 ○ マンホール（排水溝）の位置 等の発見に使えるかもしれないと思いました。 LocationBaseAR 利用用途の可能性