Webサイト制作者必見！ARをWebブラウザ上で実現する「WebAR」

現在、WebブラウザでのARの実装が活発に開発されています。その中でも代表的なのが、WebARです。

普段Webサイトを見る時と全く同じ手軽さでARコンテンツを体験し、またそのURLを拡散するだけで、他の人も簡単に同じコンテンツへアクセスすることができます。

WebARを、アプリを用いた通常のARと比較したときのメリットをまとめると次の3つになります。

AR.jsは、WebAR開発のための代表的なオープンソースソフトウェアの１つです。
無料で使うことができ、数行のコードでARを体験できるJavaScriptライブラリです。
AR.jsを使うと、決められたマーカーにカメラを向けるとオブジェクトを表示するよう、簡単に設定することができます。

公式サイト：AR.js

以下のような特徴があります。

AR.jsにはできることが幅広くあります。例えば下記１～４です。

1. Marker Based

AR.jsの代表的な機能です。マーカーベースARとは、ある画像をマーカーとしてそこからの相対距離にARオブジェクトを表示するものです。
黒く太い線があることでマーカー検出をしやすくしており、その結果安定したARが実現できます。

2. Image Tracking

イメージトラッキングとは、任意の画像をマーカーとすることができるARです。
例えば写真や企業ロゴをマーカーとし、そこからの相対距離にARオブジェクトを表示させることができます。

3. Location Based

AR.jsのWebARは画像マーカーのみならず、ロケーションベースでオブジェクトを表示することもできます。

4. AR.js Studio

AR.js Studioはv3.0で新たにリリースされた、コードを書かずにWebARを作ることのできるサービスです。

実装するにあたって、記述する内容は非常にシンプルです。わずか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の実装は完了です。

今回の記事では、Webブラウザ上でARを実現する方法についてご紹介してきました。

AR・VRが普及していく中で、Web上でのAR実現は他社との差別性を実現する上でも重要となるでしょう。