• AR

AR普及の鍵はアプリ不要なWebAR×マーカー不要なAR?


現実世界に仮想空間を重ねるAR (Augmented Reality:拡張現実) は、BtoC(消費者向け)だけではなくBtoB(企業向け)の領域においても普及するようになりました。CADデータを投影して建築物の間取りをシミュレーションしたり、工場の現場で作業工程を表示させたり、建築や製造の現場における導入が進んでいます。

ところで、ARには次の3種類があります。

1.特定の画像を使ってARを表示させる「マーカータイプ」
2.マーカー不要で風景や現実の空間からARを表示させる「マーカーレスタイプ」
3.GPSの位置情報、方位、加速度センサーの傾きなどによってARを表示させる「ロケーションベースタイプ」

マーカータイプとマーカーレスタイプは、画像認識型(ビジョンベース型)と呼ばれることがあります。

マーカータイプのARは、これまでアプリをダウンロードする必要がありました。しかし、ブラウザ上でARを表示する「WebAR」は、アプリのダウンロードを必要としません。このWebARがマーカー不要になると、より手軽にARを使えるようになるのではないでしょうか。

この記事を読むと、次の3つのことが分かります。

①WebARとは何か
②WebARの技術、マーカーレスARの技術
③WebARのマーカーレス化は実現可能か

WebARとは何か、そのメリット

ARの代表例として「Pokémon GO」があります。また「Google Maps AR」では、現実の風景にナビゲーションを重ねられます。しかし、現状ではアプリ上で稼働するため、専用アプリのダウンロードが必要です。Google Maps ARはPixelシリーズのみ対応で、順次他の機種にも対応していくことがリリースされています(2019年6月28日現在)。

WebARの大きな特長は、専用のアプリをダウンロードせずに、AndroidやiOSなどクロスプラットフォームで、ブラウザさえあれば利用できることです。アプリのダウンロード不要という特長は、ユーザーサイドとデベロッパーサイドにおいて、次の2つのメリットをもたらします。

ユーザーサイド:インタラクティブなコンテンツの利用と拡散

まず、ユーザー側のメリットです。現在、スマートフォンユーザーは、多様なアプリを利用しています。そこで新しいアプリをダウンロードするときには抵抗があります。空き領域を圧迫するので「他のアプリを削除しなきゃ入れられないかもしれない。面倒くさい」からです。

しかし、WebARはブラウザ上でARを表示するため、スマートフォンの空き領域を気にする必要がありません。ECサイトで気になる家具をみつけて「部屋に収まるかどうか、家具のサイズをちょっと確認してみよう」というとき手軽に利用できます

また、短期間のキャンペーンにも使えます。ARならではのインタラクティブなコンテンツでユーザーに「体験」を提供し、さらにSNSでURLを拡散させるメリットがあります。

また、Webサイトのディスプレイ広告にWebARを使った場合、これまでの写真や動画による受動的な広告ではなく、ユーザーに能動的な体験を促す広告を実現します。つまり、WebARはデジタルアドバタイジングのキラーコンテンツになる可能性を秘めています。

デベロッパーサイド:開発工数の削減と簡単なアップデート

デベロッパーサイド(開発者側)としては、わざわざARのSDK(Software Development Kit)を入手して開発環境を構築する必要がありません。短期間のキャンペーンのためだけにARアプリを開発するとコストがかさみますが、WebARの技術には主として無償で提供されているオープンソースが使われています。開発工数の削減とコスト低減のメリットがあります。

また、アプリをリリースする際には、iOSはApp Store、AndroidはGoogle Playに申請をすることが必要です。このときに説明文や掲載情報などを煩雑な作業が発生します。WebARであれば申請の手間を省くことができ、アップデートも簡単です。

WebARの技術、基本を解説

続いてWebARに使われている技術の基本を解説します。

WebGL

ブラウザで3DCGを表示させる標準仕様のAPIです。2006年、MozillaによるCanvas 3Dのプロトタイプが発端であり、その歴史はかなり古いのですが、CPUのパワーが追いついた2018年から注目を集めるようになりました。HTML5に対応したブラウザで軽快に動作する3D コンテンツを制作できます。

AR.js

「AR.js」は、ブラウザでARを実現するために作られたJavaScriptのライブラリです。JavaScriptからWebGLを操作する「three.js」をベースに、次のような要素で構成されています。

three.js

HTML5で動作する3Dモデルを制作するためのライブラリです。オープンソースのソフトウェアで、JavaScriptの知識があれば3Dコンテンツが作成できます。

ARToolKit

マーカータイプやマーカーレスタイプのARをプログラムに実装するC言語のライブラリで、2015年にオープンソースになりました。開発者は奈良先端科学技術大学院大学(NAIST)の教授、加藤博一氏で、1999年のSIGGRAPHで初めて公開されました。黒枠で囲まれた画像を認識することにより、カメラの位置や傾きなどを計算して、指定された3DCGを表示します。

Emscripten、asm.js

いずれもARToolKitでプログラムされたC言語をブラウザなどで動作するJavaScripに出力するコンパイラです。

Chromium

オープンソースブラウザのソースコードです。ちなみにGoogle Chromeは、このソースコードにGoogleが機能を追加して提供しているブラウザです。

A-Frame

MozillaのVR開発チームによるオープンソースのフレームワークです。AR.jsと同様にthree.jsベースで開発されました。JavaScriptの言語を使わなくてもHTMLタグでオブジェクト、カメラ、アニメーション、シーンなどを記述できるので、Webサイトのコーディング感覚でARの制作が可能です。

poly

Googleが無償で提供している3Dオブジェクト(OBJ)ライブラリです。たとえば「羊」をARに表示させたいときは、羊と検索して表示されたオブジェクトをダウンロードして利用できます。ユーザーによるアップロードも可能です。

マーカーレスARの技術、基本を解説

AR.jsとA-FrameによるARは、マーカーが必要です。ARの表示に必要な情報を整理した上で、マーカーレスARの技術について基本を解説します。

そもそもARに必要な情報とは

基本的にARを表示させるためには次の2つの情報が必要になります。

まずカメラを通して、外部の情報を認識させる必要があります。マーカータイプのARでは、画像がトリガーになります。「Google Maps AR」は、VPS(Visual Positioning System)というカメラがとらえた建物や屋外の風景をマーカーとして利用しています。

次に、端末の現在位置の情報と加速度センサーによる傾きなどの情報が必要になります。ロケーションベースのARであればGPSなどを使って現在位置の情報を得ます。

マーカーレスARを実現する技術

マーカーレスARの代表的な技術としては、次の2つがあります。

SmartAR

ソニーの技術で、物体認識技術と「AIBO」「QRIO」などのロボット開発で培った3D空間の認識技術を統合することによって生まれました。高速の物体認識とトラッキング(追跡)、独自開発の画像処理エンジンで高精度のARを開発できます。

参考:
統合型 拡張現実感 技術 “SmartAR”

PTAM

PTAMは「Parallel Tracking and Mapping for Small AR Workspaces」の略で「小さなARワークスペースのための並列トラッキングとマッピング」という意味です。人間がカメラを移動させる場合、トラッキング処理に負荷がかかります。そこで点によるトラッキングとマッピング処理を並行して行うことによって、高速のパフォーマンスを維持する技術です。

自走式のロボットでは、SLAM(Simultaneously Localization and Mapping)によってセンサーから入手した情報でみずからの位置を推定し、マッピングします。PTAMは、このパフォーマンスコストを低減するために研究されました。

古い映像ですが、以下を見ると概要を把握できます。

参考:
Parallel Tracking and Mapping for Small AR Workspaces (PTAM、英語)

まとめ:WebAR×マーカーレスARは可能か

WebARとマーカーレスARの技術を別々に解説しましたが、これらを統合しなければマーカーレスWebARは実現できません。

ところで、8thWallという開発会社が「8thWallWeb」というマーカーレスのWebARを2018年に発表しました。コンセプト映像は以下のYouTubeで見ることができます。

参考:
8th Wall AR Features – GDC 2018(英語)

コーポレートサイトからはデモを体験できます。iPhoneの場合、「設定」の「Safari」で「モーションと画面の向きのアクセス」をオンにしておく必要があります。その後、サイトのQRコードを読み取ると、ブラウザ上にロボットが現われます。

参考:
8th Wall(コーポレートサイト、英語)
https://www.8thwall.com/

Pokémon GOを見慣れているとAR自体の新鮮さはありませんが、バーチャルなオブジェクトがブラウザ上でスムーズに表示されていることに新鮮な驚きがあります。3つのボタンがあり、左のドルが表示されたボタンを押すと、ロボットの周囲を札束で埋められます(ちょっと成金主義ですが)。

このシステムでは、独自の「8th Wall SLAM」という6DoF(Degree of Free)のARエンジンを使い、VR空間内の自由度を高めています。日本のイノベーター的存在のVR開発者も使い始めるようになりました。

ARの発展は、人工知能やロボット技術と深い関わりがあります。5Gの時代を迎えて洗練されたマーカーレスWebARが登場し、ARが身近になり、モバイル端末でARを体験できる日が楽しみですね。

追記:2019/7/11アップデート

▼キャパの公式Twitter・FacebookではITに関する情報を毎日更新しています!
・Twitter

・Facebook
キャパFacebookページへ

CONTACT

株式会社キャパでは、VR/AR/MRの開発・改善について
ご相談を承っています。

営業時間:月~金 9:30~18:00 
土日・祝 定休日
FAXでのお問い合わせは24時間受付中 
FAX:03-5297-2879


関連記事一覧

we love develop
アプリやシステムの開発を通じて、お客様のビジネスを成長させることが私たちのビジネスです。お気軽にお問い合わせください。
 お問い合せ

お電話でのお問い合わせはこちらから
TEL:03-5297-2871

メールマガジンの登録

キャパでは誰かに話したくなるようなIT小ネタを、週に一回メルマガで配信しています。
ぜひ購読してみませんか?
 購読する

ホワイトペーパーの入手

ITブログ月間20万PV達成!自社オウンドメディアの運用ノウハウを無料公開しています。
 ダウンロード

記事カテゴリ

月別投稿記事

PAGE TOP