１．ARで遠くのランドマークをアイコンで表示したい

ARで遠くのランドマークをスマホに表示させたいとの希望がありました。
アクティブなユーザー数は、月100以下を想定していたので、有料のライブラリは無理だなぁってことで、「AR.js」で作成することになりました。

AR.jsは、Marker Tracking、Image Tracking、Location Basedに対応している優れもので、htmlに数行のコードでよしなにARを実装してくれます。

Location Based ARは、GPSの位置情報に基づいて指定の位置にコンテンツを表示させる仕組みです。今回はAR.jsのLocation Based とA-Frameバージョンを使用することにしました。

希望としては、こんな感じです。
実際には、ピンの代わりにランドマークのアイコン等を表示させます。

２．サンプルコードで検証

AR.jsのドキュメントに記載されているサンプルを少し変えて試します。
サンプルでは、文字を表示しますが、今回は赤いBOXを表示させてみます。
場所は北海道、札幌の時計台にしました。

コードは以下です。
非常に簡単ですね。
<a-scene>の中で<a-box>でBOXを表示させます。
今回は、コードの詳細解説は本筋でないのでいたしません🙏。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>GeoAR.js demo</title>
    <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>
  </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.062533; longitude: 141.353638;"
        scale="50 50 50"
      ></a-box>

      <a-camera gps-camera rotation-reader></a-camera>
    </a-scene>
  </body>
</html>

あれ？全然表示されないやん😫

なぜかBOXは表示されません。
小さすぎるのかな？と思いscaleを大きくしても変わりません。
色々と試行錯誤するも改善されません。

自分のiPhoneが壊れてるのか？などど時間を費やし・・・・。
・・・・・・
本家のissuesにありました。

おおよそ1km以上遠方のオブジェクトは表示されない。

えぇ? マジですか？

洒落にならないんですけど。

３．AR.jsのLocation Basedは、1km以上離れたオブジェクトは表示されない！

困りました。
そしてドキュメントをよく読むと、こんな記述が。
引用元：AR.js Documentation
Viewing every distant object
If your location-based AR content is distant from the user (around 1km or more), it is recommended to use the new arjs-webcam-texture component (introduced in AR.js 3.2.0), which uses a THREE.js texture to stream the camera feed and allows distant content to be viewed. This component is automatically injected if the videoTexture parameter of the arjs system is set to true and the sourceType is webcam. For example (code snippet only):

おい、おい、おいおい、解決策があるじゃぁないか！
良かったぁ。

これを読むと

　　<a-scene
      vr-mode-ui="enabled: false"
      embedded
      arjs="sourceType: webcam; videoTexture: true; debugUIEnabled: false;"
    >

videoTexture: true;を設定すれば大丈夫だそうです。

😆設定して、同じコードで試します。

４．確かにオブジェクトは表示されたけど、iPhoneだと画面がフリーズ🥶。

オブジェクトは、確かに表示されましたけど、カメラが起動した時の景色でフリーズします。
ここでのフリーズとは画面のビューが、どちらにカメラを向けての最初の画面から変わらない状態を指します。

これはARコンテンツをビデオ画面にオーバーレイで表示させてるような感じかと。
ログを見るとiOS14だとビデオのオートプレイはユーザーの明示的な許可が必要なため、パーミッションではじかれて、画面が最初の景色で固まってしまうのでは？と推測。

もうこれじゃぁ、ARでも何でもないよね。

詰みましたよね。これ。

さてどうしよう。

５．邪道だけれど、全てのオブジェクトを1km以内に表示させればいいのでは。

この方向性でいくしかないと決意。

次回は、指定地点の方角と距離を求めて、1km以内に再配置させようと思います。
③の自分の位置から、①の実際位置との方角を求めて、表示可能な位置②に再配置させる計画です。

ひょっとしたら他に良い解決策があるのかもしれないけど。
次回は、位置を再計算させて調整するプランを書いていきます。

続き。
AR.jsのLocation Basedで遠くにモデルを無理やり表示させた話。