![Scene(設計画面)の視点を変えよう
[←] [→]で左右移動
[↑][↓]でズームイン/アウト
[Alt]+ドラッグで回転
+ドラッグで上下左右](https://image.slidesharecdn.com/stampmiyazakiss2-190922020107/85/OpenCV-ARCore-AR-in-21-320.jpg)
![ポインタと各ピクセルの色情報
? どちらの画像も左上から横方向スキャンし、それを全段で行った
場合の各画素の色情報を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](https://image.slidesharecdn.com/stampmiyazakiss2-190922020107/85/OpenCV-ARCore-AR-in-127-320.jpg)
![黒画素に色を付ける (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
}
}](https://image.slidesharecdn.com/stampmiyazakiss2-190922020107/85/OpenCV-ARCore-AR-in-129-320.jpg)
![色の配列を作成
//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からコピペ
②自分で書く](https://image.slidesharecdn.com/stampmiyazakiss2-190922020107/85/OpenCV-ARCore-AR-in-131-320.jpg)
![黒画素の色の切り替え(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
}
}](https://image.slidesharecdn.com/stampmiyazakiss2-190922020107/85/OpenCV-ARCore-AR-in-133-320.jpg)
![白画素を透過させる(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;
}
}](https://image.slidesharecdn.com/stampmiyazakiss2-190922020107/85/OpenCV-ARCore-AR-in-143-320.jpg)
![描画できるスタンプ数に制限を設ける
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;
}](https://image.slidesharecdn.com/stampmiyazakiss2-190922020107/85/OpenCV-ARCore-AR-in-167-320.jpg)
More Related Content
What's hot (20)
Similar to OpenCVとARCoreで作るスタンプAR in 宮崎 (20)
More from Takashi Yoshinaga (19)
![[Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ](https://cdn.slidesharecdn.com/ss_thumbnails/yoshinaganetlifyss-200719024058-thumbnail.jpg?width=560&fit=bounds)
![[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ](https://cdn.slidesharecdn.com/ss_thumbnails/yoshinagaglitchss2-200719023821-thumbnail.jpg?width=560&fit=bounds)
Recently uploaded (15)
OpenCVとARCoreで作るスタンプAR in 宮崎
- 5. 趣味開発： Volumetric Video 複数のKinectで取得したPoint Cloudを統合し、HoloLens等のARデバイスで表示 https://youtu.be/_oeUjRSS8ug
- 6. ARコンテンツ作成勉強会の紹介 ? 2013年5月に勉強会をスタートし ? ARコンテンツの作り方をハンズオン形式で学ぶ ? 人数は5~10名程度の少人数で実施 ? 参加条件はAR/VRに興味がある人(知識不要) ? 各地で開催 (福岡、熊本、宮崎、長崎、大分、 鹿児島、山口、広島、関東、北海道)
- 9. Special Thanks 永井 ひろかず 株式会社まなびと
- 11. ARCore (GooglePlay開発者サービス(AR)) Googleが提供する次世代ARプラットフォーム。普通のスマホでマーカーレスARを実現。 【主要機能】 (1) 自己位置推定 (Motion Tracking) (2) 平面認識 (Environmental Understanding) (3) 明るさ推定 (Light Estimation) (4) マーカー認識 (Augmented Image) (5) 空間共有 (Cloud Anchor) (6) 顔認識 (Augmented Faces) (1) 自己位置推定 (Motion Tracking)
- 12. OpenCV Plus Unity ? 画像処理ライブラリの定番としてお馴染みのOpenCVのUnity版 ? C#版のOpenCVSharpをベースにUnityに対応させたアセット ? Windows/Mac/Android/iOSに対応。しかも無料！
- 14. もろもろのダウンロード ①演習用素材 (sample.zip) http://arfukuoka.lolipop.jp/stampar/Sample.zip ②ARCoreSDK 1.11.0.1 (unitypackage) https://github.com/google-ar/arcore-unity- sdk/releases/tag/v1.11.0.1
- 15. まずは鲍苍颈迟测の操作の基本
- 16. プロジェクトを作成 New
- 24. 数値を用いた位置?姿勢?サイズの指定 各値を初期状態に戻す Position 0 0 0 Rotation 0 0 0 Scale 1 1 1
- 40. ポイント&アイディア 【ポイント】 3Dオブジェクトにテクスチャを貼るというマテリアルを一度設定。 その後は画像を関連付けるだけで見た目を変えることが可能。 【アイディア】 ? カメラ画像を着色領域(黒)と透過領域(白)に分ける ? 黒画素の領域をスクリプトで操作して色を変更 ? 画像の白画素の領域を透明にした画像を作成 ? 透過画像を貼り付けたQuadを空中に出現させる
- 43. ARCore SDKの導入 ①Assets ②Import Package ③Custom Packageから下記を開く arcore-unity-sdk-v1.XX.0.unitypackage
- 52. 表示オブジェクトの設定 Position: 0, 0, 0.5 Scale: 全て0.1
- 54. 保存 Ctrl + S または Command + S
- 58. ビルド設定 ①Resolution and Presentation ②Default 翱谤颈别苍迟补迟颈辞苍を笔辞谤迟谤补颈迟に変更
- 66. 动作确认
- 67. 画像処理を始める準备
- 68. OpenCV Plus Unityの導入 ①Window ②Asset Store
- 69. OpenCV Plus Unityの導入 OpenCV 笔濒耻蝉で検索
- 70. OpenCV Plus Unityの導入 OpenCV Plus Unityをクリック
- 74. OpenCV Plus Unityの導入 OpenCV + Unity が追加されていればOK
- 80. UIのインポート Import
- 81. UIのインポート Scene
- 98. 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 () { } }
- 99. canvas 変数の用意 //UIが張り付けられたCanvas public GameObject canvas; //プレビュー領域 public RawImage preview; //キャプチャ領域を保持 UnityEngine.Rect capRect; //キャプチャ画像を保持 Texture2D capTexture; void Start () { } void Update () { } preview
- 105. 準備：まずは画面全体をキャプチャしてみる //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)
- 106. 画像処理用の関数 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());//コルーチンの実行 } ここに記述
- 111. Build & Run!
- 113. コードを整理(1/2) IEnumerator ImageProcessing() { canvas.SetActive(false); yield return new WaitForEndOfFrame(); capTexture.ReadPixels(capRect, 0, 0); capTexture.Apply(); canvas.SetActive(true); } void CreateImages() { /*ここに画像生成コードを移す*/ } 画像の生成 このあと、画像生成のコードが増えるため関数にまとめて整理しておく
- 114. コードを整理(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(); }
- 116. ここから翱辫别苍颁痴!
- 119. 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; }
- 120. 二値化 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)
- 121. 二値化結果の表示 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); }
- 122. 动作确认 ①Capture ②二値化結果
- 123. 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); }
- 126. 黒画素に色を付ける (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); } 後ほど処理を記述
- 127. ポインタと各ピクセルの色情報 ? どちらの画像も左上から横方向スキャンし、それを全段で行った 場合の各画素の色情報を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
- 128. この次の作業 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); } これから処理を記述
- 129. 黒画素に色を付ける (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 } }
- 130. 动作确认
- 131. 色の配列を作成 //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からコピペ ②自分で書く
- 132. 黒画素の色の切り替え(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); } ここで色を指定 (次のページで解説)
- 133. 黒画素の色の切り替え(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 } }
- 134. 黒画素の色の切り替え(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; /*資料のスペースの都合により以下省略*/
- 142. 白画素を透過させる(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); } ここで色を指定 (次のページで解説)
- 143. 白画素を透過させる(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; } }
- 144. 动作确认 ①Capture ②透過画像
- 146. プレビュー表示の最大化 全体を選択
- 149. プレビューの表示 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; }
- 150. 动作确认 Capture
- 155. 空間にスタンプを固定 //スタンプのテンプレートオブジェクト(テクスチャ付きの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() { } 次のページからコードを記載
- 156. スタンプの実サイズを計算 //カメラの情報を取得 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
- 157. 空間にスタンプを固定 /*前のページに記述したコードからの続き*/ 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;
- 165. 动作确认
- 166. 描画できるスタンプ数に制限を設ける //スタンプのテンプレートオブジェクト(テクスチャ付きの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; }
- 167. 描画できるスタンプ数に制限を設ける 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; }
- 168. 完成！
- 169. 関連資料 ? ノンプログラミングで始めるAR /ssuserc0d7fb/a r-173415869 ? はじめようARCore /ssuserc0d7fb/a rcore-in ? OpenCVとUnityでつくる塗り絵AR /ssuserc0d7fb/o pencvarcoreunityar