AR.jsを使って、iOS 11のAR機能で遊んでみよう

こんにちは、SONICJAMデベロッパーの山下です。
（TOP画像はこんなのですが、別に私はムエタイ好きではありません。）

iOS 11からAR機能が使えるようになったということで、
WebでARを実装できるAR.jsについてご紹介しようと思います。

まずは具体的に何ができるのかを見ていきましょう

実際にAR.jsのサイトに行って触ってみるのが一番わかりやすいので、用意されているサンプルを参照することにします。

1) スマートフォンのカメラもしくはQRコードリーダーよりURLを読み取り、ブラウザで開きます。

読み取れない方は、以下のURLを入力してください。
https://jeromeetienne.github.io/AR.js/three.js/examples/mobile-performance.html

2) 下記のURLをPCのブラウザで開きます。
https://jeromeetienne.github.io/AR.js/data/images/HIRO.jpg

3) PCに表示された「HIROマーカー画像」にスマートフォンのカメラを向けてみてください。
すると・・・。Three.js で生成された3dオブジェクトがマーカーの上に表示されます。オブジェクトを表示させるだけなら、このように簡単に実装することができます。

他に何ができるのか

独自のマーカーを設定したいとき

下記URLから独自のマーカーを簡単に設定することができます。
https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

動画mp4の再生

iPhone SafariのVideoタグの制限があるので、基本的には不可能です。
ただ、Audio APIを使って音声を映像に同期する方法を使えば動画の再生音声の再生が可能です。
参考記事URL
http://cardboardclub.jp/study/160705_360movie/
iPhone による音声ファイルの再生はデバイスの制限による仕様の制約がでてきそうですね。なかなか鬼門になりそうです。

これにはマーカーに反応して、見えるようになった時と見えなくなった時のイベントが取れると便利そうです。
THREEx.ArSmoothedControlsを使ってイベントを取ることが可能で becameVisibleとbecameUnVisibleのイベントが用意されています。

objファイルを表示

Three.jsのMTLLoaderとOBJLoaderを使って表示させることが可能です。
マーカーに対する位置の調整や大きさの調整が必要です。
mousedownなどのイベントと組み合わせて、アニメーションさせてやると面白いかもしれないですね。

マルチマーカー

AR.jsで対応可能で本サイトにサンプルも用意してあります。

対応機種は？

iOS 11.1のSafariはAR.jsをサポートしています。FirefoxとChromeでは動きません。
機種はiPhone 5sでもスムーズに動作しました。Android 5.1以上のChrome をサポートしています。 Android　ネイティブブラウザはサポートしていません。
今後の未対応ブラウザの進捗については未定です。

実際に触ってみました

調べていて個人的に気になったポイントが出てきたので試してみようと思います。

気になったポイントは下記です。
・objデータ表示
・360度動画を再生

AR.jsで実際にMOCを作ってみました

1) スマートフォンのカメラもしくはQRコードリーダーよりURLを読み取り、ブラウザで開きます。

読み取れない方は、以下のURLを入力してください。
https://yy-yamashita.github.io/ar-test/index.html

2) 下記のURLをPCのブラウザで開きます。
https://jeromeetienne.github.io/AR.js/data/images/HIRO.jpg

3) PCに表示された「HIROマーカー画像」にスマートフォンのカメラを向けてみてください。

マーカーに反応して動画とobjデータが表示されているはずです。
カメラを起動するだけで、結構メモリを消費するようです。
まだまだ、開発中の技術ですので、今後どんなことができるようになっていくのか楽しみですね！