AR.jsとA-Frameを使ってスマホでWebAR -

AR.jsとA-Frameを使ってスマホでWebAR

2022.07.08

こんにちは。イノベーション本部の野村です。

今回はAR.jsとA-Frameを使ってスマホのブラウザでWebARを試してみました。

はじめに

WebAR用のライブラリであるAR.jsには以下の3つのタイプがあります。

ロケーションベース
マーカートラッキング
イメージトラッキング

「ロケーションベース」はGPSの位置情報を元にオブジェクト表示し、「マーカートラッキング」は
専用のサイトで作ったARマーカーを元にオブジェクトを表示できます。

実利用を考えた場合、ロケーションベースやマーカートラッキングでは利用シーンによって制限が出てきそうですが、
「イメージトラッキング」は画像認識を利用してオブジェクトを表示できるため汎用性も高そうということで、
今回は「イメージトラッキング」を利用したWebARに挑戦してみます。

試した環境

Android 12
Pixcel 3a
Chrome : 102.0.5005.59

やってみる

AR.js DocumentationのGetting started with Image Trackingを参考にやっていきます。

認識画像(NFTマーカー)の作成

まず、認識させたい画像をNFTマーカーとして出力します。
NFTマーカーの作成にはNFT-Marker-Creatorを使います。
（ここで言っているNFTは「Natural Feature Tracking」の略で、巷で流行りの「Non-Fungible Token」ではありませんのであしからず。）

NFT-Marker-CreatorにはWeb版とnode.js版がありますが、今回はnode.js版で作成しました。

サンプルのコードではティラノサウルスの画像を認識して、ティラノサウルスの3DオブジェクトをWebAR上に出現させていましたが、
今回はオリジナルの画像を読み込んで、その上に3Dboxをアニメーション付きで表示するということをやってみたいと思います。

git clone https://github.com/Carnaux/NFT-Marker-Creator.git
npm install

・認識させたい画像をNFT-Marker-Creatorフォルダに配置
・今回は↓の画像を利用

cd NFT-Marker-Creator
node app.js -i dinosaur.png

少し時間がかかりますが完了するとoutputフォルダが作成され
その中に拡張子が.fset、.fset3、.isetという3つのファイルが作成されます。

イメージトラッキングでWebARを行う場合、この認識画像（NFTマーカー）の画素数や複雑さによって
認識精度が変わってくるようです。（より複雑な（=特徴点が多い）方が認識しやすいとのこと）
詳しくはこちらを参考にすると良いです。

また認識に適した画像かどうかを↓のように5段階のConfidence levelで評価してくれます。

Confidence level: [ * * * *- ] 4.82/5 || Entropy: 5.15 || Current max: 5.17 min: 4.6

今回の画像の評価は4/5でしたのでまあまあ良さそうです。
（ログの最初の方に出力されるので処理が完了した後からだと、どこ？ってなりました。。）

コンテンツのレンダリング

次にindex.htmlを作成してサンプルのコードを元に追記していきます。

まずはWebVR用のライブラリのA-Frameとイメージトラッキング用のAR.jsライブラリを読み込ませます。

<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

A-Frameを読み込むことで、タグベースでWebVRの設定が可能になります。

<a-scene> : シーン全体を設定
<a-entity> : オブジェクトの設定（今回はカメラのみ設定）
<a-nft> : 認識対象のNFTマーカーを設定（AR.jsのカスタムタグ）
<a-box> : 3Dboxオブジェクトの設定

その他にもA-Frameのドキュメントを参考にすることで様々なことが可能です。

サーバーへアップ

最後にhtmlとNFTマーカーをサーバーへアップします。
(直接スマホに入れてローカルのNFTマーカーを読み込ませようとすると404エラーとなってローディングが完了しませんでした。)

今回はWebサーバーにはGlitchを利用しました。
プロジェクトを作成してindex.htmlを配置し、Assets直下に.fset、.fset3、.isetの3つのNFTマーカーファイルをアップします。

AssetsにアップされたNFTマーカーをクリックするとURLがコピーできるので
<a-nft>タグのurlプロパティにはコピーしたURLを指定します。

index.htmlの全体は以下になります。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/3.0.0/aframe/build/aframe-ar-nft.js"></script>
    <style>
      .arjs-loader {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    
      .arjs-loader div {
        text-align: center;
        font-size: 1.25em;
        color: white;
      }
    </style>    
  </head>
  <body style="margin : 0px; overflow: hidden;">
    <!-- minimal loader shown until image descriptors are loaded -->
    <div class="arjs-loader">
      <div>Loading, please wait...</div>
    </div>

    <a-scene
      vr-mode-ui="enabled: false;"
      renderer="logarithmicDepthBuffer: true; precision: medium;"
      embedded
      arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
    >
      <!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
      <a-nft
        type="nft"        
        url="GlitchのAssetsのURL/dinosaur"
        smooth="true"
        smoothCount="10"
        smoothTolerance=".01"
        smoothThreshold="5"
      >
        <a-box position="80 80 0" scale="70 70 70" color="tomato" wireframe="true" animation="property: rotation; to: 0 360 0; loop: true; dur: 20000" ></a-box>
      </a-nft>
      <a-entity camera></a-entity>
    </a-scene>

  </body>
</html>

<a-box>タグのanimationプロパティで360度回転のアニメーションを付けています。

完成！

スマホで試してみたものがこちらになります。
（わかりづらいですが、スマホの画面をキャプチャしてます）

↓のQRコードをスマホで読み込んでブラウザで開き、こちらの画像を認識させることで試せます。
（最初のローディングが完了するまで5~10秒程度かかるかもしれません）

まとめ

今回はA-FrameとAR.jsのイメージトラッキングを利用してスマホのブラウザでWebARを試してみました。
マーカー認識やGPSではなく、画像認識によるWebARを利用することでAR広告やAR名刺の他、
様々なビジネスシーンでの応用範囲が広がりそうです！

最後までお読みいただき、ありがとうございました。

TOPに戻る

ENGINEER BLOG