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

LiDARという技術をご存知でしょうか？

LiDARとは、レーザー光を当てることで、対象物までの距離や方向を測定するセンサー技術のことです。自動運転の分野でも活用されている注目の技術で、高い精度でスキャンできることが特徴です。

つまり、この技術を使うと現実世界を緻密にスキャンすることができるようになるのです。そのLiDARが、昨年iPad ProやiPhone 12 Proに搭載されました！

そしてARの分野では、早くもLiDARを活用したさまざまなアプリが登場しはじめています。

私はこのLiDARを使ったアプリがさまざまな現実世界をスキャンする様子をTwitterなどで目撃し『自分もやってみたい！』と思いました。それからLiDARに取り組んで数ヶ月、LiDARを使った様々な機能を引き出すことに成功しました。

このトークでは、このLiDARを使うと何ができるのか？そして、どうやってiOSからLiDARの機能を利用するのかについて解説します。

Transcript

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

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

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

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

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

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

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

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

9. どうやって使うのか
 • ARKit、RealityKitからアクセスして利用する
 
 • ARセッションをScene Depthを有効にして開始すると利用可能になる
 
 • 深度情報や、再構築した3DオブジェクトはARセッションのプロパティからアク セスできる
 基本的な使い方は比較的簡単で す。あとはアイデア次第で無限の可 能性があります😆
10. コード例の前に
 サンプルリポジトリの紹介
 今日紹介するコードはほぼすべてこちらのリポジトリに入っています。
 https://github.com/TokyoYoshida/ExampleOfiOSLiDAR
 LiDARスキャナを搭載 したデバイスでないと 動作しません
11. 基礎編 ガイドを 表示す る

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

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

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

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

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

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

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

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

21. デプスマップ
 応用編

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

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

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

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

26. 応用編のしくみ（抜粋）
 グリッド点にデプスを適用してワールド座標系に変換するMetalのシェーダー関数。
 Appleのサンプルコード「Visualizing and Interacting with a Reconstructed Scene」を改変して作成しました。 https://developer.apple.com/documentation/arkit/content_anchors/visualizing_and_interacting_with_a_reconstructed_scene 
 応用編はコードの 雰囲気だけ
 紹介します
27. 応用編のしくみ（抜粋）
 グリッドの点をカメラ座標系に 変換し、デプスを反映する cameraPoint ・・・ 処理したいグリッドの点の座標 
 cameraIntrinsicsInversed ・・・ カメラ内部パラメータの逆行列（スクリーン座標をカメラ座標に変換する） 
 depth ・・・ グリッドの位置のデプス 
 グリッド点にデプスを適用してワールド座標系に変換するシェーダー関数。

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

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

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

31. 通常版

32. スムーズ版

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

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

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

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

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

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

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

40. 3Dオブ ジェクト
 応用編

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

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

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

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

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

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

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

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

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

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

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