LocationBaseARを16行で動かしてみる

:::note info
これは [MIERUNE AdventCalendar 2022](https://qiita.com/advent-calendar/2022/mierune)　11日目の記事です。
昨日は @yuskesuzki@github　さんによる [線の交差を判定する処理はどう書けばいいの？](https://qiita.com/yuskesuzki@github/items/76f5f5dc8605103db3db) でした。
:::

さて、私の所属している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](https://aframe.io/)は、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>
```

※ご自身の近くで動作確認する場合は、目標物の緯度経度をご自身の近くの位置に変更して見てください。



## 実際に現地での動作確認の様子

まず、事前に地図上で位置関係を確認すると
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580547/0f57651c-3168-c181-a6b4-bca312975b2f.png" width=70%>出典：地理院地図

- 赤い○が目標物の地点です。
- 青丸の辺りに立って、スマホでデモページを開いて、AR画像を見ながら目標物に近づいていきます。

近くに行った時のスクリーンショット
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580547/2c636e3b-56e9-c67e-08ef-2574655536e8.png" width=50%>

概ね、ARを見ながら目標物を発見できました。

今回は単純なサンプルでしたが、
- 目標物の赤い箱を、3Dobjectにしたり
- 目標物までの距離を出したり
- 目標物との当たり判定をつけたり
することも可能です。

## まとめ
- かなり少ないコード量で、LocationBaseARの実装ができました。
- ただし、スマホによるGPS測位精度の影響が大きいこともわかりました。

実際の動作確認の際には、マップアプリ等で現在位置、測位精度（悪ければコンパスの校正）を確認してから、
Weｂページを表示しスマホカメラ向けてみることをおすすめします。


参考にさせて頂いたサイト
https://bagelee.com/programming/location-based-ar/

:::note info
明日は@chizutodesignさんによる「MapTilerの地図アイコンをデザインした話」です！お楽しみにー
:::