WebXR ( WebVR/WebAR ) の現状確認 2021 Summer
@ikkou a.k.a HEAVEN chan です。本エントリは #CEDEC2021 で発表した「コロナ禍における WebXR ( WebVR/WebAR ) のイマ！」のフォローアップエントリです。
資料は Speaker Deck に公開済みですが、Speaker Deck はその仕様上、リンクがなくなってしまうため、関連するリンクや、時間の都合で省かざるを得なかった情報を記載しています。
WebXR とはなにか?
WebXR そのものを定める『標準仕様』はありません。
関連する JavaScript API WebXR Device API については後述します。
WebXRの定義
“私は” WebXR の次のように定義しています。
- ブラウザを通した VR 体験を WebVR、同 AR 体験を WebAR と定義し、それらの総称を WebXR と定義する
-
WebXR Device APIの使用有無は問わない
WebXRを構成する要素技術
WebXR は XR という特性はあるものの、WebXR を構成する要素技術は Web を構成する要素技術と変わりません。HTML、CSS、JavaScript、そして画像や3Dモデルなどのアセット、もちろん Web なので Backend も必要となります。
XR というと例えば Unity や Unreal Engine などのゲームエンジンを使うイメージがあるかもしれませんが、WebXR に関してはいわゆる「Webフロントエンドエンジニア」の領域となります。
HTML、CSS、JavaScript
HTML、CSS、JavaScript についてですが、HTML と CSS はもうそのままです。ちなみに HTML に関してですが、今年の1月に W3C が策定する HTML5 が廃止され、現在は WHATWG が策定する HTML Living Standard が標準仕様となっています。
WebXR の肝は JavaScript 関連 API です。WebXR Device API はもちろんですが、描画系のWebGL、Canvas や通信系の WebRTC、音まわりの WebAudio API にカメラ関係の MediaDevices.getUserMedia() など、ここには書ききれないくらいたくさんの関連 API があります。
WebXR Device API は WebXR のための API ですが、それ以外のものは WebXR 以外にも様々な場面で使われている API です。こうした既存技術の組み合わせで WebXR は成り立っています。
画像
画像、ここでは2Dのものを指しますが、こちらは一般的な JPEG や PNG、GIF などを扱います。最近では WebP を使っている Web サイトも増えてきましたが、まだまだこういった画像フォーマットが主流に感じています。
3D モデル
WebXR は 2D の画像よりも 3D モデルを用いるケースが多いです。
一例として、古くから使われている汎用的な OBJ (.obj)、FBX (.fbx) や、特に Google が推している glTF (.glb)、これは Khronos Group が策定している、3D における JPG を目指しているフォーマットです。
そして Apple が Apple における AR プラットフォーム専用フォーマットとして策定している USDZ (.usdz)、もとは USD です。
そして日本発の汎用人型 3D フォーマットである VRM、こちらも見かける機会が増えましたが、読み込みにはピクシブさんが公開している pixiv/three-vrm を使うのが一般的です。
このようにWebXR は画像だけではなく 3D モデルを扱うことが多いため、こうしたフォーマットへの理解と、それらを作るところから必要になることが多いです。
Backend for Hubs Cloud
WebXR は Web コンテンツのため、Backend が必要となります。
あえて、意図的に、全然粒度の異なる2つを挙げますが、これらは後半で紹介する Hubs Cloud で特に必要となる技術です。
- AWS (Amazon Web Services)
- Elixir/Phoenix
AWS はご存知の通り Amazon の Web サービスです。
そして Elixir/Phoenix は Hubs Cloud の Backend である Reticulum で使われている言語とフレームワークです。
WebXR は Web フロントエンドエンジニアに向いている技術領域ですが、このあたりまで触れようとすると Backend を含めた理解が必要になってきます。
このように Front-end も Backend ゴリゴリに書くケースもありますが、それこそ GitHub Pages や Glitch で公開するようなことも手軽にできるのが WebXR の良いところです。
WebXR Device API とはなにか?
WebXR Device API は、VR、AR、MR といった XR デバイスの「向き」や「動き」などの「状態」をブラウザから取得する JavaScript API です。とても重要なことですが、この API そのものが WebXR コンテンツをつくるものではありません。
そういったものは前述の WebGL や MediaDevices.getUserMedia() などの API が担っています。Web の進化とともに Web でできることが増えてきました。最近ではブラウザ経由で USB デバイスにアクセスする WebUSB や、Bluetooth デバイスにアクセスする Web Bluetooth など、ブラウザから直接ハードウェアにアクセスする API が生まれていますが、WebXR Device APIもそういったもののひとつです。
そういった前提を踏まえ、WebXR コンテンツは、WebXR Device API を使うものと WebXR Device API を使わないものの 2 つに大別できます。
誰が WebXR Device API を策定しているのか?
大前提として Web の仕様は W3C が策定しています。その上で各 API の仕様は各 Working Group が策定していて、WebXR Device API は Immersive Web Working Group が策定に向けた議論を重ねています。
この Immersive Web Working Group の Co-Chairs は Samsung、Microsoft、Google に所属している方が務めています。
Samsung の Ada Rose Cannon さん Microsoft の Ayşegül Yönet さん Google の Chris Wilson さん
また、W3C 本体からは Atsushi Shimono さんが参画しています。
ちなみに、Working Group は W3C の会員しか参画できませんが、Community Group は W3C の会員に限らず、門戸が開かれています。後述する WebXR Plane Detection Module などは Community Group 発のものとなっています。
WebXR Device API と関連する Module/API
WebXR Device API とは別に、次に挙げるような WebXR Device API に関連するモジュールや API の策定も進められています。
Gamepad API の拡張となる WebXR Gamepads Module、これはまだ Editor’s Draft つまり Working Draft の一歩手前の状態です。
WebXR Device API は VR のみを対象とした WebVR API が元となっているため、当時存在していなかった AR 関連の要素を拡張する WebXR Augmented Reality Module
WebXR コンテンツ上に DOM エレメントを配置するための WebXR DOM Overlays Module
現実空間の平面にオブジェクトを置くための WebXR Hit Test Module
描画系を向上させる WebXR Layers API
WebXR でハンドトラッキングを実現する WebXR Hand Input Module
Working Group ではなく、Community Group による Draft 状態にある MediaDevices.getUserMedia() なしに平面の情報を検出できる WebXR Plane Detection Module
Appendix: W3C の勧告プロセス
Working Draft や Editor’s Draft という言葉が出てきましたが、 これは W3C における勧告プロセスです。W3C が策定するさまざまな仕様は、次のような勧告プロセスを経て正式勧告となります。
- Working Draft (WD)
- Candidate Recommendation (CR)
- Proposed Recommendation (PR)
- Recommendation
WebXR Device API は今 Working Draft です。Recommendation に至るためにはブラウザ側の実装も必要となり、仕様策定とブラウザへの実装は共に歩んでいく形になります。
Appendix: WebVR API
WebXR Device API は XR デバイス全般を対象としていますが、その前身は VR デバイスのみを対象としていた WebVR API です。モダンブラウザは WebVR API を廃止して WebXR Device API に移行しているため、WebVR API のままの WebVR コンテンツが動作しない状況が生まれています。
WebXR Device API もまだまだ実験段階にあるため、定常的なアップデートが必要となります。
Appendix: OpenXR
glTF のところでも名前を挙げた Khronos Group が策定する XR 向け共通規格として OpenXR が存在しています。
最新バージョンは 1.1 で、VIVE Cosmos, Windows Mixed Reality headset, Oculus, SteamVR, Varjo といった多くの XR デバイス/プラットフォームが対応しています。
この OpenXR は WebXR も対象に含まれているため、その動向を見ておく必要があります。
Source. https://www.khronos.org/openxr/
主要ブラウザの WebXR Device API 対応状況
Source. https://caniuse.com/webxr
caniuse に掲載されている、主要ブラウザの WebXR Device API 対応状況です。
Chromium エンジンを搭載した最新版の Microsoft Edge と Chrome は WebXR Device API に標準対応しています。以前は chrome://flags で設定の変更が必要でしたが、現在は設定項目が存在していません。
また、特定の組み合わせで動作しない事象もありましたが、こちらも過去の事象となっています。
Gecko エンジンを搭載した Firefox は in-development ステータスです。標準対応していないため、ユーザー自ら about:config で dom.vr.webxr.enabled を true に変更する必要があります。
Source. https://platform-status.mozilla.org/
Webkit エンジンの Safari も In Development ステータスです。Firefox と異なり、iOS 14.7.1 時点では『設定項目自身が存在しない』ため、現時点で動作させる術はありません。
Source. https://webkit.org/status/#specification-webxr
代替手段として、iPhone の場合は Mozilla による「WebXR Viewer」アプリが対応しています。
ハードウェアの WebXR Device API 対応状況
ブラウザの対応状況に対してハードウェア側の WebXR Device API の対応状況です。
これは個人的な所感ですが、「Oculus Browser」が内蔵されている Oculus シリーズは WebXR を嗜むものにとって最高のデバイスです。
Chromium ベースの Microsoft Edge が内蔵されている HoloLens は長らく WebVR API 止まりでしたが、2021/05 にリリースされた Windows Holographic, version 21H1 で WebXR Device API への対応を果たしました。
Magic Leap 1 の独自ブラウザである Helio も WebXR Device API に対応しています。
そして Mozilla がリリースしている Firefox Reality が WebXR Device API に対応しているので、このアプリをインストールできる XR デバイスは総じて WebXR Device API に対応できます。
Mozilla は 2020 年に XR チームのレイオフを実施していますが、ブラウザベンダーの中では WebXR に強く力を入れていると認識しています。
WebXR コンテンツをつくる代表的な方法
WebXRコンテンツをつくる代表的な方法として、JavaScript これはフルスクラッチまたは JS ライブラリ、フレームワークを使う方法、Unityのようなゲームエンジンをつかう方法、Amazon Sumerian のようなブラウザベースの開発ツールを使う方法、palanAR のような国産 Web サービスを使う方法が挙げられます。
JavaScript フルスクラッチ or ライブラリ/フレームワークの利用
JavaScript に関しては WebXR Device API をはじめとする関連 API や描画系を司る WebGL を駆使してゴリゴリフルスクラッチでつくることもできますが、一般的にはライブラリやフレームワークと呼ばれるものを使うことになるでしょう。
一例として、three.js、A-Frame、Babylon.js、AR.js、8th Wall などが挙げられます。これらは統合的に様々なことに対応していますが、例えば WebAR コンテンツに多く見られる「顔」を取得して◯◯をする、といった場合は MediaPipe、face-api.js、jeelizFaceFilter などが併用されます。
three.js は描画系の老舗ライブラリです。単体で使うというよりは、例えば WebAR であれば AR.js と組み合わせて使うことが一般的です。
A-Frame はもともとは WebVR 向けとして始まり、現在は WebAR にも対応している老舗フレームワークです。
Babylon.js は Microsoft 発の最近伸びている雰囲気のあるライブラリです。
Babylon.js について国内では Limes さんが公開している各記事がおすすめです。
AR.js は WebAR と言えば AR.js とも言えるくらい有名なライブラリです。
これまで挙げたものは無償で使用できますが、8th Wall は有償のソリューションです。商用利用では最低月額 $99 に PV に応じた従量課金となっているため、個人がちょっと試してみるには難しいかもしれませんが、有償なだけあり、高い精度を誇ります。また、マーケティングやプロモーションでの活用事例も多いです。
MediaPipe は Google 発の ML ソリューションです。WebAR だけでなく、ネイティブアプリでも使用できます。JavaScript の機能としては Face Detection、Face Mesh、Hands、Pose、Holistic、Selfie Segmentation、Objectron に対応しています。
MediaPipe は Google Meet の背景ぼかしにも使われています。
face-api.js、jeelizFaceFilter は共に Face Tracking 向けのライブラリですが、それぞれできることに差異があります。セガ発の「『 Virtua Fighter 』なりきりキャラクター」でこの 2 つが使われていて、その背景が解説されているので、興味のある方は参照してください。
ゲームエンジン
WebXR は Web フロントエンドエンジニアが生きやすい領域ではありますが、普段ゲームエンジンを使っている方にも門戸は開かれています。
Unity
ゲームエンジンの場合は Unity がメジャーです。
Unity 単体では WebXR コンテンツを開発できませんが、WebXR Export というアセットを使用することで対応できます。
かつては Mozilla が公開していた WebXR Exporter を使う方法が主流でしたが、1年以上更新が止まり、対応できなくなっているため、現在はこの WebXR Export が必須アイテムです。
Unity の開発言語は一般的には C# です。JavaScript に抵抗がある、Unity が慣れている、という方にとって Unity + WebXR Export の組み合わせは最適解と言えます。
Godot Engine
最近少しずつユーザーの増えているゲームエンジンとして Godot Engine が挙げられます。
読み方はゴドーエンジン、開発言語は独自の GDScript の他、C#、C++ にも対応しています。
Godot Engine に興味のある方は、VR 開発者である WebVR への造詣も深い こりん＠VR さんが公開している「Godot Engine VR開発メモ（Oculus Quest、SteamVR、WebXR対応）」は必見です。
Wonderland Engine
JavaScript ベースでありながら GUI のエディターを持つ Wonderland Engine も挙げられます。
Wonderland Engine は「Made for WebXR」と WebXR への最適化を謳っています。
ブラウザベースの開発ツール
ブラウザベースの開発ツールとしては PlayCanvas や Amazon Sumerian が挙げられます。
Unity などのようにクライアントアプリを必要としません。
PlayCanvas は比較的早くから WebXR Device API に対応している開発ツールです。
国産 Web サービス
本格的に使うには有償となりますが、国産 Web サービスとしては、多くの WebXR 関連サービスをリリースしている palan さんの palanAR や、AR 系コンテンツでは老舗であり、大大的に CM も展開しているクラウドサーカスさんの LESSAR などが挙げられます。
コロナ禍におけるWebXRの状況
コロナ禍における特に目立った WebXR コンテンツは次の 3 点です。
- Matterport
- Hubs Cloud
- バーチャルトライオン
Matterport
Matterport はコロナ禍にありながら、2020 年にはユーザーが 500% 増加、2021/07/23 には NASDAQ に上場と、急成長している空間データプラットフォームです。
Matterport 以外にも同じタイプのサービスは複数存在していますが、特に見かける機会の増えているソリューションと言えるでしょう。
Matterport は PC、スマートフォンのブラウザからアクセスできる他、これはまさに Google ストリートビューのように画面をグリグリできるものですが、WebXR Device API にも対応しているので、例えば Oculus Quest などの対応デバイスから、没入感のあるアクセスが可能となっています。
用途としてはコロナ禍の影響で休館や会期が短縮となった美術館・博物館の代替として、足を運びにくい店舗の代替として、あるいは、この状況を逆手にとった新しい見せ方として、様々な業種業態で活用されています。
事例
美術館、博物館
美術館、博物館の一例としては、なんといっても国立科学博物館さんが公開している「おうちで体験！かはくVR」が外せません。かはくVRで Matterport を知った方も多いかもしれません。
美術館、博物館の利用事例は比較的多い状況にありますが、これは一般社団法人ＶＲ革新機構さんがボランティアとして様々な施設の撮影と公開に取り組んでいることに起因しています。
今なお特定都市には緊急事態宣言が発令されている状況にあり、美術館・博物館も人数制限を強いられていることがありますが、WebXR といった形で多くの方に足を運んでもらえるようにする方法として Matterport は優れています。
店舗
Matterport は様々な業種の店舗でも使われています。既存店舗をより身近に感じてもらう目的の他、新たにオープンする、またはリニューアルした際に合わせて用意する事例も見られます。
例えば MIZUNO TOKYO は、以前から Matterport で店内を公開していますが、東京オリンピックにあわせてリニューアルしたスポーツ応援アイテムコーナーも見られるようにアップデートしています。
ファッション / コレクション
Matterport はファッションやアパレルのコレクションでも活用されています。中でも BURBERRY さんの「BURBERRY VIRTUAL POP-UP STORE」は私のお気に入りコンテンツのひとつです。Matterport は店舗内を 3D で歩き回れる、というのが一般的な使われ方ですが、「BURBERRY VIRTUAL POP-UP STORE」はその空間内で「BURBERRY」の商品を手にする、女優の池田エライザさんと一緒に見て回れるという特長があります。
- BURBERRY VIRTUAL POP-UP STORE
- EZUMi Spring/Summer Collection 2021
- eimy 2020 Autumn Collection
- allureville / LOULOU WILLOUGHBY
観光
Matterport は観光でも用いられています。例えば川越一番街商店街さんによるバーチャルツアーでは、町並み自体は Matterport とは別の方法でバーチャル化し、商店街にある店舗を Matterport で 3D 化しています。この事例では商店街にある 107 店舗の内、70 店舗を Matterport で 3D 化しているそうです。
川越市観光課曰く、川越市の 2019 年の来訪者数は約 775 万人を超え、過去最多の観光客数を記録したそうですが、コロナ禍のあおりを受けた 2020 年は 385 万人と半分以下に激減したそうです。こうした部分を Matterport を使うことでバーチャルにでも足を運べるようにする狙いがあり、こういった動きは今後も増えていくかもしれません。
Hubs Cloud
Hubs Cloud は Mozilla Hubs のクラウド版です。
Mozilla Hubs は誰でも簡単にソーシャル WebVR な場を用意できる最高の WebVR ソリューションですが、URL が hubs.mozilla.com 始まりになってしまうという課題があります。
イベントなどでは独自ドメインを使いたいため、こうしたときに使えるのが Hubs Cloud です。Hubs Cloud は OSS 且つ商用利用が可能で、Matterport 同様に様々なデバイスに対応しています。ソーシャル VR プラットフォームでありながら、WebVR という特性を活かし、アプリケーションのダウンロードが不要です。Hubs Cloud は恒常的なコンテンツではなくイベントなどで、短期的に使われることが多いです。
Hubs Cloud に関連するものとして、Mozilla Hubs の他に、世界、ワールドをつくるための Spoke があります、
また、この Hubs Cloud を自前でホスティングするには一定の知識が必要となりますが、Hubs Cloud を拡張したサービスとして、NTT さんの DOOR や伊藤忠インタラクティブ、フェンリルさんらによる VR VENUE、イクスアールさんによる exhiVision などが登場しています。
つい先日、NTTさんの「2021年度第1四半期決算」がまさにこの DOOR 上で公開されていました。
事例
都市や商業施設
Hubs Cloud を用いた事例として、都市や商業施設が挙げられます。これはミラーワールドやメタバースといった文脈での使われ方とも言えます。
例えば池袋ミラーワールドや渋谷区立宮下公園 PARALLEL SITE は特にオススメです。こうした都市や商業施設をバーチャル化する場合は、ある程度長い期間、恒常的に公開することが想定されています。
イベント
Hubs Cloud はさまざまなイベントでも使われています。
イベント利用の場合、アクセスが限定的または終了後にサイトごと消えてしまう傾向にあるため、あとからアクセスすることが難しく、そうした場合は動画や画像などのアーカイブから確認するしか方法がありません。
- バーチャルオートサロン2021
- バーチャルクラフ特区
- IEEE VR 2020
- 第25回VR学会大会 OVE
Hubs Cloud の注意点
Hubs Cloudを使用する上での注意点として次の事項が挙げられます。
まず、同じワールドで一緒にいられる人数に制限があります。これは設定で変更できますが、サーバーのスペックに影響されます。
また、本格的にカスタマイズするには、冒頭にも出てきた Hub Cloud の Backend を支える Reticulum の理解が必要となります。Elixir/Phoenix の構成です。
そしてなにより公開し続けるには自身でホスティングし続ける、例えば Hubs Cloud の利用方法として推奨されている AWS を用いる場合、毎月毎月一定金額を支払う必要があります。これが特にイベント利用で期間終了後に消えてしまう要因のひとつとも考えられます。
私も検証目的で AWS 上にプライベートの Hubs Cloud を立てていますが、検証時のみ起動し、それ以外では落としています。
バーチャルトライオン (Virtual Try-on)
WebVR の事例として Matterport と Hubs Cloud を挙げましたが、WebAR の事例としてバーチャルトライオンを挙げます。WebXR Device API を必要としないので多くのスマートフォンが対象となります。
バーチャルトライオンにはさまざまな種類がありますが、なかでもバーチャルメイクが伸長しています。
バーチャルメイク、あるいは AR メイクの最大手として Perfect Corp と L'Oréal Group 傘下の ModiFace が挙げられます。
バーチャルメイクもまたコロナ禍の影響を受けて大きく伸長していて、Google はこの Perfect Corp、ModiFace の2社と協力しています。
日本国内ではまだ対応していませんが、US 版の Google 検索では、検索結果からそのまま WebAR のバーチャルメイクを試せるようになっています。
また、これは WebAR ではなくネイティブアプリの事例となりますが、Facebook、Instagram、Snapchatといったアプリも Perfect Corp と提携しています。
スマートフォンひとつで気軽に試せる WebAR と、EC サイトでコスメを見ていて、そのまますぐに試して購入するという点がとても相性の良い事例となります。
バーチャルトライオンでもっとも事例が多いのは「バーチャルメイク」ですが、他にも「ピアス」や「イヤリング」、眼鏡やサングラスなどの「アイウェア」、指輪などの「ジュエリー」、「時計」、少し珍しい事例として「マスク」のバーチャルトライオンもあります。
- バーチャルメイク
- ピアス・イヤリング
- アイウェア
- ジュエリー
- 時計
- マスク
その他
もちろん、Matterport、Hubs Cloud、バーチャルトライオンだけが WebXR の活用方法ではありません。その他にも、こうした形でさまざまな事例があります。
「せいくらべ」はネイティブアプリのサービスですが、アプリがなくても試せる形で WebAR を利用しています。
palanAR の palan さんによる WebXR コマースは WebVR と WebAR の双方を生かした新しいコマースの形を築き上げようとしています。NISSAN ARIA のように実寸台、そして内装を確認できる車関係の WebAR も見かけるようになってきました
そしてマーケティングやプロモーションで多数採用されている 8th Wall を使った WebAR コンテンツとしては YELLOCK の「Future of Music WebAR Experience」が必見です。
- 子供の身長を成長記録として共有する「せいくらべ」(AR帰省)
- WebVR と WebAR の双方を活用した「WebXRコマース」 (動画)
- 早稲田大学の「入学記念 WebAR」
- 新作の配信記念の「『Virtua Fighter』なりきりキャラクター」
- 日産アリア特設サイトで試せる「NISSAN ARIA」の WebAR
- YELLOCK の「Future of Music WebAR Experience」
Google の取り組み
CO-Chair の1人として WebXR Device API の策定にも携わっている方がいる Google も実は WebXR に力を入れてます。
Google 検索でバーチャルメイクを試せる事例は先ほども紹介しましたが、それ以外にも特定キーワードで検索すると様々なものが WebAR で表示できます。
タイムリーなところでは「オリンピック」という言葉や、一部の選手の名前で 3D モデルが表示されますし、ゴジラやエヴァンゲリオン、ガンダムといったIPモノから、犬や猫などの品種でも表示されます。
次の一覧記事に試せるものをすべてまとめてあります。
また、Experiments with Google の枠組みで WebXR Experiments という WebAR に特化したコンテンツを公開しています。Floom、Sodar、Measure Up、Bouncing Band、これらはすべておすすめであり、リファレンスのひとつとも言えます。
WebXR Device API に対応したデバイスが必要なので、スマートフォンでは ARCore に対応した Android が必要となります。
-
WebXR Experiments - Experiments with Google
- 世界の反対側に行く WebAR 「Floom」
- ソーシャルディスタンスの距離を可視化する WebAR 「Sodar」
- WebAR で 2D と 3D を採寸できる WebAR 「Measure Up」
- 部屋の中をオブジェクトが跳ね回る WebAR 「Bouncing Band」
終了済み (動画のみ)
Hubs Cloud の事例でもありましたが、WebXR はマーケティングやプロモーションで活用されることも多いです。こうしたコンテンツは期間限定であることが多く、既に終了しているものがありますが、一部の事例や動画が公開されているのでご紹介します。
個人的には WebAR でレゴを楽しめる LEGO Masters Builder がとてもおもしろかったです。こちらは 8th Wall を利用していました。
WebXR の使いどころ
WebXR の使いどころ、それは WebXR の良いところでもあり、サクッと気軽に試せるものであること、が一点、そしてアプリインストールへの導線として、が一点、もちろん他にもたくさんありますが、これらが特に大きな要素を占めていると考えています。
WebVR でできること
- プラットフォームとハードウェアを問わず、ブラウザからアクセス可能なバーチャル空間づくり
- 1人はもちろん、ネットワーク越しに複数人とのリアルタイムコミュニケーションも可能
- 展示会、講演会、学術学会、打ち合わせ、音楽ライブ、演劇などのイベント全般はもちろん、デジタルツインやメタバースを意識してバーチャル空間づくり
WebAR でできること
カメラ越しに得た情報をもとに◯◯を実行する
WebAR は大前提として、まずカメラ越しに得た情報をもとになにかを実行できます。
大別するとマーカー型ビジョンベース AR、これは特定の二次元バーコードや特定の画像をもとに任意のオブジェクトを重畳するものなどが挙げられます。
そしてマーカーレス型ビジョンベース AR、これは顔や身体の部位など、特定ではない、1対1ではない形で任意のオブジェクトを重畳するもの、が挙げられます。
多くの場合はスマートフォンが使われがちです。
ブラウザ側のセキュリティの都合上、HTTPS 環境が必要であり、カメラの使用許可を挟む必要があることに注意が必要です。
- マーカー型ビジョンベースAR
- 二次元バーコードをもとに任意のオブジェクトを重畳する
- 特定画像の認識をもとに任意のオブジェクトを重畳する
- マーカーレス型ビジョンベースAR
- 顔や身体の部位の認識をもとに任意のオブジェクトを重畳する
- Face Tracking, Face Segmentation, Face Detection, Face Recognition, Body Tracking, Body Segmentation, Selfie Segmentation, Hand Tracking, Hair Segmentation, Object Tracking, Object Detection, 3D Object Detection etc.
- 顔や身体の部位の認識をもとに任意のオブジェクトを重畳する
GPSの位置情報をもとに◯◯を実行する
WebAR にはもう1つ、ロケーションベース型 AR として GPS の位置情報をもとに何を実行する、例えばWebARなスタンプラリーなどが挙げられます。
商用サービスとしては、WebAR によるスタンプラリーを謳う TOBIRALLY が挙げられます。
WebXRの注意点
最後に WebXR の注意点を挙げます。
細かいものを挙げるとキリがありませんが、次の2点を特に意識することが必要です。
- デバイスのスペックに依存すること
-
WebXR Device APIを使う場合は、この API そのものがまだまだ不安定であること
今すぐに着手できる技術であり、まだまだ黎明期である、それが WebXR です。しかし、だからといって手を出さないにはもったいない技術なので、今後も多くの事例が生まれることを期待しています。
現場からは以上です！
Discussion