みかづきブログ・カスタム

基本的にはちょちょいのほいです。

AR.jsでマーカーをカラーにした際の挙動を確認する 🎨

これまで、ARマーカーは白黒の画像で作成してきました。
しかし、 こちらのサイト でデフォルトで表示されている画像は青が入っていて、ずーっと気になってました。

jeromeetienne.github.io

というのも、pattern-marker.pattをテキストエディタで開いてみると、

222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 187  96 179 222 218  96  96  96 194 222 222 222 222 222 222
220 171 102 168 218 218 116 202 137 194 222 222 224 222 222 222
210  94 136 121 202 218 102 119  99 196 222 222 224 223 224 222
209 111 161 116 143 218 120 197 129 197 222 222 224 222 223 222
211 194 222 198 179 221 187 222 196 206 222 222 224 222 223 222
221 222 222 222 221 222 221 222 221 221 222 225 224 222 222 222

※ 一部抜粋

という具合で、色情報が含まれているようには見えないからです。
222という値を見るに、グレースケール化してから認識しているように見えます。
そこで、こちらのカラー画像のマーカーを認識するウェブARを制作しつつ、グレースケール化したマーカー、白黒化したマーカーを認識するのか試してみます。

グレースケール


白黒(二階調)


結果

グレースケール化しても白黒化しても認識されました。
今回のマーカーはグレースケールと白黒で、そこまで差がなかったため、もうちょっと複雑なマーカーで試してみます。

カラー


グレースケール


白黒(二階調)


結果

ここまでくると、Image Trackingを使った方が良いと思うぐらいのマーカーを用意してみましたが、カラーとグレースケールでは安定して認識されました。
白黒ではやや認識率が落ちましたが、認識されるといえばさらるという感じではあり、ぎりぎり認識されるものの、安定しない印象でした。

結論

AR.jsでカラー画像をマーカーにした際の挙動としては、マーカーをモノクロ化、白黒化しても認識されるようです。
ただし、白黒化すると認識率が落ちるようでした。