Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie OpenCV/ARCore/Unityで作る塗り絵AR
Ähnlich wie OpenCV/ARCore/Unityで作る塗り絵AR (17)
Mehr von Takashi Yoshinaga
Mehr von Takashi Yoshinaga (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (9)
OpenCV/ARCore/Unityで作る塗り絵AR
- 3. ARコンテンツ作成勉強会の紹介 2013年5月に勉強会をスタート ARコンテンツの作り方をハンズオン形式で学ぶ 人数は5~10名程度の少人数で実施 参加条件はAR/VRに興味がある人(知識不要) 各地で開催 (福岡、熊本、宮崎、長崎、大分、 鹿児島、山口、広島、関東)
- 7. ARCore Googleが提供する次世代ARプラットフォーム。普通のスマホでマーカーレスARを実現。 【主要機能】 (1) 自己位置推定 (Motion Tracking) (2) 平面認識 (Environmental Understanding) (3) 明るさ推定 (Light Estimation) (4) マーカー認識 (Augmented Image) (5) 空間共有 (Cloud Anchor) (6) 顔認識 (Augmented Faces) (1) 自己位置推定 (Motion Tracking)
- 8. OpenCV Plus 画像処理ライブラリの定番としてお馴染みのOpenCVのUnity版 C#版のOpenCVSharpをベースにUnityに対応させたアセット Windows/Mac/Android/iOSに対応。しかも無料！
- 10. まずはUnityの操作の基本
- 11. プロジェクトを作成 New
- 18. 数値を用いた位置・姿勢・サイズの指定 オブジェクトの詳細の確認・追加・変更 はInspectorで行う 例えば、TransformのPositionを 変更すると位置が変わる ②Positionを0 0 0に変更 ① Cube
- 39. ARCore SDKの導入 ①Assets ②Import Package ③Custom Packageから下記を開く arcore-unity-sdk-v1.8.0.unitypackage
- 48. 表示オブジェクトの設定 Position: 0, -0.2, 0.5 Scale: 全て0.1
- 50. 保存 Ctrl + S または Command + S
- 54. ビルド設定 ①Resolution and Presentation ②Default OrientationをPortraitに変更
- 62. 動作確認
- 63. 画像処理を始める準備
- 70. OpenCV Plusの導入 OpenCV + Unity が追加されていればOK
- 71. UIの作成 Game
- 76. UIのインポート Import
- 77. UIのインポート Scene
- 89. OpenCV等のインポート using UnityEngine; using UnityEngine.UI; using OpenCvSharp; using OpenCvSharp.Demo; public class ColoringScript : MonoBehaviour { // Start関数は初期化のために一度だけ実行される void Start () { cg = GameObject.Find ("Robot Kyle"); } // Update関数は毎フレーム実行される void Update () { } }
- 90. 変数の用意 public MeshRenderer target; //塗り絵の対象(Cube)の描画設定 public GameObject canvas; //UIが張り付けられたCanvas public RawImage viewL, viewR; //画面下方の描画領域 UnityEngine.Rect capRect;//スクショ領域を保持 Texture2D capTexture; //スクショ画像を保持 Texture2D colTexture; //画像処理結果(カラー)を保持 Texture2D binTexture; //画像処理結果(白黒)を保持 void Start () { } void Update () { } canvas viewL viewR colTexture binTexture
- 98. 準備：まずは画面全体をキャプチャしてみる public MeshRenderer target; public GameObject canvas; public RawImage viewL, viewR; UnityEngine.Rect capRect; Texture2D capTexture; Texture2D colTexture; Texture2D binTexture; void Start () { int w = Screen.width; int h = Screen.height; //原点(0,0)から画面の縦横の長さまでをキャプチャ領域とする capRect = new UnityEngine.Rect(0, 0, w, h); //画面サイズの空画像を作成 capTexture = new Texture2D(w, h, TextureFormat.RGB24, false); } width height (0,0)
- 99. 画像処理用の関数 void Start () { /*省略：前ページで記述した初期化*/ } IEnumerator ImageProcessing() { canvas.SetActive(false);//Canvas上のUIを一時的に消す yield return new WaitForEndOfFrame();//フレーム終了を待つ capTexture.ReadPixels(capRect, 0, 0);//キャプチャ開始 capTexture.Apply();//各画素の色をテクスチャに反映 /*下記の一行でオブジェクトにテクスチャを張り付け*/ target.material.mainTexture = capTexture; canvas.SetActive(true);//Canvas上のUIを再表示 } public void StartCV() { StartCoroutine(ImageProcessing());//コルーチンの実行 } ここに記述
- 104. Build & Run!
- 105. 動作確認 Capture
- 108. 関心領域(ROI: Region Of Interest)の切り抜き void Start () { int w = Screen.width; int h = Screen.height; //画面サイズに対するROIの位置・サイズを設定 int sx = (int)(w * 0.2); //X始点 int sy = (int)(h * 0.3); //y始点 w = (int)(w * 0.6); //横幅 h = (int)(h * 0.4); //縦幅 //キャプチャする領域を保持したRectを作成 capRect = new UnityEngine.Rect(0, 0, w, h); capTexture = new Texture2D(w, h, TextureFormat.RGB24, false); } capRect = new UnityEngine.Rect(sx, sy, w, h); 始点を変更
- 110. コードを整理(1/2) IEnumerator ImageProcessing() { canvas.SetActive(false); yield return new WaitForEndOfFrame(); //描画終了を待つ capTexture.ReadPixels(capRect, 0, 0);//キャプチャ開始 capTexture.Apply();//各画素の色をテクスチャに反映 /*下記の一行でオブジェクトにテクスチャを張り付け*/ target.material.mainTexture = capTexture; canvas.SetActive(true); } void CreateImage() { /*ここに画像生成コードを移す*/ } void ShowImage() { /*ここに画像表示コードを移す*/ } 画像の生成 画像の表示
- 111. コードを整理(2/2) IEnumerator ImageProcessing() { canvas.SetActive(false);//Canvas上のUIを一時的に消す yield return new WaitForEndOfFrame(); CreateImage(); //画像の生成 ShowImage(); //画像の表示 canvas.SetActive(true);//Canvas上のUIを再表示 } void CreateImage() { capTexture.ReadPixels(capRect, 0, 0); capTexture.Apply(); } void ShowImage() { target.material.mainTexture = capTexture; }
- 114. ここからOpenCV!
- 117. OpenCVで画像を扱う準備 Texture2D colTexture; Texture2D binTexture; //Mat:OpenCVで画像を扱うための形式 //bgrにはカラー、binには二値化画像 Mat bgr, bin; void Start () { int w = Screen.width; int h = Screen.height; //画面サイズに対するROIの位置・サイズを設定 int sx = (int)(w * 0.2); //X始点 int sy = (int)(h * 0.3); //y始点 w = (int)(w * 0.6); //横幅 h = (int)(h * 0.4); //縦幅 //キャプチャする領域を保持したRectを作成 capRect = new UnityEngine.Rect(sx, sy, w, h); capTexture = new Texture2D(w, h, TextureFormat.RGB24, false); }
- 118. 二値化 void CreateImage() { capTexture.ReadPixels(capRect, 0, 0); capTexture.Apply(); //Texure2DをMatに変換 bgr = OpenCvSharp.Unity.TextureToMat(capTexture); //カラー画像をグレースケール(濃淡)画像に変換 bin = bgr.CvtColor(ColorConversionCodes.BGR2GRAY); //しきい値を自動で見つけて二値化。結果を白黒反転 bin = bin.Threshold(100, 255, ThresholdTypes.Otsu); Cv2.BitwiseNot(bin, bin); } Color Image Gray Scale Binary Inverse
- 119. 元画像と二値化結果の表示 void ShowImage() { //Textureが画像を保持しているならいったん削除 if (colTexture != null) { DestroyImmediate(colTexture); } if (binTexture != null) { DestroyImmediate(binTexture); } //Matをテクスチャに変換 colTexture = OpenCvSharp.Unity.MatToTexture(bgr); binTexture = OpenCvSharp.Unity.MatToTexture(bin); //RawImageに画像を表示 viewL.texture = colTexture; viewR.texture = binTexture; //スクショ画像をモデルに適用 target.material.mainTexture = colTexture; }
- 120. Matに関するメモリの開放 IEnumerator ImageProcessing() { canvas.SetActive(false); yield return new WaitForEndOfFrame(); CreateImage(); //画像の生成(ここでbin,bgrのメモリ確保) ShowImage(); //画像の表示 //Mat用に確保したメモリを解放 bgr.Release(); bin.Release(); canvas.SetActive(true); }
- 124. 矩形認識の準備 IEnumerator ImageProcessing() { canvas.SetActive(false); yield return new WaitForEndOfFrame(); CreateImage(); //画像の生成 Point[] corners; //矩形の4頂点を格納(予定) FindRect(out corners); //矩形の認識 ShowImage(); //画像の表示 bgr.Release(); bin.Release(); canvas.SetActive(true); } void FindRect(out Point[] corners) { /*次のページで矩形認識コードを記述*/ }
- 125. 矩形認識：まずは輪郭の認識(FindRect内) //頂点をnull(空)で初期化 corners = null; //輪郭を構成する点と階層 Point[][] contours; HierarchyIndex[] h; //輪郭認識 bin.FindContours(out contours, out h, RetrievalModes.External, ContourApproximationModes.ApproxSimple); //面積が最大となる輪郭を処理対象とする double maxArea = 0; for(int i = 0; i < contours.Length; i++) { double area = Cv2.ContourArea(contours[i]); if (area > maxArea) { maxArea = area; corners = contours[i]; } }
- 126. 現状確認 void FindRect(out Point[] corners) { /*スペースの都合により省略*/ double maxArea = 0; for (int i = 0; i < contours.Length; i++) { double area = Cv2.ContourArea(contours[i]); if (area > maxArea) { maxArea = area; corners = contours[i]; } } //面積最大の輪郭cornersをbgr上に描画 if (corners != null) { bgr.DrawContours( new Point[][] { corners }, 0, Scalar.Red, 5); } }
- 127. 動作確認
- 128. この後やりたいこと 直線的な輪郭も厳密には直線じゃない 多少曲がっていても直線とみなしたい 大きく曲がっている場合は無視したい 解決策 直線に近似したときに本来の輪郭の長さ との差が一定値以内であれば直線とみなす 認識した輪郭が四角形であれば4つの頂点を取得したい ところが・・・ vs誤差小 誤差大
- 129. 矩形認識：多角形近似と矩形認識 void FindRect(out Point[] corners) { /*スペースの都合により省略*/ double maxArea = 0; for(int i = 0; i < contours.Length; i++) { //輪郭の長さを算出 double length = Cv2.ArcLength(contours[i], true); //多角形近似(全周の1%以内の誤差を許容) Point[] tmp = Cv2.ApproxPolyDP( contours[i], length * 0.01f, true); double area = Cv2.ContourArea(contours[i]); //頂点数が4つなら(四角形なら)という条件を追加 if (area > maxArea) { maxArea = area; corners = contours[i]; } } /*次のページに続く*/ if (tmp.Length == 4 && area > maxArea) corners = tmp;
- 130. 現状確認 void FindRect(out Point[] corners) { /*スペースの都合により省略(輪郭認識)*/ if (corners != null) { bgr.DrawContours( new Point[][] { corners }, 0, Scalar.Red, 5); //各頂点の位置に円を描画 for(int i = 0; i < corners.Length; i++) { bgr.Circle(corners[i], 20, Scalar.Blue, 5); } } }
- 131. 動作確認 四角形以外は 認識されない
- 132. 次に行く前に void FindRect(out Point[] corners) { /*スペースの都合により省略(輪郭認識)*/ if (corners != null) { bgr.DrawContours( new Point[][] { corners }, 0, Scalar.Red, 5); //各頂点の位置に円を描画 for(int i = 0; i < corners.Length; i++) { bgr.Circle(corners[i], 20, Scalar.Blue, 5); } } }
- 133. 描画コードをコメントアウト void FindRect(out Point[] corners) { /*スペースの都合により省略(輪郭認識)*/ /*if (corners != null) { bgr.DrawContours( new Point[][] { corners }, 0, Scalar.Red, 5); //各頂点の位置に円を描画 for(int i = 0; i < corners.Length; i++) { bgr.Circle(corners[i], 20, Scalar.Blue, 5); } }*/ }
- 136. 幾何変換 (0, 0) (255, 0) (0, 255) (255 255) [0] [1] [2] [3] 画像処理によって得られた4頂点と画像(256*256)の4頂点とを対応付ける 変換パラメータ(行列)を算出して真正面から見た画像に変換する
- 137. 幾何変換を用いた形状補正 IEnumerator ImageProcessing() { canvas.SetActive(false); yield return new WaitForEndOfFrame(); CreateImage(); //画像の生成 Point[] corners; //矩形の4頂点を格納 FindRect(out corners); //矩形の認識 TransformImage(corners); //正面から見た画像に変換 ShowImage(); //画像の表示 bgr.Release(); bin.Release(); canvas.SetActive(true); } void TransformImage(Point[] corners) { /*次のページで形状の補正を行う*/ }
- 138. 幾何変換を用いた形状補正 void TransformImage(Point[] corners) { //4頂点が検出されていなければ何もしない if (corners == null) return; //検出された4頂点の座標を入力 Point2f[] input = { corners[0], corners[1], corners[2], corners[3] }; //テクスチャとして使用する正方形画像の4頂点の座標を入力 Point2f[] square = { new Point2f(0, 0), new Point2f(0, 255), new Point2f(255, 255), new Point2f(255, 0) }; //歪んだ四角形を正方形に変換するパラメータを計算 Mat transform = Cv2.GetPerspectiveTransform(input, square); //変換パラメータに基づいて画像を生成 Cv2.WarpPerspective(bgr,bgr,transform, new Size(256, 256)); } (0, 0) (255, 0) (0, 255) (255 255) [0] [1] [2] [3]
- 141. 頂点の並べ替え void TransformImage(Point[] corners) { if (corners == null) return; //4頂点の並べ替え SortCorners(corners); Point2f[] input = { corners[0], corners[1], corners[2], corners[3] }; Point2f[] square = { new Point2f(0, 0), new Point2f(0, 255), new Point2f(255, 255), new Point2f(255, 0) }; Mat transform = Cv2.GetPerspectiveTransform(input, square); Cv2.WarpPerspective(bgr,bgr,transform, new Size(256, 256)); } void SortCorners(Point[] corners) { /*4頂点の並べ替えを行う*/ }
- 142. 頂点の並べ替え void SortCorners(Point[] corners) { System.Array.Sort(corners, (a, b) => a.X.CompareTo(b.X)); if (corners[0].Y > corners[1].Y) { corners.Swap(0, 1); } if (corners[3].Y > corners[2].Y) { corners.Swap(2, 3); } } [0] [1] [2] [3] [2] [0] [1] [3] [3] [0] [1] [2] 全体を Xでソート [2][3]を Yでソート
- 143. 枠の内側の画像を取得 void TransformImage(Point[] corners) { if (corners == null) return; SortCorners(corners); Point2f[] input = { corners[0], corners[1], corners[2], corners[3] }; Point2f[] square = { new Point2f(0, 0), new Point2f(0, 255), new Point2f(255, 255), new Point2f(255, 0) }; Mat transform = Cv2.GetPerspectiveTransform(input, square); Cv2.WarpPerspective(bgr,bgr,transform, new Size(256, 256)); int s = (int)(256 * 0.05); //今回、枠の太さを幅の5%と設計 int w = (int)(256 * 0.9); //両サイドを差し引いた90%が内側の幅 OpenCvSharp.Rect innerRect = new OpenCvSharp.Rect(s, s, w, w); bgr = bgr[innerRect]; }
- 146. オブジェクトへの張り付け void ShowImage() { //すでにcolTextureが存在するならいったん削除 if (colTexture != null) { DestroyImmediate(colTexture); } if (binTexture != null) { DestroyImmediate(binTexture); } //Matをテクスチャに変換 colTexture = OpenCvSharp.Unity.MatToTexture(bgr); binTexture = OpenCvSharp.Unity.MatToTexture(gray); //RawImageに切り抜き画像を表示 viewL.texture = colTexture; viewR.texture = binTexture; //塗り絵のターゲットにテクスチャを適用 target.material.mainTexture = capTexture; //Canvas再表示 canvas.SetActive(true); } target.material.mainTexture = colTexture; ここ！
- 147. 動作確認
- 152. 動作確認 チェックを外す
- 153. 3Dモデルを差し替えよう
- 156. 3Dモデルの入手 Rubber Duck
- 160. 3Dモデルの差し替え Cubeを削除
- 163. 3Dモデルの調整 ①RubberDuck ②Position 0 -0.25 0.5 Rotation 0 150 0 Scale 0.03 0.03 0.03