Slide 1
Slide 1 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
WebXRの現状と実社会への応用事例
2019-09-06 CEDEC 2019 Day 3
IKKOU Morohoshi (@ikkou)
Mercari, Inc
Slide 2
Slide 2 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
本資料はセッション終了後なる早で公開します。
スライドを撮影したい場合、iOS の人は Microsoft Pics を
Android の人は任意の無音カメラを推奨しています。
本セッションは Twitter への投稿を推奨しています。
公式ハッシュタグは #CEDEC2019 です。
#CEDECWebXR をつけてもらえたら追いかけます。
Slide 3
Slide 3 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
About Speaker
諸星 一行 / IKKOU Morohoshi / @ikkou
Mercari, Inc. / ONE SHOT STAR 代表
ソーシャルゲーム開発会社を経て
2017年9月より現職
xR 開発者コミュニティ “xR Tech Tokyo” 主宰
xR に関する旬な情報を届ける “xR.fm” Podcaster
日本バーチャルリアリティ学会認定 VR 技術者
めぐるーまーで雛乃木神社氏子
Slide 4
Slide 4 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
Let’s talk about WebXR !!
Slide 5
Slide 5 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
Goal
● WebXR という技術の現状を知ってもらう
● WebXR が既に適用されていることを知ってもらう
● WebXR コンテンツの開発方法を知ってもらう
Slide 6
Slide 6 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
免責事項
● 本講演に掲載している情報はすべて 2019/09/06 現在の情
報をもとにしています。
● NDA の関係でボカした表現になっている iOS 13 に関する
項目は iOS 13 正式公開後に Twitter 等でアップデート情
報を発信します:D
Slide 7
Slide 7 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
XR についてのおさらい
WebXR を取り巻く “仕様・規格” の現状
WebXR を取り巻く “iOS” の現状
WebXR の実社会への応用事例
02
03
04
01
Agenda
WebXR コンテンツの開発
05
06 まとめ
Slide 8
Slide 8 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
01 XR についてのおさらい
Slide 9
Slide 9 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
XR とは何か
本講演では VR, AR, MR といった ◯◯ Reality を XR と定義
● VR = Virtual Reality = 人工現実感
○ VR は学術的には「仮想現実」ではない
○ VR に HMD ( VR ゴーグル ) は必須ではない
● AR = Augmented Reality = 拡張現実感
● MR = Mixed Reality = 複合現実感
学術的には他にも SR や DR などの ◯◯ Reality が存在する
Slide 10
Slide 10 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
学術的な VR と AR をもっと知りたい場合の参考図書
「バーチャルリアリティ学」
日本バーチャルリアリティ学会 発行, 2010
「ARの教科書」
マイナビ出版 発行, 2018
Slide 11
Slide 11 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
XR と xR
本講演で定義する XR は xR と表記されることもある
● 小文字 x の xR
○ “x” を可変する文字列としたもの
● 大文字 X の XR
○ xR 同様に “x” を可変する文字列としたもの
○ Cross Reality, Extended Reality という意味も併せ持つ
後述する WebXR Device API や OpenXR が “XR” 表記を用いて
いるため、本講演では XR を用いる ( ※個人的には xR 派 )
Slide 12
Slide 12 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
WebXR とは何か
本講演では Web 技術をもとにした VR である WebVR と同 AR で
ある WebAR をすべて WebXR と定義
● ウェブブラウザを通した体験であること ( 専用アプリを含む )
● 必ずしも HMD の使用を問わないこと
● WebVR API, WebXR Device API の使用を問わないこと
Slide 13
Slide 13 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
02 WebXR を取り巻く “仕様・規格” の現状
Slide 14
Slide 14 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
W3C と仕様策定のプロセスについて
Webに関する仕様は W3C ( World Wide Web Consortium )
が策定している
1. 作業草案 ( Working Draft ) = Working Group が存在している
2. 勧告候補 ( Candidate Recommendation )
3. 勧告案 ( Proposed Recommendation )
4. W3C 勧告 ( Recommendation )
という4つのプロセスを経て正式な仕様として勧告される
当たり前に聞くようになった HTML 5 は勧告まで 6 年 9 ヶ月を要した
Slide 15
Slide 15 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
WebVR API について
Ref. https://immersive-web.github.io/webvr/spec/1.1/
Slide 16
Slide 16 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
WebVR API について
W3C が策定しようとしていた、ブラウザを通して VR HMD の位置や
動き、向きなどの情報を取得できるようにした API
● 最新バージョンは Editor's Draft で 1.1
○ Working Draft になる前の非公式だが一定の同意が得られ
ている状態
○ 勧告プロセスにはないが Working Draft より動きが早い
● WebXR Device API に置き換わったので今後は更新されない
● 今日現在、WebXR Device API は頻繁に仕様が変わることが考
えられるので WebVR API のほうが安定動作が期待できる
Slide 17
Slide 17 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
WebVR API の対応状況
Ref. https://caniuse.com/#feat=webvr
Slide 18
Slide 18 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
WebXR Device API について
Ref. https://www.w3.org/TR/webxr/
Slide 19
Slide 19 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
WebXR Device API について
WebVR API が VR HMD “のみ” を対象にしていた課題に対し、
AR や MR も対象としたものが WebXR Device API
● 最新バージョンは W3C Working Draft, 21 May 2019
● Unstable API
● 今日現在、WebXR Device API に対応しているブラウザは少な
い
Slide 20
Slide 20 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
WebXR Device API の対応状況
Ref. https://caniuse.com/#feat=webxr
Slide 21
Slide 21 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
Immersive Web Working Group について
Ref. https://www.w3.org/immersive-web/
Slide 22
Slide 22 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
Immersive Web Working Group について
仕様策定のプロセスに則り WebXR Device API を策定するために
必要な Working Group として発足したのが Immersive Web
Working Group
● もともとは誰でも入れる WebVR Community Group ( 後に
Immersive Web Community Group に改名 ) からスタート
● 議論の高まりを受けて 2018 年 9 月末に W3C メンバーのみ入れる
Immersive Web Working Group が発足
● 現在の Chair は Samsung の Ada Rose Cannon 氏と Google
の Chris Wilson 氏
Slide 23
Slide 23 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
WebXR Device API が対象としているデバイス例
● ARCore-compatible devices
● Google Daydream
● HTC Vive / Vive Pro / Vive Pro Eye
● Magic Leap One
● Microsoft HoloLens / HoloLens 2?
● Oculus Rift / Rift S
● Samsung Gear VR
● Windows Mixed Reality headsets
Ref. https://github.com/immersive-web/webxr/blob/master/explainer.md
Slide 24
Slide 24 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
OpenXR について
Ref. https://www.khronos.org/assets/uploads/apis/OpenXR-Update-GDC_v20190316c_Mar19.pdf
Slide 25
Slide 25 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
OpenXR について
The Khronos Group が GDC 2019 で v0.9 を発表した XR に関
する統一規格
● The Khronos Group はゲーム開発者にはお馴染みの
OpenGL や Vulkan の他にも WebGL や glTF など Web の
文脈でも縁の深い組織
● 2019/09/06 現在の最新バージョンは 1.0
● WebXR Device API との直接的な関係性は無い
● OpenXR の詳細は CEDEC Day 1 の発表資料等を参照
Slide 26
Slide 26 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
OpenXR は WebXR も対象にしている
Ref. https://www.khronos.org/assets/uploads/apis/OpenXR-Update-GDC_v20190316c_Mar19.pdf
Slide 27
Slide 27 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
OpenXR によって WebXR も統合的な XR Apps になり得る
Ref. https://www.khronos.org/assets/uploads/apis/OpenXR-Update-GDC_v20190316c_Mar19.pdf
Slide 28
Slide 28 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
主要な HMD と WebVR が動作するブラウザの組み合わせ
Chrome Firefox Microsoft Edge Firefox Reality
Oculus
Browser
Supermedium Servo Helio
Oculus Go /
Oculus Quest
✕ ✕ ✕ ◎ ◯ ✕ ✕ ✕
Oculus Rift /
Oculus Rift S
◯
※要フラグ変更
◯
※要設定変更
✕ ✕ ✕ ◯ ✕ ✕
HTC VIVE /
HTC VIVE Pro
◯
※要フラグ変更
◯
※要設定変更
✕ ✕ ✕ ◯ ◯ ✕
Windows Mixed
Reality headsets
✕ ◯ ◎ ✕ ✕ ◯ ✕ ✕
Microsoft
HoloLens
✕ ✕ ◎ ✕ ✕ ✕ ✕ ✕
Magic Leap One ✕ ✕ ✕ ✕ ✕ ✕ ✕ ◯
Daydream view
Mirage Solo
◯
※対応端末のみ
✕ ✕
◯
※対応端末のみ
✕ ✕ ✕ ✕
PlayStation VR ✕ ✕ ✕ ✕ ✕ ✕ ✕ ✕
2019-09-06 現在
Slide 29
Slide 29 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
03 WebXR を取り巻く “iOS” の現状
Slide 30
Slide 30 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
MediaDevices.getUserMedia() について
WebXR の文脈では、ブラウザ経由でデバイスの背面/フロントカメラ
やマイク等にアクセスするためのメソッド
● Navigator.getUserMedia() から置き換わった API
Slide 31
Slide 31 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
MediaDevices.getUserMedia() の対応状況
Ref. https://caniuse.com/#feat=stream
Slide 32
Slide 32 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
iOS 11 で活路を見出した WebAR について
iOS 10 系までは MediaDevices.getUserMedia() を使えず、
iOS/Android “両方で” WebAR を展開できなかった
● iOS 11 でついに実装され Android と足並みが揃った
Slide 33
Slide 33 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
iOS 12.2 で WebVR と WebAR が半ば終わった件について
Ref. https://qiita.com/ikkou/items/a193d13250d9e3d51473
Slide 34
Slide 34 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
iOS 12.2 で WebVR と WebAR が半ば終わった件について
iOS 12.2 の Update で設定 → Safari に “モーションと画面の向き
のアクセス” がデフォルトオフの状態になった
● この設定がオフの状態では WebVR と WebAR で重要なジャイ
ロが機能しない
● 自ら設定をオンに変更することは可能
● ユーザーが設定オフなのかオンなのか検知できる専用の API が
用意されているわけではない
● DeviceOrientation & DeviceMotion の挙動で判断できる
Slide 35
Slide 35 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
DeviceOrientation & DeviceMotion について
Ref. https://www.w3.org/TR/orientation-event/
Slide 36
Slide 36 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
DeviceOrientation & DeviceMotion について
Ref. https://caniuse.com/#feat=deviceorientation
Slide 37
Slide 37 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
iOS 13 で WebVR と WebAR がどうなるのか
NDA の関係で具体的な画面は見せられません
気になる方は iOS 13 にした iOS 端末で 8th Wall の WEB AR DEMO にアクセスしてください
Slide 38
Slide 38 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
Safari 13 Beta 6 Release Notes から読み取れる対応方法
iOS 13 に関する情報は Release Notes などの誰でもアクセスでき
る公開情報であればNDA の適用外となる
● New Features
○ Added a permission API on iOS for
DeviceMotionEvent and DeviceOrientationEvent.
Ref. Safari 13 Beta 6 Release Notes
https://developer.apple.com/documentation/safari_release_notes/safari_13_beta_6_release_notes
Slide 39
Slide 39 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
再び DeviceOrientation & DeviceMotion について
Ref. https://www.w3.org/TR/orientation-event/#deviceorientation
Slide 40
Slide 40 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
04 WebXR の実社会への応用事例
Slide 41
Slide 41 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
WebVR の実例 1/2
● ペプシコーラの Pepsi Go Back ( iOS 12+ では前述の仕様変更で動かない )
● Google × NASA の Access Mars ( WEbVR から WebXR に Update 中 )
● React VR が用いられた JUMANJI 360 ( Oculus による関連記事 )
● A-Frame 開発者が立ち上げた WebVR 専用ブラウザ Supermedium
● Mozilla の VR 専用ブラウザ Firefox Reality
● Mozilla のソーシャル VR プラットフォーム Mozilla Hubs
Slide 42
Slide 42 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
WebVR の実例 2/2
2017 年前後に盛り上がった WebVR 施策は終了しているケースもある
● ワーナー・ブラザーズの Dunkirk WebVR game ( 公開終了 )
○ 公開時の雰囲気は PANORA の記事「Google、FPS風のWebVRゲーム公開 第二次世界大
戦を描いた映画「ダンケルク」とコラボ 」から確認可能
● VR PARCO ( 公開終了 )
○ 公開時の雰囲気は 電ファミニコゲーマー の記事「まだWebのVRはつらめ…それでもPARCOが
挑戦する理由。VR版ECサイト仕掛け人にその課題と将来性を聞いてみた【ドワンゴ VR部も登
場！】」から確認可能
Slide 43
Slide 43 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
WebAR の実例 1/2
2018 年以降は WebVR よりも WebAR 施策が増えている印象がある
● 自転車販売サイト Pure Cycles の 1 商品
● 家具販売サイト FURNI の各種商品
● Google アプリ検索で表示されるナレッジパネル
● NASA Mars Curiosity Rover
● Younique の Beauty Guide
● Amazon のバーチャルメイク
● AWE Portal Hunt
Slide 44
Slide 44 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
05 WebXR コンテンツの開発
Slide 45
Slide 45 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
WebXR コンテンツの開発方法
WebXR は HTML, CSS, JavaScript といった Web 技術を中心
に構成されている
1. API の仕様に沿ってゼロから Vanilla JS を書く for VR&AR
2. AR Quick Look の仕様に沿って HTML を書く for AR
3. JavaScript フレームワーク/ライブラリを使用する for VR&AR
4. Web サービスを使用する for VR&AR
5. Game Engine を使用する for VR
Slide 46
Slide 46 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
1. API の仕様に沿ってゼロから Vanilla JS を書く for VR&AR
● Vanilla JS is 素の JavaScript
● JavaScript フレームワーク/ライブラリ同等のことをフルスクラッチ
で書けば実現できるが、そこに必然性は無い
Slide 47
Slide 47 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
2. AR Quick Look の仕様に沿って HTML を書く for AR
● AR Quick Look は iOS 12 の ARKit 2 で実装された iOS 専用の 3D
オブジェクトを現実世界に重畳させる仕組み
● HTML の記述のみで WebAR として扱える
● 表示できる 3D オブジェクトは USDZ ファイルのみ
○ USDZ は Pixar USD の改良版でモデルファイルとテクスチャファイ
ルを ZIP 化したもの
○ 総ポリゴン数 10 万、テクスチャサイズ 2048^2 まで、アニメーション
は 10 秒間までといった制限がある
Slide 48
Slide 48 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
2. AR Quick Look の仕様に沿って HTML を書く for AR
Ref. https://developer.apple.com/jp/augmented-reality/quick-look/
Ref. https://developer.apple.com/jp/augmented-reality/quick-look/
Slide 49
Slide 49 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
3-1. JavaScript フレームワーク/ライブラリを使用する for VR
● Three.js
● A-Frame
● React 360
● Babylon.js
他にも古くは Web VR Starter Kit や WebVR Boilerplate などが挙げられるが、
開発も止まっているので 2019/09/06 現在では選択肢として考慮する必要はないと言
える
Slide 50
Slide 50 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
3-2. JavaScript フレームワーク/ライブラリを使用する for AR
● AR.js
● model-viewer.js @ Scene Viewer
● 8th Wall
他にも老舗の JSARToolKit や WebARonARKit と WebARonARCore に対応す
る three.ar.js が存在するが、2019/09/06 現在では選択肢として考慮する必然性は
ないと言える
Slide 51
Slide 51 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
3-2-1. Scene Viewer
● iOS の AR Quick Look に対して Android には Scene Viewer とい
う仕組みがある
● Web から扱うのは Web Components の コン
ポーネントであり、実態は model-viewer.js を参照している
● AR Quick Look と違い、Scene Viewer は iOS と Android の両方で
動く仕組みが用意されている
● Android の場合、動作は ARCore に対応した端末に限られる
Slide 52
Slide 52 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
3-2-1. Scene Viewer
Slide 53
Slide 53 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
4-1. Web サービスを使用する for VR&AR
● PlayCanvas
○ CEDEC Day 2, Day 3 に PlayCanvas の講演があります
● Amazon Sumerian
● STYLY
Slide 54
Slide 54 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
5. Game Engine を使用する for VR
● Unity で WebVR Assets を利用して WebGL 出力する
Ref. https://assetstore.unity.com/packages/templates/systems/webvr-assets-109152?aid=1100l3nug&utm_source=aff
Slide 55
Slide 55 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
06 まとめ
Slide 56
Slide 56 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
WebXR の未来の考察、期待を込めて
● WebXR に限らず Web 技術で出来ることが増えてきているのは
紛れもない事実
● W3C の規格や OpenXR をはじめとして環境が整いつつある
● iOS/Android ともにネイティブアプリよりも気軽に XR をプロダク
トに落とし込める
Slide 57
Slide 57 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
なぜ WebXR を推すのか
1. アプリのインストールが不要
○ iOS/Android に限らずアプリのインストールコストは大きい、
ウェブであればアクセスするだけ！
2. ( 人によっては ) 慣れ親しんだ Web 技術を使える
3. ( 将来的には ) デバイス間の差分がなくなる ( かもしれない )
○ OpenXR の今後に期待！
Slide 58
Slide 58 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
WebXR は銀の弾丸か?
否。ウェブアプリはネイティブアプリ同等のパフォーマンスを出すことが
難しいのは事実。現時点ではマーケティング・PR・イベント用途には適
しているが、例えばハイクオリティなゲームは向いていない。
そもそも WebXR に限らず XR 技術は “手段” であって “目的” では
ないので、まず目的を見極めて、それに沿った実装を心がけましょう:D
Slide 59
Slide 59 text
CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou
楽しい WebXR ライフを！