はじめようARCore：自己位置推定・平面検出・FaceTracking

1. ARコンテンツ作成勉強会はじめようARCore

2. 自己紹介氏名：吉永崇(Takashi Yoshinaga) 所属：九州先端科学技術研究所(ISIT) 専門：ARを用いた医療支援や運動計測コミュニティ：ARコンテンツ作成勉強会主催

3. ARコンテンツ作成勉強会の紹介  2013年5月に勉強会をスタートし、100回以上開催  ARコンテンツの作り方をハンズオン形式で学ぶ  人数は5~10名程度の少人数で実施  参加条件はAR/VRに興味がある人(知識不要)  各地で開催 (福岡、熊本、宮崎、長崎、大分、鹿児島、山口、広島、関東)

4. Twitterと勉強会ページで情報を発信しています #AR_Fukuoka Googleで「AR勉強会」で検索

5. ARCore Googleが提供する次世代ARプラットフォーム。普通のスマホでマーカーレスARを実現。【主要機能】 (1) 自己位置推定 (Motion Tracking) (2) 平面認識 (Environmental Understanding) (3) 明るさ推定 (Light Estimation) (4) マーカー認識 (Augmented Image) (5) 空間共有 (Cloud Anchor) (6) 顔認識 (Augmented Faces) ← New!

6. 今日の内容 (1/2) Googleが提供する次世代ARプラットフォーム。普通のスマホでマーカーレスARを実現。【主要機能】 (1) 自己位置推定 (Motion Tracking) (2) 平面認識 (Environmental Understanding) (3) 明るさ推定 (Light Estimation) (4) マーカー認識 (Augmented Image) (5) 空間共有 (Cloud Anchor) (6) 顔認識 (Augmented Faces) ← New!

7. マーカー認識や空間共有についてはこちらをどうぞ https://www.slideshare.net/ssuserc0d7f b/arcore-108717431

8. 事前準備 • Unity2017.4.15 or later • ARCore SDK 1.7 https://github.com/google-ar/arcore- unity-sdk/releases/tag/v1.7.0 • Sample http://arfukuoka.lolipop.jp/arcore_pan asonic/sample.zip

9. 今日の内容 (2/2) ① CGを表示 ② 平面検出とCGの配置 ③ 空間にドローイング ④ 顔認識

10. 開発ツール：Unity Unityとは  マルチプラットフォーム対応のゲームエンジンおよび開発環境  GUI上で視覚的にCGを配置したり機能を追加したりできる  C#によるプログラミングで細かい挙動も記述可能  アセットストアで高品質なCGやアニメーションを入手できる

11. Unityのプロジェクトを作成 (1/2) Unityを起動後、画面右上のNEWをクリック New

12. Unityのプロジェクトを作成 (2/2) プロジェクト名・保存場所・3Dを指定してCreate project 3D 最後にクリックプロジェクト名保存場所

13. まずはUnityの簡単な使い方

14. Unityの操作画面(概要) ゲーム空間の設計画面

15. ゲーム空間にCGを追加しよう右クリック 3DObject → Cube

16. 実行してみようクリックして実行クリックして終了カメラから見た空間

17. オブジェクトの位置・向き・サイズを調整クリックして選択移動回転拡大・縮小

18. Scene(設計画面)の視点を変えよう [←] [→]で左右移動 [↑][↓]でズームイン/アウト [Alt]+ドラッグで回転 +ドラッグで上下左右

19. CGの詳細情報の編集：位置の指定  オブジェクトの詳細の表示・追加・変更はInspectorで行う  例えば、TransformのPositionを変更すると位置が変わる Positionを0 0 0に変更

20. CGの詳細情報の編集：色の設定 (1/3) ②右クリック ③Create マテリアル(色や質感の設定)を作成 ④Material ①Assets

21. CGの詳細情報の編集：色の設定 (2/3) 作成したマテリアルの色(Albedo)を設定 (2) Albedoの右側をクリックし、色を選択 (1)作成したマテリアルをクリック

22. CGの詳細情報の編集：色の設定 (3/3) オブジェクト(Cube)のマテリアルを開き、作成したマテリアルを割り当て (2) Materialsの横の▼ (1)Cube (3) Element0にドラッグ&ドロップ

23. 確認色が反映されていればOK。あとから色の変更も可能。

24. CGの詳細情報の編集：挙動の追加スクリプト(プログラム)を記述することによりオブジェクトの挙動を表現 (2) Add Component (1)Cube

25. CGの詳細情報の編集：挙動の追加 New Script スクリプト名 Create and Add

26. CGの詳細情報の編集：挙動の追加スクリプトが追加された

27. CGの詳細情報の編集：挙動の追加ここをダブルクリック

28. スクリプトを使って立方体を回転 public class NewBehaviourScript : MonoBehaviour { // 初期化のために初回に一回だけ実行される void Start () { } // 毎フレーム(数10ミリ秒おきに)実行される void Update () { } }

29. スクリプトを使って立方体を回転 public class NewBehaviourScript : MonoBehaviour { // 初期化のために初回に一回だけ実行される void Start () { } // 毎フレーム(数10ミリ秒おきに)実行される void Update () { //毎フレームY軸を中心に1度ずつ回転 transform.Rotate(0, 1, 0, Space.Self); } }

30. 一旦、現状を保存 ①File ②Save Scene as...

31. 一旦、現状を保存 ①新規フォルダー ③sample1フォルダを開きコンテンツ名を入力 (例：sample1) ④保存以降はCtrl + Sで現状のコンテンツ(Scene)を保存 ②新しいフォルダ名をSample1に変更

32. 不要なCGの削除 Delete Cubeを選択して[Delete]キー

33. Next: 自己位置推定(Motion Tracking)

34. ARCoreのインポート ①Assets ②Import Package → Custom Package ③arcore-unity-sdk-xxx ④開く

35. ARCore用のカメラの設定(1/2) Main Cameraを削除

36. ARCore用のカメラの設定(2/2) ①GoogleARCore → Prefabs ② ARCore Device ③ドラッグ&ドロップ

37. 表示オブジェクトの追加(1/2) ①GoogleARCore → Examples → Common → Prefabs ② Andy Green Diffuse ③ドラッグ&ドロップ

38. 表示オブジェクトの追加(2/2) ①AndyGreenDiffuse ② Positionの yを-0.1[m] zを0.5[m] ③ Scaleを1~3くらいに (20~60cmくらい) ※ARCoreではアプリ立ち上げ時のスマホの位置が0 0 0となります

39. 実機にインストール

40. ビルドの準備 ①File ② Build Settings

41. ビルドの準備 ②Switch Platform ① Android

42. ビルドの準備 ②Player Settings ① Internal※ ※ 今後はInternalは無くなる予定。Gradleについても調査して後日共有します。

43. ビルドの準備 ①Product Nameを入力 ② Resolution and Presentation ③ Default OrientationをLandscape Left ※画面を自動で回転させたくない場合のみ向きを固定

44. ビルドの準備 ① Other Settings ② Multithreaded Renderingをオフ※ ※最新版ではオフにしなくてもOKのようなので、ビルドエラーにならないならオンのままで問題なし

45. ビルドの準備 ①Package Nameを設定例) com.arfukuoka.test1 ② Minimum API Levelを Android 7.0に設定

46. ビルドの準備 ①XR Settings ② ARCore Supportedをオン

47. ビルドと実機インストール ①File ② Build & Run

48. ビルドと実機インストール ①インストーラー(apk)の名前を設定 ② 保存

49. 動作確認

50. Next: 平面検出(Environmental Understanding)

51. Environmental Understandingを有効化(1/5) ①Sample1

52. Environmental Understandingを有効化(2/5) ①右クリック ②Create ③GoogleARCore ④SessionConfig

53. Environmental Understandingを有効化(3/5) ファイル名を変更(例：sample1)

54. Environmental Understandingを有効化(4/5) ①sample1.assetをクリック【Plane Finding Mode】 (1)Disabled:平面認識なし (2)Horizontal And Vertical：水平面と垂直面を認識 (3)Horizontal：水平面のみ認識 (4)Vertical 垂直面のみ認識今回は(2)～(4)から好きなのを選択

55. Environmental Understandingを有効化(5/5) ①ARCore Deviceをクリック ②Sample1フォルダ ③sample1.asset ④Session Configにドラッグ&ドロップ

56. 認識した平面の可視化 (1/4) ①空白を右クリック ② Create Empty

57. 認識した平面の可視化 (2/4) ①GameObjectの名前を Controllerに変更

58. 認識した平面の可視化 (3/4) ①Controllerをクリック ②AddComponent ③Detected Plane Generator

59. 認識した平面の可視化 (4/4) ①GoogleARCore → Examples → Common → Prefabs ③DetectedPlaneVisualizer ②Controller ④Detected Plane Prefabにドラッグ&ドロップ

60. 動作確認水平面垂直面

61. タップした平面にCGを置く ①Controller ②Add Component

62. タップした平面にCGを置く ①New Script ③Create and Add ②PutScript

63. タップした平面にCGを置く ①Controller ②PutScriptをダブルクリック

64. スクリプトの記述 using System.Collections; using System.Collections.Generic; using UnityEngine; using GoogleARCore; public class PutScript : MonoBehaviour { public GameObject andy; //CG(Andy)を扱う変数 void Start () { } void Update () { //タップの検出 //タップした画面の座標と3D空間座標の対応付け //Andyをその位置に置く } }

65. スクリプトの記述 void Update () { //タッチしていないならreturn if (Input.touchCount < 1 ){ return; } Touch touch = Input.GetTouch(0); //画面をなぞっていなければreturn if (touch.phase != TouchPhase.Moved ){ return;} //タップした座標にAndyを移動。 TrackableHit hit; TrackableHitFlags filter = TrackableHitFlags.PlaneWithinPolygon; Frame.Raycast(touch.position.x, touch.position.y, filter, out hit) } touch.position hit Moved→画面をなぞる平面を構成するポリゴンの内側をタップ判定の対象に

66. スクリプトの記述 void Update () { //タッチしていないならreturn if (Input.touchCount < 1 ){ return; } Touch touch = Input.GetTouch(0); //画面をなぞっていなければreturn if (touch.phase != TouchPhase.Moved ){ return;} //タップした座標にAndyを移動。 TrackableHit hit; TrackableHitFlags filter = TrackableHitFlags.PlaneWithinPolygon; if(Frame.Raycast(touch.position.x, touch.position.y, filter, out hit) ) { //Andyの3D座標を指定するコードを記述(次頁) } } touch.position hit Moved→画面をなぞる平面を構成するポリゴンの内側をタップ判定の対象に

67. スクリプトの記述 if (Frame.Raycast(touch.position.x, touch.position.y, filter, out hit)) { //平面にヒットしたならAndyを置く if (hit.Trackable is DetectedPlane) { //Andyの位置・姿勢を指定 andy.transform.position = hit.Pose.position; andy.transform.rotation = hit.Pose.rotation; andy.transform.Rotate(0, 180, 0, Space.Self); //Anchorを設定 var anchor = hit.Trackable.CreateAnchor(hit.Pose); andy.transform.parent = anchor.transform; } } ※Anchor設定は指を離したときだけで十分。今回はコード量を減らすため同時に行っている

68. スクリプトとGameObjectのAndyの対応付け ②AndyGreenDiffuse ①Controller ③PutScriptのAndy にドラッグ&ドロップ

69. 動作確認

70. Next：空間ドローイング

71. その前にCtrl+Sで現状を保存

72. 下準備 (1/6) Sample1を選択し、Ctrl +D

73. 下準備 (2/6) ②ファイル名をそれぞれsample2に変更①sample2

74. 下準備 (3/6) ①sample2.unityをダブルクリック ②sample2になったことを確認

75. 下準備 (4/6) ①ARCoreDevice ②sample2.asset ③Session Configにドラッグ&ドロップ

76. 下準備 (5/6) Andy Dffuseを削除

77. 下準備 (6/6) ①Controller ②PutScript右の ③Remove Component

78. 平面認識機能が働くことを確認

79. TrailRendererを用いた線描画 ①右クリック ②Create Empty

80. TrailRendererを用いた線描画 ①GameObject ②Add Component

81. TrailRendererを用いた線描画 Trailと入力【Trail Renderer】 ■Material 前半で作ったマテリアルをElementに追加 ■Time Infinityに変更 ■MinVertexDistance 0.03 ■Width 0.01 Trail Rendererをダブルクリック

82. TrailRendererを用いた線描画 ShaderをSprites/Defaultに変更 ①GameObject

83. 動作確認 ①Scene GameObjectをマウスで移動すると軌跡が残る ②GameObject

84. TrailRendererを用いた線描画 ②GameObject ①Sample2 ③ドラッグ&ドロップ

85. TrailRendererを用いた線描画 GameObject削除

86. TrailRendererを用いた線描画 ①Controller ②AddComponent

87. TrailRendererを用いた線描画 ①New Script ③Create and Add ②DrawScript

88. TrailRendererを用いた線描画 ①Controller ②DrawScriptをダブルクリック

89. スクリプトの記述 using System.Collections; using System.Collections.Generic; using UnityEngine; using GoogleARCore; public class DrawScript : MonoBehaviour { public GameObject obj; //軌跡を描くオブジェクトの元データ GameObject drawObj; //実際の軌跡描画に使うオブジェクト void Start () { } void Update () { //タップの検出 //タップ開始時に線を描くオブジェクトを生成 //その後はスマホの位置にオブジェクトを追従させて線描画 } }

90. スクリプトの記述 void Update () { if (Input.touchCount == 1) { //カメラ手前10cmの位置を取得 Vector3 p = Camera.main.transform.TransformPoint(0,0,0.1f); //タッチスタート if ( Input.GetTouch(0).phase == TouchPhase.Began) { drawObj = GameObject.Instantiate(obj, p, Quaternion.identity); } //押下中 else if (Input.GetTouch(0).phase == TouchPhase.Stationary){ drawObj.transform.position = p; } } }

91. 変数とCGの対応付け ②Controller ①Sample2 ④Objにドラッグ&ドロップ ③GameObject

92. 動作確認

93. 線を消す List<GameObject> lines = new List<GameObject>(); void Update () { if (Input.touchCount == 1) {//カメラ手前10cmの位置を取得 Vector3 p = Camera.main.transform.TransformPoint(0,0,0.1f);//タ if ( Input.GetTouch(0).phase == TouchPhase.Began) { drawObj = GameObject.Instantiate(obj, p, Quaternion.identity); GameObject tmp = GameObject.Instantiate(obj, p, Quaternion.identity); lines.Add(tmp); drawObj = tmp; } //押下中 else if (Input.GetTouch(0).phase == TouchPhase.Stationary){ drawObj.transform.position = p; } } }

94. 線を消す void Update () { if (Input.touchCount == 1) { //線の描画をする/カメラ手前10cmの位置を取得 } else if (Input.touchCount == 2) { if (Input.GetTouch(0).phase == TouchPhase.Ended) { for(int i = 0; i < lines.Count; i++) { Destroy(lines[i]); lines[i] = null; } lines.Clear(); } } }

95. Next：顔認識(Augmented Faces)

96. Next Step その前にCtrl+Sで現状を保存

97. 下準備 (1/6) Sample2を選択し、Ctrl +D

98. 下準備 (2/6) ②ファイル名をそれぞれsample3に変更①sample3

99. 下準備 (3/6) ①sample3.unityをダブルクリック ②sample3になったことを確認

100. 下準備 (4/6) ①ARCoreDevice ②sample3.asset ③Session Configにドラッグ&ドロップ

101. 下準備 (5/6) GameObject削除

102. 下準備 (6/6) Controllerを削除

103. フロントカメラを使用 ①ARCoreDevice ②Device Camera Direction をFront Facingに変更

104. 顔認識を許可 ②sample3.asset①sample3 ③Augmented Face Mode

105. 顔にメッシュを貼り付ける ②CreateEmpty ①右クリック

106. 顔にメッシュを貼り付ける GameObjectの名前をFaceMeshに変更

107. 顔にメッシュを貼り付ける ①FaceMesh ②Add Component

108. 顔にメッシュを貼り付ける ①Faceで検索 ②ARCore Augmented Face Mesh Filter

109. 顔にメッシュを貼り付ける Auto Bindをオン ※検出した顔に自動的にメッシュをアタッチする

110. メッシュの見た目の設定 ①FaceMesh ②Add Coponent

111. メッシュの見た目の設定 ②Mesh ③MeshRenderer ①消す

112. メッシュの見た目の設定 ①Sample3 ③Create ②右クリック ④Material

113. メッシュの見た目の設定 NewMaterialができていればOK

114. Augmented Faces ②NewMaterial ①FaceMesh ②Materials内のElement0にドラッグ&ドロップ

115. 動作確認

116. 顔メッシュにテクスチャ画像を適用 ③Texture ※Transparentを選べば透過画像も使用可能 ②Unlit ①Shader

117. 顔メッシュにテクスチャ画像を適用 ③ドラッグ&ドロップ ①Sampleフォルダ ①Sample3

118. 顔メッシュにテクスチャ画像を適用 ①NewMaterial

119. 顔メッシュにテクスチャ画像を適用 ②ドラッグ&ドロップ ①Mesh

120. 動作確認 & Memo マス目と出力結果を見比べれば顔の中の位置とのおよその対応付けが可能

121. 顔のパーツの位置情報を使用 FOREHEAD_LEFT FOREHEAD_RIGHT NOSE_TIP 今のところ、取得できるのはFOREHEAD_LEFT/RIGHTとNOSE_TIPの3点

122. 顔のパーツの位置情報を使用 ②CreateEmpty ①右クリック

123. 顔のパーツの位置情報を使用 ①GameObjectの名前をFacePartsに変更

124. 顔のパーツの位置情報を使用 ①FaceParts ②Add Compornent

125. 顔のパーツの位置情報を使用 ①Faceで検索 ②ARCore Augmented Face Rig

126. 顔のパーツの位置情報を使用 ①Auto Bind

127. 顔のパーツの位置情報を使用 ①FacePartsを開く ②NOSE_TIP,FOREHEAD_LFT/RIHGT が追加されていることを確認

128. 顔のパーツの位置情報を使用 ①NOSE_TIPを右クリック ②3D Object ③Sphere

129. 顔のパーツの位置情報を使用 ①Sphere ②Transformを編集 Position: 全て 0 Scale: 全て 0.04

130. 顔のパーツの位置情報を使用同じ要領でFOREHEADの RIGHTとLEFTの子要素にも Sphereを追加

131. 顔のパーツの位置情報を使用

132. パーツの位置の調整 ① FOREHEAD_LEFT の子要素のSphereを選択 ② PositionのY=-0.04

133. パーツの位置の調整 ① FOREHEAD_RIGHT の子要素のSphereを選択 ② PositionのY=-0.04

135. 今日の内容 Googleが提供する次世代ARプラットフォーム。普通のスマホでマーカーレスARを実現。【主要機能】 (1) 自己位置推定 (Motion Tracking) (2) 平面認識 (Environmental Understanding) (3) 明るさ推定 (Light Estimation) (4) マーカー認識 (Augmented Image) (5) 空間共有 (Cloud Anchor) (6) 顔認識 (Augmented Faces) ← New!

136. Fin.

はじめようARCore：自己位置推定・平面検出・FaceTracking

はじめようARCore：自己位置推定・平面検出・FaceTracking

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente(20)

Similar a はじめようARCore：自己位置推定・平面検出・FaceTracking

Similar a はじめようARCore：自己位置推定・平面検出・FaceTracking(20)

Más de Takashi Yoshinaga

Más de Takashi Yoshinaga(20)

Último

Último(9)

はじめようARCore：自己位置推定・平面検出・FaceTracking