ブラウザでARやってみよう。

2014.09.07(日) AR
このエントリーをはてなブックマークに追加

ちょっと前の話ですが、元アップルの松井博さんの講演会に行ってきました。松井博さんは、このcakesの連載を読んで大ファンになったのですが、だれが語る未来よりも、ボクには一番興味を惹かれました。残念ながら、今はこの連載は休止していますが、たまに読み返しても刺激になります。
そんな松井さんが講演会でおっしゃたことで印象的だったのは、とにかく時代にキャッチアップしていったほうがよさそうってことと、これから注目はやっぱりARってこと。なので、なんかARっぽいものを作ってみたいと思ったのでした。


最近のAR事情

松井さんがcakesの連載や講演会で紹介されていたものをいくつかピックアップしてみました。


・Zombies Everywhere! Augmented Reality
松井さんはかなりはまってるみたいでしたね。街中からゾンビがでてくるのでひたすらうちまくるらしいです。中にはモデルガンにスマフォをつけてプレイしている人もいたとか。。。



・ARカーナビ
BMWのヘッドアップディスプレイ(HUD)も紹介されています。アメリカでは高級車にしかつかないから、とおっしゃってましたね。
日本製ではサイバーナビがあります。うちの車もこれにしたいけど、埋め込みだからなぁ。



・MetaGlass
これが一番衝撃ですね。指の位置を追跡して、動きに合わせてAR上でなんでも動かせるとか、かなりマトリックス一歩手前まで来てる感じします。


さて、なにつくろうか?

こう改めてみると、最近はほんと目覚ましいというか、facebook買収で話題になったoculusとかGoogleGlassとか実際に買えるハードウェアも進化してますが、それは今回ちょっとおいておいて、スマフォを使ったものならなんとなくできそうな気がします。ただ、アプリをつくるとなるとしんどいので、なんとかブラウザで、できればJavaScriptだけでなんとかならないかと思った次第ですね。で、できたのがこれです。


・AR Walk Navi
arwalknavi画面



画像クリックでサイトが起動されます。行先を音声入力かキーボード入力して検索してもらえると、ナビゲーションが開始します。ただし、動いたのはAndroid4.4かつ、GoogleChromeのみです。他のブラウザではおそらく動きません。iphoneのSafariとかも試してませんが、多分動かないでしょう。また、カメラの起動とGPSをモニターして追跡するので、電池の消耗が激しい場合がありますのでお気を付けください(使ったら終了してください)。また、本ソフトウェアを使用した事による、いかなる損害も作者は一切の責任を負いませんので、自己責任の上でご使用下さいね~。


自分は方向音痴で地図はかかせないのと、サイバーナビのカッコよさ、これが携帯でできればと思ってつくったのですが、、、だいぶイメージは違いますね。ただ、まあそれなりに動いたので、個人的には結構満足です。地軸センサー、カメラの起動、3Dオブジェクト、GoogleMapsによるナビゲーション、これらすべてJavaScriptで実装しています。それらのサンプルを載せつつ、使い方などを書いておこうかと思います。

Step1. 地磁気センサーをブラウザで使う

最近のスマフォの場合、3軸の地磁気センサーなどがついていて、自分がどの方位に向いているかを感知することができます。
Googleやyahooが提供しているカーナビもGPSとセンサーを使ってナビゲーションしていると思いますが、それをブラウザでも使うことができます。そのサンプルがこちら。


・地磁気センサーによる方位、傾きを取得

サンプルはjQueryを使っています。地磁気センサーの取得については、こちらのW3Cのページに詳しく記載されています(英文)。deviceorientationをwindow.addEventListenerに登録しておくと、センサーが反応するたびに、callbackイベントが発生します。その引数にセンサーの結果が渡されますが、方位を表すのは、event.alphaで、値が0の場合は北で、反時計周りに1度ずつ増えていきます。

Step2. 簡易方位磁石をつくってみる

センサーをつかうことで、簡易的な方位磁石をつくることができます。以下が、北に向かって矢印を出す簡単なサンプルです。

・簡易方位磁石

サンプルは、Raphael.jsというSVG用のフレームワークを利用して矢印を書いています。先が北になってますでしょうか?


次回は、GPSで取得した位置をGoogleMapsで表示する方法を解説します。今回の地磁気センサーと合わせて、進行方向をしめすようサンプルを作りたいと思いますので、こう請うご期待!

コメントをどうぞ