AR.jsバージョン3がリリース!イメージトラッキング・ロケーションベースに対応  | 技術ブログ | 株式会社OnePlanet 読み込まれました

2023/10/17

AR.jsバージョン3がリリース!イメージトラッキング・ロケーションベースに対応

AR.jsのバージョン3がリリースされ、イメージトラッキングとロケーションベースに対応されました。

スクリーンショット 2020-04-18 17.19.26

新しく追加された機能を紹介していきます。

イメージトラッキング

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アプリを開発できるプラットフォームを開発中とのことです。

画像1

クラウド上で、
・マーカーベース
・画像トラッキングベース
・ロケーションベース
のWEB ARアプリをノンコードで開発が可能です。

シンプルなWEB ARアプリを作る際はとても便利なツールになりそうです。

XR エンジニア

Ivan Stephanus

複数のスタートアップでフルスタックエンジニアとして経験を積む。「THE Global Mobile Games Conference」ブロックチェーンゲーム部門で入賞。2019年にOnePlanetに入社。最先端のAR技術を活用した新しい顧客体験の創造に挑んでいる。

View More

お問い合わせ・ご相談

ARでやってみたいことやお困りごとなど
お気軽にお問い合わせください。

お問い合わせ