これは MIERUNE AdventCalendar 2022 11日目の記事です。
昨日は @yuskesuzki@github さんによる 線の交差を判定する処理はどう書けばいいの？ でした。
さて、私の所属しているMIERUNEという会社では、位置情報をたくさん扱っています。
主にWebGISが多く、パソコン上の地図で地物を配置していくようなものが多いです。
GISデータとして、地物の位置を正確に表現できるようになりましたので、
すこし視点を変えて、現地に行ってこの位置データを活かせないかと考えました。
そこで、以前から興味のあったA-FrameというWebVRのライブラリで、
LocationBaseARができることを知り、やってみました。
指定した緯度経度に、目標物を配置して
現地でスマホのカメラを向けて、目標物がARで写り、位置を把握できるのが目標です。
AR（拡張現実）と言ってもいくつか種類があって
- Marker Base
- 予め現実世界に配置されたマーカー（QRコード等）にかざすとARが表示される。
- Image Tracking
- マーカーではなく、写真やイラストを認識して、ARが表示される。
- Location Base
- 予め指定された位置情報に対してARが表示される。←今回コレ
そこで今回ご紹介するのは、LocationBaseARです。
LoactionBaseARは、位置（緯度経度）を指定して、その場所にARオブジェクトを表示するものです。
（ポケモンGO等の位置ゲームに似てますね。）
それを、スマホでアクセスできるWebサイト(HTML１枚,16行)を作るだけで簡単に実現できます。
（スマホで、位置情報、カメラの使用権限は許可してください。）
使う技術
- HTML/Javascript
- aframe.js
- aframe-look-at-component.js
- aframe-ar-nft.js
A-Frameは、Tree.jsベースのWebVR用のライブラリです。
Webページだけで、VR空間を構築したり、３６０度写真の表示に使用したりできます。
すごいのは、１ソースで、ブラウザ、スマホVR、VRゴーグルすべてに対応できるところです。
今回は、AR用途で使いましたが、VRでの使用がおすすめのライブラリです。
※注意、指定している位置が、札幌ファクトリー付近なので、現地でないとAR表示でされません。
ソースコード
<!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>
ソースの説明
ライブラリの読み込み
- aframe：A-Frame本体
- aframe-ar-nft.js：NFT(Natural Feature Tracking)のAR用ライブラリ
宣言なのでおまじないと思ってください。
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
a-sceneでシーン（空間）を設定しています。webcam（スマホカメラ画像）を背景にしてます。
<a-scene vr-mode-ui="enabled: false" embedded arjs="sourceType: webcam; debugUIEnabled: false;">
gps-cameraで、カメラとGPSを紐付けています。
<a-camera gps-camera rotation-reader> </a-camera>
a-boxが今回の目標地物です。
43.065112,141.361493 (札幌ファクトリー赤レンガ館付近)の位置に
横0.5m、高さ0.8m、奥行0.5mの赤い箱を配置してます。
<a-box material="color: red" gps-entity-place="latitude: 43.065112; longitude: 141.361493;" scale="0.5 0.8 0.5"></a-box>
※ご自身の近くで動作確認する場合は、目標物の緯度経度をご自身の近くの位置に変更して見てください。
実際に現地での動作確認の様子
まず、事前に地図上で位置関係を確認すると
出典：地理院地図
- 赤い○が目標物の地点です。
- 青丸の辺りに立って、スマホでデモページを開いて、AR画像を見ながら目標物に近づいていきます。
近くに行った時のスクリーンショット
概ね、ARを見ながら目標物を発見できました。
今回は単純なサンプルでしたが、
- 目標物の赤い箱を、3Dobjectにしたり
- 目標物までの距離を出したり
- 目標物との当たり判定をつけたり
することも可能です。
まとめ
- かなり少ないコード量で、LocationBaseARの実装ができました。
- ただし、スマホによるGPS測位精度の影響が大きいこともわかりました。
実際の動作確認の際には、マップアプリ等で現在位置、測位精度（悪ければコンパスの校正）を確認してから、
Weｂページを表示しスマホカメラ向けてみることをおすすめします。
参考にさせて頂いたサイト
https://bagelee.com/programming/location-based-ar/
明日は@chizutodesignさんによる「MapTilerの地図アイコンをデザインした話」です！お楽しみにー