WebXR の現状確認 2020 Winter
これは ZOZOテクノロジーズ #3 Advent Calendar 2020 23 日目の記事です。
昨日の記事は @hrsma2i さんによる『metric learning のファッション分野における活躍』でした。
whoami
🍿🐏 が好きな雛乃木神社氏子でめぐるーまーの観測者こと @ikkou です。
VR とか AR とか MR とか、いわゆる xR あるいは XR 領域が大好物で特に WebXR を推しています。
はじめに
1 年前の 2019/12/20 JST に『WebAR の現状確認 2019 Winter』という WebAR に関するまとめエントリを投稿しました。投稿時点から 1 年が経ち、様々なアップデートがありました。
今年は WebAR だけではなく、WebVR も含む WebXR 全般を対象として 2020/12/23 JST 現在の情報をもとにアップデートしたまとめエントリを投稿します。
全体の流れは次の通りです。
- WebXR の概要
- WebXR (WebVR, WebAR) コンテンツの事例
- WebXR (WebVR, WebAR) コンテンツの開発方法
今年も難易度は低め、少しでも WebXR に興味を持っている初学者向け、一部ソースコードが登場しますが、求められるのはコーディングするよりも、実際に試してみるブラウザを起動して好奇心です。
WebXR とはなにか
まずは “本エントリにおける” 言葉の定義です。
XR とは
XR は VR(Virtual Reality), AR(Augmented Reality), MR(Mixed Reality) といった ◯◯ Reality 全般を包括する言葉です。日本国内では小文字 x 始まりの xR という表記が用いられることもありますが、英語圏では sentence case により文頭が大文字になる、あるいは固有名詞は文頭が大文字になる、といった事情から大文字 X 始まりの XR という表記が一般的です。
VR/AR/MR カンファレンスの XR Kaigi や、Unity の XR Plugin Management 然り、大文字始まりの XR が一般的ですが、小文字始まりの xR を使ってはいけないなどという「決まり」はないので、各自のおこのみで！
WebXR とは
本エントリでは Web における XR 各種の表現を WebXR としています。即ち HTML, CSS, JavaScript, そして画像等のアセットで構成されるものになります。
関連する API として WebXR Device API がありますが、VR Head Mounted Display いわゆる VR ゴーグルを被らない・必要としない VR があるように、WebXR Device API を必要としない WebXR も存在します。つまり WebXR ≠ WebXR Device API を使ったコンテンツ、となります。
WebVR とは
WebVR は VR(Virtual Reality) な表現・体験を Web で実現できるものです。リッチなコンテンツは Oculus Quest や HTC VIVE といった VR HMD を使うことが多いですが、いわゆる Google カードボードにスマートフォンを差し込んで使うタイプの WebVR もあります。
WebAR とは
WebAR は AR(Augmented Reality) な表現・体験を Web で実現できるものです。AR はカメラを通して現実世界になにかを重畳させることが多いので、ほとんどの場合ではスマートフォンを使います。
ちなみに AR は次の 3 つに細分化できます。この種類によっても WebAR での実現方法が異なります。
- 位置情報に連動する Location based AR
- マーカー型 Vision based AR
- マーカーレス型 Vision based AR
WebMR は無いのか
例えば WebMR(moritanian/WebMR) という JavaScript Web Mixed Reality library が存在していますが、少なくとも今日現在 WebMR という言葉は一般的ではありません。そういったときに適切な表現が XR であり、後述する WebXR Device API は Web Mixed Reality なる表現も XR と定義しています。
百聞は一“体験”にしかず Google 検索で体験する WebAR
御託を並べる前に手っ取り早くお手元のスマートフォンで、もっとも手軽な WebAR を体験しましょう。
特定の生き物を iPhone または ARCore に対応した Android スマートフォンで Google 検索すると、3D モデルの表示、そして AR で現実世界に重畳できます。
2019 年は『猫』をググっていたので、2020 年は『犬』をググりましょう。『犬』または『いぬ』、『イヌ』とググり、検索結果を少しスクロールすると『実物大のラブラドール・レトリバーを近く...』といったテキスト、動いているわんちゃんと共に『3D表示』というボタンが表示されています。この『3D表示』ボタンをタップした後に出てくる画面で『周囲のスペースに表示する』ボタンをタップすると、AR を表示する UI になります。
ちなみに iOS ユーザーの場合、Google アプリがインストールされていると、Google アプリが起動していまい、体験としてはひと手間かかる上に Safari なら動作するオクルージョンが効かなくなるので、試すときだけでもアンインストールすると捗ります。
この仕組みについては後述します。
また、別エントリで AR として表示されるものを一覧化しているので、興味のある方はぜひ試してみてください。 ( ついでに♡を押してくれると嬉しいです:)
WebXR Device API の現状
まず “手っ取り早く” WebXR Device API のことを知りたい場合は、immersiveweb.dev にアクセスして一通り目を通してください。
WebXR Device API は『ブラウザ経由で (VR|AR|MR) HMD を扱いたいときに使う W3C が策定中の API』です。(VR|AR|MR) HMD の向きや加速度、コントローラーの位置を取得できます。
WebXR Device API の前進 WebVR API について
かつては Oculus Rift や HTC VIVE などの VR HMD “のみ” を対象にした WebVR API の策定が進められていました。しかし時代の流れとともに取り扱うものの対象に AR や MR も含まれることになり、2017/12/12 を以て deprecated となり API の策定は停止し、WebXR Device API に引き継がれていきました。
最終バージョンは v1.1 で勧告プロセスとしては Editor’s Draft でした。
Development of the WebVR API has halted in favor of being replaced the WebXR Device API. Several browsers will continue to support this version of the API in the meantime.
Ref. https://immersive-web.github.io/webvr/spec/1.1/
WebVR API のブラウザ対応状況
WebVR API は既に deprecated となり、一般的にこれから新たに使うことはありません。
ただし、後身の WebXR Device API に対応していない WebXR コンテンツを体験する場合、現在も WebVR API に対応しているブラウザを使う必要があります。
対応状況を caniuse のスクリーンショットで示します。
Ref: https://caniuse.com/webvr
今日現在も WebVR API に対応しているモダンブラウザは Firefox のみとなります。
かつては Chrome も対応していましたが、WebXR Device API の対応を機に、WebVR API は切り捨てられました。
現在の WebXR Device API について
WebVR API の後身として生まれた WebXR Device API は、その対象を VR HMD に限らず、AR や MR デバイスも対象にしています。
現在の勧告プロセスは Working Draft で、Editor’s Draft だった WebVR API よりも一歩進んでいます。
WebXR Device API がイメージしている対応デバイス
繰り返しになりますが、WebXR Device API は VR HMD だけでなく AR や MR デバイスも対象にしています。WebXR Device API を策定している W3C Immersive Web Working では、一例として次のようなデバイスを挙げています。
- ARCore-compatible devices
-
Google Daydream(discontinued) - HTC Vive
- Magic Leap One
- Microsoft HoloLens
- 初代 HoloLens は
WebVR APIにのみ対応 - HoloLens 2 も現時点では
WebVR APIにのみ対応
- 初代 HoloLens は
- Oculus Rift
-
Samsung Gear VR(discontinued) - Windows Mixed Reality headsets
Ref. https://github.com/immersive-web/webxr/blob/master/explainer.md#target-hardware
悲しいことに WebVR 向きの Google Daydream と Samsung Gear VR はともにデバイス自体が discontinued となっています。
ここに挙がっていないデバイスとしては、例えば Oculus Quest / Oculus Quest 2 が挙げられます。
caniuse にも載っていない『Oculus Browser』であれば、フラグをオンにするなどの作業をすることなく、最初から WebXR Device API を使ったコンテンツを体験できる状態になっています。
Oculus Quest 向けの『Oculus Browser』と、その WebXR Device API の詳細については公式ドキュメントを参照してください。
WebXR Device API のブラウザ対応状況
WebXR Device API は頻繁に仕様が変わる状況にあるため、現時点ではどのブラウザも条件付きで使える状況です。
対応状況を caniuse のスクリーンショットで示します。
Ref: https://caniuse.com/webxr
さらに主要なブラウザの状況は次の通りです。
- Mozilla Firefox v86
-
about:configでdom.vr.webxr.enabledの flag をtrueにする
-
- Google Chrome v87
- CHrome 78 以前は
chrome://flagsで flag をtrueにする必要があったが、Chrome 79 から標準対応しているため、個別に flag を変更する必要はない
- CHrome 78 以前は
- Microsoft Edge v87
- 中身は
Chromeと同じ Chromium なので原則的に同じ挙動になる - 関連 API の状況は
edge:flagsで確認できる
- 中身は
- Apple Safari (Mac)
- 対応する気配がない
- Google Chrome for Android
- PC 版 Chrome と同様
- Apple Safari (iPhone/iPad)
- 対応する気配がない
- WebView 扱いになってしまうが、Mozillas の「WebXR Viewer」を使うことで WebXR Device API を使ったコンテンツが動作する
※ブラウザバージョンは本エントリ執筆時点で最新のもの
Chrome については v79 で対応を果たすも、Oculus 系 VR HMD で真に対応したのは v86 からでした。過去の経緯をまとめているので、興味のある方あるいは特定バージョンで動作せずに困っている方は参照してください。
また、Safari については今のところ対応する気配がありません。後述しますが、どちらかというとプライバシーの観点から制限をかけているように観測しているので、今後も対応される可能性は低いと考えています。ただし、WebXR Device API の策定を勧めている Immersive Web Working Group には Apple, Inc. の方が 4 名いるので、少なからず何かしらの意識を向けているはずです。
WebXR に WebXR Device API は必要か?
個人的な見解は『必ずしも必要ではない』です。
Web を通した VR を WebVR、Web を通した AR を WebAR、そして Web を通して VR も AR も MR もすべてひっくるめた XR を体験できるものを WebXR とするのであれば、WebXR Device API を使わない WebXR も有りえます。
実際、冒頭で試した Google 検索の WebAR に WebXR Device API は使われていません。
特にスマートフォンを使った WebAR コンテンツの場合は WebXR Device API 抜きに成立するものが多いです。
対して VR HMD を使う WebVR コンテンツの場合は WebXR Device API を使うことでコントローラーはもちろん手をコントローラーにする「ハンドコントローラー」にも対応できるので、WebXR Device API ありきのものを一定量存在しています。
WebXR コンテンツの事例
2020 年の WebXR コンテンツの概観
2020 年は新型コロナウイルス感染症の影響もあり、VR そして WebVR が躍進しました。この躍進の仕方は望まれていたものではなかったかもしれませんが、きっかけが何であれ VR そして WebVR というものを目にする機会が増えたのはポジティブに捉えても良いはずです。
同様の理由で AR も伸長していますが、接触を避けることを目的として、あるいは接触せずに済む手段として、AR そして WebAR が活用されました。
2020 年の WebVR コンテンツの事例
リアルに代わるイベント空間としての利用 - Mozilla Hubs / Hubs Cloud
物理的な会場を伴うあらゆるイベントごとが制限された結果、その代替としてバーチャル空間の利用が著しく加速しました。
まず、WebVR のバーチャル空間を構築する Mozilla Hubs を使った事例が増えました。これは 2020 年 4 月末に、独自の Hubs 空間を構築できる Hubs Cloud が “オープンソース” として公開されたことも大きく影響していると考えられます。
Mozilla Hubs については、東京大学バーチャルリアリティ教育研究センターが『VRセンターが教えるMozilla Hubsで簡単にVR会議を開く方法』というページを公開しています。
カンファレンスでの代表的な利用事例として、『IEEE VR 2020』、『XR Kaigi 2020』などが挙げられます。
また、GREE VR Studio Laboratory 社による Hubs を使ったソリューションを提供、Gugenka 社による Hubs を利用した短期間での VR イベント制作の受託など、Hubs のビジネス利用事例が登場してきました。特に Gugenka 社は Hubs 内で有償のライブ『東雲めぐ 野外コンサート from Hubs』を開催するなど、まだあまり多くない WebVR の “わかりやすい” 商用事例を作っています。
利用事例が増えたこともあってか日本語化も進んでいるので、まだ 1 度も試したことがない方は漏れなく絶対に試してください。WebXR Device API に対応しているので、Oculus Rift S を接続した Chrome や Oculus Quest 2 の Oculus Browser でコントローラーを使った体験もできますし、スマートフォンで気軽に見ることもできます。
リアルに代わるバーチャル施設としての利用 - Matterport などの 3D ツアー
イベント会場よりも見る機会が増えたのは Matterport などを使った、実在する建物や施設内部を 3D 等でバーチャル化する事例です。
Matterport を使った代表的な事例として、博物館・美術館用途では国立科学博物館による『おうちで体験！かはくVR』や森美術館による『未来と芸術展』が、アパレル用途ではワークウェアスーツの NEWMAN による『WWS VIRTUAL STORE AT NEWMAN』や EZUMi による『EZUMi Spring/Summer Collection 2021』、ellesse による『ellesse TOKYO バーチャルストア』などが挙げられます。
Matterport を使った事例は全国津々浦々、他にもたくさんありますが、これは「一般社団法人ＶＲ革新機構」がボランティア撮影を行なっていることが影響しているかもしれません。
Hubs 同様に、Matterport も 2020 年 5 月から WebXR Device API に対応しているので、Oculus Browser などで見ると、より没入感を得られます。
そして、3D ツアーを実現するソリューションは Matterport だけではありません。WebXR Device API には対応していませんが、Matterport とは別のソリューションを使った事例として、特に店舗のバーチャルストア化が多く、例えば SHISEIDO ブランド初の旗艦店となる『SHISEIDO GLOBAL FLAGSHIP STORE』や NARS の『NARS HARAJUKU VIRTUAL SHOP』、阪急阪神百貨店初のバーチャルストアとなる『Thom Browneストア』などが挙げられます。
他にも期間を 1 年以内に絞って「バーチャルストア」と Google 検索するだけでも、数多くの事例が出てきます。ウィズコロナ/アフターコロナの世界線では、この「バーチャルストア」が当たり前になっているかもしれません。そうしたとき、単純に Matterport でバーチャルストア化するだけでは差分要素を作りにくくなってくるので、何かしらのギミックを仕込むなど、独自性の担保が課題になってくるかもしれません。
2020 年の WebAR コンテンツの事例
あくまで個人的な体感になりますが、WebAR は WebVR よりも数多くの事例が出てきたように感じています。
増えるバーチャルメイク
いわゆるデバコスなどは BA(Beauty Adviser) さんこと美容部員さんと会話しながら、実際に試して購入に至るケースが多いようですが、新型コロナウイルス感染症の影響で対面コミュニケーションが半ば封じられています。その課題を解決する 1 つの手として事前に撮影した画像またはリアルタイムのカメラ映像に対してメイクとしてテクスチャを重畳する「バーチャルメイク」の事例が増えています。
例えば、CANMAKE、KANEBO、KATE、メイベリンなどが導入しています。
このバーチャルメイクというジャンルは、YouCam メイク の PERFECT 社とロレアルグループ傘下の ModiFace 社 が 2 大勢力となっていますが、先日 2020/12/17 に Google がこの 2 大勢力である PERFECT 社と ModiFace 社の両者と手を組み、Google 検索結果に自然に WebAR によるバーチャルメイクを導入していくことを発表しました。どれだけの品数が対応されることになるのかまだわかりませんが、来年 2021 年には個別のウェブサイトに着地する前にバーチャルメイクを試しているのが当たり前になるかもしれません。
AR フォトフレーム / AR フィルター
物理的な “ハレノヒ” を作りにくくなったことも影響してか、WebAR による AR フォトフレームや AR フィルターの事例も散見されました。
例えば、イベントに合わせたテレビ愛知の「AR フォトマスク フォトフレーム」や GENEROSITY 社の「WEB-Snap」、ソリューションとしてマーキュリー・アド社による「ARフォトフレーム」やキズナアイちゃんコラボやプリキュアの映画コラボなどを果たしている palanAR 社の「TOBIRA」などが挙げられます。
AR フォトフレームの拡張とも言える試着系コンテンツ
2019 年には「CITIZEN AR try」など、WebAR による試着を体験できるコンテンツがありましたが、2020 年も同じく時計カテゴリでアニエスベーの「VIRTUAL FITTING」の他、ピアスや指輪などの試着系コンテンツが登場しました。
こういった試着系コンテンツは、フォトフレーム系コンテンツに比べて求められる精度が高くなる傾向にあるので、なかなか難しいのではないかと思っています。そして実際のところ導入する前と後でのどの程度 CVR が変わるのかとても気になっています。
WebXR コンテンツの開発
ここまでは前段のようなもので、ここから先はソフトウェアエンジニアリング混じりの技術的な要素が少し登場します。「はじめての WebVR コンテンツの開発」、そして「目的別 WebAR コンテンツの開発」という切り口で、その開発方法の “一例” を示します。
必要となる前提知識
WebXR コンテンツの開発は、一般的な Web アプリ開発と同じように HTML と CSS そして一定量の JavaScript の知識と経験が求められますが、始めるだけならお茶の子さいさいです！
何度か出てきている WebXR Device API を直接触るケースは多くないですし、多くの場合はライブラリやフレームワークが吸収してくれます。
WebXR Device API の関連 API としては Immersive Web Working Group が策定に向けて動いている次に挙げる API も気にしておくと良いでしょう。
WebXR Augmented Reality Module - Level 1WebXR Hand Input Module - Level 1WebXR Hit Test ModuleWebXR DOM Overlays ModuleWebXR Layers API Level 1
同様に 3D の描画を担う WebGL や通信を担う WebRTC に AR におけるカメラまわりで重要な getUserMedia なども、その存在を知っておく必要はありますが、API レベルで直接触れる機会は少ないです。
表現という側面では WebGL に加えて CSS animation を理解していると捗ることがあるかもしれません。
また、ライブラリやフレームワークによって取り扱える 3D モデルのフォーマットが異なるので、主要な 3D モデルのフォーマットである OBJ, FBX, glTF/GLB, Draco, USDZ, VRM などの存在と、相互変換を理解しておくと捗ります。
はじめての WebVR コンテンツの開発
とにかく何か WebVR コンテンツをつくってみたい
WebVR そして WebAR にも対応している『A-Frame』の利用をおすすめします。
A-Frame はもともと Mozilla VR チーム内で開発され、その後 Mozilla 社から独立した Kevin Ngo 氏が興した Supermedium 社が中心となってメンテナンスを続けている JavaScript フレームワークです。ライセンス形態は MIT License で、最新バージョンは先日 2020/12/16 にリリースされた 1.1.0 です。
HTML ライクな記述が特徴的なフレームワークで、とっつきやすいはピカイチです。ドキュメントや事例も多く、WebVR と言えばまず A-Frame から始める方も多いのではないでしょうか。
後述する AR.js と組み合わせることで WebAR にも対応させることが多いですが、v1.1.0 で WebXR AR module に対応したため、AR.js に依存することなく A-Frame 単体で WebAR コンテンツを作れるようになりました。ただし WebXR AR module は WebXR Device API の拡張モジュールにあたるため、iOS では動作しません。
公式サイトで示されているミニマムな記述は次の通りです。
※コードが表示されていない場合は HTML ボタンをクリックしてください。
肝は script 要素で A-Frame を呼び出すことと、a-scene 要素の中にオブジェクト等を配置することです。
Hubs Cloud で独自のイベントスペースをつくりたい
Hubs Cloud は GitHub でソースコードが公開されているので、独自の環境に、好きな構成で構築できますが、まずは AWS Marketplace で提供されている Hubs Cloud Personal または Hubs Cloud Enterprise の利用がおすすめです。
Hubs Cloud の情報はまだ多くありませんが、貴重な日本語情報は gree/hubs-docs-jp にまとめられているので、実際に構築する際には参照することが多くなるかもしれません。
Matterport で WebVR なバーチャルショップをつくりたい
Insta360 ONE X2 あたりの 360 度カメラを購入し、月額 $9.99 の Starter プランを契約すれば、作ったコンテンツを Web 上に公開できます。残念ながら無料プランでは公開できません。
JavaScript が苦手なので Unity や Unreal Engine のように WebVR コンテンツをつくりたい
『Babylon.js』の利用がおすすめです。
Babylon.js は Microsoft 社の社員が開発した Web における 3D の描画に強みを持ったリアルタイム 3D エンジンです。決して WebVR に特化したものではありませんが、WebVR にも対応しています。ライセンス形態は Apache License 2.0 で、最新バージョンは 4.2 です。
公式で用意されている Babylon.js Editor を使うことで、Unity ライク、というか “ほぼ” Unity という感覚で開発を進められます。
また、Graph Editor を使うことで、Unreal Engine のブループリントのように、ノードベースで開発を進められます。
このように、日頃から Unity や Unreal Engine に触れている方は、もしかすると A-Frame よりもとっつきやすいかもしれません。
もちろん一般的な JavaScript と同じ感覚でコーディングすることも可能です。その場合の具体的な記述方法は公式サイトを参照してください。
JavaScript を書きたくない！ 慣れている Unity で開発したい！
Unity Asset Store で配布されている『WebXR Exporter』の利用がおすすめです。
WebXR Exporter は Mozilla が無料で配布している Unity の Asset です。最新バージョンは 2.0.1 ですが、2020/04/16 のアップデート以降、更新されていません。
Unity のバージョン違いで正常に動作する・しないが異なり、何より A-Frame や Babylon.js に比べて圧倒的にドキュメントが少なく、時に出力されるソースコードを読み解く胆力が必要となりますが、日頃から Unity で XR コンテンツをつくっている方にとっては一手段として知っておく価値はあります。
// 2020-12-30 JST 追記ここから
『2020/04/16 のアップデート以降、更新されていません。』は事実でしたが、本家のフォーク版が実質的な後継プロジェクトとなっていることを認識できていませんでした。
開発しているのは @DePanther さんで、フォーク版は彼の GitHub リポジトリで管理されています。
確認されている環境は次の通りです。主要な組み合わせを網羅しつつ、ハンドトラッキングを担う WebXR Hand Input にも対応しているのは嬉しいですね。
- Google Chrome on Widnwos.
- Mozilla Firefox on Windows.
- Oculus Browser on Oculus Quest (Supports WebXR Hand Input).
- Firefox Reality on Oculus Quest.
- Firefox Reality on Hololens 2 (Supports WebXR Hand Input).
- Google Chrome on Android (Supports both AR and VR sessions).
- Samsung Internet Browser on Android (Supports both AR and VR sessions).
- Firefox Reality on Vive Focus Plus.
改めて『JavaScript を書きたくない！ 慣れている Unity で開発したい！』という方には強く推せるソリューションかもしれません。
このフォーク版の使い方を @tomasheep さんがまとめていたので、気になる方は参照してください。
// 2020-12-30 追記ここまで
WebXR Exporter でエクスポートされた WebVR コンテンツとしては、@korinVR さんの『VR刺身タンポポ』や、フォージビジョン社の『歩ける全天球動画 for WebXR』などが挙げられます。
他にもゲームエンジンライクなものはないのか?
選択肢として Babylon.js Editor のように Unity のエディタと似ている UI を持つ PlayCanvas や、Amazon サービスとの親和性が高い Amazon Sumerian などが挙げられます。
目的別 WebAR コンテンツの開発
前提として、昨年 2019 年は iOS のアップデートにより iOS における WebAR が死にかけました。結果的に打開策が見つかり、iOS における WebAR の死は回避されました。もはや昔話になりますが、これまたそのあたりの経緯は過去にまとめているので、興味のある方は参照してください。
そんなちょっと制限のある状態で迎えた今年 2020 年は、ネガティブ要素もなく、様々な WebAR コンテンツが安心してリリースできる状況になりました。
そして年末 2020/12/15 JST にリリースされた iOS 14.3 で WKWebView が大きくアップデートされ、これまでアプリ内ブラウザで使えなかった getUserMedia が使えるようになりました。iOS 向けの WebAR にとっては大きな変化です。
これの何が嬉しいかと言うと、まず getUserMedia はブラウザでカメラを取り扱う API です。これまではこの getUserMedia が動作するのは Safari だけであり、LINE や Twitter などのアプリ内ブラウザでは “動作しません” でした。つまり WebAR コンテンツをシェアした先で体験してもらうことが実質的にできず、UserAgent を見て Safari で開き直してもらうよう誘導するなどの涙ぐましい努力が必要でしたが、ついにそういった小手先のテクニックが不要になります。結果的に 2021 年以降はより多くの WebAR コンテンツを見かける機会が増えると考えられます。
このアップデートについては palan 社のメディア「bagelee」が最速で解説記事を公開していたので、特に WebAR に携わる方は必見です。
なお、Google が推進している Android の ARCore は iOS に比べて『対応端末が少ない』という課題は引き続き残るものの、仕様面での大きな不安はありません。
iOS/iPadOS 特有の事情
3D フォーマット USDZ についての補足
USDZ (拡張子 .usdz) は、ピクサーが開発した USD (拡張子 .usd) を拡張した 3D フォーマットです。iOS/iPadOS に対応させる場合は原則としてこの USDZ ファイルが必要となります。
中身は USD ファイルと画像アセット類をまとめて ZIP 圧縮したものなので、例えば model.usdz を model.zip にリネームして unzip すると model.usdc とテクスチャ画像を含むフォルダが出てきます。
USDZ ファイルの作成方法についての補足
USDZ ファイルの作成方法としては、例えば次の方法が挙げられます。
-
usdzip で変換する
- USD の Utility
-
USDZ ツール で変換する
- Apple 公式の CLI 変換ツール / 要 Developer アカウント
-
Reality Converter で変換する
- Apple 公式の GUI 変換ツール / 要 Developer アカウント
- 実態は USDPython が内包する usdzconvert に UI をつけたもの
-
Reality Composer で制作したものを USDZ として出力する
- Apple 公式の AR 制作ツール
- Adobe Aero で制作したものを USDZ として出力する
- VECTARY の USDZ converter で CAD を含む 50 以上の 3D モデルフォーマットから変換する
- Cinem4D で制作したものを USDZ として出力する
- Sketchfab 等にアップロードして USDZ 形式でダウンロードする
iOS/iPadOS と Android の両 OS で動作する WebAR コンテンツをつくりたい
iOS/iPadOS 向けには USDZ ファイルを、Android 向けには GLB ファイルを用意して『<model-viewer>』の利用がおすすめです。これは Google 検索で 3D モデルと AR 表示ができる仕組みと同じです。
ミニマムな記述方法は次の通りです。
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer src="path/to/file/model.glb" ar ar-modes="webxr scene-viewer quick-look" ios-src="path/to/file/model.usdz"></model-viewer>
script 要素でライブラリを読み込み、表示させたい箇所に <model-viewer> タグを配置するだけです。
この中で大事なのは WebAR として成り立たせる ar 属性と、iOS/iPadOS でも動作するようにする ios-src 属性です。前者が無い場合は AR で表示されず、後者が無い場合は Android のみでしか表示されません。
仮に対象が iOS/iPadOS だけであれば AR Quick Look を使うことでより短いコードで済みます。
<a rel="ar" href="path/to/model.usdz"><img src="path/to/thumbnail.jpg"></a>
iOS/iPadOS であれば OS レベルでネイティブ実装されているので、別途 script 要素でライブラリを読み込む必要はありません。記述も簡単でサムネイル画像に USDZ ファイルをリンクさせるだけです。
ただし、簡単に書ける反面、iOS/iPadOS 以外の環境でクリックした場合、単純に USDZ ファイルをダウンロードする形となります。実際に Apple 公式の『Quick Lookギャラリー』はそのような形になっています。
これはあまりユーザーフレンドリーとは言い難いので、最低限 UA を見て出し分けするか、Android にも対応し、PC で見てもファイルの直接ダウンロードが発生しない <model-viewer> のほうが実用的だと考えています。
QR コードに反応する WebAR コンテンツをつくりたい
『AR.js』の『Marker Based AR』の利用がおすすめです。
WebAR コンテンツを体験できるウェブサイトの URL を QR コード化したものを、そのまま WebAR のマーカーとして使用することで、1 つの QR コードを URL 遷移目的とマーカー目的の 2 段階で利用できます。
ただし、Marker Based AR の仕様上『QR コードの周りに黒い帯が必要になる』ため、それを嫌う場合は後述する NFT を検討してください。
※QRコードは(株)デンソーウェーブの登録商標です
QR コードではない写真やイラスト、あるいは黒い帯のない QR コードに反応する WebAR コンテンツをつくりたい
前述の通り『AR.js』の『Marker Based AR』には一定の制限があります。それを回避するためには NFT(Natural Feature Tracking) と呼ばれる画像認識ドリブンで WebAR を実現する必要があります。
無償で実現したい場合は『AR.js』の『Image Tracking』の利用がおすすめです。
この NFT 機能がリリースされた直後に「試してみる」エントリを書いていたので、詳細が気になる方は参照してください。
あるいは一定の制限はあるものの、無償で試せる『palanAR』の『画像認識』の利用もおすすめです。
そしてお金がかかっても構わない場合は『8th Wall』の『Image Targets』がおすすめです。
WebAR コンテンツの開発において 8th Wall は商用での利用事例も多く、技術面とブランディング面で成功しているプロダクトですが、無償利用ができません。ミニマムでも月額 $99 が必要となるので、個人開発で気軽に使うのは少しハードルがあるかもしれませんが、かなりパワフルなエンジンなので、選択肢として意識しておくことは重要です。
※QRコードは(株)デンソーウェーブの登録商標です
Ingress のような位置情報に連動する WebAR コンテンツをつくりたい
『AR.js』の『Location Based AR』の利用がおすすめです。
位置情報を取り扱う性質上、Geocoding した latitude (緯度) と longitude (経度) が必要になりますが、それらは Geocoding API やスマートフォンのアプリで取得できます。
ここまで何度も AR.js が登場していますが、無償のオープンソースにして『Image Tracking』、『Location Based』、『Marker Based』の 3 パターンに対応できるライブラリというのは、ユーザー視点では有り難いことです。
VRoid Studio でつくった “うちの子” を WebAR で現実世界に連れてきたい
これは厳密には開発方法ではなく表示する方法です。
WebXR Device API に対応したブラウザで VRoid Hub の特定のモデルのページにアクセスして AR 表示することで、“うちの子” を現実世界に連れて来れます。
前述の通り Safari は WebXR Device API に対応していないので、XR Viewer を使うか、あるいは次の方法で VRM ファイルを USDZ ファイルに Convert するのが良いでしょう。
- うちの子.vrm を適切な方法で うちの子.glb にリネームして
- うちの子.glb を適切な方法で うちの子.usdz に変換して
- うちの子.usdz を AR Quick Look で表示
例によって詳細は個別のエントリを参照してください。
Live2D でつくった “うちの子” を WebAR で現実世界に連れてきたい
Live2D 公式の『CubismWebARSample』の利用がおすすめです。
Live2D 公式 note で事細かに説明されているので、３D 派ではなく 2D 派の方はこの方法を試してみると良いかもしれません。
Snow のような顔フィルターになる WebAR コンテンツをつくりたい
これはバーチャルメイクの手法に通じますが、例えば以下のような手法が挙げられます。
8th Wall の『Face Effects』を使う
無償の AR.js 同様、有償ではあるものの色々な機能を持っている 8th Wall で Face Effects が使えます。
palanAR の『フェイストラッキング』を使う
WebAR と言えば無償の AR.js か有償の 8th Wall というイメージがあるかもしれませんが、本エントリでも何度か登場している国産の WebAR ソリューション palanAR にもフェイストラッキングの機能があります。
『DeepAR』を使う
DeepAR でググると Amazon の予測アルゴリズムのほうがヒットし、ググラビリティが圧倒的に低いですが、DeepAR という SDK があります。
DeepAR は iOS, Android のネイティブアプリに対応している他、WebAR にも対応しています。
YouTubeのvideoIDが不正です事始めエントリを書いているので、気になる方は参照してください。
MediaPipe の『FaceMesh』を使う
MediaPipe は Google が開発しているクロスプラットフォームの ML ソリューションです。
MediaPipe offers open source cross-platform, customizable ML solutions for live and streaming media.
MediaPipe には様々な機能が含まれていますが、それらの内、次の機能が JavaScript として提供されているので、Web でも利用できます。
4 つある機能の内、『Face Mesh』を利用することで顔フィルターを実現できます。
この Face Mesh は ARCore の顔認識機能である Augmented Faces の基盤にもなっていて、ネイティブアプリと Web アプリとでパフォーマンスの差こそあれど、ほぼ同等のことが実現できるので、要注目のソリューションです。ぜひ公式のデモを試してみてください。
個人的に VR も AR も ML もあくまで手段であり、アウトプットの形だと考えています。その過程には様々な技術が含まれていますが、MediaPipe のような ML ソリューションは欠かせないものになりつつあると感じています。MediaPipe は WebXR に限らずネイティブの XR とも相性が良いので、注視しておくと良いでしょう。
Appendix - WebXR 系で Watch しておくと捗るアレコレ
- WebAR ソリューション palanAR を提供する palan 社が運営する WebAR 関連の記事も多いウェブメディア『bagelee』
- WebAR ソリューション LESSAR を提供するスターティアラボ社が運営する WebAR 関連の記事も多いウェブメディア『ARGO』
- AR 関連のエントリが豊富な @jyuko49 さんの技術ブログ『じゅころぐAR』
- 特に Babylon.js に強い @WheetTweet さんの技術ブログ『CrossRoad』
- 本エントリの著者が運営している WebXR に特化したオンライン勉強会イベント『WebXR Tech Tokyo』
- Hubs など WebXR を精力的にサポートしている『Mozilla Mixed Reality Blog』
- A-Frame のアップデート情報や事例が掲載されている『公式 Blog』
- A-Frame のアップデートを検知できる『GitHub リポジトリの Releases』
- 8th Wall のアップデート情報や事例が掲載されている『公式 Blog』
- Chrome の WebXR に関するアップデートを検知できる『Chrome Releases』
- Safari の WebXR に関するアップデートを検知できる『
Safari Release Notes』 - Oculus Browser の WebXR に関するアップデートを検知できる『Oculus Browser Developer Release Notes』
現場からは以上です！
明日は @sashihara_jp さんによる『コロナ禍の中のリモートワークでの弊社各チームのマネジメントの工夫について』です。お楽しみに！
更新履歴
- 2020-12-30 JST フォーク版『WebXR Exporter』の説明を加筆
Discussion