【解説】第2章 WebXRの現状確認 2020 Spring / zozotechbook1-ch02-WebXR

#技術書典 頒布本「ZOZO TECH BOOK」解説会 Vol.2 ( https://zozotech-inc.connpass.com/event/173609/ ) で発表した資料です。

喋っている模様は YouTube で確認できます。
https://www.youtube.com/watch?v=CV-PKjsFMOY

Transcript

1. 【解説】第2章 WebXRの現状確認 2020 Spring
 #技術書典 頒布本「ZOZO TECH BOOK」解説会 Vol.2
 株式会社ZOZOテクノロジーズ
 WEAR部
 諸星 一行 a.k.a @ikkou Copyright © ZOZO Technologies, Inc.
2. © ZOZO Technologies, Inc. 株式会社ZOZOテクノロジーズ
 WEAR部
 XR Specialist 諸星 一行 a.k.a @ikkou
 2019年11月入社。XR × Fashion を模索。
 開発者向けコミュニティ“xR Tech Tokyo”やポッドキャスト “xR.fm”を通して xR 技術を広める活動を続けている。めぐ るーまーで雛乃木神社氏子の観測者。
 2
3. © ZOZO Technologies, Inc. この章の概要
 • 本章では、2020年3月現在の WebXR について解説しました。
 ◦ WebXR はウェブ技術のひとつです。単一の技術で成り立っているものではな く、正確には複数の技術が複合する形で成り立っている技術です。
 ◦ XR コンテンツは Unity や UE4 といったゲームエンジンなどを利用して開発する のが主流ですが、技術の進歩に合わせてウェブ上でも扱えるようになったのが WebXR です。
 • 本章に登場する重要なキーワードとして WebXR, WebXR Device API, WebVR, WebAR, その他 JavaScript ライブラリなどが挙げられます。
 • 付随する技術である WebGL や WebRTC そして 3D モデリングなどについては触 れていません。
 3
4. © ZOZO Technologies, Inc. 今すぐググって試す WebAR
 4 • スマートフォンで特定の動物名を “ググる” と検索結果に動物の 3D モデルが表 示され、「3D 表示」ボタンをタップすると AR で表示されます。
 • 4/12 のイースターに合わせて期間限定でリボンをつけたウサギの「イースターバ ニー」が出現していました。(終了済み)
 • 技術的には <model-viewer> を使用し、
 ARCore に対応した Android の場合は
 “物体” のオクルージョンを実現できます。
 • “人” のオクルージョンは両 OS で対応
 しています。
 U pdate
5. © ZOZO Technologies, Inc. “物体” のオクルージョンに対応する Android と非対応となる iOS/iPadOS の違い
 5 • Android は “物体” のオクルージョンに
 対応しているので、壁で猫の体が見える
 範囲を遮ることができる。
 
 
 
 • iOS/iPadOS は “物体” のオクルージョン
 に対応していないので、壁で猫の体が
 見える範囲を遮れない。
 N EW
6. © ZOZO Technologies, Inc. WebXR Device API とはなにか
 • W3C が定義する「ブラウザ経由で(VR|AR|MR) HMD を扱いたいときに使うAPI」で す。
 ◦ モジュールとして WebXR Hit-test といった必ずしも HMD を使わない AR 向け の API も生まれています。
 • (VR|AR|MR) HMD の向きや加速度、コントローラの位置を取得できます。
 • WebXR コンテンツに WebXR Device API は必須ではありません。
 • もともとは WebVR API でしたが、デバイスの進化に合わせて WebXR Device API が策定されました。
 • ちょっとカスタムする程度であれば WebXR Device API をそのまま触ることはあり ません。
 6
7. © ZOZO Technologies, Inc. WebXR Device API の対応状況　2020/04/30 現在
 7 画像引用元: https://caniuse.com/#search=WebXR%20Device%20API
 U pdate
8. © ZOZO Technologies, Inc. WebXR Device API の対応状況　2020/04/30 現在
 
 • Windows 版の Chrome 79 以降と Chromium ベースの Microsoft Edge そして Android 版の Chrome 79 以降で動作します。
 ◦ macOS 版の Chrome 79 以降では動作せず chrome://flags にも表示されませ んが動作可否を確認するページでは対応していると表示されます。
 
 
 ◦ 内部で WebKit が使われている iOS 版の Chrome では動作しません。
 • 日本時間の 4 月 8 日にリリースされた Chrome 81 で WebXR Hit-test Device に 対応し AR 機能が強化されました。
 8 U pdate Ref. https://immersive-web.github.io/webxr-samples/

9. © ZOZO Technologies, Inc. WebXR Device API が対象としているデバイス例　2020/04/30 現在
 
 • ARCore に対応した Android 端末
 • Google Daydream View ( Discontinued!! )
 • HTC Vive / VIVE Pro / VIVE Pro Eye
 • Magic Leap 1
 • Microsoft HoloLens / HoloLens 2
 • Oculus Rift / Rift S
 • Samsung Gear VR ( Discontinued!! )
 • Windows Mixed Reality headsets
 • Oculus Go / Quest
 9 N EW
10. © ZOZO Technologies, Inc. VR とはなにか
 • VR = Virtual Reality = 人工現実感
 ◦ VR の “学術的な” 日本語訳は仮想現実ではありません。
 ◦ VR に VR HMD いわゆる VR ゴーグルは必ずしも必要ではありません。
 ◦ WebVR はこの VR をウェブ技術で実現したものです。
 ▪ Firefox の開発元である Mozilla 社が提供する Unity Asset の Unity WebXR Exporter を用いることで、ゲームエンジンである Unity でも WebVR コンテンツ を出力できます。
 10
11. © ZOZO Technologies, Inc. AR とはなにか
 • AR = Augmented Reality = 拡張現実感
 ◦ WebAR はこの AR をウェブ技術で実現したものです。
 ◦ 様々な要因により WebVR よりも WebAR のほうが身近になっています。
 ◦ AR は次のように分類され、それぞれが WebAR としても実現できます。
 ▪ Location based AR
 ▪ Vision based AR
 • マーカー型
 • マーカーレス型
 11
12. © ZOZO Technologies, Inc. XR とはなにか
 • xx Reality を総称する XR
 ◦ VR, AR, MR の他に代替現実感の SR, 陰消現実感の DR などが挙げられます。
 ◦ WebXR Device API の XR はこちらの XR を意図しています。
 • Extended Reality としての XR
 • “XR” ではなく “xR” 表記を用いることもありますが、英語圏では原則として大文字 始まりのため “XR” 表記が一般的です。
 12
13. © ZOZO Technologies, Inc. WebXR コンテンツの体験方法
 • WebVR と WebAR で動作要件が異なります。
 • WebVR は VR HMD なしでも体験できますが、Oculus Go や Oculus Quest といっ た VR HMD があるとより没入感のある体験が可能です。
 • WebAR は iOS/Android といったスマートフォンで体験できます。
 ◦ iPhone/iPad での体験は概ね iOS/iPadOS 12 以上が必要です。
 ▪ LiDAR が搭載された最新版の iPad Pro では AR が強化されています。
 ◦ Android での体験は概ね ARCore が動作する ARCore supported devices が必 要となります。
 ▪ 検証用途としてはリファレンス機である Pixel シリーズがおすすめです。
 13
14. © ZOZO Technologies, Inc. 解説を聞きながらでも試せる WebVR「Mozilla Hubs」
 • 本章で WebVR の事例として取り上げている Mozilla Hubs はデスクトップでもス マートフォンでも、そして VR HMD といった多様なデバイスで体験できる WebVR コ ンテンツです。
 • 解説用に Techbookfest Online Demo というワールドを用意しました。
 ◦ PC から見ている方はスマホで右の二次元コードを読み込んでください。
 ◦ スマートフォンから見ている方は https://hub.link/N8fqSyu に
 アクセスしてください。
 • 国際学会 IEEEVR 2020 はこの Mozilla Hubs を会場として
 開催されました。
 • 2020-04-29 JST に Hubs Cloud がリリースされました。
 14 U pdate
15. © ZOZO Technologies, Inc. 解説を聞きながらでも試せる WebVR「おうちで体験！かはくVR」
 • 本章では取り上げていなかった、そして昨今の時世によって生み出された WebVR の事例として、国立科学博物館の館内を歩き回れる「かはくVR」を紹介します。
 ◦ PC から見ている方はスマホで右の二次元コードを読み込んでください。
 ▪ これがいわゆる VR ゴーグルを使わない WebVR と言えます。
 ◦ スマートフォンから見ている方は後から確認するか、
 「かはくVR」で検索してトップに表示されたページで
 試した後で戻ってきてください。
 ◦ Oculus Quest など特定の VR HMD を使うことで
 より没入感の高い VR を体験できます。
 15 N EW
16. © ZOZO Technologies, Inc. 解説を聞きながらでも試せる WebAR「Keep Distance Ruler iOS/Android 両対応版」
 • 本章では取り上げていなかった、そして昨今の時世によって生み出された WebAR の事例として、手前味噌ですが <model-viewer> の利用によって iOS/Android の 両 OS で動作するようにした「Keep Distance Ruler」の WebAR 版を紹介します。
 ◦ PC から見ている方はスマホで右の二次元コードを読み込んでください。
 ◦ スマートフォンから見ている方は後から確認するか、「Keep Distance Ruler glitch」で検索してトップに表示されたページで
 試した後で戻ってきてください。
 16 N EW
17. © ZOZO Technologies, Inc. “種類別” WebVR コンテンツの開発手法例
 • JavaScript ライブラリ、フレームワークの利用
 ◦ A-Frame, Babylon.js, three.js etc
 • ウェブベースのプラットフォームの利用
 ◦ PlayCanvas, Amazon Sumerian etc
 • ゲームエンジンの利用
 ◦ Unity
 17
18. © ZOZO Technologies, Inc. JavaScript ライブラリ、フレームワークの利用例: A-Frame
 • 個人の好みもありますが WebVR コンテンツの開発は three.js のラッパーである A-Frame が最有力候補です。
 • ミニマムなコードとしては下記のコードだけで #FFBC4E 色の背景に #4CC3D9 色 の箱が表示されます。HTML フレンドリーな記述方法が特長です。
 18 N EW <head> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sky color="#ECECEC"></a-sky> </a-scene> </body>
19. © ZOZO Technologies, Inc. ウェブベースのプラットフォームの利用例: Amazon Sumerian
 • AWS でお馴染みの Amazon は AWS の 1 機能として Amazon Sumerian という VR/AR/MR アプリの開発ソリューションを提供しています。
 • この Amazon Sumerian で作成したアプリケーションは WebXR コンテンツとして出 力できます。
 19 N EW 画像引用元. https://www.youtube.com/watch?v=_Q3QKFp3zlo

20. © ZOZO Technologies, Inc. ゲームエンジンの利用例: Unity WebXR Exporter の大幅アップデート
 • かねてから Mozilla が公開していた “WebVR Assets” が 2020/04/08 にWebXR Devici API に対応した “WebXR Exporter” として大幅アップデートしました。
 • このアップデートにより、“一手間” は必要
 ですが、Unity で開発したものを WebXR
 コンテンツとして出力することがより身近
 になりました。
 • Unity 開発者の方はぜひお試しください！
 20 N EW 画像引用元. https://blog.mozvr.com/unity-webxr-exporter-update/

21. © ZOZO Technologies, Inc. 主にスマートフォンにおける “用途別” WebAR コンテンツの開発手法例
 • シンプルに 3D モデルを表示したい
 ◦ <model-viewer> または AR Quick Look
 • 任意の二次元バーコードを読み込んで何かを表示したい
 ◦ AR.js, 8th Wall Web
 • 位置情報をもとに何かを表示したい = Location Based
 ◦ AR.js
 • 任意の画像をもとに何かを表示したい = NFT (Natural Feature Tracking)
 ◦ AR.js, 8th Wall Web
 • 顔認識して SNOW や Instagram のようなものを作りたい
 ◦ DeepAR, jeelizFaceFilter+AR.js
 • ウェブサイトの中に WebAR を埋め込みたい
 ◦ 8th Wall Web
 21 U pdate
22. © ZOZO Technologies, Inc. おわりに
 • 本書にも記載していますが、本章では WebXR の概要を説明することを目的として いるため、本章を読んだだけで見栄えのするかっこいい WebVR や WebAR コンテ ンツの開発はできません。
 • WebXR は技術的に未成熟なものであり、今日まで動いていたものが明日動かなく なるということが往々にして起こり得るので、プロダクション利用は時と場合を考慮 する必要があります。
 • 個人的な所感としては、WebAR のマーケティングやプロモーション用途が今後も 進むと捉えています。
 22
23. © ZOZO Technologies, Inc. Appendix
 • WebAR の現状確認 2019 Winter
 https://dev.to/ikkou/webar-2019-winter-2nbn
 ※ やんごとなき事情により本文中で紹介している Qiita から dev.to に移行しました
 • WebXR Tech Tokyo #0 @ cluster
 https://vrtokyo.connpass.com/event/171859/
 ◦ YouTube Live アーカイブ
 https://www.youtube.com/watch?v=tYs9bwY-2Gg
 ◦ Togetter まとめ
 https://togetter.com/li/xxxxxxx
 23 dev.to YouTube