WebARとは？簡単なアプリを開発してみたので体験レポート

WebARとは？

Tangoプラットフォームに対応

WebARを紹介する上で、先にGoogleが提供しているARプラットフォームのTangoについて触れておきます。

Tangoは、物体までの距離を測る深度カメラ、デバイスの動きを検知する各種センサを搭載した対応スマートフォンで動作し、周囲の空間を立体的に捉え、実空間と仮想空間が融合したARアプリケーションを作成することが可能です。GoogleはあくまでVR/ARという分類をしていますが、技術要素としてはMR（Mixed Reality）と呼ばれる概念になります。

現状のTangoでは、Unityに対応したSDKで開発を行い、Androidアプリとして提供する形となりますが、WebARが実装されれば、JavaScriptのAPIを介してTangoの機能を利用し、Webブラウザで動作させることが可能です。

従来のWebベースARとの違い

WebARではThree.jsに対応したAPIが提供。同様にThree.jsでARを実装するオープンソースとしてAR.jsというJavascriptライブラリがあります。両JavascriptはThree.jsでARアプリケーションを実装できるという点で共通していますが、機能や用途は大きく異なるため、比較表にしてみました。

AR.jsはWebAssemblyによる高速化が行われており、様々なデバイスで広く利用が可能ですが、機能としては**マーカー型のAR**になります。一方のWebARはTango対応デバイスでの利用に限定される代わりに、従来のARでは実現が難しかった**現実とより密接にリンクするAR**が開発可能です。

WebARのサンプルアプリを体験する

事前準備

WebARを体験するためには、以下が必要になります。

• Tango対応のデバイス

• WebARが実装されたWebブラウザ

• WebARアプリケーション

2017年5月30日時点で発売済みのTango対応デバイスは「Lenovo Phab2 Pro」のみで、WebARにおいても唯一のサポート端末です。今後のTango対応スマホに関しては、今夏発売予定の「ASUS Zenfone AR」がTangoのサポートを発表しており、WebARも体験が可能だと予想しています。

Tangoデバイスを手元に用意できたら、次はブラウザのインストールです。現在、ChromiumにはWebARは実装されておらず、本記事の冒頭にリンクを掲載したGitHubからAPKファイルを取得してインストールを行います。

$ git clone https://github.com/googlevr/chromium-webar.git  

$ cd chromium-webar/bin  

$ adb install -r ChromiumAR.apk</div>

端末をUSB接続した状態で上記を実行すると「ChromiumAR」というアプリがインストールされます。

gitやadbコマンドの実行環境が整っていない方は、GitHubページの"Clone or download"から"Downoad ZIP"をクリックして、ダウンロードされるファイルを解凍してください。binフォルダに入っている"ChromiumAR.apk"をTango端末に転送し、実行する手順でインストールができます。

サンプルアプリの実行

ブラウザのインストールが完了したら、いよいよWebARアプリケーションの実行です。GitHubにサンプルアプリのURLおよびQRコードが記載されていますので、「ChromiumAR」ブラウザで閲覧してみましょう。

picking（ピッキング）

PointCloud（点群データ）を表示し、三角錐のオブジェクトを床や壁に沿って動かすサンプルです。PointCoudは物体までの距離を示す点の集合体で、このデータから物体の表面の座標を得ることで、オブジェクトを実空間の面に沿って動かすことができます。

WebAR対応ブラウザをPhab2に入れてみた。PointCloud使えて、壁や床が認識できる。 pic.twitter.com/TlUrIVSHL2 > > — jyuko (@jyuko49) 2017年5月22日

occlusion（オクルージョン）

PointCloudを用いて、仮想のオブジェクトを現実の物体に隠すサンプルになります。詳細は後ほど解説。

PointCloudオクルージョン。悪くないんじゃなかろうか。 pic.twitter.com/T9y43i3qjr

— jyuko (@jyuko49) 2017年5月22日

オブジェクトを壁や床に接地させたり、物体にオブジェクトを隠したりすることで、ARコンテンツに現実感（リアリティ）を写し出せることが上記の動画でわかります。

ブラウザのパフォーマンスに関しては、20-40FPS程度で安定して動作する一方で、バックグラウンドからの復帰時に黒い画面で固まってしまうことが多々あります。こちらは既知の問題として紹介されており、Chromiumへの完全な実装を行う過程で対応される見込みです。

WebARを使った簡単なARアプリを開発

occlusionサンプルの解説も兼ねて、THREE.WebAR.js（Three.js対応のWebAR API）を用いたThree.jsでのアプリ開発にも少しだけ触れておきます。

シーンの構成

Three.jsの基本的な処理は「シーンを作成→オブジェクトを配置→レンダリング（くり返し）」といった流れになりますが、WebARのocclusionサンプルでは３つのシーンを作成して、それぞれを順番にレンダリングしています。

• シースルーカメラの映像（cameraScene）
• PointCloud（pointsScene）
• シーンを構成するオブジェクト（scene）

この実装例に沿って、シーンの構成を見ていきます。

cameraScene（カメラシーン）

WebAR APIを使ってシースルーカメラの映像を投影するためのメッシュ（cameraMesh）を配置。

cameraScene = new THREE.Scene();  

cameraMesh = THREE.WebAR.createVRSeeThroughCameraMesh(vrDisplay);  

cameraScene.add(cameraMesh);</div>

WebAR APIに渡しているvrDisplayはWebVR APIで取得したVRデバイスの情報（WebARの場合、ARデバイス）になります。また、WebAR APIの内部でカメラの映像を取得する処理もWebVR APIの拡張として実装されているようです。

pointsScene（ポイントシーン）

WebAR APIを使って取得したPointCloudが、Three.jsのPointsオブジェクトとして設置。

pointsScene = new THREE.Scene();  

pointCloud = new THREE.WebAR.VRPointCloud(vrDisplay, true);  

points = new THREE.Points(pointCloud.getBufferGeometry(),  

pointsMaterial);  

pointsScene.add(points);

PointCloudの取得に関しても、WebVR APIと統合する形で実装されています。

scene（シーン）

アプリケーション毎でオリジナルのコンテンツを配置していく処理になりますが、この部分は一般的なThree.jsのシーン構築と同じ感覚で実装できます。例として、ワイヤーフレームのキューブを配置するコードを記載しますが、Three.jsの記述と特に違いはありません。

var geometry = new THREE.BoxBufferGeometry( 0.1, 0.1, 0.1 );  

var material = new THREE.MeshBasicMaterial( {color: 0x00ff00, wireframe: true} );  

cube = new THREE.Mesh( geometry, material );  

cube.position.set(0,0,-1);  

scene.add( cube );

ここで注意すべきは、ブラウザを起動した地点が座標系の（0,0,0）、距離の単位がメートルになっていることだと思います。なお、Webページをリロードしても座標系は変わりませんでしたが、今後の実装で変わるかもしれません。

レンダリング

先述したとおり、３つのシーンのレンダリングをくり返し実行。順番としては、「cameraScene→pointscene→scene」の順になります。

レンダリングの前に、WebAR APIでpointCloudとcameraMeshを更新。

pointCloud.update(gui.usePointCloudForDepth, 0);  

THREE.WebAR.updateCameraMeshOrientation(vrDisplay, cameraMesh);</div>

最初にシースルーカメラの映像をレンダリングします。

renderer.clear();  

renderer.render( cameraScene, cameraOrtho );</div>

次にPointCloudです。オクルージョン（遮蔽処理）に使うため画面には表示せず、重ね合わせ判定に用いるデプスバッファにだけ書き込むという処理になります。

renderer.clearDepth();  

this.renderer.context.colorMask( false, false, false, false );  

this.renderer.render(pointsScene, cameraPersp);  

this.renderer.context.colorMask( true, true, true, true );

上記によりPointCloudは描画されませんが、デプスバッファでその座標に物体があることは書き込まれており、その後にレンダリングされるオブジェクトはPointCloudと重なっていない部分だけが描かれます。

最後に残りのオブジェクトをレンダリング。前述の通り、PointCloud（＝現実の物体表面）に隠れていない部分だけが描画されます。

renderer.render( scene, cameraPersp );

WebARで透過、ワイヤーフレーム表示。Three.jsと同じ感覚で、シーンにオブジェクトを置くだけ。 pic.twitter.com/wRQWduLa5H

— jyuko (@jyuko49) 2017年5月24日

WebARを体験しての所感

冒頭で挙げた「WebARとはどのような技術なのか？」という疑問に対して、実際に体験することでTangoベースのARをWebで容易に実現できるものだとわかりました。

筆者自身がそうですが、UnityやAndroidアプリの開発経験に乏しいWebエンジニアにとって、WebARは開発障壁を下げる役割を果たします。実際、WebAR APIは直感的に扱え、Three.jsで提供されているライブラリとも組み合わせて使えるため、Three.jsが扱えればWebARの実装はさほど難しくありません。

利用者視点では、対応のデバイスとブラウザを持っていれば、その場ですぐにサービスを受けられるという利点があります。ただし、デバイスの普及やChromeへの正式対応はまだ少し先の話になるので、現時点でサービスに組み込むのは難しいでしょう。

今後の展望

GitHubのREADMEには、Future Workとして以下の項目が含まれています。

• WebVR APIバージョン2.0への適合
• Chromiumへの完全な実装
• Tango SDKの機能をWebARに追加（メッシュ再構成、エリア・ラーニング、マーカー検知など）

Tangoが持つすべての機能をWebARで利用できるようになり、Chromeに正式サポートされれば、より手軽にリッチなARアプリケーションを提供できるようになります。また、WebVR APIと統合された実装になっているため、将来的にTango以外のプラットフォームに対応していく可能性もあるかもしれません。

Tango SDKでは、空間をスキャンして3Dメッシュを作成する機能や空間検知した結果を学習して位置情報を復元する機能があり、今後WebARにも実装される予定です。 また「屋内のGPS」を目指したVPS（Visual Positioning Service）が先日発表されましたが、この機能もいずれWebARで利用できるようになるのではと筆者は考えています。

WebARは非常に将来性のある技術ですが、現状はTangoプラットフォームをはじめとした対応デバイスの普及が不可欠です。今後はTango対応スマホの増加とともにARアプリケーションの開発者が増えていくことを期待しています。

記事寄稿：GETAR

記事URL：Tango対応スマホで実装するWebARとは？簡単なARアプリ開発をしてみた