【WebAR】Mind-ARを試してみる
概要
こんにちは、株式会社palanのxR事業部でWebAR/VRの開発などしていますdamiと申します。
この記事ではWebAR開発のライブラリ 「Mind-AR」 についてをまとめていきます。
Mind-ARとは
Mind-ARは2021年10月に公開されたWebAR開発用のOSSです。
WebARのOSSといえばAR.jsが代表的ですが、そのAR.jsによっても選択肢のひとつとしてMind-ARが推奨されています。
30/12/21 Update: There is now also a brand new OSS Web AR JS library around, called MindAR. If you need a great Image tracking feature (also multiple image tracking) and Face tracking, go check it out!
ref: https://github.com/AR-js-org/AR.js#arjs---augmented-reality-on-the-web
できること
Mind-ARでは主に画像認識（イメージトラッキング） と 顔認識（フェイストラッキング） のARを開発することができます。
1. 画像認識
画像認識では、マーカーにしたい任意の画像をマーカー用の.mindファイルへ変換し、用いることで、マーカー認識＆オブジェクトの表示が実現できます。
また、Mind-ARの画像認識は マルチマーカー（複数のマーカーファイルの認識仕分け） や マルチトラック（複数マーカーの同時認識） にも対応しています。（詳しくは後述）
2. 顔認識
Mind-ARではAR.jsの対応していない顔認識にも対応しています。
検出システムにはGoogleとTensorflow.jsが共同開発したfaceMeshが使用されているようで、認識精度はかなりいいです。
faceMeshを開発にそのまま使用しようとすると、3Dモデル配置位置の調整を自分でしなければならず大変ですが、Mind-ARならA-Frameをインターフェースとして簡単にfacemeshを扱うことができます。
実装してみる
1. 画像認識
画像認識の開発フローはこんな感じです。
- マーカーにしたい画像を
.mindファイルに変換 - コーディング
1-1. マーカーにしたい画像を.mindファイルに変換
まずはマーカーファイルを準備しましょう。
変換はこちらの専用コンパイラにアップすることで行えます。
マーカーにしたい画像を「Drop files here to upload」の枠の中にドラッグ&ドロップしてアップロードします。
画像をアップできたら緑の「Start」ボタンを選択します。
※複数マーカーのARを開発したい場合は、この時点で複数の画像を全てドラッグ&ドロップしましょう
マーカー変換が完了すると以下のような画面になります。
ここでは画像の特徴量を確認できます。
画像の特徴量についてはこのあたりを確認しましょう！
- 赤い丸の数が多いか
- 赤い丸の分布が全体に散らばっているか
丸の数が少なかったり、分布が固まっている画像の場合、認識できない、安定しない、認識の向きがおかしいなどの体験の悪化に繋がります。
マーカーに適していないなと思った時は画像を変更するなどしましょう。
また、この画面にはScaleというオプションが用意されています。
こちらは（ドキュメントに詳細の記載がないのですが）おそらくARマーカーが最終的にどのサイズで掲示されるか、に応じて調整するオプションだと思われます。
多分AR.jsのマーカーファイルコンパイラでいう「Image size」オプションのような…
「なんだかマーカーの認識が安定しない…」というときにはこちらのScaleを変更して出力すると安定する場合もありましたので、最も安定するScaleの値を探してみるのが良さそうです。
さて、特徴量の確認等が終わったら画像の下にある「Download compiled」を選択しましょう。
すると.mindファイルがダウンロードされます。
1-2. コーディング
マーカーファイルが用意できたらコーディングに移りましょう。
コードはこんな感じです。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image-aframe.prod.js"></script>
</head>
<body>
<!-- ※1 a-scene に mindar-image 属性を追加しマーカーファイル（.mindファイル）のパスを記載-->
<a-scene mindar-image="imageTargetSrc: ./target.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<!-- ※2 mindar-image-target 属性をつけることでマーカーと対応するentityを作れる -->
<a-entity mindar-image-target="targetIndex: 0">
<a-box></a-box>
</a-entity>
</a-scene>
</body>
</html>
▲参考: https://hiukim.github.io/mind-ar-js-doc/quick-start/overview
※1:
マーカーファイルは<a-scene>内のmindar-image="imageTargetSrc:の箇所にパスを入れます。
※2:
<a-entity>を用意して、属性にmindar-image-target="targetIndex: 0"を追加することでマーカーに対応したentityを作ることができます。
マーカーが認識時に表示したいオブジェクトは、このentityの子要素にする、という感じですね。
複数マーカーの場合は targetIndex: 0のindexを対応させたいマーカーの順番に合わせて1, 2..と変更します。
マーカー画像とindex番号の対応関係は、マーカーファイルを作成するときにアップロードした順番でして、後から確認する方法はない（気がする）ので注意が必要です。
イベント
画像認識ARではマーカー検出を始め、細かくイベントが取得できるようになっています。
こちらで確認してください。
（結構多いので、別途記事にできたらしたいところ。。）
マルチマーカー、マルチトラックについて
Mind-ARではマルチマーカー（複数のマーカーファイルの認識仕分け） 、 マルチトラック（複数マーカーの同時認識） に対応しています。
ドキュメントにはそれぞれ特に上限の記載はありませんが、やはり多いとそれだけ負荷が重くなるので注意が必要です。
筆者が試したところ、マルチマーカー（同時認識数は1とする）では、最大20個まで登録しても問題なく認識の仕分けができました。
しかし数が多くなる分、最初のローディング時間が長くなってしまったため、多くても5個を上限とするのがいいのではないでしょうか。
（※マーカー画像やデータサイズなどによっても変動しますので、あくまで参考程度に…）
マルチトラックに関しても、同時認識数が多くなるほど、レンダリングが乱れる、時間がかかる、固まる、などの現象が見られましたので
1個を基本とし、多くても2個までとするのが個人的にはおすすめです。
2. 顔認識
顔認識は以下のようなコードで簡単に実装できます。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-face.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-face-aframe.prod.js"></script>
</head>
<body>
<!-- a-scene タグに mindar-face 属性を追加 -->
<a-scene mindar-face embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-camera active="false" position="0 0 0"></a-camera>
<!-- ※1 顔起点に表示させたいオブジェクトに mindar-face-target 属性を追加。anchorIndexも指定 -->
<a-entity mindar-face-target="anchorIndex: 1">
<a-sphere color="green" radius="0.1"></a-sphere>
</a-entity>
</a-scene>
</body>
</html>
▲引用: https://hiukim.github.io/mind-ar-js-doc/face-tracking-quick-start/webpage
アンカーポイント
上述のコードの※1に指定しているanchorIndexについて。
顔認識では顔に468点用意されたアンカーポイントに対してオブジェクトを固定することができます。
例えば↑のサンプルコードのアンカーインデックス（anchorIndex）の1番は、鼻先の位置に対応しているので、鼻先に3Dモデルが貼りつくという感じです。
アンカーポイントの番号と対応表について、mind-ARのドキュメントに記載のあるリンクは404になってしまっているのですが、googleがARCore用に出しているドキュメントのこちらと同じ配列ですので参考にできます。
オクルーダー
顔認識あるあると言えば、3Dモデルを顔に配置したら、本来顔の向こう側に回り込んで欲しいところが顔を貫通してしまうように見える現象…。
▲画像引用
Mind-ARでは、顔の回り込みを擬似的にオクルージョンできるよう、専用の「オクルーダー」を用意してくれています。
使用方法はa-assetsにcdnで追加し、a-gltf-modelで以下のように配置するだけ。
顔を横に向けたときに、オブジェクトが貫通して見えてしまう…というときは追加してみましょう。
<a-assets>
<a-asset-item id="headModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/face-tracking/assets/sparkar/headOccluder.glb"></a-asset-item>
</a-assets>
...
<a-entity mindar-face-target="anchorIndex: 168">
<a-gltf-model mindar-face-occluder position="0 -0.3 0.15"rotation="0 0 0" scale="0.065 0.065 0.065" src="#headModel"></a-gltf-model>
</a-entity>
イベント
顔認識ARでも画像認識と同じく、いくつかイベントが取得できるようになっています。
Three.js/Reactとの併用
Mind-ARはThree.jsベースでの開発／React内で使用することも可能です。
▼Three.js でのイメージトラッキング
追記： 2022/12/28 記事にしました！
▼Three.js での顔認識
▼React
関連リンク
▼ Mind-AR github ▼ Mind-AR ドキュメント
Discussion