Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie OpenCVで作るスタンプAR
Ähnlich wie OpenCVで作るスタンプAR (20)
Mehr von Takashi Yoshinaga
Mehr von Takashi Yoshinaga (20)
OpenCVで作るスタンプAR
- 3. ARコンテンツ作成勉強会の紹介 2013年5月に勉強会をスタート ARコンテンツの作り方をハンズオン形式で学ぶ 人数は5~10名程度の少人数で実施 参加条件はAR/VRに興味がある人(知識不要) 各地で開催 (福岡、熊本、宮崎、長崎、大分、 鹿児島、山口、広島、関東)
- 5. 事前準備 ①演習用データ http://arfukuoka.lolipop.jp/stampar/Sample.zip ②ARCoreSDK(v1.8.0) https://github.com/google-ar/arcore-unity-sdk/releases/tag/v1.8.0 ③Unity2017.4.15f1 or later https://unity3d.com/jp/unity/qa/lts-releases?version=2017.4 ④Android SDK https://developer.android.com/studio
- 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 Unity 画像処理ライブラリの定番としてお馴染みのOpenCVのUnity版 C#版のOpenCVSharpをベースにUnityに対応させたアセット Windows/Mac/Android/iOSに対応。しかも無料！
- 10. まずはUnityの操作の基本
- 11. プロジェクトを作成 New
- 18. 数値を用いた位置・姿勢・サイズの指定 オブジェクトの詳細の確認・追加・変更 はInspectorで行う 例えば、TransformのPositionを 変更すると位置が変わる ②Positionを0 0 0に変更 ① Quad
- 33. ポイント&アイディア 【ポイント】 3Dオブジェクトにテクスチャを貼るというマテリアルを一度設定して しまえば画像を差し替えるだけで見た目は変えられる。 【アイディア】 カメラから得られた画像の黒画素をスクリプトで操作して色を変更 カメラ画像の白画素を透明にした画像を作成 透過画像を貼り付けたQuadを空中に出現させる
- 36. ARCore SDKの導入 ①Assets ②Import Package ③Custom Packageから下記を開く arcore-unity-sdk-v1.8.0.unitypackage
- 45. 表示オブジェクトの設定 Position: 0, 0, 0.5 Scale: 全て0.1
- 47. 保存 Ctrl + S または Command + S
- 51. ビルド設定 ①Resolution and Presentation ②Default OrientationをPortraitに変更
- 59. 動作確認
- 60. 画像処理を始める準備
- 61. OpenCV Plus Unityの導入 ①Window ②Asset Store
- 62. OpenCV Plus Unityの導入 OpenCV Plusで検索
- 63. OpenCV Plus Unityの導入 OpenCV Plus Unityをクリック
- 67. OpenCV Plus Unityの導入 OpenCV + Unity が追加されていればOK
- 73. UIのインポート Import
- 74. UIのインポート Scene
- 91. OpenCV等のインポート using UnityEngine; using UnityEngine.UI; using OpenCvSharp; using OpenCvSharp.Demo; public class StampScript : MonoBehaviour { // Start関数は初期化のために一度だけ実行される void Start () { cg = GameObject.Find ("Robot Kyle"); } // Update関数は毎フレーム実行される void Update () { } }
- 92. canvas 変数の用意 //UIが張り付けられたCanvas public GameObject canvas; //プレビュー領域 public RawImage preview; //キャプチャ領域を保持 UnityEngine.Rect capRect; //キャプチャ画像を保持 Texture2D capTexture; void Start () { } void Update () { } preview
- 98. 準備：まずは画面全体をキャプチャしてみる //UIが張り付けられたCanvas public GameObject canvas; //プレビュー領域 public RawImage preview; //キャプチャ領域を保持 UnityEngine.Rect capRect; //キャプチャ画像を保持 Texture2D capTexture; 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.RGBA32, false); //capTextureをプレビュー領域に貼り付け preview.material.mainTexture = capTexture; } 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();//各画素の色をテクスチャに反映 canvas.SetActive(true);//Canvas上のUIを再表示 } public void StartCV() { StartCoroutine(ImageProcessing());//コルーチンの実行 } ここに記述
- 104. Build & Run!
- 106. コードを整理(1/2) IEnumerator ImageProcessing() { canvas.SetActive(false); yield return new WaitForEndOfFrame(); capTexture.ReadPixels(capRect, 0, 0); capTexture.Apply(); canvas.SetActive(true); } void CreateImages() { /*ここに画像生成コードを移す*/ } 画像の生成 このあと、画像生成のコードが増えるため関数にまとめて整理しておく
- 107. コードを整理(2/2) このあと、画像生成のコードが増えるため関数にまとめて整理しておく IEnumerator ImageProcessing() { canvas.SetActive(false);//Canvas上のUIを一時的に消す yield return new WaitForEndOfFrame(); CreateImages(); //画像の生成 canvas.SetActive(true);//Canvas上のUIを再表示 } void CreateImages() { capTexture.ReadPixels(capRect, 0, 0); capTexture.Apply(); }
- 110. ここからOpenCV!
- 113. OpenCVで画像を扱う準備 //スクショ領域を保持 UnityEngine.Rect capRect; //スクショ画像を保持 Texture2D capTexture; //OpenCVで扱う画像を保持 Mat bgraMat, binMat; 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.RGBA32, false); //capTextureをプレビュー領域に貼り付け preview.material.mainTexture = capTexture; }
- 114. 二値化 void CreateImages() { capTexture.ReadPixels(capRect, 0, 0); capTexture.Apply(); //Texure2DをMatに変換 bgraMat = OpenCvSharp.Unity.TextureToMat(capTexture); //カラー画像をグレースケール(濃淡)画像に変換 binMat = bgraMat.CvtColor(ColorConversionCodes.BGRA2GRAY); //大津の方法で二値化。結果を白黒反転 binMat = binMat.Threshold(100, 255, ThresholdTypes.Otsu); //あとで色を変えられるようにカラー(BGR)に変換 bgraMat = binMat.CvtColor(ColorConversionCodes.GRAY2BGRA); } bgraMat binMat(GrayScale) binMat (Binarized) bgraMat (B=G=R)
- 115. 二値化結果の表示 IEnumerator ImageProcessing() { canvas.SetActive(false); yield return new WaitForEndOfFrame(); CreateImages();//画像を生成 SetColor(capTexture);//テクスチャに色をセット canvas.SetActive(true); } //bgraMatが保持する色をテクスチャにセットする void SetColor(Texture2D texture) { OpenCvSharp.Unity.MatToTexture(bgraMat, texture); }
- 116. 動作確認 ①Capture ②二値化結果
- 117. Matに関するメモリの開放 IEnumerator ImageProcessing() { canvas.SetActive(false); //Mat用に確保したメモリを解放 if (bgraMat != null) { bgraMat.Release(); } if (binMat != null) { binMat.Release(); } yield return new WaitForEndOfFrame(); CreateImages(); SetColor(capTexture); canvas.SetActive(true); }
- 120. 黒画素に色を付ける (1/2) void SetColor(Texture2D texture) { //Matが初期化されていない場合は何もしない if (bgraMat == null || binMat == null) { return; } unsafe { //各Matのピクセル情報の配列(ポインタ)を取得 byte* bgraPtr = bgraMat.DataPointer; byte* binPtr = binMat.DataPointer; //全ピクセル数を算出 int pixelCount = binMat.Width * binMat.Height; //各ピクセルを参照して黒画素なら色を塗る for (int i = 0; i < pixelCount; i++) { } } OpenCvSharp.Unity.MatToTexture(bgraMat, texture); } 後ほど処理を記述
- 121. ポインタと各ピクセルの色情報 どちらの画像も左上から横方向スキャンし、それを全段で行った 場合の各画素の色情報を1次元配列に格納している。 binPtr(白黒画像) : bgraPtr(カラー画像+アルファ): [0] [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [0] [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] ・・・ ・・・ binPtr bgraPtr 0th pixel 1st 2nd 全要素数 n (=width*height) 全要素数 n*4
- 122. この次の作業 void SetColor(Texture2D texture) { //Matが初期化されていない場合は何もしない if (bgraMat == null || binMat == null) { return; } unsafe { //各Matのピクセル情報の配列(ポインタ)を取得 byte* bgraPtr = bgraMat.DataPointer; byte* binPtr = binMat.DataPointer; //全ピクセル数を算出 int pixelCount = binMat.Width * binMat.Height; //各ピクセルを参照して黒画素なら色を塗る for (int i = 0; i < pixelCount; i++) { } } OpenCvSharp.Unity.MatToTexture(bgraMat, texture); } これから処理を記述
- 123. 黒画素に色を付ける (2/2) byte* bgraPtr = bgraMat.DataPointer; byte* binPtr = binMat.DataPointer; int pixelCount = binMat.Width * binMat.Height; for (int i = 0; i < pixelCount; i++) { //白黒画像のi番目に相当するBGRAのデータの位置 int bgraPos = i * 4; //白かったら無視(あとで透過させる) if (binPtr[i] == 255) { } //黒かったら色を塗る else { bgraPtr[bgraPos] = 255; //B bgraPtr[bgraPos+1] = 0; //G bgraPtr[bgraPos+2] = 0; //R } }
- 124. 動作確認
- 125. 色の配列を作成 //14色の色情報 byte[,] colors = { { 255, 255, 255 },{ 18, 0, 230 }, { 0, 152, 243 }, { 0, 241, 255 }, { 31, 195, 143 }, { 68, 153, 0 }, { 150, 158, 0 }, { 233, 160, 0 }, { 183, 104, 0 }, { 136, 32, 29 }, { 131, 7, 146 }, { 127, 0, 228 }, { 79, 0, 229 }, { 0, 0, 0 } }; //何番目の色かを表す変数 (colNo=0~13) int colorNo = 0; void Start() { int w = Screen.width; int h = Screen.height; /*資料のスペースの都合により省略*/ } ①color.txtからコピペ ②自分で書く
- 126. 黒画素の色の切り替え(1/3) void SetColor(Texture2D texture) { //Matが初期化されていない場合は何もしない if (bgraMat == null || binMat == null) { return; } unsafe { //各Matのピクセル情報の配列(ポインタ)を取得 byte* bgraPtr = bgraMat.DataPointer; byte* binPtr = binMat.DataPointer; //全ピクセル数を算出 int pixelCount = binMat.Width * binMat.Height; //各ピクセルをチェックして黒かったら色を付ける for (int i = 0; i < pixelCount; i++) { } } OpenCvSharp.Unity.MatToTexture(bgraMat, texture); } ここで色を指定 (次のページで解説)
- 127. 黒画素の色の切り替え(2/3) for (int i = 0; i < pixelCount; i++) { //白黒画像のi番目に相当するBGRAのデータの位置 int bgraPos = i * 4; //白かったら無視(あとで透過にする) if (binPtr[i] == 255) { } //黒かったら色を付ける else { bgraPtr[bgraPos] = colors[colorNo, 0]; //B bgraPtr[bgraPos + 1] = colors[colorNo, 1]; //G bgraPtr[bgraPos + 2] = colors[colorNo, 2]; //R } }
- 128. 黒画素の色の切り替え(3/3) public void ChangeColor() { colorNo++; colorNo %= colors.Length / 3; SetColor(capTexture); } //色を変更する関数 void SetColor(Texture2D texture) { //Matが初期化されていない場合は何もしない if (bgraMat == null || binMat == null) { return; } unsafe { //各Matのピクセル情報の配列(ポインタ)を取得 byte* bgraPtr = bgraMat.DataPointer; byte* binPtr = binMat.DataPointer; /*資料のスペースの都合により以下省略*/
- 136. 白画素を透過させる(1/2) void SetColor(Texture2D texture) { //Matが初期化されていない場合は何もしない if (bgraMat == null || binMat == null) { return; } unsafe { //各Matのピクセル情報の配列(ポインタ)を取得 byte* bgraPtr = bgraMat.DataPointer; byte* binPtr = binMat.DataPointer; //全ピクセル数を算出 int pixelCount = binMat.Width * binMat.Height; //各ピクセルに対して透過/非透過の処理を行う for (int i = 0; i < pixelCount; i++) { } } OpenCvSharp.Unity.MatToTexture(bgraMat, texture); } ここで色を指定 (次のページで解説)
- 137. 白画素を透過させる(2/2) for (int i = 0; i < pixelCount; i++) { //白黒画像のi番目に相当するBGRAのデータの位置 int bgraPos = i * 4; //白かったら透過 if (binPtr[i] == 255) { bgraPtr[bgraPos + 3] = 0; } //黒かったら非透過 else { bgraPtr[bgraPos] = colors[colorNo, 0]; //B bgraPtr[bgraPos + 1] = colors[colorNo, 1]; //G bgraPtr[bgraPos + 2] = colors[colorNo, 2]; //R bgraPtr[bgraPos + 3] = 255; } }
- 138. 動作確認 ①Capture ②透過画像
- 140. プレビュー表示の最大化 全体を選択
- 143. プレビューの表示 IEnumerator ImageProcessing() { canvas.SetActive(false); //Mat用に確保したメモリを解放 if (bgraMat != null) { bgraMat.Release(); } if (binMat != null) { binMat.Release(); } yield return new WaitForEndOfFrame(); CreateImages(); SetColor(capTexture); canvas.SetActive(true); //プレビューを表示する preview.enabled = true; }
- 144. 動作確認 Capture
- 149. 空間にスタンプを固定 //スタンプのテンプレートオブジェクト(テクスチャ付きのQuad) public GameObject original; void Start() { int w = Screen.width; int h = Screen.height; capRect = new UnityEngine.Rect(0, 0, w, h); capTexture = new Texture2D(w, h, TextureFormat.RGBA32, false); preview.material.mainTexture = capTexture; } //スタンプを空間に置くための関数 public void PutObject() { } 次のページからコードを記載
- 150. スタンプの実サイズを計算 //カメラの情報を取得 Camera cam = Camera.main; //画面左下のxy座標を3次元に変換(0.6m手前に置くとする) Vector3 v1 = cam.ViewportToWorldPoint(new Vector3(0, 0, 0.6f)); //画面右上のxy座標を3次元に変換 Vector3 v2 = cam.ViewportToWorldPoint(new Vector3(1, 1, 0.6f)); //画面左上のxy座標を3次元に変換 Vector3 v3 = cam.ViewportToWorldPoint(new Vector3(0, 1, 0.6f)); //キャプチャ領域の実空間でのサイズを計算 float w = Vector3.Distance(v2, v3); float h = Vector3.Distance(v1, v3); /*次のページに続く*/ (0,0) (1,1) (0,1) v1 v2 v3
- 151. 空間にスタンプを固定 /*前のページに記述したコードからの続き*/ GameObject stamp = GameObject.Instantiate(original); //オブジェクトの生成とカメラに対する位置・向き・サイズを設定 stamp.transform.parent = cam.transform; stamp.transform.localPosition = new Vector3(0, 0, 0.6f); stamp.transform.localRotation = Quaternion.identity; stamp.transform.localScale = new Vector3(w, h, 1); //上記で作ったオブジェクトに貼るテクスチャを作成 Texture2D stampTexture = new Texture2D(capTexture.width, capTexture.height); //色を塗り、そのあとテクスチャとして貼り付ける SetColor(stampTexture); stamp.GetComponent<Renderer>().material.mainTexture = stampTexture; //スタンプの原点をカメラではなくワールドに変更 stamp.transform.parent = null; preview.enabled = false;
- 159. 動作確認
- 160. 描画できるスタンプ数に制限を設ける //スタンプのテンプレートオブジェクト(テクスチャ付きのQuad) public GameObject original; //生成されたスタンプを覚えておくListを作成 List<GameObject> stampList = new List<GameObject>(); void Start() { int w = Screen.width; int h = Screen.height; capRect = new UnityEngine.Rect(0, 0, w, h); capTexture = new Texture2D(w, h, TextureFormat.RGBA32, false); preview.material.mainTexture = capTexture; }
- 161. 描画できるスタンプ数に制限を設ける public void PutObject() { /*資料のスペースの都合により省略*/ stamp.transform.parent = null; //以下、生成したスタンプの記録と削除 stampList.Add(stamp); if (stampList.Count == 10) { DestroyImmediate(stampList[0]. GetComponent<Renderer>().material.mainTexture); DestroyImmediate(stampList[0]); stampList.RemoveAt(0); } preview.enabled = false; }
- 162. 完成！