Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ikkou
August 24, 2022

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

ikkou

August 24, 2022
Tweet

More Decks by ikkou

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022
    事例ベースの講演となるため、技術的なスキルは多く必要としません。
    ● WebXR ( WebVR, WebAR ) に興味がある
    ● Webフロントエンジニアの技術を生かせるVR、ARに興味がある
    ● Unityの技術を生かせるVR、ARに興味がある
    本講演の対象者

    View full-size slide

  6. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022
    ● 話すこと
    ○ WebXR“周辺技術”最新動向 (Dev)
    ○ WebXR“活用事例”最新動向 (Biz)
    ● 話さないこと
    ○ WebXRの基礎
    ○ WebXRコンテンツの具体的な開発方法
    本講演で話すことと話さないこと

    View full-size slide

  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モデルなどのアセット、バックエンド
    本講演における各種前提

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  10. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022
    WebXR“周辺技術”最新動向 (Dev)
    Image Source: https://unsplash.com/photos/xrVDYZRGdw4

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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/

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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の設定が必要
    ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません

    View full-size slide

  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/

    View full-size slide

  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 では
    「すべてデフォルトに戻す」機能
    が実装されている

    View full-size slide

  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を使ったコンテンツ
    が動作する

    View full-size slide

  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の最新動向
    ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません

    View full-size slide

  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

    ゲームエンジンの一例
    ● Unity (C#) + WebXR Export
    ● Godot Engine (GDScript)
    ● Wonderland Engine (JavaScript)
    ブラウザベースの開発ツールの一例
    ● Amazon Sumerian
    ○ Babylon.jsベースのツールに移行予定
    ● PlayCanvas
    ● palanAR
    ● LESSAR
    ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません

    View full-size slide

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

    View full-size slide

  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ライブラリ/フレームワークの一例

    View full-size slide

  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ライブラリ/フレームワークの一例

    View full-size slide

  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ライブラリ/フレームワークの一例

    View full-size slide

  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ライブラリ/フレームワークの一例

    View full-size slide

  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ライブラリ/フレームワークの一例

    View full-size slide

  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コンテンツ開発手段の動向 - ゲームエンジンの一例

    View full-size slide

  30. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022
    ● これから伸長するかもしれないWebVPS
    ● 3Dモデルを表示する手段としての element
    ● Immersive Stream for XR
    ● 新しいWebXRの見せ方を提示するLooking Glass Block
    その他の気になる技術動向
    WebXR“周辺技術”最新動向(Dev)

    View full-size slide

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

    View full-size slide

  32. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022
    ● 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
    WebXR“周辺技術”最新動向(Dev) - その他の気になる技術動向

    View full-size slide

  33. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022
    ● GCPでクラウドレンダリングを実現する仕組み
    ○ https://xr.withgoogle.com/
    ● 現在はプレビュー版として公開中
    ● 現時点でモバイル向けはiOS/Android用のGoogleアプリのみをサポート
    ● 今後のブラウザ対応次第では、ネイティブに比べるとディスアドバンテージのあ
    るウェブにおける描画面を補える可能性があると考えられる
    Immersive Stream for XR
    WebXR“周辺技術”最新動向(Dev) - その他の気になる技術動向

    View full-size slide

  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/

    View full-size slide

  35. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022
    WebXR“活用事例”最新動向 (Biz)
    Image Source: https://unsplash.com/photos/NrMGL5MR8uk

    View full-size slide

  36. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022
    ● WebVR
    ○ バーチャルツアー
    ○ バーチャルストア
    ○ メタバース
    ○ Web3
    ● WebAR
    ○ バーチャルトライオン
    ○ WebARにおける試し置き
    ○ 8th Wallに見るWebARにおけるプロモーション事例
    ○ その他の様々なWebARの利用事例
    WebXR“活用事例”最新動向(Biz)

    View full-size slide

  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

    View full-size slide

  38. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022
    ● Matterportを利用
    ○ 豊田自動織機 大府駅東ビオトープ
    ○ 中部国際空港 VRフライト・オブ・ドリームズ
    ○ FMヨコハマ スタジオVRツアー
    ● その他のソリューションを利用
    ○ 東京都 河川施設360°バーチャルツアー
    ○ 環境省 福島環境再生 バーチャルツアー
    ○ 国土交通省 九州地方整備局 嘉瀬川ダムバーチャルツアー
    ○ Maison KOSÉ バーチャルストア
    ○ SHISEIDO VIRTUAL FLAGSHIP STORE
    様々なWebVRにおけるバーチャルツアーの取り組み事例
    WebXR“活用事例”最新動向(Biz) - WebVR - バーチャルツアー
    ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません

    View full-size slide

  39. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022
    ● [前提] バーチャルツアーに対して、複数人でのコミュニケーション機能はないが、
    EC機能を打ち出しているものをバーチャルストアとして分類
    ● WebXRによる「バーチャルストア」構築の手段として次のような選択肢があり、
    リアルな店舗を再現するものと、バーチャルな店舗を構築するものに大別できる
    ○ リアルな店舗の再現
    ■ Matterport (店舗の利用ではバーチャルストア機能を有するものが目立つ)
    ■ Obsess (ラグジュアリーブランドでの利用が多いプラットフォーム)
    ○ バーチャルな店舗を構築
    ■ 都市型バーチャルモール「TUG MALL」(モール出店型)
    ■ WebXRコマース (WebVRによる回遊とWebARによる確認)
    WebVRにおけるバーチャルストア
    WebXR“活用事例”最新動向(Biz) - WebVR
    ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません

    View full-size slide

  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/

    View full-size slide

  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
    ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません

    View full-size slide

  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/

    View full-size slide

  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
    ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません

    View full-size slide

  44. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022
    ● コロナ禍によって伸長したWebAR活用事例のひとつがバーチャルトライオン
    ● WebARの特性上、スマートフォンのインカメラ/アウトカメラを利用することが多
    く、WebXR Device APIを必要としないため、多くのスマートフォンが対象
    ● アプリのインストールを必要とせず、気軽に試せることとの相性がとても良い
    ● 様々な形でバーチャルトライオンが利用されている
    ○ メイク
    ○ ヘアカラー
    ○ ネイルカラー
    ○ 試着 (イヤリング、靴、時計、指輪、眼鏡、マスク etc. )
    ● 多くの商用事例ではPERFECTのYouCam for Webが利用されている
    WebARにおけるバーチャルトライオン
    WebXR“活用事例”最新動向(Biz) - WebAR
    ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません

    View full-size slide

  45. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022
    ● 家具などの大物からバッグなどの小物まで“試し置き”の事例が増えている
    ● 実装手段としてiOSのみ対応する“AR Quick Look”を利用するケースと、iOSと
    Androidの両方に対応できる“”を利用するケースに大別できる
    ● WebARとしての実装よりも3Dモデルを準備する工数の方が大きいという課題
    ● AR Quick Lookを利用する場合
    ○ .usdzファイルの準備のみで済む反面、Safari以外での
    アクセスでファイルの直接ダウンロードとなってしまう
    ● を利用する場合
    ○ iOS/Android両方で利用できる反面、.usdzファイルと
    .glbファイルの2フォーマット分の用意が必要
    WebARにおける試し置き
    WebXR“活用事例”最新動向(Biz) - WebAR
    ※ 本ページで取り上げている項目は代表的な一例であり、すべてではありません
    Image Sources: https://www.low-ya.com/features/ar,
    LOWYA AR

    View full-size slide

  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

    View full-size slide

  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』なりきりキャラクター」

    View full-size slide

  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を利用する上での注意点
    おわりに

    View full-size slide

  49. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022
    おわりに
    Image Source: https://unsplash.com/photos/CKlHKtCJZKk

    View full-size slide

  50. 2022-08-24 CEDEC2022 WebXR 最前線 2022 ~ メタバースとWeb3を添えて #CEDEC2022
    おわりに
    zenn.dev/ikkou speakerdeck.com/ikkou twitter.com/ikkou vrtokyo.connpass.com
    不定期でWebXR関連の情報を発信しています

    View full-size slide