2019.12.23 テクノロジー

WEBブラウザだけで動くARライブラリ「AR.js」を利用して動く会社案内を作ってみた

「Webkidの会社案内パンフレットの動画制作ページの写真が動いたらカッコいいやんな」
という大雑把すぎる理由で、非エンジニアの方の中の人がARを実装してみた備忘録です。

そもそも、AR（拡張現実）とは

『AR』は“Augmented Reality”の略称で、日本語に訳すと『拡張現実』という意味になります。
実在する風景をベースにバーチャルのグラフィックを上乗せすることによって現実を「拡張」する技術です。近年だとポケモンGO等で利用されています。

よく似た技術に『VR』があるのですが、こちらは“Virtual Reality”つまり『仮想現実』の言葉の通りバーチャル空間を現実のように見せる技術です。

ARとVRは「仮想の存在を現実に見せかける」という点では共通していますが、アプローチの方向が逆の全く別の技術です。

つまり、ARは現実世界にデジタルを呼び出す技術で！

VRはデジタル空間に現実の自分が行く技術なんだね！

会社案内の写真を動かしたい

弊社はやたらと業種の幅が広い制作会社です。
パンフレットを作るにしても単に写真を載せただけでは面白くないし、動画なんかは実際に動くところを見せられないと魅力が伝えられない……

なにかできることはないだろうか

というわけで動画制作のページのサンプル画像をARで動かすことにしました。
イメージはハ●ーポッターの動く本です。
技術としても印刷物×動画×WEBって弊社っぽい感じがするし、何よりかっこいいからね！（ものすごく頭の悪そうな発言）

WEB担当の人に「助けてたくえもん（仮称）」って言ったら「自分で実装しろ」って言われたのでなんとデザイン担当の人がやります。

なんでも勉強だからね、そもそもお客さんに売る訳ではないしね。仕方ないね。

万一サービスとして提供する場合は本職の人が参加すると思うのでご安心を。

尚、サービスとして提供するとは今のとこ言ってない。

ご興味のある方はレッツお問い合わせ！

『AR.js』とは

過去、ARは専用のアプリケーションで動作させるのが一般的でした。
しかし、ちょっとARを見せたいだけの利用者にいちいち専用アプリケーションをAppStoreなどから落としてもらうのはなかなか難しく、普及させることが困難です。
しかもアプリケーション開発力のない環境では外部企業が提供する有料サービスを利用するしかなく、敷居の高い存在でした。

今回紹介する『AR.js』はWEBページ上にARを実装させることができるライブラリです。
公式：https://github.com/jeromeetienne/AR.js/blob/master/README.md

GitHubの公式の紹介を雑に要約すると
・めっちゃ動作が軽い！
・JavaScriptで動くのでインストール不要！
・オープンソースで利用は無料！
・WebGLとWebRTCに対応しているスマートフォンならなんでも動く！
と、いいことずくめですね！

機能としては、『AR.js』を読み込んだページ内でカメラを起動させ、設定しておいたマーカーの場所で任意のオブジェクトを表示させることができます。
表示させるオブジェクトは、WEBVR用フレームワークライブラリ『A-Frame』と組み合わせることで3Dオブジェクトなども利用することができます。

最新版ではマーカーレスにも対応していて、空間を認識してオブジェクトを配置することも可能みたい。

でも、今回はパンフレットの該当箇所のみに適用させたいから、マーカー方式で進めていくのじゃよ。

とりあえず導入してみる

基本的には『AR.js』と『A-Frame』を読み込んで、シーンとマーカー、オブジェクトとカメラの起動コードを書けば動きます。
以下が公式で提示されているデモコードです。

<!doctype HTML>
<html>
<!-- A-FrameとAR.jsを読み込む -->
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.0.8/aframe/build/aframe-ar.js"></script>
  <body style='margin : 0px; overflow: hidden;'>
    <!-- シーンの追加 -->
    <a-scene embedded arjs>
      <!-- マーカー指定 -->
      <a-marker preset="hiro">
          <!-- オブジェクト指定 -->
          <a-box position='0 0.5 0' material='color: yellow;'></a-box>
      </a-marker>
      <!-- カメラ起動 -->
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

ちなみに上のコードで動かすと黄色の立方体が表示されるよ。

基本的にはA-Frameのコードが使えるのでこの辺を参考にすると改変できそう。
https://aframe.io/docs/

動画が動かない件について

さて、実際に動画のMP4を動かしたいなと思ったのですが、調べたところ単純に書いただけでは動かない模様…ということで色々調べて以下のGitHubのスレッドにたどり着きました。（該当箇所は下から2番目のレスに記載されているコード）
https://github.com/jeromeetienne/AR.js/issues/285

特徴的な部分は
・動画は無音でなければならない（videoタグ内にmuted=trueのステータスが必要）
・動画を再生させるためにクリック（タップ）させる動作が必要
などでしょうか。
多分もっと色々書いてある気がするけど中の人、英語があまり得意ではない。

元コードの動画は重すぎて全然動きそうになかったので他のブログ等を参照した結果1MB以内に収めた方が良いみたい？

リッチな動画でもいいんだけど、軽いに越したことはないもんね。

マーカーをQRコードにしたい！

AR.jsのマーカーは、デフォルトだとHIROという固定の画像になってしまいます。
でもどうせ専用のWEBページを開く必要があるなら、マーカーをQRコードにすればスムーズに使ってもらえそうですね。やりましょう。

マーカーのカスタマイズにはかなり専門知識が必要になるのですが、公式でジェネレーターが用意されているのでこちらを利用しました。
https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

任意の画像をアップロードすると、マーカー用の画像と、サーバーに置いてマーカーを認識させる際に利用する『.patt』ファイルをダウンロードすることができます。
ちなみにサイト内の『Pattern Ratio』というステータスを変更するとマーカーの黒枠の幅を変更することができるのですが、HTML側に設定する項目が増えるため基本触らない方が無難です。

最終的にこんな感じになりました！

<!doctype HTML>
<html>
<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 style='margin : 0px; overflow: hidden;'>
    <a-assets>
	    <video id="ar-video" autoplay loop="true" muted="true" src="**.mp4"></video>
	  </a-assets>
	  <!-- デバッグ用の画面表示、VR用のボタンをそれぞれ非表示に -->
    <a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">
      <!-- 今回作成した『.patt』ファイルを読み込む -->
      <a-marker type='pattern' url='**.patt'>
	      <a-video src="#ar-video" width="2.6" height="1.4" position="0 0 0" rotation="270 0 0" play="true"></a-video>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
    
    <script>
      window.addEventListener('click', function () {
      var v = document.querySelector('#ar-video');
      v.play();
      });
    </script>
  </body>
</html>