WebXR 最前線 2022 ~ メタバースとWeb3を添えて / WebXR Frontline 2022

2022-08-24 に CEDEC 2022 でオンライン登壇した際の発表資料です。
https://cedec.cesa.or.jp/2022/session/detail/42

▼プロポーザル
2020年初頭から始まった『コロナ禍』により、私たちの生活は大きく変わり、そして今も収束の気配を見せていません。
そして2021年秋、現Metaの発表をきっかけとしていわば『大メタバース時代』が到来したといっても過言ではありません。
さらにWeb3関連のアレコレも何かと話題になり、そのすべては少なからずWebXRにも影響を与えています。
本セッションではWebXRそのものの「技術的な最新動向」と「活用事例の最新動向」を時間の許す限りお伝えします。
もちろん、あくまで主軸はWebXRとしつつ、今や避けては通れないメタバースとWeb3との関係性についても触れます。

▼ご意見、ご感想、誤りの指摘等は Twitter @ikkou 宛にメンションまたは DM をお送りください!!
Twitter: https://twitter.com/ikkou

Transcript

1. WebXR 最前線 2022 メタバースとWeb3を添えて 2022-08-24 CEDEC2022 諸星 一行
2. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 本資料はSpeakerDeckに公開済みです。 スクリーンショットは不要です。 本資料について 本講演に関するSNSへの投稿は大歓迎です。 公式ハッシュタグは #CEDEC2022 です。
3. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 2020年初頭から始まった『コロナ禍』により、私たちの生活は大きく変わり、そして今 も収束の気配を見せていません。 そして2021年秋、現Metaの発表をきっかけとしていわば『大メタバース時代』が到来し たといっても過言ではありません。 さらにWeb3関連のアレコレも何かと話題になり、そのすべては少なからずWebXRにも影 響を与えています。 本セッションではWebXRそのものの「技術的な最新動向」と「活用事例の最新動向」を 時間の許す限りお伝えします。 もちろん、あくまで主軸はWebXRとしつつ、今や避けては通れないメタバースとWeb3と の関係性についても触れます。 本講演について
4. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • 本資料に掲載されている内容は 2022-08-05 現在の情報を最新のものと して取り扱っています。 • 本講演はリアルタイム登壇ではなく、事前に収録した録画を配信していま す。そのため 2022-08-05 から講演当日の 2022-08-24 までに大きなト ピックが発生した場合でも、本講演では触れられません。 • 表記上、®マークや™マークを省略しています。 • 本講演は質疑応答の場としてAsk the speakerを用意していません。 質問等がある方はTwitterハッシュタグ #CEDEC2022 宛にお気軽にお寄 せください。 免責事項
5. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 事例ベースの講演となるため、技術的なスキルは多く必要としません。 • WebXR ( WebVR, WebAR ) に興味がある • Webフロントエンジニアの技術を生かせるVR、ARに興味がある • Unityの技術を生かせるVR、ARに興味がある 本講演の対象者
6. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • 話すこと ◦ WebXR“周辺技術”最新動向 (Dev) ◦ WebXR“活用事例”最新動向 (Biz) • 話さないこと ◦ WebXRの基礎 ◦ WebXRコンテンツの具体的な開発方法 本講演で話すことと話さないこと
7. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • XRは、VR・AR・MRなど◦◦ Realityの総称 • WebXRの標準仕様は無いが、“本講演における”WebXRの定義は次の2つ ◦ 『ブラウザを通したVRであるWebVRと、ブラウザを通したARである WebARの総称』であり、技術そのものと、コンテンツの双方を指す ◦ WebXR Device APIの使用有無は問わない • WebXRを構成する主要な要素技術はHTML、CSS、JavaScript、画像や 3Dモデルなどのアセット、バックエンド 本講演における各種前提
8. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 IKKOU Morohoshi (@ikkou) HEAVEN chan a.k.a いっこう • 2022-2023 Microsoft MVP for Mixed Reality (WebXR) • 知的財産管理技能士 • WebXR Tech Tokyo 主催 🎤 CEDEC2019 WebXRの現状と実社会への応用事例 🎤 CEDEC2020 xRfm を通して見た近年のxR業界の潮流とミライ 🎤 CEDEC2021 コロナ禍における WebXR ( WebVR/WebAR ) のイマ！ 🎤 CEDEC2022 メタバースの激流とXR業界のイマ Twitter では HEAVEN ちゃんとして生きていますが VTuber ではありません:) https://twitter.com/ikkou 登壇者について
9. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 関連するWebXR関連の資料 #WebXR ( WebVR/WebAR ) の現状確認 2021 Winter Zenn iOS 15.4におけるWebXR Device APIの現状確認 Zenn コロナ禍における WebXR ( WebVR/WebAR ) のイマ！ CEDEC2021 iOSではじめるWebAR 2021 iOSDC Japan 2021
10. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 WebXR“周辺技術”最新動向 (Dev) Image Source: https://unsplash.com/photos/xrVDYZRGdw4
11. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • The Metaverse Standards Forumの設立と W3Cの参画 • WebXR Device APIの最新動向 ◦ W3Cの勧告プロセスがWDから15回の更新を 経てCRに移行 ◦ WebXR Device APIと関連するModule/APIの現 況 ◦ 主要ブラウザのWebXR Device API対応状況 ◦ MozillaがFirefox Realityのサポートを終了、 Igaliaが開発するWolvicに移行 ◦ iOS 15.4でWebXR Device APIにのみ“実験的” に対応 ◦ iOS/AndroidのWebXR Device API対応状況 ◦ ハードウェアのWebXR Device API対応状況 WebXR“周辺技術”最新動向(Dev) • WebXRコンテンツ開発手段の動向 ◦ JavaScriptライブラリ/フレームワーク ▪ A-Frame ▪ Babylon.js ▪ MindAR ▪ 8th Wall ▪ YouCam for Web ▪ Hubs Cloud ◦ ゲームエンジン ▪ Unity (C#) + WebXR Export ◦ ブラウザベースの開発ツール • その他の気になる技術動向
12. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • 2022-06-21にKhronos Groupが主幹事となってメタバースの相互運用の標準化 を図る団体「The Metaverse Standards Forum」が設立 • W3Cは創設メンバーとして参画している The Metaverse Standards Forumの設立とW3Cの参画 WebXR“周辺技術”最新動向(Dev) Image Source: https://docs.google.com/presentation/d/1tpKTlp9aVeJGD0E_0yBGuo37omZhGAjWmM1OH8hnsQ8/edit#slide=id.g13ea1b48089_2_91
13. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 W3Cの勧告プロセスがWDから15回の更新を経てCRに移行 WebXR“周辺技術”最新動向(Dev) - WebXR Device APIの最新動向 Image Source: 2022-08-05 - WebXR Device API W3C Candidate Recommendation Draft - https://www.w3.org/TR/2022/CRD-webxr-20220601/
14. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • 2019-02-05に“First Public Working Draft”が公開 ◦ 2022-03-30まで“Working Draft”として15回の更新 • 2022-04-26に“Candidate Recommendation Draft”が公開 ◦ CRの段階ではブラウザの実装がまだ大きく変わる可能性がある W3Cの勧告プロセスがWDから15回の更新を経てCRに移行 WebXR“周辺技術”最新動向(Dev) - WebXR Device APIの最新動向 Image Sources: W3C Recommendation Track - https://www.w3.org/2005/Talks/0227-rectrack/?n=1 WebXR Device API Publication History - https://www.w3.org/standards/history/webxr
15. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 Working Draft • WebXR Gamepads Module - Level 1 • WebXR Augmented Reality 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 WebXR Device APIと関連するModule/APIの現況 WebXR“周辺技術”最新動向(Dev) - WebXR Device APIの最新動向 Draft Community Group Report • WebXR Plane Detection Module • WebXR Raw Camera Access Module • WebXR Marker Tracking Module Feature Incubations の例 • navigation ◦ VRモードを維持したままページ遷移するメタバース時代に 欠かせない機能 ◦ A-Frame 1.1.0がimmersive navigationとして先行実装 • model-element ◦ iOS向けの.usdzファイルとAndroid向けの.glbファイルを描 画するAR Quick Lookや<model-viewer>のネイティブ実装 ◦ iOS 14.5から実験的機能としてHTML <model> elementを 実装 Reference: 2022-08-05 - Immersive Web at W3C - https://github.com/immersive-web
16. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 主要ブラウザのWebXR Device API対応状況 (2022.08.05) WebXR“周辺技術”最新動向(Dev) - WebXR Device APIの最新動向 Image Source: 2022-08-05 - caniuse - https://caniuse.com/webxr
17. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • ChromiumエンジンのEdge、Chrome、Meta Quest 2に搭載されているMeta Quest BrowserやWeb3で話題のBraveは標準対応 ◦ chrome://flagsの変更が不要 ▪ ただしAndroidはARCore supported devicesであることが必要 • GeckoエンジンのFirefoxはin-developmentステータス ◦ about:configでdom.vr.webxr.enabledをtrueに変更することで対応可 ▪ ただしImmersive VR Sessionは動作しない *1 ◦ MozillaがFirefox Realityのサポートを終了、Igaliaが開発するWolvicに移行 • WebKitエンジンのSafariはIn Developmentステータス ◦ Safariでは対応できないが「 WebXR Viewer」アプリで対応可 ◦ iOS 15.4でWebXR Device APIにのみ“実験的”に対応 主要ブラウザのWebXR Device API対応状況 (2022.08.05) WebXR“周辺技術”最新動向(Dev) - WebXR Device APIの最新動向 *1 Windows 11 / Firefox 103.0.1 / Oculus Link状態のMeta Quest 2 (42.0.0.130.250381640954) で検証 ※ PCでの動作には別途Oculusソフトウェアの設定とSteamVRの設定が必要 ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません
18. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • Firefox RealityはQuest 2やHoloLens 2をはじめとする各種XRデバイスに最適化 されたGeckoエンジンをベースとするWebXR Device APIに標準対応したブラウザ • 2022-02-03にThe Mozilla BlogでFirefox Realityのアプリストアからの削除とサ ポート終了を発表 • 後継ブラウザとしてIgaliaが開発するFirefox Realityのソースコードをもとにした いるWolvicを推奨している ◦ 2022-08-05現在、Queta向けにはApp Labで、HUAWEI向けにはAppGalleryで配布している ことに対し、例えばHoloLens向けにMicrosoft Storeでの配布はまだ始まっていないが、 GitHubでソースコードが公開されているので誰でもビルド可能 MozillaがFirefox Realityのサポートを終了、Igaliaが開発するWolvicに移行 WebXR“周辺技術”最新動向(Dev) - WebXR Device APIの最新動向 Image Source: Welcome to Wolvic - https://www.wolvic.com/en/
19. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • 2022-03-15にiOS 15.4がリリースされ、 設定→Safari→詳細→Experimental Featuresから次のAPIと Moduleをユーザー自身で有効化できるようになった ◦ WebXR Augmented Reality Module ◦ WebXR Device API ◦ WebXR Gamepads Module ◦ WebXR Hand Input Module • 実態としてはフラグをONにしても有効化“していない”ので 現時点でiOSにおいてWebXR Device APIを用いたコンテンツ は動作しない iOS 15.4でWebXR Device APIにのみ“実験的”に対応 WebXR“周辺技術”最新動向(Dev) - WebXR Device APIの最新動向 Safariの実験的なWebKitの機能 現時点で最新版の iOS 15.6 では 「すべてデフォルトに戻す」機能 が実装されている
20. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 iOS/AndroidのWebXR Device API対応状況 (2022.08.05) WebXR“周辺技術”最新動向(Dev) - WebXR Device APIの最新動向 iPhone (iOS 15.6) SafariのExperimental Featuresで * WebXR Device API * WebXR Augmented Reality Module のフラグがOFF (デフォルト) の状態 WebXR Device APIを使ったコンテンツ は動作しない iPhone (iOS 15.6) SafariのExperimental Featuresで * WebXR Device API * WebXR Augmented Reality Module のフラグを自身でONに変更した状態 WebXR Device APIに対応しているよう に表示されるが、VR supportとAR supportにならず動作しない Nothing Phone (1) (Android 12) Android標準ブラウザのChromeはWebXR Device APIに標準対応しているので動作する ように見えるが、ARCoreに対応していない端 末の場合はWebXR Device APIを使ったコン テンツは動作しない (判定できない) Xperia 1 III (Android 12) Android標準ブラウザのChromeはWebXR Device APIに標準対応しているので動作する ように見え、ARCoreに対応している端末であ ればWebXR Device APIを使ったコンテンツ が動作する
21. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • Chromiumベースのブラウザを搭載するデバイス ◦ Meta Quest Browserを内蔵しているMeta Quest / Meta Quest 2 ◦ Edgeを内蔵しているHoloLens 2 ◦ 独自のPicoブラウザを内蔵しているPico Neo 3 Link • 独自ブラウザのHelioを搭載するMagic Leap 1 ◦ 後継機のMagic Leap 2もWebXRに対応することが発表されている • Wolvicをインストールしたハードウェア ◦ 公式ではOculus Quest、Huawei VR Glasses、VIVE Focus、Pico Neo対応の旨を記載 ◦ これから発売されるLynx R-1の内蔵ブラウザはWolvicであることが発表されている • Nreal Light / Nreal Air ◦ FarePlay For NReal (Light+Air)が対応 ハードウェアのWebXR Device API対応状況 (2022.08.05) WebXR“周辺技術”最新動向(Dev) - WebXR Device APIの最新動向 ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません
22. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 WebXRコンテンツ開発手段の動向 WebXR“周辺技術”最新動向(Dev) JavaScriptライブラリ/フレームワークの一例 • A-Frame • Babylon.js • MindAR • 8th Wall • YouCam for Web • Hubs Cloud • AR.js • MediaPipe • face-api.js • <model-viewer> ゲームエンジンの一例 • Unity (C#) + WebXR Export • Godot Engine (GDScript) • Wonderland Engine (JavaScript) ブラウザベースの開発ツールの一例 • Amazon Sumerian ◦ Babylon.jsベースのツールに移行予定 • PlayCanvas • palanAR • LESSAR ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません
23. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • 2022年12月で7周年を迎えるWebARとWebVRの両方に対応しているthree.jsを ベースとする、取っ付き易いJavaScriptフレームワークのひとつ • 他のフレームワークやライブラリと組み合わせて使うことも多い • 最新バージョンは2022-02-04にリリースされたv1.3.0 • 2020-12-03にリリースされたv1.1.0で多くの機能が追加 ◦ WebXR AR module ◦ immersive navigation ◦ hand tracking ◦ compositor layers ◦ hit tests A-Frame - aframe.io WebXR“周辺技術”最新動向(Dev) - WebXRコンテンツ開発手段の動向 - JavaScriptライブラリ/フレームワークの一例 Image Source: “A-Frame” graphic tee by Diego Marcos Segura. - https://cottonbureau.com/p/7A6MU8/shirt/a-frame#/6821945/tee-men-standard-tee-vintage-black-tri-blend-s A-Frame公式Tシャツ
24. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • Microsoftが開発するブラウザ上での3Dレンダリングフレームワーク • WebXRに特化しているわけではないが、機能のひとつとしてWebXRコンテンツを 開発できる • 最新バージョンは2022-05-05にリリースされたBabylon.js 5 ◦ これまでのWebGLに加えてWebGPUをフルサポート ▪ WebGPUはWebXR Device APIよりも対応しているブラウザが少ないが フラグや設定を変更することで動作を確認できる • リリースにあわせてBabylon.jsの日本コミュニティ「Babylon.js JAPAN」が発足 ◦ 今後いっそうの盛り上がりが予見できる Babylon.js - babylonjs.com Image Source: Babylon.js Documentation - https://doc.babylonjs.com/ WebXR“周辺技術”最新動向(Dev) - WebXRコンテンツ開発手段の動向 - JavaScriptライブラリ/フレームワークの一例
25. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • 2021-10に個人開発者のKim氏が公開したImage TrackingとMediaPipeベースの Face TrackingをサポートするOSSのWebAR向け新興JavaScriptライブラリ • three.jsまたはA-Frameと組み合わせて使用する • AR.jsとMindARで得意とする領域が異なる ◦ AR.jsはマーカーベースとロケーションベース ◦ MindARは複数枚の画像認識と顔認識 • UdemyでWeb AR Development Courseを提供 • ノーコードで顔認識のWebARコンテンツを制作できる GUIベースのMindAR Studioを提供している MindAR - hiukim.github.io/mind-ar-js-doc/ Image Sources: https://hiukim.github.io/mind-ar-js-doc/, https://github.com/hiukim/mind-ar-js WebXR“周辺技術”最新動向(Dev) - WebXRコンテンツ開発手段の動向 - JavaScriptライブラリ/フレームワークの一例
26. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • 2018年にリリースされた商用WebARプラットフォームの中では特に目立つ存在 • 2022-03-10にNianticによって買収 • 商用利用が前提となっているため、個人開発者が“遊ぶ”選択肢には挙がりにく かったが、月額$9.99のStarterプランの登場により、触れやすくなった • Nianticが提供するLightship VPSに8th Wallの技術を取り入れたブラウザ対応版 となるLightship VPS for Webがリリース予定 • 8th Wall Paymentsにより有償コンテンツにも対応 • Lightship Summit Tokyo 2022のアーカイブ動画が YouTubeに公開されている 8th Wall - 8thwall.com Image Sources: https://www.8thwall.com/, https://www.youtube.com/watch?v=zyDADaFgxF0 WebXR“周辺技術”最新動向(Dev) - WebXRコンテンツ開発手段の動向 - JavaScriptライブラリ/フレームワークの一例
27. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • 独自のAR技術とAI技術を応用して、特に美容業界で強い認知度を誇るPERFECTが 提供するWebAR向けバーチャルトライオンのソリューション ◦ PERFECTはGoogleとパートナーシップを提携し、そのAR技術はGoole検索内や YouTube動画内でのバーチャルメイクにも利用されている • 国内外を問わず、コスメブランドのウェブサイトに実装されているバーチャルメ イクの多くにYouCam for Webが利用されている ◦ 多くの場合でライセンス表記として「Powered by YouCam メイク」が記されている • WebARで実現できる対象領域は広く、顔の各パーツへのメイクはもちろん、眼鏡 や耳へのイヤリング、手への時計やブレスレット、指輪などに対応できる YouCam for Web - perfectcorp.com Image Source: https://www.perfectcorp.com/business WebXR“周辺技術”最新動向(Dev) - WebXRコンテンツ開発手段の動向 - JavaScriptライブラリ/フレームワークの一例
28. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • 2020-04-29にMozillaがリリースした商用利用なMozilla Hubsのクラウド版 • AWSとDigitalOceanに簡単にデプロイできる仕組みが整っている • Hubs Cloudをベースにした独自のメタバースプラットフォームを展開できる ◦ 実際にHubs Cloudをベースとするメタバースプラットフォームは多い • WebVRによるメタバース構築手段としてはメジャーどころではあるものの、デプ ロイ先となるクラウドに関する一定の知識 (e.g. AWS CloudFormation) に加え てHubsのバックエンドサーバーにあたるReticulumを 含む多方面の知識が必要となる • 同時接続可能な人数にも制限があるので、遊びで始める には運用コストを含めて難しい側面もある Hubs Cloud - hubs.mozilla.com/cloud Image Source: https://vimeo.com/412377556 WebXR“周辺技術”最新動向(Dev) - WebXRコンテンツ開発手段の動向 - JavaScriptライブラリ/フレームワークの一例
29. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • XR開発者の方が多く利用しているUnityにはWebXRとして出力する機能がない ◦ 2021年時点でUnityのロードマップにWebXR Supportが掲載されているが、Under Considerationとなったまま大きな動きはない • かつてはMozillaが提供していたWebXR Exporterの利用が主流だったが、開発が 停止してしまい、現在は@DePanther氏がフォークして機能拡張を続けている WebXR Exportが実質的な後継プロジェクトとなっている ◦ Tilt Brushがオープンソース化された後、WebXR移植版のSilk Brushがリリースされた • WebXR Input Profiles Loaderを導入することで、W3Cの Immersive Web CG/WGが提供するWebXR Input Profilesを 使って各XRデバイスのコントローラーを表示できるようになる Unity + WebXR Export Image Source: 2022-08-05 - AR/VR roadmap - Platform Support / Graphics Optimizations - https://unity.com/roadmap/unity-platform/arvr WebXR“周辺技術”最新動向(Dev) - WebXRコンテンツ開発手段の動向 - ゲームエンジンの一例
30. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • これから伸長するかもしれないWebVPS • 3Dモデルを表示する手段としての <model> element • Immersive Stream for XR • 新しいWebXRの見せ方を提示するLooking Glass Block その他の気になる技術動向 WebXR“周辺技術”最新動向(Dev)
31. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • XR業界に到来するVPSの波 ◦ VPSはカメラ経由で得た映像と事前に取得している空間の位置合わせを実現する技術 ◦ Googleマップなどの地図アプリで表示されるARナビゲーションで利用されている • WebARにおけるWebVPSの動向 ◦ NianticのLightship VPS for Web ▪ Lightship Summitで8th Wall対応の旨を発表 ▪ 現時点で詳細は不明 ◦ Hexagon ABのImmersal ▪ 2022-07-01にWebAR対応の旨を発表 ▪ 実際に動作する これから伸長するかもしれないWebVPS WebXR“周辺技術”最新動向(Dev) - その他の気になる技術動向
32. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • <model> elementの場合 / iOS 15.6で確認する限り、フラグを立てれば動作する (モバイルSafariの先行実装) <!-- .usdzと.glbの両モデルに対応できる --> <model interactive> <source src="/assets/model.usdz" type="model/vnd.usdz+zip"> <source src="/assets/model.glb" type="model/gltf-binary"> </model> • AR Quick Lookの場合 <!-- .usdzにのみ対応し、 a要素で括る必要がある --> <a rel="ar" href="/assets/model.usdz"> <img src="/assets/model.jpg"> </a> • <model-viewer>の場合 <!-- .usdzと.glbの両モデルに対応できる --> <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> <model-viewer> <model-viewer src="/assets/model.glb" ios-src="/assets/model.usdz" ar auto-rotate camera-controls></model-viewer> 3Dモデルを表示する手段としての <model> element WebXR“周辺技術”最新動向(Dev) - その他の気になる技術動向
33. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • GCPでクラウドレンダリングを実現する仕組み ◦ https://xr.withgoogle.com/ • 現在はプレビュー版として公開中 • 現時点でモバイル向けはiOS/Android用のGoogleアプリのみをサポート • 今後のブラウザ対応次第では、ネイティブに比べるとディスアドバンテージのあ るウェブにおける描画面を補える可能性があると考えられる Immersive Stream for XR WebXR“周辺技術”最新動向(Dev) - その他の気になる技術動向
34. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • 裸眼立体視ディスプレイのLooking Glassが提供するブラウザでもLooking Glass のような映像を表示させる実験中の取り組み ◦ キャッチコピーは“Holograms on the Internet.” ◦ hologramsontheinternet.com からPC、スマートフォン、VR HMDで確認できる • 現在はパイロット版をテスト中で今夏中にオープンβを開始予定 • iframeの形でウェブサイト中に埋め込める • WebXR Device APIに対応しているので例えば Quest 2などで表示すればEnter VRで WebXRコンテンツとして表示できる 新しいWebXRの見せ方を提示するLooking Glass Block WebXR“周辺技術”最新動向(Dev) - その他の気になる技術動向 Image Source: https://hologramsontheinternet.com/
35. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 WebXR“活用事例”最新動向 (Biz) Image Source: https://unsplash.com/photos/NrMGL5MR8uk
36. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • WebVR ◦ バーチャルツアー ◦ バーチャルストア ◦ メタバース ◦ Web3 • WebAR ◦ バーチャルトライオン ◦ WebARにおける試し置き ◦ 8th Wallに見るWebARにおけるプロモーション事例 ◦ その他の様々なWebARの利用事例 WebXR“活用事例”最新動向(Biz)
37. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • コロナ禍によって伸長したWebVR活用事例のひとつがバーチャルツアー • 代表的な例として国立科学博物館の「おうちで体験！かはくVR」が挙げられる • 多くの事例ではPC、スマートフォン、VR HMDなど 複数の手段でアクセスできるMatterportが用いられている ◦ 2021年にNASDAQ上場を果たした他、アカウント契約者数が 98％増、売上高が141％増と急成長している ◦ 2022年4月にマーターポート株式会社 日本法人を設立 ◦ 「Matterport Axis」の登場によりLiDAR搭載iPhoneを用いた 高精度のバーチャルツアーが今まで以上に作りやすくなった • MatterportによるコンテンツはWebXR Device APIに対応 しているが、多くのバーチャルツアーは対応していない WebVRにおけるバーチャルツアー WebXR“活用事例”最新動向(Biz) - WebVR Image Source: Matterport Axis - https://matterport.com/ja/axis
38. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • Matterportを利用 ◦ 豊田自動織機 大府駅東ビオトープ ◦ 中部国際空港 VRフライト・オブ・ドリームズ ◦ FMヨコハマ スタジオVRツアー • その他のソリューションを利用 ◦ 東京都 河川施設360°バーチャルツアー ◦ 環境省 福島環境再生　バーチャルツアー ◦ 国土交通省 九州地方整備局 嘉瀬川ダムバーチャルツアー ◦ Maison KOSÉ バーチャルストア ◦ SHISEIDO VIRTUAL FLAGSHIP STORE 様々なWebVRにおけるバーチャルツアーの取り組み事例 WebXR“活用事例”最新動向(Biz) - WebVR - バーチャルツアー ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません
39. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • [前提] バーチャルツアーに対して、複数人でのコミュニケーション機能はないが、 EC機能を打ち出しているものをバーチャルストアとして分類 • WebXRによる「バーチャルストア」構築の手段として次のような選択肢があり、 リアルな店舗を再現するものと、バーチャルな店舗を構築するものに大別できる ◦ リアルな店舗の再現 ▪ Matterport (店舗の利用ではバーチャルストア機能を有するものが目立つ) ▪ Obsess (ラグジュアリーブランドでの利用が多いプラットフォーム) ◦ バーチャルな店舗を構築 ▪ 都市型バーチャルモール「TUG MALL」(モール出店型) ▪ WebXRコマース (WebVRによる回遊とWebARによる確認) WebVRにおけるバーチャルストア WebXR“活用事例”最新動向(Biz) - WebVR ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません
40. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 様々なWebVRにおけるバーチャルストアの取り組み事例 WebXR“活用事例”最新動向(Biz) - WebVR • Obsessの利用事例 ◦ Ralph Lauren Beverly Hills Virtual Store (リアル) ◦ TH Pool Party | Virtual Experience (バーチャル) • WebXRコマースの利用事例 ◦ 金沢フォーラスの「MIHON-ICHI KANAZAWA」 • ザ・スーツカンパニー バーチャルショップ • なみえバーチャル商店街サービス • セブン‐イレブン夏ギフ島 • Sony Store Virtual ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません Image Sources: https://xr-commerce.jp/v1/shops/mihon-ichi_kanazawa, https://www.uktsc.com/cont/virtual_store/21aw.html https://www.sej.co.jp/products/summergift/2022virtualstore/index.html, https://www.sony.jp/store/retail/virtual/
41. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • [前提] 複数人でのコミュニケーション手段がないバーチャルツアーに対して、 コミュニケーション手段を有しているものをメタバースとして分類 ◦ メタバースムーブメント以前は「ソーシャルVR」と呼ばれていたもの • WebXRによる「メタバース」構築の手段として次のような選択肢が挙げられる ◦ 事例の多い「Mozilla Hubs」のクラウド版である「Hubs Cloud」を利用・拡張 ▪ DOOR、One VR、VR VENUE、exhiVision、CYZY SPACE、XR Studio etc. ◦ ハコスコが提供するECメタバース「メタストア」 ◦ FIXERが提供する「metaverse cloud」 ◦ ハシラスが提供する「めちゃバース」 ◦ HIKKYが提供する「Vket Cloud」 ◦ 桜花一門が提供する「ゆるめた」 WebVRにおけるメタバース WebXR“活用事例”最新動向(Biz) - WebVR ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません
42. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 様々なWebVRにおけるメタバースの取り組み事例 WebXR“活用事例”最新動向(Biz) - WebVR • 池袋ミラーワールド (Hubs Cloudを利用) • 渋谷区立宮下公園 Powered by PARALLEL SITE (Hubs Cloudを利用) • バーチャルOKINAWA WEBブラウザ版 (metaverse cloudを利用) • テレビ朝日 ゴーテック2022 (めちゃバースを利用) • DOOR喫茶「Cafe Miku」 (DOORを利用) • NTTドコモ XR World (Vket Cloudを利用) • 格之進メタストア (メタストアを利用) • 文化庁 バーチャル日本博 メタバース • ソフトバンク バーチャルPayPayドーム ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません Image Sources: https://www.mworld.jp/, https://shibuya-miyashitapark.parallel-city.jp/, https://official.xrw.docomo.ne.jp/, https://virtualokinawa.jp/news/news-news/browser_ver/
43. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • [前提]Web3はWebXR (WebVR/WebAR) やメタバースの必要条件ではないが、 Web3の特性を生かしたブラウザベースのメタバースとして、次のようなサービス や事例が存在する • Decentraland • The Sandbox • VIVERSE • Metaro - the metaverse web3 browser WebVRにおけるWeb3 WebXR“活用事例”最新動向(Biz) - WebVR ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません
44. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • コロナ禍によって伸長したWebAR活用事例のひとつがバーチャルトライオン • WebARの特性上、スマートフォンのインカメラ/アウトカメラを利用することが多 く、WebXR Device APIを必要としないため、多くのスマートフォンが対象 • アプリのインストールを必要とせず、気軽に試せることとの相性がとても良い • 様々な形でバーチャルトライオンが利用されている ◦ メイク ◦ ヘアカラー ◦ ネイルカラー ◦ 試着 (イヤリング、靴、時計、指輪、眼鏡、マスク etc. ) • 多くの商用事例ではPERFECTのYouCam for Webが利用されている WebARにおけるバーチャルトライオン WebXR“活用事例”最新動向(Biz) - WebAR ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません
45. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • 家具などの大物からバッグなどの小物まで“試し置き”の事例が増えている • 実装手段としてiOSのみ対応する“AR Quick Look”を利用するケースと、iOSと Androidの両方に対応できる“<model-viewer>”を利用するケースに大別できる • WebARとしての実装よりも3Dモデルを準備する工数の方が大きいという課題 • AR Quick Lookを利用する場合 ◦ .usdzファイルの準備のみで済む反面、Safari以外での アクセスでファイルの直接ダウンロードとなってしまう • <model-viewer>を利用する場合 ◦ iOS/Android両方で利用できる反面、.usdzファイルと .glbファイルの2フォーマット分の用意が必要 WebARにおける試し置き WebXR“活用事例”最新動向(Biz) - WebAR ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません Image Sources: https://www.low-ya.com/features/ar, LOWYA AR
46. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • 国内では展開されていないものも多いが、Nianticが買収した8th Wallを用いた WebARでのプロモーション事例は学びになるものが多いので事例集として必見 8th Wallに見るWebARにおけるプロモーション事例 WebXR“活用事例”最新動向(Biz) - WebAR Image Source: Discover the world's best WebAR experiences | 8th Wall - https://www.8thwall.com/discover
47. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 その他の様々なWebARの利用事例 WebXR“活用事例”最新動向(Biz) - WebAR • スタンプラリー ◦ 二次元コード読み取り、画像認識、GPSによる位置情報ベースなどにより実現 ▪ 位置情報ベースのものはWeb VPSの登場により大幅な精度向上が期待される • 色を塗った絵がARとして浮かび上がる“塗り絵AR” • フォトフレーム • バーチャルカメラ ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません Image Sources: https://prtimes.jp/main/html/rd/p/000000092.000028239.html, https://prtimes.jp/main/html/rd/p/000000028.000059309.html WebARカメラサービス「TOBIRA」による 入学&卒業フォトフレーム SEGA XDによる 『Virtua Fighter』なりきりキャラクター」
48. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 • WebXRはあくまで「手段」なので目的を見失わないこと ◦ 目新しさは出せるが、WebXRを利用する必然性があるのか、それはメインコンテンツ なのか、あるいは別コンテンツへの誘導目的なのか、予め定めておくことが重要 • WebXR Device APIを利用した取り組みはまだ時期尚早 ◦ 特にプロモーション用途で使われることの多いWebARの場合、 設定変更を必要とせずに体験できるのはARCoreに対応したAndroid端末のみ ▪ 国内においてはiPhoneの比率が高いことと、ミドルレンジのAndroid端末にはARCoreに対応 していないため、ユーザーになり得る層が限られる ◦ WebXR Device APIを使わなくてもWebXRコンテンツの多くは制作できる • WebXR Device APIを使用しない場合でも負荷には注意が必要 ◦ 特にスマートフォン向けのWebARコンテンツの場合、端末のスペックにバラツキが発 生する、なかでもカメラまわりは処理が重く“落ちる”要因になりやすい Biz観点でWebXRを利用する上での注意点 おわりに
49. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 おわりに Image Source: https://unsplash.com/photos/CKlHKtCJZKk
50. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022 おわりに zenn.dev/ikkou speakerdeck.com/ikkou twitter.com/ikkou vrtokyo.connpass.com 不定期でWebXR関連の情報を発信しています