ブラウザだけでARを実現するAR.jsを使ってAR時計を作ってみよう
AR ( Augmented Reality , 拡張現実) といえば、昨年大流行した ポケモンGO でも使われていたり、最新の iOS リリースでAR機能が強化されたりと、最近では話題に事欠きません。 今回は、そのAR機能をブラウザだけで実現できる JavaScript ライブラリのAR.jsを使って簡単なARを作ってみましょう。 AR.jsとは AR.jsは、 WebGL やWebRTCなどの Web標準 の機能のうえに実現されたライブラリで、アプリをインストールすることなく Webブラウザ だけでAR機能を実現することができます。 技術的には、ネイティブ向けのARライブラリである ARToolkit を Emscripten を使って JavaScript に変換するというなかなか豪快な作りになっていますが、使う分にはいたって普通の JavaScript ライブラリとして使用することができます。 スマホ のブラウザ上でも問題ないパフォーマンスで動作するので、いろいろな応用ができそうな可能性を秘めています。 ARには、画像認識を助ける2次元パターンの「ARマーカー」を使う通常のARと、ARマーカーを使わないマー カーレス ARがありますが、現在AR.jsではマー カーレス でない通常のARのみをサポートしているようです。 AR.jsを使ってみよう 今回はそのAR.jsを使って以下のようにARマーカーにデジタル時計をオーバーレイ表示する機能を作ってみます。 なお、ここでは以降の実装にClojureScriptを使いますが、 JavaScript やその他のAltJSの言語でも同じように作ることができます。 AR.jsは JavaScript から使えるいくつかの3Dあるいは VR 向けのライブラリ、 フレームワーク と連携させて使うことができるようになっています。ここではそのなかで、 JavaScript から使える3Dライブラリとして 知名度 の高いThree.jsと合わせて使う方法を見てみます。 AR.jsをThree.jsを合わせて使う場合、機能分担は次のようになります: AR.jsはWebRTCからの入力を基にARマーカーの位置を特定し、マーカーの中心を原点とする座標系を用意してくれます。この座標系は、カメラの位置や角度が変わってもマーカーを追従するよう