WebXRの現状確認 2023 Autumn 2023-10-18 PWA Night vol.55 ～WebXR〜 @ikkou

whoami @ikkou Avatar Name: HEAVEN chan ● ドリコム→メルカリ→ZOZO (XR屋/DevRel屋/配信屋) ● 2023-2024 Microsoft MVP for Mixed Reality ● 日本バーチャルリアリティ学会VR技術者 ● 知的財産管理技能士 ● LODGE XR Talk 運営 ● xR Tech Tokyo / WebXR Tech Tokyo 主催 (休止中) ● WebXR ( WebVR/WebAR ) Advent Calendar 運営 © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023

関連するWebXR関連の資料 WebXR 最前線 2022 メタバースとWeb3を添えて 2022/12/01 #WebXR ( WebVR/WebAR ) の 現状確認 2022 Winter 2022/12/01 iOS 17におけるWebXR Device APIの 現状確認 2023/09/19 © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023

PWA Night vol.33 ～WebXR〜 から2年が経過 PWAを使ってWebXRコンテンツを オフラインで動くようにする手順について from WheetTweet PWAがOculus Storeに配信できるようになる from Hitoshi Sumiya © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023

Oculus Store 改め Meta Store における PWA の現状 良くも悪くも変わっていない ● Meta 公式で開発ガイドを提供中 ○ Progressive Web Apps開発のスタートガイド ○ OculusブラウザーとWebXRのスタートガイド ● ストア ○ 厳格な審査ありの Meta Store ○ 公式ストアより審査のハードルが低い App Lab ● 国内事例 ○ 2021年12月に U-NEXT が PWA 形式でアプリを配信 ○ その後の目立った追随は……。 ● そもそも Meta Quest for Business を意識したものだった Progressive Web Apps開発の スタートガイド VRヘッドセット「Quest 2」で U-NEXTが利用可能に。 VRコンテンツの提供も予定 © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023

復習: Meta Store 対応 PWA の Meta Quest Browser アクセス時の挙動 © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023 ● Oculus Store (当時) の PWA 対応リリース 当初から対応していたアプリ ○ Web 版 Instagram https://www.instagram.com/ ○ Web 版 Facebook https://www.facebook.com/ ● アプリをインストール済みの場合は 「開く」ダイアログが出現 ● アプリ未インストールの場合は 「アプリをダウンロード」ダイアログが出現 ● Meta Quest Browser 以外は対応していない ○ Firefox Reality, Wolvic では表示されない ○ PICO 4 など別デバイスでも表示されない

10/10 Meta Quest 3 発売🎉 © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023 Image source: http://www.amazon.co.jp/dp/B0CB3WXL12

Meta Quest 3 の登場によって PWA が再注目されるか Meta 社の Vice President of VR ラブキン氏が Meta Quest 3 の MR と PWA の可能性に言及 “ラブキン：私たちのMRに対するアプローチは、開発者がすでに慣れ親しんでいる技術スタック を使い、可能な限り開発を容易にすることです。 例えばPWA(プログレッシブ・ウェブアプリケーション)は、MR向けに特別な品質管理をする必 要があまりなく、MR向けアプリケーションを作るための素晴らしい手段です。 （中略） 例えば、あるエンジニアがデモを作ったんです。地面に穴を開けて、その中に入ったりすること もできるものなのですけど。 その実現に必要だったのは、たった2人のエンジニアと2日間の時間だけです。JavaScriptの コードと基本的なウェブ技術、そして彼らが完全に慣れ親しんだ発想さえあれば十分。Quest 3 で動作し、ネイティブ・アプリケーションのように見えます。” 引用元: 【西田宗千佳のRandomTracking】MetaのVRとAI戦略はどこに行くのか。CTO・VR責任者に現地取材 - AV Watch MetaのVRとAI戦略はどこに行くのか。 CTO・VR責任者に現地取材 フリーライター/ジャーナリスト 西田宗千佳のXアカウント © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023

法人向けの Meta Quest for Business も復活 © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023 PWA はそもそも Meta Quest for Business を 意識したものだった “例えば、DropboxやSlackなどの生産性向上アプリやコラボレー ションアプリをVRで使用することで、プロジェクトの進捗を把 握したり、同僚と情報を同期したりできるようになります。ま た、FacebookやInstagramのパネルアプリをQuestヘッドセッ トに導入して、仕事中でもプライベートとのつながりを維持でき るようにしています。” 引用元: 『「Oculus for Business」から「Quest for Business」への進化』 2021/10 『「Oculus for Business」から「Quest for Business」への進化』 Image source: https://www.meta.com/ja-jp/blog/quest/evolving-from-oculus-for-business-to-quest-for-business/

● XRは、VR・AR・MR など○○ Reality の総称 ● “WebXR” の標準仕様は無いが、“本発表における” WebXR の定義は次の2つ ○ 『ブラウザを通した VR である WebVR と、ブラウザを通した AR である WebAR の総称』であり、技術そのものと、コンテンツの双方を指す ○ WebXR Device API の使用有無は問わない ● WebXR を構成する主要な要素技術は HTML, CSS, JavaScript, 画像や 3D モデルなどのアセット、バックエンド ○ 特に 3D モデルは主に Apple 向けの USDZ (.usdz) や Google がよく利用してい る glTF (.glb, .gltf) の他、FBX (.fbx) や OBJ (.obj) や 3D アバターファイル フォーマットの VRM (.vrm) などが利用されている 本発表における各種定義 © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023

XRとはなにか? © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023 VR (Virtual Reality) 仮想現実・人工現実感 100%バーチャルな世界 AR (Augmented Reality) 拡張現実感 現実にバーチャルを重畳 ちょうじょう MR (Mixed Reality) 複合現実感 現実とバーチャルを融合 Image source: https://www.canon-its.co.jp/solution/xr/

● 一部のスマートフォンを含む XR デバイスの状態を取得するための API ○ WebXR コンテンツそのものを作る API ではない ● 現在のステータスは W3C Candidate Recommendation Draft ○ 2019-02-05に “First Public Working Draft” が公開 ○ Candidate Recommendation Draft になってから 7 回の更新を経ている ( 最終更新 10/5 ! ) ○ ブラウザの実装がまだまだまだ変わる可能性がある ● メタバースの相互運用の標準化を図る団体 「The Metaverse Standards Forum」に Web Standards 枠で W3C は加盟している ○ 概念として Immersive web も含まれている WebXR Device API とは? © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023 Image source: https://www.w3.org/TR/webxr/

WebXR Device API と関連する Module/API (2023.10) © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023 Candidate Recommendation Draft ● WebXR Augmented Reality Module - Level 1 Working Draft ● WebXR Gamepads Module - Level 1 ● WebXR Hit Test Module ● WebXR DOM Overlays Module ● WebXR Layers API Level 1 ● WebXR Lighting Estimation API Level 1 ● WebXR Depth Sensing Module ● WebXR Hand Input Module - Level 1 Editor’s Draft ● WebXR Anchors Module ● WebXR Capture Module Draft Community Group Report ● WebXR Plane Detection Module ● WebXR Raw Camera Access Module ● WebXR Marker Tracking Module ● The element ○ Feature Incubations から一歩前進 Feature Incubations の例 ● navigation ○ VRモードを維持したままページ遷移するメタバー ス時代に欠かせない機能 ○ A-Frame 1.1.0がimmersive navigationとして先 行実装 ● computer-vision ○ WebXR でコンピュータービジョンを実現するた めの機能

デスクトップ ● 対応 ○ Chrome (Blink) ○ Microsoft Edge (Blink) ○ Firefox (Gecko) ● 非対応 ○ Safari (WebKit) モバイル ● 対応 ○ Android 版 Chrome (Blink) ■ ARCore 対応機種のみ ○ iOS 版 WebXR Viewer ● 非対応 ○ Safari (WebKit) ○ iOS 版ブラウザアプリ (WebKit) 主要ブラウザの WebXR Device API 対応状況 (2023.10) © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023 Image source: https://caniuse.com/webxr Can I Use… で見る

● 不安定、バージョンアップで動作しなくなることもある ● chrome://flags/ の変更なしで immersive-vr (WebVR) が動作する ○ immersive-ar (WebAR) が動作しない ● 同じ Blink エンジンを搭載している Edge も同様の挙動となる ● 動作確認済み ○ Google Chrome 118.0.5993.71 ○ Google Chrome Beta 119.0.6045.21 ○ Google Chrome Canary 120.0.6069.0 ○ Microsoft Edge 118.0.2088.46 Chrome - 主要ブラウザの WebXR Device API 対応状況 (2023.10) © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023 デスクトップ版

● in-development ステータス ● about:config で dom.vr.webxr.enabled を true に変更することで WebXR のフラグとなる navigator.xr が有効化される ○ immersive-vr (WebVR), immersive-ar (WebAR) ともに動作しない ● 検証バージョン ○ Firefox 119.0b9 ○ Firefox Nightly 120.0a1 Firefox - 主要ブラウザの WebXR Device API 対応状況 (2023.10) © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023 デスクトップ版

Android, iOS - 主要ブラウザの WebXR Device API 対応状況 (2023.10) iPhone 13 Pro (iOS 17.0.3) Safari の Experimental Features でフラグを 変更できなくなり、WebXR Device API を使っ たコンテンツは以前と変わらず動作しない © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023 Rakuten Mini (Android 9) Android 標準ブラウザの Chrome は WebXR Device API に標準対応しているので動作する ように見えるが、ARCore に対応していない端 末の場合は immersive-ar を使ったコンテンツ は動作しない、immersive-vr は polyfill の カードボードモードで動作する (判定できない) Google Pixel 7 Pro (Android 14) Android 標準ブラウザの Chrome は WebXR Device API に標準対応しているので動作する ように見え、ARCoreに対応している端末であ れば WebXR Device API を使ったコンテンツ が動作する

iOS / iPadOS ● iOS 15.4 で WebXR Device API に “実験的”に対応 ○ Firefox と同じように navigator.xr のフラグが立つのみ ○ immersive-vr, immersive-ar ともに動作しない ● iOS 17 で設定項目が消失してフラグも立てられなくなった macOS ● 非対応 visionOS ● フラグを立てることで対応する (後述) Safari における補足 © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023 iOS 17 における WebXR Device API の現状確認 News from WWDC23: WebKit Features in Safari 17 beta

● W3C Immersive Web Working and Community Groups が運営する Immersive Web Developer に は主要デバイスの WebXR Device API と関連モ ジュールの対応状況が記載されている ● ハードウェアの対応状況の他、 JavaScript ライブラリ やフレームワークの Hello World 相当のものや実際に 動作するデモが掲載されている 主要デバイスの WebXR Device API 対応状況 (2023.10) © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023 Image source: https://immersiveweb.dev/

● Chromium ベースのブラウザを搭載するハードウェア ○ Meta Quest Browser を搭載している Meta Quest Pro, Meta Quest 3 etc. ○ Edge を搭載している HoloLens 2 ○ PICO ブラウザを搭載している PICO 4 ● Firefox Reality 後継の Wolvic を搭載するハードウェア ○ Lynx R-1, Huawei VR Glasses, ThinkReality A3, Think Reality VRX ● 独自ブラウザ Helio を搭載する Magic Leap ● Nreal Light / Nreal Air ○ FarePlay For NReal (Light+Air)が対応 ● Safari on Apple Vision Pro 主要ハードウェアの WebXR Device API 対応状況 (2023.10) © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023 Image sources: https://www.amazon.co.jp/dp/B0BDYFB176/, http://www.amazon.co.jp/dp/B0CB3WXL12 Meta Quest 3 PICO 4

現時点では VR HMD の中では最適解と言っても過言ではない (※個人の感想) ● 現実の見えるカラーパススルー (MR) の品質が良い ○ ただし 10 万円以下のデバイスの中で、という注釈付き ■ 22 万円で登場し現在 15 万円の Meta Quest Pro よりも良いという見方も ■ 例えば 50 万円超えの Apple Vision Pro と比較するべきではない ● Meta Quest Browser で WebVR と WebAR を総合的に体験できる ● Web エディタを使えば Meta Quest Browser で開発から体験まで一気通貫 ● ¥74,800 という価格をどう捉えるか ○ Meta Quest 2 や PICO 4 を持っていない WebXR 屋であれば “買い” ○ 決してお安いとは言えない Meta Quest 3 は WebXR を楽しむための最適解か? © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023

Apple Vision Pro の visionOS は iOS とは異なり WebXR Device API の immersive-vr (WebVR) に対応することが明言されている (要フラグ) Apple Vision Pro の WebXR Device API 対応 🎉 © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023 Meet Safari for spatial computing “Safari on Vision Pro currently has testable support for WebXR, available behind a feature flag while we collaborate with the W3C Immersive Web Working Group on updates to the web standard. WebKit supports the immersive-vr session type in WebXR. Vision Pro does not have external controllers. Instead, you can request the “hand-tracking” feature to let users interact with your content.” 引用元: News from WWDC23: WebKit Features in Safari 17 beta Image sources: https://webkit.org/blog/14205/news-from-wwdc23-webkit-features-in-safari-17-beta/ https://developer.apple.com/videos/play/wwdc2023/10279/

● Android ○ まずはここから WebXR - Samples ■ Immersive VR Session, Immersive AR Session ○ Experiments with Google の WebXR Experiments ■ Bouncing Band ● iPhone ○ フラグを立てた Safari でしか試せない An example model Element ■ WebKit 機能フラグで HTML element を有効化 ● Meta Quest Pro / Meta Quest 3 ○ カラーパススルーで体験する Spatial Fusion WebXR Device API 関連の WebXR コンテンツ © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023 今すぐ試して欲しい！ An example model Element Spatial Fusion Mixed Reality WebXR “Spatial Fusion” を Meta Quest Pro で体験すると最高というお話

● 8th Wall の Discover WebAR ○ 有償 WebAR ライブラリでもっとも精度が高く商用利用もされている ○ 体験可能にチェックを入れるとアクセス可能なものに絞られる ● [iOS] Apple の Quick Lookギャラリー ○ リリース当初よりもできることが増え、iOS 17 から使えるようになった Object Capture で作成された靴の 3D モデルなども試せる ● Google の Examples ○ Android 向けだけではなく iOS 向けにも動作する WebXR Device API に依存しない WebXR コンテンツ © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023 改めて試して欲しい！ 8th Wall Discover WebAR Apple の Quick Lookギャラリー

● WebXR Device API を使う場合、ネイティブアプリ同等のことは難しい ○ ネイティブ API へのアクセスが難しい ■ WebXR Raw Camera Access Module の登場でカメラアクセスが可能になった ○ 完結型ではなくネイティブアプリへの導入としての利用が現実的ではないか ○ WebXR Device API を使わないモバイルの WebAR 用途は今後も活用の場が増えていく ● XR 開発者と Web フロントエンド開発者が交わりにくい ○ ネイティブの XR 開発は多くの場合 Unity で C# ■ WebXR Export を使えば Unity からそのまま出力できる ○ Web フロントエンド開発は多くの場合 VSCode などで JavaScript / TypeScript WebXR コンテンツの開発における課題 © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023

● Meta Quest 3 で WebXR の体験がもっともっと良くなる ● Apple Vision Pro の到来に備えて “素振り” が重要になる ● WebXR 屋をもっと増やしたい！ ○ WebXR に興味を持った人は『WebXR ( WebVR/WebAR ) Advent Calendar 2023』に 登録してください ( 例年通り ADVENTAR に作成予定 ) ■ 2023 年末時点での開発手法やビジネス事例も交えて最新の状況をまとめた 『WebXRの現状確認 2023 Winter』を 2023/12/01 に公開予定 ○ WebXR コンテンツを作っている人は LODGE XR Talk で展示してください おわりに © ikkou 2023-10-18 PWA Night vol.55 ～WebXR〜 WebXRの現状確認 2023