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

WebXR 最前線 2022
メタバースとWeb3を添えて
2022-08-24 CEDEC2022 諸星一行

View Slide

2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022
本資料はSpeakerDeckに公開済みです。
スクリーンショットは不要です。
本資料について
本講演に関するSNSへの投稿は大歓迎です。
公式ハッシュタグは #CEDEC2022 です。

View Slide

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

View Slide

● 本資料に掲載されている内容は 2022-08-05 現在の情報を最新のものと
して取り扱っています。
● 本講演はリアルタイム登壇ではなく、事前に収録した録画を配信していま
す。そのため 2022-08-05 から講演当日の 2022-08-24 までに大きなト
ピックが発生した場合でも、本講演では触れられません。
● 表記上、®マークや™マークを省略しています。
● 本講演は質疑応答の場としてAsk the speakerを用意していません。
質問等がある方はTwitterハッシュタグ #CEDEC2022 宛にお気軽にお寄
せください。
免責事項

View Slide

事例ベースの講演となるため、技術的なスキルは多く必要としません。
● WebXR ( WebVR, WebAR ) に興味がある
● Webフロントエンジニアの技術を生かせるVR、ARに興味がある
● Unityの技術を生かせるVR、ARに興味がある
本講演の対象者

View Slide

● 話すこと
○ WebXR“周辺技術”最新動向 (Dev)
○ WebXR“活用事例”最新動向 (Biz)
● 話さないこと
○ WebXRの基礎
○ WebXRコンテンツの具体的な開発方法
本講演で話すことと話さないこと

View Slide

● XRは、VR・AR・MRなど○○ Realityの総称
● WebXRの標準仕様は無いが、“本講演における”WebXRの定義は次の2つ
○ 『ブラウザを通したVRであるWebVRと、ブラウザを通したARである
WebARの総称』であり、技術そのものと、コンテンツの双方を指す
○ WebXR Device APIの使用有無は問わない
● WebXRを構成する主要な要素技術はHTML、CSS、JavaScript、画像や
3Dモデルなどのアセット、バックエンド
本講演における各種前提

View Slide

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
登壇者について

View Slide

関連するWebXR関連の資料
#WebXR ( WebVR/WebAR ) の現状確認 2021 Winter
Zenn
iOS 15.4におけるWebXR Device APIの現状確認
Zenn
コロナ禍における WebXR ( WebVR/WebAR ) のイマ！
CEDEC2021
iOSではじめるWebAR 2021
iOSDC Japan 2021

View Slide

WebXR“周辺技術”最新動向 (Dev)
Image Source: https://unsplash.com/photos/xrVDYZRGdw4

View Slide

● 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
○ ブラウザベースの開発ツール
● その他の気になる技術動向

View Slide

● 2022-06-21にKhronos Groupが主幹事となってメタバースの相互運用の標準化
を図る団体「The Metaverse Standards Forum」が設立
● W3Cは創設メンバーとして参画している
The Metaverse Standards Forumの設立とW3Cの参画
Image Source: https://docs.google.com/presentation/d/1tpKTlp9aVeJGD0E_0yBGuo37omZhGAjWmM1OH8hnsQ8/edit#slide=id.g13ea1b48089_2_91

View Slide

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/

View Slide

● 2019-02-05に“First Public Working Draft”が公開
○ 2022-03-30まで“Working Draft”として15回の更新
● 2022-04-26に“Candidate Recommendation Draft”が公開
○ CRの段階ではブラウザの実装がまだ大きく変わる可能性がある
W3Cの勧告プロセスがWDから15回の更新を経てCRに移行
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

View Slide

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の現況
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やのネイティブ実装
○ iOS 14.5から実験的機能としてHTML elementを
実装
Reference: 2022-08-05 - Immersive Web at W3C - https://github.com/immersive-web

View Slide

主要ブラウザのWebXR Device API対応状況 (2022.08.05)
Image Source: 2022-08-05 - caniuse - https://caniuse.com/webxr

View Slide

● ChromiumエンジンのEdge、Chrome、Meta Quest 2に搭載されているMeta
Quest BrowserやWeb3で話題のBraveは標準対応
○ chrome://ﬂagsの変更が不要
■ ただしAndroidはARCore supported devicesであることが必要
● GeckoエンジンのFirefoxはin-developmentステータス
○ about:conﬁgで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)
*1 Windows 11 / Firefox 103.0.1 / Oculus Link状態のMeta Quest 2 (42.0.0.130.250381640954) で検証
※ PCでの動作には別途Oculusソフトウェアの設定とSteamVRの設定が必要
※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません

View Slide

● 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に移行
Image Source: Welcome to Wolvic - https://www.wolvic.com/en/

View Slide

● 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にのみ“実験的”に対応
Safariの実験的なWebKitの機能
現時点で最新版の iOS 15.6 では
「すべてデフォルトに戻す」機能
が実装されている

View Slide

iOS/AndroidのWebXR Device API対応状況 (2022.08.05)
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を使ったコンテンツ
が動作する

View Slide

● 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)

View Slide

WebXRコンテンツ開発手段の動向
JavaScriptライブラリ/フレームワークの一例
● A-Frame
● Babylon.js
● MindAR
● 8th Wall
● YouCam for Web
● Hubs Cloud
● AR.js
● MediaPipe
● face-api.js
●
ゲームエンジンの一例
● Unity (C#) + WebXR Export
● Godot Engine (GDScript)
● Wonderland Engine (JavaScript)
ブラウザベースの開発ツールの一例
● Amazon Sumerian
○ Babylon.jsベースのツールに移行予定
● PlayCanvas
● palanAR
● LESSAR

View Slide

● 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シャツ

View Slide

● 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/

View Slide

● 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

View Slide

● 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

View Slide

● 独自の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

View Slide

● 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

View Slide

● XR開発者の方が多く利用しているUnityにはWebXRとして出力する機能がない
○ 2021年時点でUnityのロードマップにWebXR Supportが掲載されているが、Under
Considerationとなったまま大きな動きはない
● かつてはMozillaが提供していたWebXR Exporterの利用が主流だったが、開発が
停止してしまい、現在は@DePanther氏がフォークして機能拡張を続けている
WebXR Exportが実質的な後継プロジェクトとなっている
○ Tilt Brushがオープンソース化された後、WebXR移植版のSilk Brushがリリースされた
● WebXR Input Proﬁles Loaderを導入することで、W3Cの
Immersive Web CG/WGが提供するWebXR Input Proﬁlesを
使って各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コンテンツ開発手段の動向 - ゲームエンジンの一例

View Slide

● これから伸長するかもしれないWebVPS
● 3Dモデルを表示する手段としての element
● Immersive Stream for XR
● 新しいWebXRの見せ方を提示するLooking Glass Block
その他の気になる技術動向

View Slide

● 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) - その他の気になる技術動向

View Slide

● elementの場合 / iOS 15.6で確認する限り、フラグを立てれば動作する (モバイルSafariの先行実装)

● AR Quick Lookの場合

● の場合

src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js">

ar auto-rotate camera-controls>
3Dモデルを表示する手段としての element

View Slide

● GCPでクラウドレンダリングを実現する仕組み
○ https://xr.withgoogle.com/
● 現在はプレビュー版として公開中
● 現時点でモバイル向けはiOS/Android用のGoogleアプリのみをサポート
● 今後のブラウザ対応次第では、ネイティブに比べるとディスアドバンテージのあ
るウェブにおける描画面を補える可能性があると考えられる
Immersive Stream for XR

View Slide

● 裸眼立体視ディスプレイの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
Image Source: https://hologramsontheinternet.com/

View Slide

WebXR“活用事例”最新動向 (Biz)
Image Source: https://unsplash.com/photos/NrMGL5MR8uk

View Slide

● WebVR
○ バーチャルツアー
○ バーチャルストア
○ メタバース
○ Web3
● WebAR
○ バーチャルトライオン
○ WebARにおける試し置き
○ 8th Wallに見るWebARにおけるプロモーション事例
○ その他の様々なWebARの利用事例
WebXR“活用事例”最新動向(Biz)

View Slide

● コロナ禍によって伸長した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

View Slide

● Matterportを利用
○ 豊田自動織機大府駅東ビオトープ
○ 中部国際空港 VRフライト・オブ・ドリームズ
○ FMヨコハマスタジオVRツアー
● その他のソリューションを利用
○ 東京都河川施設360°バーチャルツアー
○ 環境省福島環境再生　バーチャルツアー
○ 国土交通省九州地方整備局嘉瀬川ダムバーチャルツアー
○ Maison KOSÉ バーチャルストア
○ SHISEIDO VIRTUAL FLAGSHIP STORE
様々なWebVRにおけるバーチャルツアーの取り組み事例
WebXR“活用事例”最新動向(Biz) - WebVR - バーチャルツアー

View Slide

● [前提] バーチャルツアーに対して、複数人でのコミュニケーション機能はないが、
EC機能を打ち出しているものをバーチャルストアとして分類
● WebXRによる「バーチャルストア」構築の手段として次のような選択肢があり、
リアルな店舗を再現するものと、バーチャルな店舗を構築するものに大別できる
○ リアルな店舗の再現
■ Matterport (店舗の利用ではバーチャルストア機能を有するものが目立つ)
■ Obsess (ラグジュアリーブランドでの利用が多いプラットフォーム)
○ バーチャルな店舗を構築
■ 都市型バーチャルモール「TUG MALL」(モール出店型)
■ WebXRコマース (WebVRによる回遊とWebARによる確認)
WebVRにおけるバーチャルストア

View Slide

様々な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/

View Slide

● [前提] 複数人でのコミュニケーション手段がないバーチャルツアーに対して、
コミュニケーション手段を有しているものをメタバースとして分類
○ メタバースムーブメント以前は「ソーシャル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におけるメタバース

View Slide

様々な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://oﬃcial.xrw.docomo.ne.jp/,
https://virtualokinawa.jp/news/news-news/browser_ver/

View Slide

● [前提]Web3はWebXR (WebVR/WebAR) やメタバースの必要条件ではないが、
Web3の特性を生かしたブラウザベースのメタバースとして、次のようなサービス
や事例が存在する
● Decentraland
● The Sandbox
● VIVERSE
● Metaro - the metaverse web3 browser
WebVRにおけるWeb3

View Slide

● コロナ禍によって伸長したWebAR活用事例のひとつがバーチャルトライオン
● WebARの特性上、スマートフォンのインカメラ/アウトカメラを利用することが多
く、WebXR Device APIを必要としないため、多くのスマートフォンが対象
● アプリのインストールを必要とせず、気軽に試せることとの相性がとても良い
● 様々な形でバーチャルトライオンが利用されている
○ メイク
○ ヘアカラー
○ ネイルカラー
○ 試着 (イヤリング、靴、時計、指輪、眼鏡、マスク etc. )
● 多くの商用事例ではPERFECTのYouCam for Webが利用されている
WebARにおけるバーチャルトライオン
WebXR“活用事例”最新動向(Biz) - WebAR

View Slide

● 家具などの大物からバッグなどの小物まで“試し置き”の事例が増えている
● 実装手段としてiOSのみ対応する“AR Quick Look”を利用するケースと、iOSと
Androidの両方に対応できる“”を利用するケースに大別できる
● WebARとしての実装よりも3Dモデルを準備する工数の方が大きいという課題
● AR Quick Lookを利用する場合
○ .usdzファイルの準備のみで済む反面、Safari以外での
アクセスでファイルの直接ダウンロードとなってしまう
● を利用する場合
○ iOS/Android両方で利用できる反面、.usdzファイルと
.glbファイルの2フォーマット分の用意が必要
WebARにおける試し置き
Image Sources: https://www.low-ya.com/features/ar,
LOWYA AR

View Slide

● 国内では展開されていないものも多いが、Nianticが買収した8th Wallを用いた
WebARでのプロモーション事例は学びになるものが多いので事例集として必見
8th Wallに見るWebARにおけるプロモーション事例
Image Source: Discover the world's best WebAR experiences | 8th Wall - https://www.8thwall.com/discover

View Slide

その他の様々な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』なりきりキャラクター」

View Slide

● WebXRはあくまで「手段」なので目的を見失わないこと
○ 目新しさは出せるが、WebXRを利用する必然性があるのか、それはメインコンテンツ
なのか、あるいは別コンテンツへの誘導目的なのか、予め定めておくことが重要
● WebXR Device APIを利用した取り組みはまだ時期尚早
○ 特にプロモーション用途で使われることの多いWebARの場合、
設定変更を必要とせずに体験できるのはARCoreに対応したAndroid端末のみ
■ 国内においてはiPhoneの比率が高いことと、ミドルレンジのAndroid端末にはARCoreに対応
していないため、ユーザーになり得る層が限られる
○ WebXR Device APIを使わなくてもWebXRコンテンツの多くは制作できる
● WebXR Device APIを使用しない場合でも負荷には注意が必要
○ 特にスマートフォン向けのWebARコンテンツの場合、端末のスペックにバラツキが発
生する、なかでもカメラまわりは処理が重く“落ちる”要因になりやすい
Biz観点でWebXRを利用する上での注意点
おわりに

View Slide

おわりに
Image Source: https://unsplash.com/photos/CKlHKtCJZKk

View Slide

おわりに
zenn.dev/ikkou speakerdeck.com/ikkou twitter.com/ikkou vrtokyo.connpass.com
不定期でWebXR関連の情報を発信しています

View Slide

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

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

ikkou

More Decks by ikkou

Other Decks in Technology

Featured

Transcript