WEB ARはじめました

こんにちは!

user-avatar

先日「エクス・マ◯◯」という映画を見て、ロボも私のことを好きになってくれる可能性は薄いと感じ、ロボとの恋に早々と見切りを付けた佐藤です。

さて私自身はロボとの恋を諦めたのでAIには微塵も興味がありませんが、チームは勉強熱心な人たちが多く定期的に勉強会を開催して、AIやVRなどのトレンドの技術について情報の交換を行っています。

私は何も発表しないでその場を乗り越えたいのですが、社会はそんなに甘くなく、毎回固いウンコをひねり出すように何かしら発表しています。

今回は以前勉強会でひねり出した「AR入門」についてまとめてみました。

ARとは?

ARとは「Augmented Reality」の略で、 一般的に「拡張現実」と訳されます。
現実世界に「何か別の情報」を加えて表現することです。

わざわざ説明するまでもないのですが、ポケモンGOやSNOWなどAR技術をつかったサービスが次々リリースされています。

最近ではAppleがARのフレームワーク「ARKit」を発表しました。
今後はiPhone、iPadがARのプラットフォームとして使えるようになり、世界最大のARプラットフォームになると話題です。

VRとの違い

ARを説明する上で、よく話題に上がるのがVRやMRです。

VR、MRとARの違いについては、「ARとMRとVRのお話」で、チームメンバーのタイガーが説明しているのでそちらを御覧ください。

ARの種類

ARは細かく分類すると、以下の3種類に分けられます。

・ ロケーション型
・ 画像認識型(マーカー有り)
・ 画像認識型(マーカー無し)

ロケーション型

ロケーション型はGPSから取得できる位置情報、磁気センサーによる方位、加速度センサーによる傾きなどを利用し、情報表示します。 観光地で観光案内や、カーナビや地図などでの道案内に使われたりしています。

例えば下記のアプリではAR機能を使って、山の名前や、標高、現在地から山までの距離などを教えてくれます。

AR 山 1000
1713_4

画像認識型

画像認識型にはマーカー有りと、マーカー無しがあります。

マーカー有りはQRコードのように何かを読み取り、その上にARコンテンツを浮かび上がらせます。
昔からよく見かけるのがこちらのマーカー型のARです。

1713_3

マーカー無しは、リアルタイムで自動的に映っている物の特徴を認識して、 地面や壁、人の顔などに合わせてコンテンツを表示します。

ポケモンGOは、ロケーション型と、マーカー無しの合わせ技です。

1713_5

ARに挑戦

それでは、いよいよARに挑戦してみようと思います。
AR初心者なのでまずはマーカ有りの画像認識型にチャレンジしました。

ARをサービスとして提供する場合は、ネイティブアプリとして作成するのが一般的だと思いますが、以下の理由でブラウザで表示することにしました。

・社内のデモ用なので高いクォリティは求められない(はず。。。)

・ネイティブアプリだとビルドしたり、インストールしたり面倒

・ちょうどよいライブラリ(AR.js)を見つけた

・そもそも私はネイティブアプリを作れない

実装方法

AR表示は、ライブラリ(AR.js)のリファレンスを真似すれば難しくありません。

気をつけたいのは動作環境です。WebGLとWebRTCが動作可能な環境が必要です。

では、実装方法について、かなり端折って説明します。

1. マーカの表示方法を決める

マーカーを表示する際に、ウェブカメラを使って表示するのか、画像を使うのかなどを決めます。
ウェブカメラを使うとAR感がでます。

var arToolkitSource = new THREEx.ArToolkitSource({
  sourceType: 'webcam'
});

//初期化
arToolkitSource.init(function onReady() {
});

2. マーカーを読み込む為のカメラ設定をする

マーカーを読み込むためのカメラ設定を行います。

var arToolkitContext = new THREEx.ArToolkitContext({
     cameraParametersUrl: 'images/camera_para.dat'
 })

//初期化
 arToolkitContext.init(function onCompleted() {
    //座標変換行列をコピー
    camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
})

3. マーカーの設定をする

マーカーマッチング用のパターンファイルを設定したり、マーカーのサイズを設定したりします。

//パラメーター
var parameters = {
    size : 1,
    type : 'pattern',
    patternUrl : 'sample.pat',
    barcodeValue : null,
    changeMatrixMode : 'modelViewMatrix',
}

//object3Dを作成
//このオブジェクトにマーカー上に表示するオブジェクを格納する
var markerRoot = new THREE.Group
scene.add(markerRoot)

//コントローラのインスタンスを作成
var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, parameters)

4. AR表示するオブジェクト定義する

マーカー上に浮かび上がらせたい3Dオブジェクトを作成します。
Blenderなどモデリング用のツールで作成したものをインポートして使うこともできます。

var geometry = new THREE.CubeGeometry(1, 1, 1);
var material = new THREE.MeshNormalMaterial({
     transparent: true,
     opacity: 0.5
});

var mesh = new THREE.Mesh(geometry, material);
mesh.position.z = geometry.parameters.height / 2
markerRoot.add(mesh);

5. ビューをアップデートする

全てのオブジェクトはhtml内に埋め込まれたcanvasに描画されます。
その為、アニメーションさせるために一定間隔でビューの更新を行う必要があります。

function animate() {
   
     requestAnimationFrame(animate);

     arToolkitContext.update(arToolkitSource.domElement)
     
}

そして、今回作ったデモはこちらです。

まとめ

ARの中でも1番基本的なマーカー有り画像認識を試してみましたが、ライブラリの力もあり思ったより簡単でした。
Google TangoやARKitなど登場で、今後ますますARが身近になっていくと思います。

ARがもっと広まり、本当の現実を見なくて済む日が早くこないかな〜と思っています。

SNSでもご購読できます。