開発トピック

【AR.js】WebARをAR.jsで実装する

今回はWebAR開発で使われる代表的なOSS「AR.js」について紹介していこうと思います。
AR.jsを触ったことがないけどどんなことができるか知りたい、実際に使ってみたい、という方におすすめです。

・AR.jsとは
・AR.jsでできること
・AR.jsで開発する

AR.jsとは

AR.jsは、WebAR開発のための代表的なOSS（オープンソースソフトウェア）のひとつです。
無料で使うことができ、簡単なコードでWebARを実装することができます。

元々はJerome Etienne氏という方の個人のリポジトリでスタートしたAR.jsですが、2020年には新しい管理者Nicolò Carpignoli氏がドキュメントやツールを整備し、AR.js v3.0をリリースして再スタートを切りました。
こちらの記事ではAR.js v3.0から加わった新しいツールや機能のご紹介もしていきます。

AR.js org
AR.js github

AR.jsでできること

AR.jsにはできることが幅広くあります。2020年8月時点でできることをご紹介します。

1. Marker Based
2. Image Tracking
3. Location Based
4. AR.js Studio

1. Marker Based

AR.jsの代表的な機能は、このマーカーベースARが簡単にできることです。

マーカーベースARとは、下のような特徴のある画像をマーカーとしてそこからの相対距離にARオブジェクトを表示するものです。

マーカーの例
https://twitter.com/ARjs_Library/status/1280140186928779264

AR.jsの「マーカーベースAR」で使用されるのは上の画像のように黒く太い線で囲まれたマーカーです。黒く太い線があることでマーカー検出をしやすくしており、その結果安定したARが実現できます。

v3.0より新しく、黒い線に囲まれていない任意の画像をマーカーに使うことのできる「Image Tracking」という機能もリリースされましたので次の項でご紹介します。

https://webar-lab.palanar.com/column/marker/

2. Image Tracking

イメージトラッキングとは、前述の黒い太線付きのマーカーとは異なり任意の画像をマーカーとすることができるARです。

例えば写真や企業ロゴをマーカーとし、そこからの相対距離にARオブジェクトを表示させることができます。

https://twitter.com/sarah_ridgley/status/1260683533707862022

上のTwitter動画では、黒い線のないイラストがマーカーに使われているのが分かります。

AR.jsのImage Trackingはまだそこまで安定性が高くなく、オブジェクト表示までに時間がかかったり、ブレてしまったりなど多少しますが黒線のマーカーARよりも見栄えが良く自由度も高いためこれからの進展に期待の高まる領域です。

https://webar-lab.palanar.com/developer/%e3%80%90ar-js-v3-0%e3%80%91image-tracking%ef%bc%88nft%ef%bc%89%e3%81%ae%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%81%9f/

3. Location Based

AR.jsのWebARは画像マーカーのみならず、ロケーションベース（GPSベース）でオブジェクトを表示することもできます。
筆者が試してみたところ、現在地の経度・緯度を入れて目の前に出すということは難しく、誤差が出て遠くの方に小さくオブジェクトが表示されるという結果でした。
誤差はでるものの、使い方次第では魅力的なARが作れるかもしれません。

AR.jsのメインコントリビューターが記事をmediumで記事を書いていますので、気になる方はこの記事を参考にぜひ触ってみてください。

https://medium.com/chialab-open-source/location-based-gps-augmented-reality-on-the-web-7a540c515b3c

4. AR.js Studio

AR.js Studioはv3.0で新たにリリースされた、コードを書かずにWebARを作ることのできるサービスです。2020年8月現在ではImage TrackingとLocation Based ARを作ることができます。
AR.js Studioで作ったコンテンツはgithubにアップロードするかzipで直接ダウンロードすることができるため、さくっとAR.jsの機能を試したい方におすすめです。

AR.js Studio

AR.jsで開発する

AR.jsの開発には前述のAR.js Studioを使うなどいくつか方法がありますが、この記事では基本的な黒い太線のARマーカーを使ったマーカーベースのARの開発方法をご紹介します。

ARマーカーを用意する

マーカー例

まずは上の例のように線が周りについたARマーカーを作成します。
こちらのマーカーは、線で囲まれた真ん中の部分（「Hiro」という文字のある部分）はお好きな画像で作ることができます。

しかし画像によっては認識しづらくなる場合があるため、濃淡のコントラストがハッキリある画像、解像度の高い画像（ぼやけてない）を使うようにしましょう。
詳しい解説はAR.jsドキュメントのMarker Basedのページをご覧ください。

今回ARマーカーを作るためにこちらのAR.js Marker Trainingを使用します。

https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

上のURLにアクセスして、左の「UPLOAD」ボタンを選択しお好きな画像を選択します。

またオプションとして「UPLOAD」ボタンの下にあるPattern RatioとImage sizeでそれぞれ線の太さと画像のサイズを調節できます。

筆者はサンプルで以下のような画像を入れてみました。

完成したら画面中央にある「DOWNLOAD MARKER」を選択してpattデータをダウンロードしましょう。
また、下の「DOWNLOAD IMAGE」を選択するとマーカーのpngデータがダウンロードできます。ARを試す際ディスプレイに表示したり、また印刷する等に使用できますので合わせてダウンロードしておきましょう。

コードを書く

htmlファイルを用意して中身を書いていきます。

<!DOCTYPE html>
<html>
  <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  <body style="margin: 0px; overflow: hidden;">
    <a-scene embedded arjs>
      <a-marker type="pattern" url="pattern-kuma.patt">
        <a-box position="0 -1 0" scale="1 1 1" color="grey"></a-box>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

たったこの13行で基本的なARの完成です。

<a-marker>のurl=""部分に先ほどダウンロードしたpattファイルのパスを入れましょう。
また、マーカーを読み込んだ際に表示するオブジェクトは<a-marker>の子要素として入れます。今回の場合は<a-box>を表示させています。

これを実際に動かしてみるとこんな感じ

無事マーカーの上にboxが表示されました！

 

まとめ

AR.jsはWebARを簡単に実装できる代表的なライブラリです。
最近は「8th Wall Web」など企業の提供する有料ライブラリもWebAR開発に使われますが、AR.jsは世界中誰でも利用できるOSSとしてWebARを民主化してきました。
これからの進展にも期待が高まるライブラリです。

開発者ではなくても手の出しやすい手軽さなので、ぜひ一度使ってみてはいかがでしょうか。