LocationBaseARを16行で動かしてみる #AR

これは 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の地図アイコンをデザインした話」です！お楽しみにー