WebアプリのためのARフレームワーク「AR.js」 ⇒ もうじきiOSでも動くようです
こんにちは。F.S.です。
先日行われたWWDCにてやっとAppleからもARフレームワークが発表され、改めてAR市場拡大の期待が高まっています。ここ近年、先端分野の製品化にだいぶ出遅れているAppleですが、すでに市場に流通しているデバイスにソフトウェア技術でARに対応するという戦略は一理あるかと思います。
さて、WWDC関連ではそれほど話題にはなっていませんが、Safari ver. 11.0においてWebRTCがでとうとうサポートされることになりました。
WebKit Feature Status
https://webkit.org/status
↑ これまで「In Development」だったWebRTCのステータスが2017年6月15日に「Supported In Preview」に変わっていました。
What’s New in Safarihttps://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/
WebRTCはSkypeのようなリアルタイムコミュニケーションをWebブラウザで実現する技術ですが、これまで PC、Androidの一部ブラウザ（Chromeなど）でしか使用できなかったカメラアクセス（getUserMedia API）がSafariで可能になる、つまり、iOSにおいてもデフォルトブラウザでAR Webアプリが実現可能になるということになります。
今回はWeb ARフレームワークのひとつで2017年3月に発表されたAR.jsを、iOS 11 Safariベータ版で試してみました。
AR.js
AR.js – GitHub
https://github.com/jeromeetienne/AR.js
特徴
- マーカーベースAR
- 軽量・高速（2年落ちのスマホで60fps！）
- WebGL, WebRTC対応ブラウザで動作
- 構成技術要素
- Three.js
- ARToolKit（jsartoolkit）
- A-Frame（aframe-ar）
サンプルプログラム
簡単に試してみるサンプルとして、モグラたたき風のアニメーションをする3Dオブジェクトをマーカーに重ねて表示するものを作成してみました。※iOS 11はベータソフトウェアのためスクリーンショットが記載できないので、替わりにMac OS Chromeでの実行イメージを載せています。
実際のイメージを載せられないのが残念ですが、手持ちのiPhone 7 Safariベータでも軽快に動作をしています。オブジェクトの数が少ないのでパフォーマンスの評価はあまり意味がないですが、カメラ起動もスムーズで、60fpsで安定して動いています。ただし、ランドスケープでは問題ないのですが、ポートレートではキャプチャ映像の天地が逆さまに表示されるという状況でした。参考までに上記サンプルのコードを載せておきます。A-Frameを使ってHTMLのみで記述しています。簡単でわかりやすいですね。
<!DOCTYPE html>
<script src="vendor/aframe.js"></script>
<script src="../build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
<div style='position: fixed; top: 10px; width:inherit; text-align: center; z-index: 1;'></div>
<!-- シーンにカメラのキャプチャを用い、白黒マーカーを検出するモードを指定する -->
<a-scene stats embedded artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 30; canvasWidth: 240; canvasHeight: 180'>
<!-- 穴を表現するオブジェクト（だが、アニメーションスキルが足りず影みたいになってしまっている...） -->
<a-circle position="0 0 0" rotation="-90 0 0" radius="0.01" color="#000000">
<a-animation
attribute="scale"
from="0 0 0"
to="120 120 120"
direction="alternate"
dur="1000"
begin="500"
repeat="infinite">
</a-animation>
</a-circle>
<!-- スマイリーのオブジェクト。アニメーションでスケール、移動、回転を行っている -->
<a-sphere position="0 -0.1 0" radius="0.01" material="src: url(./smile.png)">
<a-animation
attribute="scale"
from="0 0 0"
to="100 100 100"
direction="alternate"
dur="1000"
begin="500"
repeat="infinite">
</a-animation>
<a-animation
attribute="position"
to="0 0.8 0"
direction="alternate"
dur="1000"
begin="500"
repeat="infinite">
</a-animation>
<a-animation
attribute="rotation"
to="0 630 0"
direction="alternate"
dur="1000"
begin="500"
repeat="infinite">
</a-animation>
</a-sphere>
<!-- ARToolKitではおなじみの Hiro マーカーを使う -->
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>
</html>
※AR.jsのmasterブランチは絶えずアップデートされている状況であり、今回のサンプル実行で使用したAR.jsのコミットバージョンは 02ab804… です。まとめ
簡単なサンプルプログラムではありますが、iOSでもそのままで軽快に動作することが確認できました。ポートレートにおける逆転表示現象はWebKitもしくはAR.jsで対応されるものと信じています。今回試してみて、スマホブラウザですぐに動かせるというのは本当にお手軽だと感じました。面白いアイディアがたくさん出てきて、AR業界がもっと盛り上がると良いですね。
それでは、また。
参考
- 【オープンソース】Web上で軽量・高速に動作するARツール「AR.js」
http://getar.jp/15733/ - A-Frameを使った基本的なデモの作成
https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame - A-Frame Doc
https://aframe.io/docs/0.5.0/introduction/
