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

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

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

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

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

© 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

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

© 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/


© 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

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

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

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

© 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

© 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

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

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

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

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

© 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


© 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/


© ZOZO Technologies, Inc. 主にスマートフォンにおける “用途別” 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

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

© 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

No content