WebARの概要と実装方法（AR.js）
昨今、AR（拡張現実）やVR（仮想現実）といった空間利用する技術が様々な領域で用いられるようになってきました。その発展はめざましくARやVRだけでなくMR（複合現実）、SR（代替現実）といった技術が生まれてきています。
ここではVR・AR・MR・SRの違いについて詳しく説明しませんが、興味のある方は記事最後に参照リンクを貼っているのでチェックしてみてください。
今回はAR（拡張現実）にフォーカスし、その中でもWeb業界で注目を集めるWebAR（マーカー利用）について紹介していきたいと思います。
AR（拡張現実）とは
ARは ”Augmented Reality” の略です。日本語で拡張現実と訳されます。
その名の通り、AR（拡張現実）は現実世界に仮想の物体などを反映（拡張）する技術のことで、代表的な例でいうと近年スマホゲーム業界で大ヒットした「ポケモンGO」や「ハリーポッター魔法同盟」などが挙げられます。商用的な利用ではIKEAが家具の設置シミュレーションをARで体験できるIKEA Placeというアプリをリリースし、話題になりました。
WebARとは
WebARは上述したAR（拡張現実）をWeb上でも利用できるようにした技術のことです。WebARの良いところはユーザーに対してネイティブアプリのインストールを促さなくても気軽にWeb上でAR体験をしてもらうことができるという点にあります。
すでに日本でもWebARは大手家具メーカーなどで活用されています。WebARの実装は大きく分けると次の２種類に分けることができます。
- マーカーと呼ばれるQRコードに似たものを用いて指定した場所に3Dモデルを表示するパターン
- マーカーレス（マーカーを必要としない）でユーザーが意図した場所に3Dモデルを表示するパターン
この記事ではマーカーを利用したWebARの実装パターンを解説していきます。マーカーレス（マーカーを必要としない）パターンは以下記事をご覧ください。
＊マーカー例（マーカーを利用する場合、以下画像が必要）
マーカーを利用したWebAR（AR.js）
マーカーを利用したWebARを導入するには A-Frameと AR.jsこれら２つのJavaScriptライブラリを利用することで実装可能です。この実装ではマーカーを必要とする為、名刺といった紙媒体などと合わせて活用すると効果的です。
DEMOとコードサンプルを用意しているので、適宜参考にして進めてみてください。
DEMO
メリット
- マーカーを用意することで意図した箇所へ3Dオブジェクトを表示できる
- 実装に必要なコードの記述量が少ない
- 3Dオブジェクトのサイズや位置調整、テキスト表示の追加などアレンジをコーディングで付与し易い
- Android, iOS端末両方に対応が可能
デメリット
- ARの表示が少し不安定
- 反映されたARをユーザーは操作できない（位置変更など）
- マーカーをユーザーの前に用意する必要がある
対応ブラウザ
対応ブラウザはSafari, Chromeです。詳しくは以下リンクを参照ください。
AR.js — Browser Support
A-Frame
A-FrameはMozillaが提供する3D VR 空間構築のWebフレームワークです。
AR.js
three.jsとjsartoolkit5をベースとしたWebAR用ライブラリ。数行の記述で実装が可能。
実装方法
AR.jsのドキュメントにも導入方法が記載されていますので是非そちらも参照してみてください。３DオブジェクトはOBJ形式で用意してください。記述する内容は非常にシンプルです。
なんとわずか10行ほどでARの実装が可能となります。
まずはA-FrameとAR.jsのライブラリをそれぞれheadタグ内で読み込みます。
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script><script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.7/aframe/build/aframe-ar.js"></script>
次にbodyタグ内でARを表示する記述を行います。ARに関する部分をa-sceneタグで囲み、a-markerタグには出力する3Dモデルの情報を記述します。
予め用意した3Dオブジェクトを表示したい場合、a-assetsタグを用意します。a-asset-itemのsrcへ読み込みたいファイル（obj, mtl形式）パスをそれぞれ記述してください。
３Dモデルだけでなくテキストも入れたい場合はa-textタグのvalueに任意の文字列を記述します。最後にARではカメラの起動が必要なのでa-entity cameraのタグを記述します。
<a-scene embedded arjs>
<a-assets> <a-asset-item id="obj" src="img/earth_ball.obj"></a-asset-item> <!-- objファイル --> <a-asset-item id="mtl" src="img/earth_ball.mtl"></a-asset-item> <!-- mtlファイル --> </a-assets> <a-marker preset="hiro">
<a-obj-model src="#obj" mtl="#mtl" scale=".01 .01 .01" position="0 1.5 0"></a-obj-model> <a-text value="サンプル" position="0 0 0" align="center"></a-text> </a-marker> <a-entity camera></a-entity>
</a-scene>
これでARの実装はほぼ完了です。あとはscale(オブジェクトサイズ), position（オブジェクト位置）を適度に調整し、実機で確認していきましょう。
スマホで確認するにはhttps環境へ作成したファイルをアップする必要があります。サクッと始めるのであればGithubpagesやNetlifyなど静的ホスティングサービスの利用がオススメです。
サーバーへのアップロードが完了したら、作成したURLへアクセスしてみましょう。サイトへアクセスするとカメラの起動確認が行われますので許可します。
この記事で作成するWebARはマーカーを必要とする為、このままでは上手く表示されません。そこで、次のマーカー画像を印刷するなどして平面に配置し、カメラをかざす必要があります。すると用意した３Dモデルが表示されるはずです。
オリジナルのマーカーを用意したい場合は AR.js Marker Training という便利なジェネレーターがあります。
使い方は以下のページで詳しく解説されているので確認してみてください。
コードサンプル
まとめ
以上がWebAR（マーカー利用）の実装方法になります。WebARの場合は新しいフレームワークの登場よりはブラウザ側の対応がネックになってきます。昨今ではここで紹介しきれなかったマーカーレスのWebARが注目を集めてきています。今後もモダンブラウザの動向やWebARに関する情報をウォッチしていきたいと思いますので是非フォローを宜しくお願いします。
EC業界ではすでにShopifyというカートサービスがECサイトでWebARを導入できる機能をリリースしています。
気になる方はこちらの記事もチェックしてみてください。
「Shopifyで実現するECへのAR導入」
