GoogleTango + DeepLearnJS + WebARで物体認識

寒くてバイクに3か月乗っていなかったら、案の定バッテリーがあがってた。
近くのバイク屋さんまで汗だくになりながら押して持っていき、見事復活!
今年はいろいろなところに行って写真を撮りまくろうと思っています。

今回作ったのは、スマホで物体認識した結果をARで表示するWebアプリです。一度作ってたのですが、AI部分(物体認識部)をクラウドを利用していたため、レスポンスが遅いなぁと感じていました。

こんなのです。

youtu.be

この時は、GCE(n1-highmem-8[vCPU x 8、メモリ 52 GB])上にTensorFlowを配置してぶん回したのですがこのレスポンス。遅い要因としては、

  • 解析画像リサイズしていない
  • ネットワーク転送
  • GCEでGPUを使っていない。

これらを改善した版を今回作ってみました。

youtu.be

だいぶ早くなっていますね。
大きく変わったところは2点。

  • 取得した画像をリサイズして解析している。
  • 物体検知をクラウド上ではなくブラウザ上で行っている。

使っている技術

多種多様な技術を使っています。
(Web業界って使う技術が多すぎてついていけない・・・)

GoogleTango

モーショントラッキング、エリアラーニング、Depthの取得をスマホでできるという画期的なデバイス
広角レンズと赤外線カメラで前方4メーター四方の物体の位置を認識することができます。
バイスASUS ZenfoneARをつかっています。

developers.google.com

残念ながら今の時代に早すぎたようで、ARCoreに置き換わるべく2018年03月でプロジェクト終了・・・

DeeplearnJS

Googleが提供しているJavascriptで動作するDeeplearning環境。WebGL経由でGPGPUを使用しており思った以上に高速に動作します。

deeplearnjs.org

WebAR

Web上でARを実現する手段。

github.com

A-Frame

WebでVR/ARを実装する際、タグだけで実装できちゃうライブラリ。

aframe.io

加えて、WebARを簡単に実装できるA-frameコンポーネントを使用しています。

github.com

使い方

以下に公開しています。残念ながらWebAR対応機種でかつWebAR専用ブラウザでないと動作しないです。

whispering-salesman.glitch.me

真ん中のカーソルが緑となっている状態で検知可能です。ARCore/ARKitの場合はまずは床面検知しないと緑にならないかと思います。
検知可能状態(緑)で画面タッチすると物体検知を実行し、解析結果をARで表示します。
端末をシェイクすると、AR表示を全削除します。

実装説明

ソースはGithubに公開しています。

github.com

index.html

HEADER部、BODY部、SCRIPT部に分けてポイントを説明します。

HEADER

A-Frameライブラリを一部修正しています。そのままではcanvasから画像取得ができなかったためです。
以下に詳細を記載したページがあります。

mementoo.info

BODY

a-assets内のmixinはAR表示Entityのテンプレートです。
AR表示EntityはtextGroupのEntity配下に追加登録しています。
raycasterとmarkについては、上で紹介したAFrame-ARを参考にしてください。
inference-canvasはよくわかりません。物体検知の実装をDeepLearnJSのWebCam Imagenetから取得した際の名残です。多分BODY句になくても動作する。

SCRIPT

「./dist/bundle.js」を読み込みます。ここに他のJS(DeeplearnJSとか、main.js)が入っています。
raycasterについては、上で紹介したAFrame-ARを参考にしてください。
shakeについては、Shake.jsを参考にしてください。

main.js

物体検知実装はDeepLearnJSのimagenetを持ってきただけですので、そちらを参考にするのがよいかと思います。

async function ready()

各種データ準備。

window.addEventListener('click', (env) => ...

画面表示しているCanvasとは別のCanvasを用意してリサイズ処理を行っています。
squeezeNetに食わせる画像のサイズがなぜか227x227固定だったので(それ以外だとエラーとなる)ため、227x227のResizeCanvasになっています。

function detection()

  1. リサイズ後画像の物体検知
  2. 解析結果から物体名の取得
  3. AR表示

の流れです。正直物体検知のところはサンプルそのまま持ってきているのでよくわかりません。
AR表示部は、A-FrameのTextコンポーネントを使っています。それにグルグル回るアニメーションをつけたうえで、index.htmlのBODY句にあったtextGroupエンティティに追加していきます。

まとめ

「[センシング/IoT → AI解析 → AR/VR表示] on WEB on モバイル」という流れは今後主流になると勝手に思っていますので、今回この流れで実装できたのでかなりテンション上がっています。
AIについてはまだまだ勉強が必要ですが、学習済みモデルを利用するだけなら難しくないですね。DeepLearnJSはTensorFlowの学習済みモデルをインポートできるようですので、どんどん活用していこうと思います。

以上です。