AR.jsでWebAR

2019.02.08

はじめに

ある案件で「Web上でARを実現して、表示されるキャラクターと記念撮影ができるようなコンテンツ」を提案する機会があったので、デモアプリケーションを作成しながら、コンテンツに必要な技術要件の検証を行いました。
この記事では、デモアプリケーションの作成過程でわかったWebARの実装方法や技術的な課題についてまとめたいと思います。

  • デモアプリの要件
  • 使用したライブラリ、ツール
  • デモの実装
  • 完成したデモ
  • まとめ

デモアプリの要件

  • ページ中の好きな位置に好きな大きさでAR画面を表示できる
  • AR画面の記念撮影(画像化)ボタン
  • ユーザーが開始ボタンを押すまでカメラが起動しない

使用したライブラリ、ツール

上記の要件を網羅するため、今回は以下の技術やツールを使うことにしました。

  • AR.js
  • A-Frame
  • AR.js Marker Training

AR.js

AR.jsはWebブラウザ上でARが実装することができるライブラリです。
簡単なARならhtmlタグを記述するだけで実装が可能であり、WebARに特化している点から選択しました。 マルチマーカーにも対応しており、全く同じマーカーは同時に1つ以上認識することはできませんが、それぞれ別の種類のマーカーなら同時に10以上認識させることが可能のようです。
3Dモデルなどの管理や描画にはA-frameを用いています。

A-Frame

A-Frameは、Three.jsをベースに作られているWebVRの開発用のフレームワークです。
htmlのタグの記述のみで簡単に3Dオブジェクトの配置が可能です。
以下は今回用いるA-Frameのタグの名称と役割の一覧になります。

タグ名 役割
a-scene シーンを作成します。このタグの子要素にマーカーや3Dモデルの情報を入れ子にして行きます。
a-assets 使用したい3Dモデルを読み込むタグです。
a-marker マーカー情報を設定します。今回のデモではAR.jsのプリセットである「hiro」マーカーを選択しています。
a-obj-model 「a-marker」タグで設定されたマーカーを検知した時にマーカー上に表示するものと大きさ、位置を指定します。3Dモデルの場合は、「a-obj-model」タグを使って「a-asset」タグで読み込んだモデルのidを指定します。他にも、ただの立方体などのプリミティブ図形の場合は「a-box」、文字は「a-text」などのタグを用いることができます。
a-entity カメラをシーンに追加しています。

AR.js Marker Training

マーカーベースのARを実現するには、カメラ映像の中から特定のマーカーを見つけ出す必要があります。 これにはパターンファイルという、数値化されたマーカーの視覚情報が記録されているファイルを用います。 カスタムマーカー(オリジナル画像のマーカー)を用いたい場合は、web上に公開されているパターンファイル作成サービスなどを利用して、このファイルを自分で用意する必要がありますが、今回はAR.jsの開発者が作成し配布しているAR.js Marker Trainingを用いました。

デモの実装

ここからは実際に要件に沿ってデモ作成しつつ、わかった実装方法や実行結果をまとめていきます。

3Dモデルの実装

まずは、シンプルなARアプリケーションを作成してみました。 前評判通り、映像を全画面表示で1つのマーカーを認識させて3Dモデルを表示させるだけならjavascriptを1行も書くことなく実装できました。 以下がそのコードと実行結果です。

[index.html]

ARシーンの位置、大きさを調整

3Dモデルが表示できたので、次に「ページ中の好きな位置に好きな大きさでAR画面を表示できる」という要件に取り組んでみます。
a-frameには、ライブラリを読み込むと自動的にbody要素のcssに値が設定されたり、videoとして描画されるAR画面が自動的に全画面になるというフレームワーク上の仕様があります。そのため、videoタグの映像から切り出した画像とCanvasとして描画されているARの3Dモデルの画像を一つのCanvasに合成します。そのCanvasにcssとjavascriptでサイズの指定をしてから、requestAnimationFrameでリアルタイムに貼り付け続けることによってARシーンの位置と大きさを指定しつつAR映像を描画することにしました。

[index.html]
[index.js]

記念撮影ボタンの実装

ARが写っている映像の瞬間をスクリーンショットのように切り取って画像化する「記念撮影ボタン」が今回のデモ作成の要件でした。 ここでは、videoタグの映像とARの3Dモデルの画像が合成されたCanvasをDataURLを用いて画像化することによって、実装することにしました。 ボタンを押すと、URL化された画像が別タブで開くようになっています。
以下がそのコードと実行結果です。

[index.html]
[index.js]
ボタンを押した瞬間のAR画面が画像化され、別タブで開きます。

完成したデモ

完成したデモアプリが以下になります。
「デモ開始」ボタンを押すとカメラが起動して映像が表示されるので、カメラに向かってこちらのようなhiroマーカーをかざして見てください。マーカーの位置に3Dのモデルが表示されると思います。
AR画面をフロート表示にしているのは、A-Frameの仕様上ページに直接埋め込むとカメラと画像の描画が始まったタイミングで画面がページの最上部にスクロールしてしまうためです。

動作確認は以下のブラウザで行なっています。

  • Google Chrome(MacOS)
  • Firefox(MacOS)
  • Google Chrome(Windows10)
  • Microsoft Edge(Windows10)

Internet Explorer11はWebカメラを制御するWebRTCに非対応なためか正常に動作しませんでした。

閉じるボタン
撮影ボタン

記念撮影

まとめ

今回は、AR.jsを用いて以下の要件を網羅するWebARのデモアプリ作成しつつ、実装方法や技術的課題について検証を行いました。

  • ページ中の好きな位置に好きな形でAR画面を表示できる
  • AR画面の記念撮影(画像化)ボタン
  • ユーザーが開始ボタンを押すまでカメラが起動しない

1つ目と3つ目に関しては、ARの描画に用いられているA-Frameの技術的仕様によって応急処置的な実装になってしまいました。
ARマーカーの認識精度に関しては全く問題ないレベルに思いました。今回のようにAR画面の形状を変更したりカメラの起動タイミングを制御しないような、シンプルな内容のARコンテンツであればARToolKitなどのフレームワークを使う方法よりもずっと簡単に実装ができそうです。