"BOKU"のITな日常

還暦越えの文系システムエンジニアの”BOKU”は新しいことが大好きです。

ノートPCのカメラとAR.js+A-Frameでマーカー型AR(拡張現実)を動かす。

今回は簡単なAR(拡張現実)を、AR.jsを使ってシンプルにやってみました。

f:id:arakan_no_boku:20190308224654j:plain

 

マーカー型AR(拡張現実)

 

今回、やってみるのは「マーカー型」と呼ばれる種類です。

マーカー型とはなんぞや?の詳細な説明は、こちらのサイトでも見てもらうとして。

tech-camp.in

簡単に言えば、「周囲が黒塗りの四角形の画像」をマーカーとして、カメラにその画像を映すと、その画像の上に別途用意した画像を表示させるやり方で実現するタイプのARです。

 

マーカー型ARデモンストレーション作成

 

ざっくりした手順は以下です。

  • 重ね合わせて表示する画像の用意
  • マーカーの作成と印刷
  • コーディング(HTML&JavaScript

 

重ね合わせて表示する画像の用意

 

適当な画像を用意します。

何でもいいですけど、シンプルなイラストの方がやりやすいです。

自分は今回、こんな画像にしました。

f:id:arakan_no_boku:20190308231722j:plain

これを、透過PNGファイルに変換します。

PNGへの変換は何を使ってもいいですが、普段使っているアプリに適当なものがないなら、こちらのサイトを使えば簡単にできます。

www.peko-step.com

とりあえず、PNG変換した画像を作業フォルダにおきます。

今回は名前を「1363824.png」にしてます(超適当です)。 

 

マーカーの作成と印刷

 

今度はマーカーを作ります。

マーカーは黒い枠で囲まれた四角形の画像でないといけません。

今回自分が作ったマーカーはこんな感じです。

f:id:arakan_no_boku:20190308232517p:plain

これを、印刷用の画像と、JavaScriptで読み込むパターンファイルに分けて作成する必要があります。

正直、手作業なんかではやってられないので、以下のサイトを使います。

jeromeetienne.github.io

f:id:arakan_no_boku:20190308232714j:plain

ここで「UPLOAD」で任意の画像をアップして、真ん中の「DOWNLOAD MARKER」、「DOWNLOAD IMAGE」を行って、作業フォルダに「pattern-marker.patt」と「marker.png」 の2つのファイルができているのを確認します。

そして。

marker.pngは適当なツールで開いて、カラー印刷をしておきます。

 

コーディング(HTML&JavaScript

 

さて、コーディングです。

今回は「AR.js」というJavaScriptのARライブラリを使います。

適当な名前でHTMLファイルを作り、以下のように入力します。

<!doctype HTML>
<html>
<head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded arjs="debugUIEnabled: false" vr-mode-ui="enabled: false">
  <a-assets>
    <!-- 表示する画像 -->
    <img id="wao" src="./1363824.png">
  </a-assets>
  <!-- 先ほど作ったpattファイルをurlにを指定 -->
  <a-marker preset="custom" type="pattern" url="pattern-marker.patt">
    <!-- 赤い立方体を表示 -->
    <a-entity>
      <!-- idで画像を指定。x軸回りで-90度回転 -->
      <a-image src="#wao" width="2" height="2" rotation="-90 0 0"></a-image>
      <!--y軸周りで360度回転するアニメーション -->
      <!-- 間隔:4000(ms), repeat(繰り返し)-->
      <a-animation attribute="rotation" to="0 360 0" dur="4000" repeat="indefinite" easing="linear"></a-animation>
    </a-entity>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>
</body>
</html>

簡単にポイントだけ。

画像ファイルやパターンファイルは、HTMLと同じフォルダに置いている想定です。

細かいことを考えずに、ただ動かすだけなら、 以下の2か所のファイル名だけ、あわせてもらえばよいです。

<img id="wao" src="./1363824.png">

 と

<a-marker preset="custom" type="pattern" url="pattern-marker.patt">

です。

わかりやすいよう、不要な部分は徹底的にはぶいたHTMLになってます。

でも、カメラの画像がブラウザの画面いっぱいに広がるので、そんな違和感はない感じになります。

 

おまけ:フレームワークのドキュメントとか

 

なお、 <a-animation などのa-xxxxxのタグは、AR.jsの機能ではなくて、A-FrameというWebVRフレームワークの機能です。

パラメータの意味とかに興味があればこちらの記事とか参考になるかと思います。

qiita.com

A-Frame本家のページはこちらです。

aframe.io

ちなみに、AR.jsのページも。

github.com

 

さて、実行してみます

 

カメラ付きのノートPCが必要です。

なければ、WEBカメラを用意するとか・・とにかくカメラが必要です。

あと、PCのローカルにWEBサーバー(Apacheとかnginxとか)をインストールして動かしておく必要があります。

その前提で、Webサーバーのドキュメントルートフォルダ(htdocsとか)に、作成したpngファイルやパターンファイル、HTMLファイルをごそっとコピーします。

それで、htmlファイルが「test.html」だったら。

http://localhost/test.html

みたいに起動します。

カメラの利用許可をきいてくるはずなので、OKしたら、自分の顔がブラウザ上に移ります。

そしたら準備OK。

印刷しておいたマーカーの画像をカメラにかざします。

角度や距離がうまく合えば、パッとカメラ動画の中に、イラスト画像が表示されて、ぐるぐるアニメーションします。

こんな感じで・・。

f:id:arakan_no_boku:20190309010050j:plain

透過の作り方が超テキトーなので、汚いですが・・まあ、ご愛敬で(笑)

しかし・・。

凄い世の中になりました。

あんな短いHTML+JavaScriptで、これだけのことができるんですからねえ。

ではでは。