2023/10/17
AR.jsバージョン3がリリース!イメージトラッキング・ロケーションベースに対応
AR.jsのバージョン3がリリースされ、イメージトラッキングとロケーションベースに対応されました。
新しく追加された機能を紹介していきます。
イメージトラッキング
AR.jsの画像トラッキングはNFT(Natural Feature Tracking)が使用されています。
画像トラッキングを使用する際はNFT-Marker-Creatorを使用して、マーカーを生成します。
https://github.com/AR-js-org/NFT-Marker-Creator
ドキュメントはこちら
https://github.com/Carnaux/NFT-Marker-Creator/wiki/Creating-good-marke
画像の認識後は、従来のマーカーベースと同様で、3Dモデルを表示するか、トリガーにして次のアクションを呼び出すことが可能です。
ロケーションベース
ロケーションベースARでは、GPSの座標を使用して、3Dオブジェクトなどを配置することができます。
ツアーやガイド、宝探しゲームなどに応用することが可能です。
こちらがサンプルコードになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Location-based AR.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-text
value="This content will always face you."
look-at="[gps-camera]"
scale="50 50 50"
gps-entity-place="latitude: <add-your-latitude>; longitude: <add-your-longitude>;"
></a-text>
<a-camera gps-camera rotation-reader> </a-camera>
</a-scene>
</body>
</html>
gps-entity-placeで座標を設定します。
scaleでオブジェクトの大きさを設定することも可能です。
AR.js Studioの開発
また、AR.jsはクラウド場でWEB ARアプリを開発できるプラットフォームを開発中とのことです。
クラウド上で、
・マーカーベース
・画像トラッキングベース
・ロケーションベース
のWEB ARアプリをノンコードで開発が可能です。
シンプルなWEB ARアプリを作る際はとても便利なツールになりそうです。
XR エンジニア
Ivan Stephanus
複数のスタートアップでフルスタックエンジニアとして経験を積む。「THE Global Mobile Games Conference」ブロックチェーンゲーム部門で入賞。2019年にOnePlanetに入社。最先端のAR技術を活用した新しい顧客体験の創造に挑んでいる。
View More