XR技術を めちゃくちゃ流行らせるために ちゅらデータが取り組んでいること © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. 通称: べいず 本名: 米須 諒

自己紹介 © 2022 Chura DATA inc. ちゅらデータ株式会社 WebXRエンジニア ・名前：べいず（@mo84dan5_meda） ・特技：メダロットの押し売り ・口癖 : メダロットはご存知ですか？ ・仕事：WebXR 琉球大学大学院修士課程（医科学）修了後、 2020年に新卒でちゅらデータに入社

AGENDA © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. • XRについて • そもそもWebXR(AR, VR)って何？ • XR開発とWebXR開発の違い • XR技術における重要語 • 3DoF AR技術の実現方法 • バーチャル空間の作成 • 現実カメラからの画像取得 • ジャイロセンサーからのカメラの向き取得 • WebXRを取り巻く課題

本日のおばんざい © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL.

XRについて © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL.

そもそもWebXR(AR, VR)って何 © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. XRとは • 簡単に言うと、AR, VRなどの、”なんとかR”と呼ばれている技術の総称です • XRはxRと小文字の”x”で表記されることもあります。 ARとは • カメラなどで取り込んだ現実の映像に 3Dデータなどのバーチャル空間上のコンテン ツををかぶせて表示する VRとは • バーチャル空間上のコンテンツのみを ヘッドマウントディスプレイ(VRゴーグル)上 に表示するものが主

そもそもWebXR(AR, VR)って何 © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. WebXRとは • XR(AR, VR)と単体で言う時は、多くの場合何らかのダウンロードを介してXR体験をする “アプリケーション”を指すことが多い。 • WebXRは例えばiOSの”Safari”やAndroidの”Chrome”などの”ブラウザ”を介して体験する “Webアプリ”を指す メリット • アプリケーションのダウンロードを挟まない ので、URLを配布したりQRコードを読み取っ てもらうだけですぐXR体験が出来る • 容量の大きなアプリで携帯容量が逼迫してい る人にも体験してもらいやすい デメリット • Web技術のみで実装することになるため、制 限が多かったり、うまく制限を回避する必要 があり、実装難易度が高い • 特に自由度(※後述)に関してはデバイスごと に保証できる範囲が異なる。

XR開発とWebXR開発の違い © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. WebXR XR 様々な開発環境や言語 (Unity, UE, Swift, Kotlin) 開発環境 JavaScript 使えるAPIが多い 使える機能 使えるAPIが少ない デバイスごとに開発が 必要な場合がある クロスプラット フォーム 対応すればどのプラット フォームでも使える アプリダウンロード必要 体験の手軽さ ブラウザで開ける 開発の難易度は多少高いが、XR技術を体験してもらうハードルはWebXRのほうが低く、 XR技術をめちゃくちゃ流行らせるために取り組む価値がある

XR技術における重要語「カメラ」 © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. カメラ • XR技術において意識するカメラは2つ存在する。 • ひとつは現実世界を写す現実カメラ • もう一つはバーチャル世界を写すバーチャル空間内カメラ 現実カメラ • 例えばスマートフォンの背面カメラなどから 像を取得する • 機種ごとに画角が異なる等の個別要素がある バーチャル空間内カメラ • バーチャル空間内カメラはバーチャルコンテ ンツを写している • 画角などの情報は自由に設定できる 現実カメラとバーチャル空間内カメラを重ねて表示することでARは実現される

XR技術における重要語「DoF」 © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. 自由度: DoF とは • 簡単に言うと、どれくらいバーチャルコンテンツ内を”どれくらい自由に動けるか”の事 • XRデバイスの対応している指標として3DoFと6DoFがある 3DoF • その場で動かず、一点から見回す形でバー チャル空間内のカメラを動かせる • 実装する上では、デバイスに付属するジャイ ロセンサーから値を取得し、バーチャルコン テンツを移すカメラに反映させる。 • バーチャルコンテンツに近づいたり離れたり、 後ろに回ったりすることはできない • 多くのデバイスで搭載されているジャイロセ ンサーの値を取得するだけなため実装難易度 は低い 6DoF • 見回す動きに加え、前後、左右、上下へバー チャル空間のカメラを動かせる • 実装するためには現実カメラの画像から周囲 の空間を地図データとして記録する”空間地 図”と、自分が空間地図上のどこに位置しどこ を向いているかを推定する”自己位置推定”が 必要 • バーチャルコンテンツに近づいたり 後ろに回ったりすることが出来る • 空間地図の作成と自己位置推定の技術である 「SLAM」が必要となるが、デバイスによっ ては簡単に利用できないことがある

3DoF AR技術の実現方法 © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL.

XR技術を実現する大まかな流れ © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. 現実カメラから 動画取得 ジャイロ センサー から値を取得 バーチャル空間 の作成 バーチャル コンテンツ の配置 getUserMedia で現実カメラの情報を取 得する方法 DeviceOrientationControls でジャイロセンサから向 きと方向を取得 THREE.JSを用いた バーチャル空間の作成 様々な バーチャルコンテンツの 作成

バーチャル空間の作成 1/4 © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. THREE.JSを使用してバーチャル空間を作成する • THREE.JSはWebGLという3DコンテンツをWeb上で扱う技術を使用するための定番ライブラリ • HTMLのcanvasに対してバーチャル空間を描画する • バーチャルコンテンツを形成する以下の要素がある バーチャル空間を照らす光 Scene バーチャル空間そのもの Camera バーチャル空間内カメラ Light Object3D バーチャル空間内に存在する物体 Renderer バーチャル空間内の映像を構成して出力

バーチャル空間の作成 2/4 © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. Scene バーチャル空間そのもの Camera バーチャル空間内カメラ 画角 アスペクト比 最小/最大 描画距離

バーチャル空間の作成 3/4 © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. Object3D バーチャル空間内に存在する物体 Mesh Geometry Material 形/フレーム 質感

バーチャル空間の作成 4/4 © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. Renderer バーチャル空間内の映像を構成して出力

現実カメラからの画像取得 © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. MediaDevices.getUserMedia()を使用する • getUserMediaはデバイス上の機能(カメラ、マイク)にアクセスするJavaScriptのAPI • 取得する情報は、引数constraintsを渡す • リアカメラを使いたい場合はfacingModeをenvromentにする 注意 • HTTPS(SSL認証下)でないと動 作できない • デバイスでカメラへの接続を 許可する必要がある (ダイアログが出る) • デバイス内で処理が競合しがち ので一つのデバイスにつき1つ だけ動いているのが好ましい (別タブで同時に使った場合に 不具合が出た例もある) 画像引用:mdn web docsより

ジャイロセンサーからのカメラの向き取得 © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. THREE. DeviceOrientationControls()を使用する • THREE.JSがサポートしていたジャイロセンサーにアクセスする機能 • THREE.JSのcamera(バーチャル空間内カメラ)を引数としてとり、ジャイロセンサーに同期させる • バーチャル空間内カメラと現実カメラの同期により3DoFが実現する 注意 • デバイス側の「向きと方向」へのアクセスを許可する必要がある • THREE.JSフォーラム上でデバイス間の差を吸収しきれない問題が起きていたため、THREE.JSの最 新版ではリポジトリから削除され実験的実装の項目に置かれている(ちゅらデータでは解決済み) const controls = new THREE.DeviceOrientationControls(camera, true) // 毎フレームアップデートする controls.update()

WebXRを取り巻く課題 © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL.

WebXRを取り巻く課題 © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. Webから画角を取るの 困難問題 • ネイティブアプリであれば現実カメラへのアクセス時に画角を取得する ことが容易であるがWebでは困難 • 画角が合わなければ、実行環境ごとにヴァーチャルコンテンツと現実の スケール感がずれてしまう(後述) 6DoFの実現難しい 問題 • AndroidのではJavaScript標準のWebXR Device APIという実装で容易に実 現できるが、iOSではWebXR Device APIを動かさない方針のため、デバ イス間格差がある • ちゅらデータでは6DoF実現に必要な”空間地図作成”と”自己位置推定”を 独自実装で進めていこうという社内プロジェクトを立ち上げている

画角があっていないとどうなるか © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. ※メダロットは小学生 ぐらいの大きさが理想 ※僕はもうちょっと痩せてい るのが理想

画角をもとめかた © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. • 焦点距離 • Exif情報(取得した写真の内部情報) から取得 • イメージセンサーサイズ • 検索して個別に取得(地獄) • 対角イメージセンサーサイズがイ ンチで提供されていることもある • 歴史的な経緯から1インチ =25.4mmではなく16mmに相当す るらしい • Exif情報にあれば35mm換算焦点距 離から求めることも可能 • 無いことも多い • 知見募集中！！！！！ イメージセンサー 垂直 水平 対角