エイブリッジでは、AR、VRのアプリ開発を行っています。
今回はWebブラウザ上でARを動かすことができるライブラリ「AR.js」と「ARマーカー」について説明させていただきます。
AR.jsの機能としては、大きく分けて以下3つの事が可能です。
Image Tracking(画像トラッキング)
カメラの映像内にマーカー・もしくが映ると、その情報を元にARコンテンツを表示する事ができる。
Marker Tracking(マーカートラッキング)
カメラの映像内に対象画像が映ると、その情報を元にARコンテンツを表示する事ができる。
Location Based AR(位置情報ベースAR)
スマートフォンの位置情報（GPSをベースに）を元にARコンテンツを表示する事ができる。
上記機能をメインにWebブラウザ上で必要に沿ったARコンテンツを表示することができます。
注意事項としましては関連しているモジュール上、HTTPSのアドレスがあるサーバーにプログラムを配置しないと動作しません。
ライブラリの詳細コードに関しては、以下のURLリンクを参考にしていただければと思います。
https://ar-js-org.github.io/AR.js-Docs/
■■■■■
次にARマーカーの話です。
ARマーカーの良し悪しでユーザーの満足度に大きく左右してきます。
ImageTrackingとMaker Trackingですが、違いとしてはトラッキング（追跡）する対象が違います。
- ImageTracking=写真やイラストなどの画像をトラッキングする。
- MarkerTracking=QRコードなどに似た、ルールが決まっているマーカーを元にトラッキングする。
ImageTrackingで使用する画像は、基本的にはなんでも良いのですが画像によってトラッキングの質が変わってきます。
- トラッキングの質が良い = コンテンツがスムーズに表示され、ユーザーのストレスが低い
- トラッキングの質が悪い = コンテンツがぐらぐらと表示され、ユーザーのストレスが高い
トラッキングの質をよくするためには、以下の条件をクリアした画像をマーカーに指定する必要があります。
- 画像の複雑さ
- 画像の解像度
●画像の複雑さ
画像の複雑さですが、ARでは画像を元に、画像の位置や姿勢（向き）を検出します。
したがって画像の情報量が多ければ多いほど良い画像とされます。
なぜ画像の情報量が多い方がいいかと言うと以下のことからかと思われます。
- カメラに写っているほかの情報と比較しやすくするため
- 上下左右などの画像自体の姿勢を推定しやすくするため
●画像の解像度
画像の解像度ですが、「画像の複雑さ」と起因しますがカメラに写った際に情報を取り込みやすくなればなるほど、トラッキングの質が上がるからです。
解像度が低すぎると、カメラの映像から画像を検出できませんし、トラッキングも安定しません。
向いている画像
向いていない画像
OpenCVの公式ページを翻訳されている方のURLがありましたので、参考に添付させていただきます。
http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/py_tutorials/py_feature2d/py_matcher/py_matcher.html#matcher