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

【解説】第2章 WebXRの現状確認
2020 Spring 
#技術書典頒布本「ZOZO TECH BOOK」解説会 Vol.2 
株式会社ZOZOテクノロジーズ 
WEAR部 
諸星一行 a.k.a @ikkou
Copyright © ZOZO Technologies, Inc.

View Slide

© ZOZO Technologies, Inc.
株式会社ZOZOテクノロジーズ 
WEAR部 
XR Specialist
諸星一行 a.k.a @ikkou 
2019年11月入社。XR × Fashion を模索。 
開発者向けコミュニティ“xR Tech Tokyo”やポッドキャスト
“xR.fm”を通して xR 技術を広める活動を続けている。めぐ
るーまーで雛乃木神社氏子の観測者。 
2

View Slide

この章の概要 
● 本章では、2020年3月現在の WebXR について解説しました。 
○ WebXR はウェブ技術のひとつです。単一の技術で成り立っているものではな
く、正確には複数の技術が複合する形で成り立っている技術です。 
○ XR コンテンツは Unity や UE4 といったゲームエンジンなどを利用して開発する
のが主流ですが、技術の進歩に合わせてウェブ上でも扱えるようになったのが
WebXR です。 
● 本章に登場する重要なキーワードとして WebXR, WebXR Device API, WebVR,
WebAR, その他 JavaScript ライブラリなどが挙げられます。 
● 付随する技術である WebGL や WebRTC そして 3D モデリングなどについては触
れていません。 
3

View Slide

今すぐググって試す WebAR 
4
● スマートフォンで特定の動物名を “ググる” と検索結果に動物の 3D モデルが表
示され、「3D 表示」ボタンをタップすると AR で表示されます。 
● 4/12 のイースターに合わせて期間限定でリボンをつけたウサギの「イースターバ
ニー」が出現していました。(終了済み) 
● 技術的にはを使用し、 
ARCore に対応した Android の場合は 
“物体” のオクルージョンを実現できます。 
● “人” のオクルージョンは両 OS で対応 
しています。 
U
pdate

View Slide

“物体” のオクルージョンに対応する Android と非対応となる iOS/iPadOS の違い 
5
● Android は “物体” のオクルージョンに 
対応しているので、壁で猫の体が見える 
範囲を遮ることができる。 
 
 
 
● iOS/iPadOS は “物体” のオクルージョン 
に対応していないので、壁で猫の体が 
見える範囲を遮れない。 
N
EW

View Slide

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

View Slide

WebXR Device API の対応状況　2020/04/30 現在 
7
画像引用元: https://caniuse.com/#search=WebXR%20Device%20API 
U
pdate

View Slide

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/ 

View Slide

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

View Slide

VR とはなにか 
● VR = Virtual Reality = 人工現実感 
○ VR の “学術的な” 日本語訳は仮想現実ではありません。 
○ VR に VR HMD いわゆる VR ゴーグルは必ずしも必要ではありません。 
○ WebVR はこの VR をウェブ技術で実現したものです。 
■ Firefox の開発元である Mozilla 社が提供する Unity Asset の Unity WebXR
Exporter を用いることで、ゲームエンジンである Unity でも WebVR コンテンツ
を出力できます。 
10

View Slide

AR とはなにか 
● AR = Augmented Reality = 拡張現実感 
○ WebAR はこの AR をウェブ技術で実現したものです。 
○ 様々な要因により WebVR よりも WebAR のほうが身近になっています。 
○ AR は次のように分類され、それぞれが WebAR としても実現できます。 
■ Location based AR 
■ Vision based AR 
● マーカー型 
● マーカーレス型 
11

View Slide

XR とはなにか 
● xx Reality を総称する XR 
○ VR, AR, MR の他に代替現実感の SR, 陰消現実感の DR などが挙げられます。 
○ WebXR Device API の XR はこちらの XR を意図しています。 
● Extended Reality としての XR 
● “XR” ではなく “xR” 表記を用いることもありますが、英語圏では原則として大文字
始まりのため “XR” 表記が一般的です。 
12

View Slide

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

View Slide

解説を聞きながらでも試せる 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

View Slide

解説を聞きながらでも試せる WebVR「おうちで体験！かはくVR」 
● 本章では取り上げていなかった、そして昨今の時世によって生み出された WebVR
の事例として、国立科学博物館の館内を歩き回れる「かはくVR」を紹介します。 
■ これがいわゆる VR ゴーグルを使わない WebVR と言えます。 
○ スマートフォンから見ている方は後から確認するか、 
「かはくVR」で検索してトップに表示されたページで 
試した後で戻ってきてください。 
○ Oculus Quest など特定の VR HMD を使うことで 
より没入感の高い VR を体験できます。 
15
N
EW

View Slide

解説を聞きながらでも試せる WebAR「Keep Distance Ruler iOS/Android 両対応版」 
● 本章では取り上げていなかった、そして昨今の時世によって生み出された WebAR
の事例として、手前味噌ですがの利用によって iOS/Android の
両 OS で動作するようにした「Keep Distance Ruler」の WebAR 版を紹介します。 
○ スマートフォンから見ている方は後から確認するか、「Keep Distance Ruler
glitch」で検索してトップに表示されたページで 
試した後で戻ってきてください。 
16
N
EW

View Slide

“種類別” WebVR コンテンツの開発手法例 
● JavaScript ライブラリ、フレームワークの利用 
○ A-Frame, Babylon.js, three.js etc 
● ウェブベースのプラットフォームの利用 
○ PlayCanvas, Amazon Sumerian etc 
● ゲームエンジンの利用 
○ Unity 
17

View Slide

JavaScript ライブラリ、フレームワークの利用例: A-Frame 
● 個人の好みもありますが WebVR コンテンツの開発は three.js のラッパーである
A-Frame が最有力候補です。 
● ミニマムなコードとしては下記のコードだけで #FFBC4E 色の背景に #4CC3D9 色
の箱が表示されます。HTML フレンドリーな記述方法が特長です。 
18
N
EW

View Slide

ウェブベースのプラットフォームの利用例: Amazon Sumerian 
● AWS でお馴染みの Amazon は AWS の 1 機能として Amazon Sumerian という
VR/AR/MR アプリの開発ソリューションを提供しています。 
● この Amazon Sumerian で作成したアプリケーションは WebXR コンテンツとして出
力できます。 
19
N
EW
画像引用元. https://www.youtube.com/watch?v=_Q3QKFp3zlo 

View Slide

ゲームエンジンの利用例: 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/ 

View Slide

主にスマートフォンにおける “用途別” WebAR コンテンツの開発手法例 
● シンプルに 3D モデルを表示したい 
○ または 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

View Slide

おわりに 
● 本書にも記載していますが、本章では WebXR の概要を説明することを目的として
いるため、本章を読んだだけで見栄えのするかっこいい WebVR や WebAR コンテ
ンツの開発はできません。 
● WebXR は技術的に未成熟なものであり、今日まで動いていたものが明日動かなく
なるということが往々にして起こり得るので、プロダクション利用は時と場合を考慮
する必要があります。 
● 個人的な所感としては、WebAR のマーケティングやプロモーション用途が今後も
進むと捉えています。 
22

View Slide

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

View Slide

View Slide

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

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

ikkou

More Decks by ikkou

Other Decks in Technology

Featured

Transcript