WebARを試してみた(AR.js) #HTML

はじめに

今回はWebARを使ってみようと思います。
ライブラリはAR.jsを使用します。

AR(WebAR)とは

wikiを引用

拡張現実（かくちょうげんじつ、英: Augmented Reality、オーグメンテッド・リアリティ、AR）とは、人が知覚する現実環境をコンピュータにより拡張する技術、およびコンピュータにより拡張された現実環境そのものを指す言葉。

スマホなどのデバイスのカメラを通して映像を認識し、その映像にオブジェクトやテキストを表示する技術のこと。有名なところだとポケモンGOがこの技術を使っています。

これをアプリケーションではなくウェブで行う技術のことをWebARと言います。

大きく分けるとARには、GPSなどの位置情報に紐付けて情報を表示するロケーションベース型と、画像認識や空間認識に関する技術を使用するビジョンベース型の2タイプが存在します。

ロケーションベース
- GPSなどで取得した位置情報に紐付けて情報を表示する手法を指す。
ビジョンベース
- マーカー型
  - マーカーと呼ばれる決まった形の図形を端末のカメラに認識させることで情報を表示させる。
  - マーカーに採用される図形は正方形で、枠線が黒。
- マーカーレス型
  - マーカーレス型ARでは、現在撮影している実空間の机や窓の角といったコーナー点や特徴点をマーカー型ARの特徴点の代わりに用いて、その地形に合うように付加情報を表示する。

参考

AR.jsとは

公式を日本語訳

AR.jsは、Web上の拡張現実（Augmented Reality）のための軽量なライブラリで、Image Tracking(イメージトラッキング)、Location-based(ロケーションベースのAR)、Marker tracking(マーカートラッキング)などの機能を備えている。

今回はまずMarker trackingを試してみます。

Marker tracking

公式のマーカーベースサンプルを元に作成します。

<!doctype HTML>
<html>
    <!-- A-FrameとAR.jsの読込 -->
    <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-nuko.patt">
          <!-- 表示するオブジェクトの設定 -->
        <a-entity obj-model="obj: url(obj/13517_Beach_Ball_v2_L3.obj);
          mtl: url(obj/13517_Beach_Ball_v2_L3.mtl);" 
          scale="0.05 0.05 0.05" 
          rotation="0 0 0">
        </a-entity>
        </a-marker>
        <!-- カメラ -->
        <a-entity camera></a-entity>
        </a-scene>
    </body>
</html>

変更したところ

1.マーカーの変更

デフォルトだとサンプルの画像のままなので、今回はアカウントのアイコンに差し替えました。
こちらのサイトで簡単にマーカーの作成ができます。

左上のUPLOADボタンからマーカーにする画像をアップロード
真ん中上のDOWNLOAD MARKERボタンから.patt形式のマーカーファイルをダウンロード
②でDLしたマーカーファイルを既定の場所(サンプルではhtmlと同階層)に配置
コードでマーカーを設定している部分を変更(a-marker)

今回自分が使用した変換後の画像は以下になります。

2.表示する3Dモデルの変更

今回はFree3Dさんからフリーの3Dモデルをダウンロードして使用しています。今回使用した3Dモデル(フリー)

描画する3Dモデルをダウンロード
①でDLしたファイル(フォルダ)を既定の場所(サンプルではhtmlと同階層)に配置
コードでオブジェクトを設定している部分を変更(a-entity)

サーバーへアップロード

スマホから確認をしたい場合はサーバーへのアップロードが必要です。
今回は動作確認ということでNetlifyでデプロイしました。

動作確認

スマホで発行されたURLを開き、対象画像にカメラを向けると上手く表示されていました。

おわりに

手軽にマーカートラッキングで描画を行うことができました。
気になった点としてはモデルの読込に結構時間がかかる点です。(これは自分が使用している端末との相性かもしれません。)
次回はイメージトラッキングをやってみて動作比較できればと思います。