2019-09-06 CEDEC 2019 Day 3 WebXRの現状と実社会への応用事例 / Talk about WebXR at CEDEC 2019

2019/09/06 CEDEC 2019 Day 3 16:30~17:30 登壇時の公開用発表資料です。

Transcript

1. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou WebXRの現状と実社会への応用事例 2019-09-06 CEDEC 2019 Day 3 IKKOU Morohoshi (@ikkou) Mercari, Inc
2. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou 本資料はセッション終了後なる早で公開します。 スライドを撮影したい場合、iOS の人は Microsoft Pics を Android の人は任意の無音カメラを推奨しています。 本セッションは Twitter への投稿を推奨しています。 公式ハッシュタグは #CEDEC2019 です。 #CEDECWebXR をつけてもらえたら追いかけます。
3. 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 技術者 めぐるーまーで雛乃木神社氏子
4. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou Let’s talk about WebXR !!
5. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou Goal • WebXR という技術の現状を知ってもらう • WebXR が既に適用されていることを知ってもらう • WebXR コンテンツの開発方法を知ってもらう
6. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou 免責事項 • 本講演に掲載している情報はすべて 2019/09/06 現在の情 報をもとにしています。 • NDA の関係でボカした表現になっている iOS 13 に関する 項目は iOS 13 正式公開後に Twitter 等でアップデート情 報を発信します:D
7. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou XR についてのおさらい WebXR を取り巻く “仕様・規格” の現状 WebXR を取り巻く “iOS” の現状 WebXR の実社会への応用事例 02 03 04 01 Agenda WebXR コンテンツの開発 05 06 まとめ
8. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou 01 XR についてのおさらい
9. 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 が存在する
10. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou 学術的な VR と AR をもっと知りたい場合の参考図書 「バーチャルリアリティ学」 日本バーチャルリアリティ学会 発行, 2010 「ARの教科書」 マイナビ出版 発行, 2018
11. 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 派 )
12. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou WebXR とは何か 本講演では Web 技術をもとにした VR である WebVR と同 AR で ある WebAR をすべて WebXR と定義 • ウェブブラウザを通した体験であること ( 専用アプリを含む ) • 必ずしも HMD の使用を問わないこと • WebVR API, WebXR Device API の使用を問わないこと
13. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou 02 WebXR を取り巻く “仕様・規格” の現状
14. 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 ヶ月を要した
15. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou WebVR API について Ref. https://immersive-web.github.io/webvr/spec/1.1/
16. 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 のほうが安定動作が期待できる
17. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou WebVR API の対応状況 Ref. https://caniuse.com/#feat=webvr
18. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou WebXR Device API について Ref. https://www.w3.org/TR/webxr/
19. 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 に対応しているブラウザは少な い
20. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou WebXR Device API の対応状況 Ref. https://caniuse.com/#feat=webxr
21. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou Immersive Web Working Group について Ref. https://www.w3.org/immersive-web/
22. 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 氏
23. 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
24. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou OpenXR について Ref. https://www.khronos.org/assets/uploads/apis/OpenXR-Update-GDC_v20190316c_Mar19.pdf
25. 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 の発表資料等を参照
26. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou OpenXR は WebXR も対象にしている Ref. https://www.khronos.org/assets/uploads/apis/OpenXR-Update-GDC_v20190316c_Mar19.pdf
27. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou OpenXR によって WebXR も統合的な XR Apps になり得る Ref. https://www.khronos.org/assets/uploads/apis/OpenXR-Update-GDC_v20190316c_Mar19.pdf
28. 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 現在
29. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou 03 WebXR を取り巻く “iOS” の現状
30. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou MediaDevices.getUserMedia() について WebXR の文脈では、ブラウザ経由でデバイスの背面/フロントカメラ やマイク等にアクセスするためのメソッド • Navigator.getUserMedia() から置き換わった API
31. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou MediaDevices.getUserMedia() の対応状況 Ref. https://caniuse.com/#feat=stream
32. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou iOS 11 で活路を見出した WebAR について iOS 10 系までは MediaDevices.getUserMedia() を使えず、 iOS/Android “両方で” WebAR を展開できなかった • iOS 11 でついに実装され Android と足並みが揃った
33. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou iOS 12.2 で WebVR と WebAR が半ば終わった件について Ref. https://qiita.com/ikkou/items/a193d13250d9e3d51473
34. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou iOS 12.2 で WebVR と WebAR が半ば終わった件について iOS 12.2 の Update で設定 → Safari に “モーションと画面の向き のアクセス” がデフォルトオフの状態になった • この設定がオフの状態では WebVR と WebAR で重要なジャイ ロが機能しない • 自ら設定をオンに変更することは可能 • ユーザーが設定オフなのかオンなのか検知できる専用の API が 用意されているわけではない • DeviceOrientation & DeviceMotion の挙動で判断できる
35. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou DeviceOrientation & DeviceMotion について Ref. https://www.w3.org/TR/orientation-event/
36. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou DeviceOrientation & DeviceMotion について Ref. https://caniuse.com/#feat=deviceorientation
37. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou iOS 13 で WebVR と WebAR がどうなるのか NDA の関係で具体的な画面は見せられません 気になる方は iOS 13 にした iOS 端末で 8th Wall の WEB AR DEMO にアクセスしてください
38. 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
39. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou 再び DeviceOrientation & DeviceMotion について Ref. https://www.w3.org/TR/orientation-event/#deviceorientation
40. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou 04 WebXR の実社会への応用事例
41. 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
42. 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部も登 場！】」から確認可能
43. 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
44. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou 05 WebXR コンテンツの開発
45. 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
46. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou 1. API の仕様に沿ってゼロから Vanilla JS を書く for VR&AR • Vanilla JS is 素の JavaScript • JavaScript フレームワーク/ライブラリ同等のことをフルスクラッチ で書けば実現できるが、そこに必然性は無い
47. 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 秒間までといった制限がある
48. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou 2. AR Quick Look の仕様に沿って HTML を書く for AR <!DOCTYPE html> <html> <head> <meta charset=”utf-8”> <title=”Sample of USDZ for iOS”> </head> <body> <a rel=”ar” href=”/images/plain.usdz”> <img src=”/images/plain-thumb.jpg”> </a> </body> </html> Ref. https://developer.apple.com/jp/augmented-reality/quick-look/
49. 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 現在では選択肢として考慮する必要はないと言 える
50. 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 現在では選択肢として考慮する必然性は ないと言える
51. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou 3-2-1. Scene Viewer • iOS の AR Quick Look に対して Android には Scene Viewer とい う仕組みがある • Web から扱うのは Web Components の <model-viewer> コン ポーネントであり、実態は model-viewer.js を参照している • AR Quick Look と違い、Scene Viewer は iOS と Android の両方で 動く仕組みが用意されている • Android の場合、動作は ARCore に対応した端末に限られる
52. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou 3-2-1. Scene Viewer <!-- Import the component → <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-vi ewer.js"></script> <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-vi ewer-legacy.js"></script> <!-- Use it like any other HTML element → <model-viewer src="assets/Astronaut.glb" ar camera-controls alt="A 3D model of an astronaut" background-color="#222" ios-src="assets/Astronaut.usdz" magic-leap unstable-webxr></model-viewer> Ref. https://googlewebcomponents.github.io/model-viewer/examples/augmented-reality.html
53. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou 4-1. Web サービスを使用する for VR&AR • PlayCanvas ◦ CEDEC Day 2, Day 3 に PlayCanvas の講演があります • Amazon Sumerian • STYLY
54. 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
55. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou 06 まとめ
56. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou WebXR の未来の考察、期待を込めて • WebXR に限らず Web 技術で出来ることが増えてきているのは 紛れもない事実 • W3C の規格や OpenXR をはじめとして環境が整いつつある • iOS/Android ともにネイティブアプリよりも気軽に XR をプロダク トに落とし込める
57. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou なぜ WebXR を推すのか 1. アプリのインストールが不要 ◦ iOS/Android に限らずアプリのインストールコストは大きい、 ウェブであればアクセスするだけ！ 2. ( 人によっては ) 慣れ親しんだ Web 技術を使える 3. ( 将来的には ) デバイス間の差分がなくなる ( かもしれない ) ◦ OpenXR の今後に期待！
58. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou WebXR は銀の弾丸か? 否。ウェブアプリはネイティブアプリ同等のパフォーマンスを出すことが 難しいのは事実。現時点ではマーケティング・PR・イベント用途には適 しているが、例えばハイクオリティなゲームは向いていない。 そもそも WebXR に限らず XR 技術は “手段” であって “目的” では ないので、まず目的を見極めて、それに沿った実装を心がけましょう:D
59. CEDEC 2019 / WebXRの現状と実社会への応用事例 #CEDEC2019 @ikkou 楽しい WebXR ライフを！