目次
ノートPCのカメラで自作のAR（拡張現実）を動かす
簡単なAR（拡張現実）を、AR.jsを使ってシンプルにやってみます。
やってみるのは「マーカー型」と呼ばれる種類です。
マーカー型とはなんぞや？の詳細な説明は、こちらのサイトでも見てもらうとして。
簡単に言えば、「周囲が黒塗りの四角形の画像」をマーカーとして、カメラにその画像を映すと、その画像の上に別途用意した画像を表示させるやり方で実現するタイプのARです。
ざっくりした手順は以下です。
- 重ね合わせて表示する画像の用意
- マーカーの作成と印刷
- コーディング（HTML＆JavaScript）
手順１：重ね合わせて表示する画像の用意
適当な画像を用意します。
何でもいいですけど、シンプルなイラストの方がやりやすいです。
自分は今回、こんな画像にしました。
これを、透過PNGファイルに変換します。
PNGへの変換は何を使ってもいいですが、普段使っているアプリに適当なものがないなら、こちらのサイトを使えば簡単にできます。
とりあえず、PNG変換した画像を作業フォルダにおきます。
今回は名前を「1363824.png」にしてます（超適当です）。
手順２：マーカーの作成と印刷
今度はマーカーを作ります。
マーカーは黒い枠で囲まれた四角形の画像でないといけません。
今回自分が作ったマーカーはこんな感じです。
これを、印刷用の画像と、JavaScriptで読み込むパターンファイルに分けて作成する必要があります。
手順３：パターンファイルを作成する
以下のサイトを使って作成します。
ここで「UPLOAD」で任意の画像をアップして、真ん中の「DOWNLOAD MARKER」、「DOWNLOAD IMAGE」を行って、作業フォルダに「pattern-marker.patt」と「marker.png」 の２つのファイルができているのを確認します。
そして。
marker.pngは適当なツールで開いて、カラー印刷をしておきます。
手順４：コーディング（HTML）
今回は「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フレームワークの機能です。
パラメータの意味とかに興味があればこちらの記事とか参考になるかと思います。
A-Frame本家のページはこちらです。
ちなみに、AR.jsのページも。
実行してみます
カメラ付きのノートPCが必要です。
なければ、WEBカメラを用意するとか・・とにかくカメラが必要です。
あと、PCのローカルにWEBサーバー（Apacheとかnginxとか）をインストールして動かしておく必要があります。
その前提で、Webサーバーのドキュメントルートフォルダ（htdocsとか）に、作成したpngファイルやパターンファイル、HTMLファイルをごそっとコピーします。
それで、htmlファイルが「test.html」だったら。
みたいに起動します。
カメラの利用許可をきいてくるはずなので、OKしたら、自分の顔がブラウザ上に移ります。
そしたら準備OK。
印刷しておいたマーカーの画像をカメラにかざします。
角度や距離がうまく合えば、パッとカメラ動画の中に、イラスト画像が表示されて、ぐるぐるアニメーションします。
こんな感じで・・。
透過の作り方が超テキトーなので、汚いですが・・まあ、ご愛敬で（笑）
しかし・・。
凄い世の中になりました。
あんな短いHTML＋JavaScriptで、これだけのことができるんですからねえ。
ではでは。
