JSARToolkitは、FLARToolkit（Flash）に移植され、ビデオ上のARマーカーを追跡するように設計されたJavaScriptライブラリです。 ARToolKitは、マーカーからのデータを3D座標に変換します。それらを使用して、画像または3Dオブジェクトを平らな面にオーバーレイできます。
Ilmari Heikkinen デモ -Remixing RealityでJSARToolkitが動作しているのを見たことがあるでしょう。
Ilmariデモは、Mozillの「 Web O 'Wonder 」の一部であり、 Firefox 4に追加される新しいテクノロジーを紹介するサイトです。
HTML5クリップを調査する
顧客は私たちにタスクを設定しました-オンラインHTML5クリップにJSARToolkitを使用する可能性を評価すること。 （FirefoxとChromeの最新バージョンを使用したユーザーのみを考慮するように依頼されました）
回答したい質問の一部を次に示します。
-遅いコンピューターでは処理は高速ですか？
-同時にいくつのARマーカーを追跡できますか？
-マーカーをどれだけ速く動かせば追跡できなくなりますか？
-カメラがマーカーを追跡できる最大距離は？
これらの質問への回答、ソースコード、デモは以下にあります。
ビデオ録画
Flip Ultra HDを使用してテストビデオを記録しました。 これがプロ用のカメラではないことを考えると、Flip Ultra HDビデオ品質は許容範囲です。 このようなカメラからは何も得られないことがわかっていましたが、テストにはそれで十分でした。 このような低品質カメラの主な問題は、シャッター速度を切り替えることができないことです。
これは、動きが速すぎた場合、ぼやけたARタグについてできることは何もないことを意味しました。 左右に移動すると、マーカーをどれだけ早く失うかに驚いた。
それでも、シャッター速度が速いカメラを使用して明るいスタジオで撮影する場合、判読できないARマークはほとんどありません。
ARマーカーの印刷
JSARToolkitに付属のマーカーをいくつか印刷し、キッチンでテストショットを撮り始めました。 ライブラリに追加された各ビデオが機能することが判明したため、すべてが最初に機能するとは思っていませんでした。
結果のいくつかは高品質ではありませんでしたが、私たちのカメラの品質はプロのものに比べて劣っていたことを繰り返したいと思います。 個々のマーカーに焦点を合わせずにビデオを撮影したため、追跡の精度が向上しました。
VP8 WebMでのビデオの再コーディング
H.264 Mpeg形式でビデオを記録しました。 すべてがHTML5ビデオで機能するには、ビデオをWebMに変換する必要がありました。 私が最初に試したビデオデコーダはFfmpeg2Theoraで、名前から判断すると、WebMでビデオをエンコードすることになっています。 しかし、Ffmpeg2Theoraには問題があることに気付きました。 Linuxでビデオをエンコードすると、Windowsでビデオが再生されない場合があります。
他のエンコーダーをテストした後、Miro Video Converterに決めました。 残念ながら、Miroはいくつかのビデオを処理できませんが、Miroが生成するビデオはすべてのOSおよびブラウザーで動作します。
ラップ作成
再利用できるシンプルなJSARToolkitベースのAPIを作成したかったのです。 Popcorn.jsなど、別のJavaScriptライブラリに接続できるもの。 Ilmariデモで見つけたコードはタスク固有でした。 コードにはコメントがいっぱいではなかったため、何が起こっているのか理解するのに問題がありました。 私は実験しなければなりませんでした。 JSARToolkitのラッパーを作成する簡単な方法を思いつきました。
JSARToolkitラッパーを使用する最初のステップは、トラッカーをインストールすることです。 これを行う方法の例：
// var myTracker = jsartoolkit.tracker({ src : 'my-video.webm', // autoplay : true, // repeat : true, // volume : 0, // target : doc.getElementById('DOMTarget'), // DOM element canvas width : 720, // height : 360, // threshold : 100, // ratio : 0.5, // canvas (1 = 11 ) debug : false // - });
トラッカーが作成されたら、次のステップはマーカーにコンテンツを追加することでした。
静的画像を追加し、次にBlender3Dから3Dオブジェクトをエクスポートしました。
// myTracker.marker(0).image('my-image_01.png'); // Blender3D myTracker.marker(2).model('HTML5_Logo001');
この例では、マーカープロパティを作成した後に更新する方法を示します。
// 0 myTracker.marker(0) .scale(1) .axis(0, 0, 1) .angle(0) .position(0,0,0) ;
JSARToolkit-Wrapperを使用して、より複雑な動作を追加することもできます。 次の例は、マーカープロパティをリアルタイムで更新する方法を示しています。 このコードにより、最初のマーカーがスピンしてパルスを発生させます。
// Marker_0 var interval = global.setInterval( function(){ var date = + new Date(), scl = 1.5 + (Math.sin( date/200 ) * 0.5), axs = Math.cos( date/300 ), posX = Math.sin( date/300 ), posY = Math.cos( date/300 ) ; myTracker.marker(0) .scale(scl) .axis(0, axs, 0) .position(posY, posX, 0) .angle(date / 230) ; }, 20);
ビデオトラッカーにアクセスするには、次のようにします。
// currentTime myTracker.video.currentTime = 1;
質問への回答
遅いコンピューターでは処理は高速ですか？
ビデオ処理とマーカーの位置決めは非常に高速です。 1マーカーと100マーカーの追跡の違いにほとんど気付きませんでした。 主な負担は、ビデオにコンテンツをオーバーレイすることです。
一度にいくつのARマーカーを追跡できますか？
問題なく100個のマーカーを同時に追跡しました。
マーカーをどれだけ速く動かせば、追跡できなくなりますか？
それはすべて、カメラと撮影方法に依存します。 スポーツの録画に使用されるような、シャッタースピードの速いカメラを使用すると、最小限のぼやけたマーカーが（もしあれば）取得され、非常によく追跡されます。
カメラがマーカーを追跡できる最大距離はどれくらいですか？
繰り返しますが、それはすべていくつかの要因に依存します-カメラ/オブジェクトの移動速度と照明。 明るい部屋（プロのスタジオではありません）。 私は720pの解像度でレンズの方向に10メートルからマーカーを追跡することができました。 カメラの解像度が高いほど、追跡マーカーの品質が高くなります。 注目に値することの1つは、1080の解像度でビデオを撮影し、追跡結果をキャッシュして、クライアント側の処理数を削減できることです。 何かがうまくトラッキングされていない場合は比率をスピンし、フレームが不十分に点灯している場合はしきい値をスピンできます。
おわりに
長所
-実装が簡単
-最適な追跡アルゴリズム、プロセッサをロードしません
-少なくとも100個のマーカーを追跡できます
-Blender3Dから直接エクスポートできます
-写真、ビデオ、3Dオブジェクトなど、あらゆるコンテンツをオーバーレイできます
短所
-ソースライブラリコードのグローバル変数が多すぎる
-Blender3Dからのエクスポートを少し強化する必要があります
-複数のビデオの同時処理はサポートされていません
-getElementById（）への高価な呼び出しが多すぎます
このライブラリを本番環境で使用する場合、または大きなライブラリの一部にする場合は、多くの作業を行う必要があります。 しかし、膨大な数のテストと実験の後、私はこのコードが驚くほど機能すると言うでしょう！
例、テストおよびリンク
JSARToolkit-Wrapperデモ
JSARToolkitビデオテスト
JSARToolkitマーカー画像
GithubのJSARToolkit-Wrapper
表示するには、Firefox 4またはChromeの最新バージョンが必要です。
翻訳者から
残念ながら、著者はまだデモを投稿していません。 翻訳で提示される形式でのARの使用はそれほど広くはありませんが、 HTML5 Device Element （ 別の記事 ）の出現により、すべてが変わる可能性があります。
ブラウザですぐにAR;）