LiDAR を活用したARアプリを作ろう!

by TokyoYoshida

Slide 1

Slide 1 text

LiDAR  を活用したARアプリを作ろう!    @TokyoYoshida 

Slide 2

Slide 2 text

自己紹介  　　　　@TokyoYoshida (Twitterだけ@jugemjugemjugem)   フリーランスのiOSエンジニア  好きな分野: 動画、音声、AR、ML       面白い作品を作ったらSNSにアップしています🚇 

Slide 3

Slide 3 text

もくじ  1. LiDARとはなにか    2. なにができるのか？    3. どうやってつかうのか？    4. 簡単なコードの例と応用例 

Slide 4

Slide 4 text

LiDARとはなにか  ● レーザー光を当てることで、対象物までの距離や方向を測定するセンサー技術  ● 高い精度でスキャンできることが特徴  ● 2020年にiPad ProやiPhone 12 Proに搭載された  自分もなにか作りたい！と思わせるものがあった 💡 引用: 3dScannerApp.com 

Slide 5

Slide 5 text

なにができるのか  iOSにおいては大きく分けて２種類ある。    1. Scene Depth    2. Scene Geometry 

Slide 6

Slide 6 text

何ができるのか   1. Scene Depth  周囲の環境についての深度情報をリアルタイムにピクセル単位で取得できる。  デプスマップ  信頼度マップ 

Slide 7

Slide 7 text

何ができるのか   2. Scene Geometry  周囲の環境を3Dオブジェクトとして再構築してくれる。  バーチャルな物体を現実になじませる   3Dオブジェクトの取得 

Slide 8

Slide 8 text

性能について  ● Scene Depthは、リアルタイム（毎秒60回）で取得できる    ● Scene Geometryは複数フレームの深度データを集約して処理されるのでリアルタイムではなく少し遅れて再構築される    ● 計測可能な距離は、公式の発表はないが5メートルと推測される 

Slide 9

Slide 9 text

どうやって使うのか  ● ARKit、RealityKitからアクセスして利用する    ● ARセッションをScene Depthを有効にして開始すると利用可能になる    ● 深度情報や、再構築した3DオブジェクトはARセッションのプロパティからアクセスできる  基本的な使い方は比較的簡単です。あとはアイデア次第で無限の可能性があります😆

Slide 10

Slide 10 text

コード例の前に  サンプルリポジトリの紹介  今日紹介するコードはほぼすべてこちらのリポジトリに入っています。  https://github.com/TokyoYoshida/ExampleOfiOSLiDAR  LiDARスキャナを搭載したデバイスでないと動作しません

Slide 11

Slide 11 text

基礎編ガイドを表示する 

Slide 12

Slide 12 text

基礎編ガイドを表示してみる  ここではRealityKitのARViewを使用。 

Slide 13

Slide 13 text

基礎編ガイドを表示してみる  ガイドを表示するここではRealityKitのARViewを使用。 

Slide 14

Slide 14 text

基礎編ガイドを表示してみる  シーンを3Dで再構成  する設定  ここではRealityKitのARViewを使用。 

Slide 15

Slide 15 text

基礎編ガイドを表示してみる  Depthが使えるか確認するここではRealityKitのARViewを使用。 

Slide 16

Slide 16 text

基礎編ガイドを表示してみる  Depthを有効にするここではRealityKitのARViewを使用。 

Slide 17

Slide 17 text

基礎編ガイドを表示してみる  これだけでLiDARを試すことができます！ここではRealityKitのARViewを使用。 

Slide 18

Slide 18 text

基礎編デプスマップを取得する  ● CVPixelBuffer型で取得できる    ● 256 x 192 Float32の情報    ● 単位はメートル単位 

Slide 19

Slide 19 text

基礎編デプスマップを取得する    デプスを有効にする

Slide 20

Slide 20 text

DepthMapを取得する  基礎編デプスマップを取得する   

Slide 21

Slide 21 text

デプスマップ  応用編 

Slide 22

Slide 22 text

応用編のしくみ  ● 画面にグリッド点を敷き詰める    ● デプスマップで使って奥行きを決定    ● ビデオ画像を使って色を決定 

Slide 23

Slide 23 text

応用編のしくみ  ● 画面にグリッド点を敷き詰める    ● デプスマップで使って奥行きを決定    ● ビデオ画像を使って色を決定 

Slide 24

Slide 24 text

応用編のしくみ  ● 画面にグリッド点を敷き詰める    ● デプスマップで使って奥行きを決定    ● ビデオ画像を使って色を決定 

Slide 25

Slide 25 text

応用編のしくみ  ● 画面にグリッド点を敷き詰める    ● デプスマップで使って奥行きを決定    ● ビデオ画像を使って色を決定 

Slide 26

Slide 26 text

応用編のしくみ（抜粋）  グリッド点にデプスを適用してワールド座標系に変換するMetalのシェーダー関数。  Appleのサンプルコード「Visualizing and Interacting with a Reconstructed Scene」を改変して作成しました。 https://developer.apple.com/documentation/arkit/content_anchors/visualizing_and_interacting_with_a_reconstructed_scene   応用編はコードの雰囲気だけ  紹介します

Slide 27

Slide 27 text

応用編のしくみ（抜粋）  グリッドの点をカメラ座標系に変換し、デプスを反映する cameraPoint ・・・処理したいグリッドの点の座標   cameraIntrinsicsInversed ・・・カメラ内部パラメータの逆行列（スクリーン座標をカメラ座標に変換する）   depth ・・・グリッドの位置のデプス   グリッド点にデプスを適用してワールド座標系に変換するシェーダー関数。 

Slide 28

Slide 28 text

応用編のしくみ（抜粋）  modelTransform ・・・ユーザーが指定した位置の変換行列   回転・移動前に(0, 0, -0.5)を足しているのは、回転の中心点をカメラから0.5mぐらいの位置にしたいから   回転・移動後に(0, 0, 1.5)を足しているのは、最初に足した0.5mをもとに戻しているから and カメラから1m程度離れた位置で表示したいから  グリッド点をユーザーが指定した位置に回転・移動させる  グリッド点にデプスを適用してワールド座標系に変換するシェーダー関数。 

Slide 29

Slide 29 text

応用編のしくみ（抜粋）  localToWorld ・・・ローカル座標系からワールド座標系に変換する行列   ワールド座標系に変換する  グリッド点にデプスを適用してワールド座標系に変換するシェーダー関数。 

Slide 30

Slide 30 text

補足：Smoothed Scene Depthについて  フレーム間のLiDAR読み取り値の違いを最小限に抑えるために、複数のフレームにわたって平均して深度情報を提供するオプション。奥行きのあるオブジェクトを描写するときに滑らかなモーション効果を作成する。  デプスマップの取得コードを次のように差し替えるだけで利用できる。  有効にする  取得する 

Slide 31

Slide 31 text

通常版 

Slide 32

Slide 32 text

スムーズ版 

Slide 33

Slide 33 text

基礎編  オブジェクトの配置 

Slide 34

Slide 34 text

基礎編オブジェクトを配置する  viewDidLoad()などでオクルージョンと物理演算を有効にする 

Slide 35

Slide 35 text

viewDidLoad()などでオクルージョンと物理演算を有効にする  オクルージョンを有効にする  基礎編オブジェクトを配置する 

Slide 36

Slide 36 text

viewDidLoad()などでオクルージョンと物理演算を有効にする  物理演算を有効にする  基礎編オブジェクトを配置する 

Slide 37

Slide 37 text

RealityKitのAPIに含まれる3Dオブジェクトを作成して配置する。  基礎編オブジェクトを配置する 

Slide 38

Slide 38 text

基礎編  3Dオブジェクトの取得  ※動画はイメージです。今回は動画の実装の一部だけ説明します 

Slide 39

Slide 39 text

基礎編 3Dオブジェクトの取得  ARセッションから取得できるアンカーのうち、ARMeshAnchor型のものだけフィルターする。     得られたAnchorからジオメトリを取り出してさまざまな処理をすることができる。  

Slide 40

Slide 40 text

3Dオブジェクト  応用編 

Slide 41

Slide 41 text

応用編のしくみ  ● 3DオブジェクトはARKitから取得    ● 頂点の位置が、カメラの画像のどこにあるかを計算する    ● カメラ画像と頂点の位置をテクスチャーとして３Dオブジェクトに与える 

Slide 42

Slide 42 text

Slide 43

Slide 43 text

応用編のしくみ  ● 3DオブジェクトはARKitから取得    ● 頂点の位置が、カメラの画像のどこにあるかを計算する    ● カメラ画像と頂点の位置をテクスチャーとして３Dオブジェクトに与える  たとえば机の右側にある  ２つの頂点は図のように  対応している 

Slide 44

Slide 44 text

Slide 45

Slide 45 text

応用編のしくみ（抜粋）  ３Dオブジェクトの各頂点をローカル座標→ワールド座標→スクリーン座標→テクスチャー座標の順に変換する。 

Slide 46

Slide 46 text

応用編のしくみ（抜粋）  ３Dオブジェクトの各頂点をローカル座標→ワールド座標→スクリーン座標→テクスチャー座標の順に変換する。  頂点のローカル座標を取得 

Slide 47

Slide 47 text

応用編のしくみ（抜粋）  ３Dオブジェクトの各頂点をローカル座標→ワールド座標→スクリーン座標→テクスチャー座標の順に変換する。  ワールド座標に変換 

Slide 48

Slide 48 text

応用編のしくみ（抜粋）  ３Dオブジェクトの各頂点をローカル座標→ワールド座標→スクリーン座標→テクスチャー座標の順に変換する。  スクリーン座標に変換 

Slide 49

Slide 49 text

応用編のしくみ（抜粋）  ３Dオブジェクトの各頂点をローカル座標→ワールド座標→スクリーン座標→テクスチャー座標の順に変換する。  テクスチャー座標に変換 

Slide 50

Slide 50 text

まとめ  ● LiDARとは対象物までの距離や方向を測定するセンサー技術    ● iOSではARKit、RealityKitから利用することができる    ● ARセッションにScene Depthを有効にする設定をして、プロパティにアクセスするだけでLiDARから得られた情報を取得することができる      LiDARを活用すればARアプリができることは飛躍的に広がります✨ 

Slide 51

Slide 51 text

ご清聴ありがとうございました！ 