AR.js

AR.jsは、WebAR開発のための代表的なOSS(オープンソースソフトウェア)のひとつです。

marker-based AR

マーカーベースARはAR.jsの代表的な機能でとても簡単にできます。 決められたマーカーにカメラを向けるとオブジェクトを表示する」よう簡単に設定することができます。
黒く太い線があることでマーカー検出をしやすくしており、その結果安定したARが実現できます。

作ったプログラムの映像

こちらがマーカーベースのサンプルになります

またはこちらから


【利用方法】
1.上記のQRコードを利用してAR用のWEBページにアクセス
2.ページを開くと表示されるポップアップでカメラの利用を「許可」する
3.そのままカメラを上のQRコードに向けるとオブジェクトが表示される


location-based AR

Location Based AR(ロケーションベース型AR)とはGPSなどの位置情報に基づいて、特定の位置にARコンテンツを表示させるARです。
例えば地図アプリのナビゲーションで目的地の方向や位置を示すのに使われてたりします。

実装に向いてる環境・条件

実装に向いてる環境・条件

作ったプログラムの映像

こちらがロケーションベースのサンプルになります


またはこちらから


【利用方法】
1.上記のQRコードを利用してAR用のWEBページにアクセス
2.ページを開くと表示されるポップアップでカメラとGPSの利用を「許可」する
3.そのままカメラをあらかじめ設定した位置に向けるとオブジェクトが表示される

※うまくいかない場合 →設定→ 位置情報サービス → Safariなどの検索ツールに位置情報を常にオンにしてみてください

image-tracking AR

ニャンコ先生1 ニャンコ先生3

イメージトラッキング

【問題点】
どこが中心が設定されているかわからないため、potisionの設定大変
サイトに画像を渡す際、物体が認識しやすいものかの判断が必要、画像となるべく同じ状況にしないとうま認識されない
サイトに渡す画像が大きすぎるとntf画像が返されないことが多い
似た物体で試した結果、画像はしっかり区別したがリアルタイムで認識した際、似た違う物体も認識してしまうことがあった。(サイトに渡した画像が悪かったのかも)
画像が大きいまま無理やりしてしまうと起動までに時間がかかる