HTML5
AR
A-Frame
WebAR
AR.js

A-FrameとAR.jsで超簡単AR(PC・スマホ・マルチマーカー対応)

More than 1 year has passed since last update.

背景と目的

2017年7月11日に A-Frame のブログにて「Creating Augmented Reality with AR.js and A-Frame」という記事が公開されました。VR用フレームワークの A-Frame と、AR用フレームワークの AR.js の組み合わせで、超簡単なARの実装方法が紹介されています。

これまで Processing + NyARToolkit が「簡単」と感じてよく遊んできましたが、A-Frame + AR.js はもっと簡単で、PCでもスマホでも難なく動作しました。単純なコンテンツを作って遊ぶだけなら、これで十分かもしれないと感じています。

既にご存じの方も多いと思いますが、日本語情報が少なめですし、自分なりの学習結果を簡単にまとめておきます。

  1. とにかく動かす
  2. OBJ形式のCGモデルを表示(マルチマーカー)

とにかく動かす

完成イメージ

マーカー上に立方体を表示させます。

こちらで実物を動作確認できます。
(Windows PC の Chrome と Firefox、Android スマホの Chrome で動作確認済)

Screenshot_20170910-120013.png

コーディング

以下のようなhtmlファイルを作成します。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>A-Frame で超簡単 AR</title>
  </head>
  <body style="margin:0px; overflow:hidden;">
    <!-- A-Frame ライブラリの読み込み -->
    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
    <!-- AR.js ライブラリの読み込み -->
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>

    <!-- A-Frame の VR空間に AR.js を紐づける(デバッグUIは非表示) -->
    <a-scene embedded arjs="debugUIEnabled:false;">

      <!-- マーカーを登録(プリセットされている「hiro」マーカー) -->
      <a-marker preset="hiro">
        <!-- マーカーの場所に箱を置く(見やすいようにワイヤーフレーム表示) -->
        <a-box position="0 0.5 0" wireframe="true"></a-box>
      </a-marker>

      <!-- AR用のカメラを置く -->
      <a-entity camera></a-entity>

    </a-scene>
  </body>
</html>

動作確認

マーカーの準備

例えばこちらから、「hiro」マーカーをダウンロードし、PCの画面に表示させるか、プリントアウトします。

前提

カメラを使うため、ブラウザのセキュリティ上、https接続が必要です。ローカルに立てたhttpサーバでPCで試す場合、「localhost」なら大丈夫です。スマホの場合は、https対応のホスティングサービスにアップするなどします。

PCの場合(例)

  • PCでhttpサーバを動かす(例えばXAMPPのApache)
  • 上のindex.htmlを公開場所に置く
  • Chrome または Firefox で localhost として開く
  • カメラをhiroマーカーにかざす

スマホの場合(例)

  • BitBalloonにアクセス
    • アカウントを持っていればサインイン、使い捨て用途であればアカウント不要
  • index.htmlが入ったフォルダごと、BitBalloonのページにドラッグ&ドロップしてアップロード
    • アクセスURL(無作為の文字列.bitballoon.com)が表示される
  • Android スマホの Chrome で、頭に https:// を付けて上のURLを開く
    • Firefox では私の環境では動きませんでした
    • iOS11からは iPhone でも動くらしいです(私は未確認)
    • スマホは横向き
  • カメラをhiroマーカーにかざす

解説

解説不要なほど簡単ですが、流れだけ列挙します。

  • script タグの srcで A-Frame と AR.js へのリンクを指定
  • a-scene タグで embedded属性と arjs属性を指定
    • debugUIEnabled:false; はデバッグUIを非表示にする設定、任意です
  • a-marker タグでマーカーを登録
    • 任意のマーカーも利用可能ですが、ここではプリセットの「hiro」を指定
  • a-marker 要素の中に、そのマーカー検出時に表示するオブジェクトを置く
    • ここでは a-box で箱を表示
    • マーカーの中心位置が position="0 0 0"
    • マーカーの大きさが scale="1 1 1"
  • 最後に a-entity にcamera属性を付けることで、AR用のカメラを置く

OBJ形式のCGモデルを表示(マルチマーカー)

完成イメージ

複数のマーカーを検出させ、かつ、プリミティブだけでなく、OBJ形式のCGモデルを表示させます。おまけで、CGモデルに簡単なアニメーションも付けます。

こちらで実物を動作確認できます。
(Windows PC の Chrome と Firefox、Android スマホの Chrome で動作確認済)

Screenshot_20170910-141930.png

コーディング

以下のようなhtmlファイルを作成します。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CG モデルを登場させる</title>
  </head>
  <body style="margin:0px; overflow:hidden;">
    <!-- A-Frame ライブラリの読み込み -->
    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
    <!-- AR.js ライブラリの読み込み -->
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>

    <!-- A-Frame の VR空間に AR.js を紐づける(デバッグUIを非表示) -->
    <a-scene embedded arjs="debugUIEnabled:false;">

      <!-- OBJ形式のCGモデルの読み込み -->
      <a-assets>
        <a-asset-item id="obj" src="rocket.obj"></a-asset-item>   <!-- objファイル -->
        <a-asset-item id="mtl" src="rocket.mtl"></a-asset-item>   <!-- mtlファイル -->
      </a-assets>

      <!-- マーカーを登録(プリセットされている「hiro」マーカー) -->
      <a-marker preset="hiro">
        <!-- マーカーの場所に箱を置く(見やすいようにワイヤーフレーム表示) -->
        <a-box position="0 0.5 0" wireframe="true"></a-box>
      </a-marker>

      <!-- マーカーを登録(プリセットされている「kanji」マーカー) -->
      <a-marker preset="kanji">
        <!-- マーカーの場所に OBJ 形式の 3DCG を置く -->
        <a-obj-model
          src="#obj"
          mtl="#mtl"
          scale="0.005 0.005 0.005"
          position="0 0.5 0">
          <a-animation
            attribute="rotation"
            to="0 360 0"
            dur="3000"
            easing="linear"
            repeat="indefinite">
          </a-animation>
        </a-obj-model>
      </a-marker>

      <!-- AR用のカメラを置く -->
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

動作確認

CG関連ファイルの準備

ここでは、Processing の loadDisplayObj サンプルに同梱されているロケットのモデルを利用しました。
Processing の GitHub ページから、以下の3個のファイルダウンロードして、index.htmlと同じフォルダ内に置きます。

  • rocket.obj ... モデル本体
  • rocket.mtl ... 材質ファイル
  • rocket.png ... テクスチャ

マーカーの準備

「hiro」マーカー(例えばこちら)と、「人(kanji)」マーカー(例えばこちら)をダウンロードし、PCの画面に表示させるか、プリントアウトします。

前提(再掲)

カメラを使うため、ブラウザのセキュリティ上、https接続が必要です。ローカルに立てたhttpサーバでPCで試す場合、「localhost」なら大丈夫です。スマホの場合は、https対応のホスティングサービスにアップするなどします。

PCの場合(例)

  • PCでhttpサーバを動かす(例えばXAMPPのApache)
  • 上のindex.htmlおよび3個のCG関連ファイルを公開場所に置く
  • Chrome または Firefox で localhost として開く
  • カメラをhiroマーカーと人マーカーにかざす

スマホの場合(例)

  • BitBalloonにアクセス
    • アカウントを持っていればサインイン、使い捨て用途であればアカウント不要
  • index.htmlおよび3個のCG関連ファイルが入ったフォルダごと、BitBalloonのページにドラッグ&ドロップしてアップロード
    • アクセスURL(無作為の文字列.bitballoon.com)が表示される
  • Android スマホの Chrome で、頭に https:// を付けて上のURLを開く
    • Firefox では私の環境では動きませんでした
    • iOS11からは iPhone でも動くらしいです(私は未確認)
    • スマホは横向き
  • カメラをhiroマーカーと人マーカーにかざす

解説

こちらも解説不要なほど簡単ですが、最初のサンプルと違う部分だけ列挙します。

  • a-assets タグ内の a-asset-item タグで、objファイルとmtlファイルを指定
    • 後でidで指定するので、必ず任意のidを付けておく
  • a-marker タグでマーカーを登録
    • プリセットの「kanji」を指定
  • a-marker 要素の中に、そのマーカー検出時に表示するオブジェクトを置く
    • a-obj-model でOBJ形式のCGモデルを表示
    • src属性にobjファイルのid
    • mtl属性にmtlファイルのid
    • scaleとpositionは現物合わせで適当に調整
    • おまけで a-animation でY軸まわりに回転するアニメーションを追加

まとめと今後

A-Frame と AR.js の組み合わせで、ほんの少しのコードで AR の Webアプリを実装できました。PCでもスマホ(現状Androidのみ)でも難なく動き、マルチマーカーもOKです。

開発者さんのポストによると、Google Tango 対応デバイスならマーカーレストラッキングもできるようです。Apple の arkit にも対応していくそうです。

(2017/10/08 追記)iOS 11 の Safari でも動作確認しました。

今後もウォッチを続けたいと思います。