2017年6月20日シェアツイートシェアブックマークVR元年と言われた2016年以降、VR/AR技術が大きな盛り上がりを見せています。した動きの中で、GoogleはWebブラウザでVRを実現するWebVRをChromeで正式サポートし、さらに「WebAR」なる仕様の開発をスタート。このWebARはまだ実験的な実装であり、対応デバイスも少ない状況ですが、ソースコードとサンプルがGitHubで公開されているため「WebARとはどのような技術なのか?」を実機で体験レポートします。No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。今後の展望WebARとは?Tangoプラットフォームに対応WebARを紹介する上で、先にGoogleが提供しているARプラットフォームのTangoについて触れておきます。Tangoは、物体までの距離を測る深度カメラ、デバイスの動きを検知する各種センサを搭載した対応スマートフォンで動作し、周囲の空間を立体的に捉え、実空間と仮想空間が融合したARアプリケーションを作成することが可能です。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アプリケーションを実装できるという点で共通していますが、機能や用途は大きく異なるため、比較表にしてみました。(プロトタイプにて)20-40FPS程度で動作AR.jsはWebAssemblyによる高速化が行われており、様々なデバイスで広く利用が可能ですが、機能としては**マーカー型のAR**になります。一方のWebARはTango対応デバイスでの利用に限定される代わりに、従来のARでは実現が難しかった**現実とより密接にリンクするAR**が開発可能です。WebARのサンプルアプリを体験する事前準備WebARを体験するためには、以下が必要になります。Pro」のみで、WebARにおいても唯一のサポート端末です。AR」がTangoのサポートを発表しており、WebARも体験が可能だと予想しています。Tangoデバイスを手元に用意できたら、次はブラウザのインストールです。現在、ChromiumにはWebARは実装されておらず、本記事の冒頭にリンクを掲載したGitHubからAPKファイルを取得してインストールを行います。ChromiumAR.apk</div>端末をUSB接続した状態で上記を実行すると「ChromiumAR」というアプリがインストールされます。ZIP"をクリックして、ダウンロードされるファイルを解凍してください。binフォルダに入っている"ChromiumAR.apk"をTango端末に転送し、実行する手順でインストールができます。サンプルアプリの実行ブラウザのインストールが完了したら、いよいよWebARアプリケーションの実行です。GitHubにサンプルアプリのURLおよびQRコードが記載されていますので、「ChromiumAR」ブラウザで閲覧してみましょう。picking(ピッキング)PointCloud(点群データ)を表示し、三角錐のオブジェクトを床や壁に沿って動かすサンプルです。PointCoudは物体までの距離を示す点の集合体で、このデータから物体の表面の座標を得ることで、オブジェクトを実空間の面に沿って動かすことができます。WebAR対応ブラウザをPhab2に入れてみた。PointCloud使えて、壁や床が認識できる。2017年5月22日occlusion(オクルージョン)PointCloudを用いて、仮想のオブジェクトを現実の物体に隠すサンプルになります。PointCloudオクルージョン。悪くないんじゃなかろうか。2017年5月22日オブジェクトを壁や床に接地させたり、物体にオブジェクトを隠したりすることで、ARコンテンツに現実感(リアリティ)を写し出せることが上記の動画でわかります。ブラウザのパフォーマンスに関しては、20-40FPS程度で安定して動作する一方で、バックグラウンドからの復帰時に黒い画面で固まってしまうことが多々あります。こちらは既知の問題として紹介されており、Chromiumへの完全な実装を行う過程で対応される見込みです。家事も仕事もプログラミングも。API)を用いたThree.jsでのアプリ開発にも少しだけ触れておきます。シーンの構成Three.jsの基本的な処理は「シーンを作成→オブジェクトを配置→レンダリング(くり返し)」といった流れになりますが、WebARのocclusionサンプルでは3つのシーンを作成して、それぞれを順番にレンダリングしています。シースルーカメラの映像(cameraScene)PointCloud(pointsScene)シーンを構成するオブジェクト(scene)この実装例に沿って、シーンの構成を見ていきます。APIを使ってシースルーカメラの映像を投影するためのメッシュ(cameraMesh)を配置。APIで取得したVRデバイスの情報(WebARの場合、ARデバイス)になります。APIの拡張として実装されているようです。APIを使って取得したPointCloudが、Three.jsのPointsオブジェクトとして設置。APIと統合する形で実装されています。scene(シーン)アプリケーション毎でオリジナルのコンテンツを配置していく処理になりますが、この部分は一般的なThree.jsのシーン構築と同じ感覚で実装できます。例として、ワイヤーフレームのキューブを配置するコードを記載しますが、Three.jsの記述と特に違いはありません。);ここで注意すべきは、ブラウザを起動した地点が座標系の(0,0,0)、距離の単位がメートルになっていることだと思います。Webページをリロードしても座標系は変わりませんでしたが、今後の実装で変わるかもしれません。レンダリング先述したとおり、3つのシーンのレンダリングをくり返し実行。順番としては、「cameraScene→pointscene→scene」の順になります。APIでpointCloudとcameraMeshを更新。cameraMesh);</div>最初にシースルーカメラの映像をレンダリングします。);</div>次にPointCloudです。オクルージョン(遮蔽処理)に使うため画面には表示せず、重ね合わせ判定に用いるデプスバッファにだけ書き込むという処理になります。);上記によりPointCloudは描画されませんが、デプスバッファでその座標に物体があることは書き込まれており、その後にレンダリングされるオブジェクトはPointCloudと重なっていない部分だけが描かれます。最後に残りのオブジェクトをレンダリング。前述の通り、PointCloud(=現実の物体表面)に隠れていない部分だけが描画されます。);WebARで透過、ワイヤーフレーム表示。Three.jsと同じ感覚で、シーンにオブジェクトを置くだけ。冒頭で挙げた「WebARとはどのような技術なのか?」という疑問に対して、実際に体験することでTangoベースのARをWebで容易に実現できるものだとわかりました。筆者自身がそうですが、UnityやAndroidアプリの開発経験に乏しいWebエンジニアにとって、WebARは開発障壁を下げる役割を果たします。APIは直感的に扱え、Three.jsで提供されているライブラリとも組み合わせて使えるため、Three.jsが扱えればWebARの実装はさほど難しくありません。利用者視点では、対応のデバイスとブラウザを持っていれば、その場ですぐにサービスを受けられるという利点があります。デバイスの普及やChromeへの正式対応はまだ少し先の話になるので、現時点でサービスに組み込むのは難しいでしょう。CodeCamp提供のアプリマスターコース当メディアを運営しているCodeCampではアプリマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。実際にアプリを作るのでポートフォリオとしても使用できる無料レッスン受講後の申し込みで10,000円クーポンをプレゼントしています!ぜひお試しください。Workとして以下の項目が含まれています。SDKの機能をWebARに追加(メッシュ再構成、エリア・ラーニング、マーカー検知など)Tangoが持つすべての機能をWebARで利用できるようになり、Chromeに正式サポートされれば、より手軽にリッチなARアプリケーションを提供できるようになります。APIと統合された実装になっているため、将来的にTango以外のプラットフォームに対応していく可能性もあるかもしれません。SDKでは、空間をスキャンして3Dメッシュを作成する機能や空間検知した結果を学習して位置情報を復元する機能があり、今後WebARにも実装される予定です。Service)が先日発表されましたが、この機能もいずれWebARで利用できるようになるのではと筆者は考えています。WebARは非常に将来性のある技術ですが、現状はTangoプラットフォームをはじめとした対応デバイスの普及が不可欠です。今後はTango対応スマホの増加とともにARアプリケーションの開発者が増えていくことを期待しています。家事も仕事もプログラミングも。【2020年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで受講生インタビュープログラミング未経験で介護師からエンジニアへ。家事も仕事もプログラミングも。受講生インタビュープログラミング習得後、フリーランスに転身。受講生インタビューフリーランス塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。学習ガイドtwitterLINE。