LocationBaseARを簡単に実装してみた。

1. HTML16行で実装します LocationBaseARを簡単に実現してみた川尻貴之

2. ©Project PLATEAU / MLIT Japan 川尻貴之自己紹介 KAWAJIRI Takayuki 5月からMIERUNEに所属。前職は、鉄道系の会社で社内向けにソフトを作ってました。趣味：車を横に滑らせることフロントエンドエンジニア

3. ©OpenStreetMap contributors 01 ARの種類について 02 A-Frameというライブラリについて 03 LoacionBaseARの実装 04 現地実験の様子紹介 05 まとめ目次

4. ©OpenStreetMap contributors 01 ARの種類について

5. ©Project PLATEAU / MLIT Japan 01 ARの種類について「拡張現実」実在する画像に、バーチャルの視覚情報を重ねて表示。 ●マーカーベース(QRコード等) ●イメージベース（画像） ●ロケーションベース（位置＝緯度経度） ARとは

6. ©Project PLATEAU / MLIT Japan 01 ARの種類について位置（緯度経度）を指定して、その場所にバーチャルオブジェクトを表示するものです。 ● GPS ● ジャイロ＆コンパス ● カメラ＝スマホorタブレット端末が必要になります。 GPSを使用するので、屋外での使用が前提です。 LocationBaseARとは

7. ©Project PLATEAU / MLIT Japan 01 ARの種類について ●外部公開できるWebページ(HTML１枚、16行)を作るだけ使う技術 ● HTML/Javascript ● aframe.js ○ aframe-ar-nft.js 今回は、LocatinBaseARを簡単に実装します。

8. ©OpenStreetMap contributors 02 A-Frameというライブラリについて

9. ©Project PLATEAU / MLIT Japan 02 A-Frameというライブラリについて Tree.jsベースのWebVR用のライブラリです。・オープンソース・Webページだけで、VR空間を構築したり、３６０度写真を表示できます。・１ソースで、すべてのデバイスに対応。・PCブラウザ・スマホVR（１画面、２眼簡易VRゴールも対応）・VRゴーグル（コントローラにも対応）・似たWebVRのライブラリに、babilon.jsがあります。 A-FRAMEとは A-FRAMEサイト

10. ©OpenStreetMap contributors 03LocationBaseARの実装

11. ©Project PLATEAU / MLIT Japan 03 LocationBaseARの実装 ●書くのはHTML１ページ ●作成したHTMLをスマホから見れる環境に配置する必要があります。 ●今回は一番シンプルな実装にしています完成イメージは、屋外で、スマホカメラを向けると、指定緯度経度に赤い箱が表示される早速コードをご紹介します。

12. ©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>

13. ©Project PLATEAU / MLIT Japan 03 LocationBaseARの実装 <a-scene vr-mode-ui="enabled: false" embedded arjs="sourceType: webcam; debugUIEnabled: false;" > ●a-sceneでシーン（空間）を設定しています。 ●ar拡張ライブラリを使用して、webcamを背景に設定してます。

14. ©Project PLATEAU / MLIT Japan 03 LocationBaseARの実装 <a-camera gps-camera rotation-reader></a-camera> ●gps-cameraで、カメラとGPSを紐付けています。

15. ©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の赤い箱を配置

18. ©Project PLATEAU / MLIT Japan 04 現地実験の様子紹介実験時は、屋外に出てから、数分GPS測位が安定するのを待ちました。スマホブラウザで、作成したWebページを表示（カメラと、位置情報へのアクセスを許可）ビデオで紹介

20. ©Project PLATEAU / MLIT Japan 04 現地実験の様子紹介テスト結果 ●目標物の水平方向（緯度経度）は、概ね合っている ●垂直方向が全然合っていない。（そもそも赤い箱に高さを指定していない。） ●近づきすぎると、AR物内に入って見えなくなってしまう・・・。（当たり判定未実装）

22. ©Project PLATEAU / MLIT Japan 05 まとめ ●かなり少ないコード量で、LocationBaseARの実装ができました。 ●高さ方向を意識しない、現地での位置把握には有効。 ●ただし、スマホのGPS測位精度の影響が大きい。まとめ

23. ©Project PLATEAU / MLIT Japan 05 まとめ ●北海道の冬は、多くのものが雪に隠れてしまう。 ○ 消火栓の位置 ○ マンホール（排水溝）の位置等の発見に使えるかもしれないと思いました。 LocationBaseAR 利用用途の可能性

LocationBaseARを簡単に実装してみた。

Du liest eine Vorschau.

Hier ansehen

LocationBaseARを簡単に実装してみた。

Weitere Verwandte Inhalte

Ähnlich wie LocationBaseARを簡単に実装してみた。 (20)

Aktuellste (20)