これまで、ARマーカーは白黒の画像で作成してきました。
しかし、 こちらのサイト でデフォルトで表示されている画像は青が入っていて、ずーっと気になってました。
というのも、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を制作しつつ、グレースケール化したマーカー、白黒化したマーカーを認識するのか試してみます。
グレースケール
白黒(二階調)
DEMO
結果
グレースケール化しても白黒化しても認識されました。
今回のマーカーはグレースケールと白黒で、そこまで差がなかったため、もうちょっと複雑なマーカーで試してみます。
カラー
グレースケール
白黒(二階調)
DEMO
結果
ここまでくると、Image Trackingを使った方が良いと思うぐらいのマーカーを用意してみましたが、カラーとグレースケールでは安定して認識されました。
白黒ではやや認識率が落ちましたが、認識されるといえばさらるという感じではあり、ぎりぎり認識されるものの、安定しない印象でした。
結論
AR.jsでカラー画像をマーカーにした際の挙動としては、マーカーをモノクロ化、白黒化しても認識されるようです。
ただし、白黒化すると認識率が落ちるようでした。