A-Frameを使って位置情報ベースのARを試す

ARというとマーカーを読み込んでオブジェクトを表示したり、位置情報を使って情報を表示するといったものが知られています。カメラを使って周りの風景を読み込み、そこにオブジェクトを投影することで現実とデジタル情報を混在させるのが特徴です。

そうしたARをMonacaアプリで実現する方法はいくつかありますが、今回はオープンソースで利用できるA-Frameを紹介します。また、最近のアップデートで対応した位置情報ベースのARを行ってみます。

注意点

A-FrameのARではWebRTCを利用します。そのためスマートフォンアプリではセキュリティ制限に引っかかる可能性があります。そこで今回はPWA（Web）アプリとして開発しています。

A-Frameとは

A-FrameはオープンソースのARライブラリで、JavaScriptで実装されています。多くのARライブラリがネイティブアプリ向けだったり、Cordovaプラグインを利用するのに対して、A-FrameはJavaScriptだけで実装します。

A-Frameでは専用のHTMLタグを使ってARコンテンツを表示します。表示するだけであればHTMLだけで実現できるので、とても手軽です。そしてJavaScriptとの親和性が高いので、タップなどのイベントに合わせてARコンテンツを表示できます。

A-Frameは以下のAR表示に対応しています。

マーカー
マーカーレス
位置情報

最新のアップデートで対応したのが位置情報ベースのARになります。スマートフォンの位置情報を使って、あらかじめ登録してあるARコンテンツを表示する仕組みです。

A-Frameのインストール

まずA-Frameをインストールします。これは指定されたHTMLタグを使うのが早いようです。

<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">

A-Frameを実行する

まずA-Frameを定義します。ARの設定、コンテンツはこの中に定義していきます。

<a-scene>
</a-scene>

ARの準備

まずカメラを呼び出すための <a-camera /> を用意します。このタグでARコンテンツを表示するカメラを起動します。

<a-camera gps-camera rotation-reader></a-camera>

主なオプションは次の通りです。

プロパティ	説明	デフォルト
alert	GPS信号が検出限界以下になった時に通知するかどうか	false
positionMinAccuracy	GPS信号の最小値	100
minDistance	この値以内のオブジェクトが表示されます。正の数字を指定します。	0 (0は無効)
maxDistance	この値以上の距離にあるオブジェクトは表示されません。正の数字を指定します。	0 (0は無効)
simulateLatitude	カメラの緯度をシミュレーションします（テスト用）	0
simulateLongitude	カメラの経度をシミュレーションします（テスト用）	0
simulateAltitude	カメラの高度をシミュレーションします（テスト用）	0

たとえば距離を大きく設定すれば、遠くにあるARコンテンツでも表示できます。

表示するコンテンツを用意する

今回は簡易的にARコンテンツとしてボックスを表示してみます。A-Frameを使えば他にも多彩なコンテンツの表示が可能です。イベントも付けられるので、ボタンを押したらYouTube動画を再生されるような仕組みも作れるでしょう。当たり前ですが、コンテンツには表示する位置情報を要素として持たせておきます。また、表示する高さなどをpositionとして定義します。

<a-box
  material="color: yellow"
  gps-entity-place="latitude: 35.0; longitude: 139.50"
  position="50 40 0"
/>

自分に近いところにあるオブジェクトであれば、カメラを通して表示されます。

JavaScriptでオブジェクトを追加する

A-FrameはJavaScriptで作られていますので、コンテンツの操作もJavaScriptから行えます。以下はJavaScriptからboxを追加するサンプルです。

document.addEventListener('DOMContentLoaded', e => {
  const ele = document.createElement('a-box');
  ele.setAttribute('material', 'color: blue');
  ele.setAttribute('gps-entity-place', 'latitude: 35.0; longitude: 139.0');
  ele.setAttribute('position', '50 42 0');
  document.querySelector('a-scene').appendChild(ele);
})

表示にも反映されます。