2018/11/03に開催したARコンテンツ作成勉強会資料

1. ARコンテンツ作成勉強会
OpenCVとRGB-Dセンサで作ろう壁面タッチパネル
#AR_Fukuoka

2. 自己紹介
氏名：吉永崇(Takashi Yoshinaga)
所属：九州先端科学技術研究所(ISIT)
専門：AR/VRを用いた情報可視化と各種計測
コミュニティ：ARコンテンツ作成勉強会

3. ARコンテンツ作成勉強会の紹介
 ARコンテンツの作り方をハンズオン形式で学ぶ
 人数は5~10名程度の少人数で実施
 参加条件はAR/VRに興味がある人(知識不要)
 各地で開催(福岡、熊本、宮崎、長崎、大分、鹿児島、山口、広島、関東)
 ノンプログラミングやUnity, OpenCV, センサデバイス何でもあり

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

5. 事前準備

6. Kinect for Windows SDK v1.8
ダウンロード&インストール
https://www.microsoft.com/en-us/download/details.aspx?id=40278

7. Processing 2.2.1
2.2.1をダウンロード&わかりやすい場所に解凍
https://processing.org/download/
バージョン指定あり。要注意

8. SimpleOpenNI-1.96
SimpleOpnNI-2.2.1.zipをダウンロード&
わかりやすい場所に解凍
https://code.google.com/archive/p/simple-openni/downloads
SimpeOpenNI-1.96.zip

9. OpenCV for Processing 0.5.4
バージョン0.5.4のopencv_processing.zipを
ダウンロード&わかりやすい場所に解凍
https://github.com/atduskgreg/opencv-processing/releases
Opencv_processing.zip
(必ずここからDL)

10. SimpleOpenNIとOpenCVのインストール
(1) Processingを一度起動させる
(2) ドキュメントフォルダに[Processing]フォルダができていることを
確認後、Processingを終了
(3) 上記フォルダ内の[libraries]の中に先ほど解凍した
[opencv_processing]と[SimpleOpenNI]
をフォルダごと移動。
この2つがあればOK

11. 本編

12. 本日のテーマ
KinectなどのRGB-Dセンサを使って壁面をタッチスクリーン化

13. 使用するRGB-Dセンサ：Kinect
 Kinect（キネクト）とはMicrosoft社のゲーム機、XBOX360
専用のジェスチャー入力コントローラとして発売された機器
 カラー画像・深度(Depth)情報・身体の認識等が可能
深度センサ(赤外線プロジェクタ＋赤外線カメラ)
カラーカメラ

14. Kinectを用いたコンテンツ開発
↑ カラー画像+距離画像+3D計測
人体認識 →
とC# or C++を使えば開発可能
結構敷居が高い SimpleOpenNIと を使うと比較的簡単

15. processingとは
 processingとは、デジタルアートとビジュアルデザインのための
プログラミング言語であり、統合開発環境
 視覚的な表示を簡単に行えるため初心者のプログラミング
学習にも向いている。文法はJavaとほぼ同じ。

16. 今回作成するコンテンツ
https://youtu.be/1AKsLG5tGWE

17. 本日のテーマ(裏)
Depth情報と画像処理による接触検知で骨格追跡の弱点を解決しよう

18. セットアップ
ここに置く
壁に平行な
面をスキャン

19. 考え方
上向きのKinectに手をかざす Point Cloudで3D化
スキャン結果を2値画像化中心っぽい位置を算出投影面に描画
特定平面(垂直)でスキャン
+
Kinectで取得した点群(Point Cloud)と画像処理で壁面をタッチパネル化

20. 準備
まずはProcessingの使い方

21. Processingを起動
実行
テキストエディタ
ここにソースコードを記述
保存
【起動】
 processing
のアイコンを
クリック
【保存】
 保存ボタンを
クリック
 Sample1と
して保存

22. processingでウィンドウを表示させよう
//setup関数内で初期設定
void setup(){
size(256,256); //ウィンドウ内部のサイズ
background(200,200,200); //ウィンドウ内部の色
}
デフォルトでは色をRGBで表現(それぞれ0～255)

23. 基本図形を描画しよう
void setup(){
/*省略(前ページ参照)*/
}
//描画のための関数
void draw(){
//枠線の色
stroke(255,0,0);
//枠線の太さ(pixel)
strokeWeight(10);
//塗りつぶしの色
fill(0,255,255);
//四角形(rectangle)を描画
//rect(x座標,y座標,横幅,縦幅)
rect(10,10,50,50);
}
(x,y)=(10,10)
枠線の色：(255,0,0)=赤
枠線の太さ：10px
塗り色：
(0,255,255)=シアン

24. 他の図形も描いてみよう
void draw(){
//枠線の色
stroke(255,0,0);
//枠線の太さ(pixel)
strokeWeight(10);
//塗りつぶしの色
fill(0,255,255);
//四角形(rectangle)を描画
//rect(x座標,y座標,横幅,縦幅)
rect(10,10,50,50);
}
塗りつぶした円を描画
自由な多角形(三角形)を描画

25. 頂点を指定して図形を描画
【三角形】
strokeWeight(2); //枠線の幅
beginShape(TRIANGLES);
vertex(70, 10);
vertex(70, 60);
vertex(150, 60);
endShape();
(70,10)
(70,60) (150,60)
【点(塗りつぶし円)】
strokeWeight(60); //点の幅(=円の直径)
beginShape(POINTS);
vertex(35,100); //点の中心位置(x,y)
endShape(); 60
60
(35,100)
詳細 https://processing.org/reference/beginShape.html

26. void draw(){
//枠線を描かない
noStroke( );
//以下の図形を半透明の白で塗る
fill(255,255,255,10);
//ウィンドウサイズの四角形
rect(0,0,width,height);
//円を描画
strokeWeight(60);
beginShape(POINTS);
//マウスの位置に描画
vertex(mouseX,mouseY);
endShape(POINTS);
}
インタラクション：マウスに追従
Rectで四角形を描画
自由な多角形(三角形)を描画
薄い白で塗る 円を描く
薄い白で塗る 円を描く
薄い白で塗る 円を描く
draw()
draw()
座標指定
方法を変更

27. 次のプロジェクトの作成
保存新規作成 【新規作成】
 新規ボタンをクリック
 Sample1の内容を
コピー＆ペースト
 setup関数とdraw関数
の内側のコードを消す
【保存】
 保存ボタンをクリック
 Sample2として保存

28. 考え方
上向きのKinectに手をかざす Point Cloudで3D化
スキャン結果を2値画像化中心っぽい位置を算出投影面に描画
特定平面(垂直)でスキャン
+

29. 考え方
スキャン結果を2値画像化中心っぽい位置を算出投影面に描画
特定平面(垂直)でスキャン
+
上向きのKinectに手をかざす Point Cloudで3D化

30. 準備
PCとKinectを接続

31. Kinectを起動させよう
import SimpleOpenNI.*; //SimpleOpenNIを読み込む
SimpleOpenNI kinect; //Kinectを扱うための変数
void setup(){
//OpenNIおよびKinectを初期化
kinect = new SimpleOpenNI(this);
if(kinect.isInit() == false){
exit();
return;
}
}

32. 確認
赤外線の照射が始まる場合も
エラーが出なければOK

33. KinectのDepth取得と表示の準備
void setup(){
size(640, 480); //640*480で表示
kinect = new SimpleOpenNI(this);
if(kinect.isInit() == false){
exit();
return;
}
kinect.enableDepth(); //Depth画像取得をON
}
void draw(){
kinect.update(); //Kinectから最新情報を取得
PImage depth = kinect.depthImage(); //Depth画像取得
image(depth, 0, 0 ); //Depth画像表示
}

34. 考え方
スキャン結果を2値画像化中心っぽい位置を算出投影面に描画
特定平面(垂直)でスキャン
+
上向きのKinectに手をかざす Point Cloudで3D化

35. 考え方
上向きのKinectに手をかざす
スキャン結果を2値画像化中心っぽい位置を算出投影面に描画
+
Point Cloudで3D化 特定平面(垂直)でスキャン

36. スキャンするラインを表示(補助)
int scanHeight=240; //スキャンする位置(単位：pixel)
void setup(){
/*記述省略*/
}
void draw(){
kinect.update();
PImage depth = kinect.depthImage();
image(depth, 0, 0 );
//スキャンするラインを表示(開発補助のため)
stroke(255,255,255); //線の色=白
strokeWeight(1); //線の太さ=1pixel
line(0, scanHeight, depth.width, scanHeight);
}
始点 終点

37. 動作確認

38. 3次元データ(Point Cloud)を取得
int scanHeight=240; //スキャンする位置(単位：pixel)
void setup(){
/*記述省略*/
}
void draw(){
kinect.update();
PImage depth = kinect.depthImage();
image(depth, 0, 0 );
//スキャンするラインを表示(開発補助のため)
stroke(255,255,255);
strokeWeight(1);
line(0, scanHeight, depth.width, scanHeight);
//Depth画像を3次元データに変換
PVector[] realWorld = kinect.depthMapRealWorld();
}

39. 距離画像のデータの並び
P00
(x,y,z)
P01
(x,y,z)
P02
(x,y,z)
P10
(x,y,z)
P11
(x,y,z)
P12
(x,y,z)
P20
(x,y,z)
P21
(x,y,z)
P23
(x,y,z)
【ポイント】
 3次元座標は一次
元配列realWorld
に格納されている
 任意のi,jにおける
のx,y,zを知るには
計算が必要
P00 P01 P02 P10 P11 P12 P20 P21 P22 ・・・
0 1 2
j
0
1
2
i
realWorld
[0] [1] [2] [3] [4] [5] [6] [7] [8] ・・・
v = 0 段目 v = 1 段目 v = 2 段目
ピクセル i, j での3次元座標 → realWorld[ j＊画像の横幅 + i ]
【距離画像】

40. スキャンラインの3次元データを可視化
void draw(){
/*記述省略*/
//Depth画像を3次元データに変換
PVector[] realWorld = kinect.depthMapRealWorld();
stroke(255,0,0); //赤
beginShape(POINTS); //これから点を描画
strokeWeight(10); //サイズは10pixel
for(int i = 0; i < depth.width; i++){ //横一列スキャン
int index = depth.width * scanHeight + i;
PVector p = realWorld[index]; //指定位置の3D座標を取得
vertex(p.x,p.z); //この座標に描く
}
endShape(POINTS); //点の描画終了
}

41. スキャンラインの3次元データを可視化
void draw(){
/*記述省略*/
//Depth画像を3次元データに変換
PVector[] realWorld = kinect.depthMapRealWorld();
stroke(255,0,0); //赤
beginShape(POINTS); //これから点を描画
strokeWeight(10); //サイズは10pixel
for(int i = 0; i < depth.width; i++){ //横一列スキャン
int index = depth.width * scanHeight + i;
PVector p = realWorld[index]; //指定位置の3D座標を取得
vertex(p.x, p.z); //この座標に描く
}
endShape(); //点の描画終了
}
Zは奥行き
X
Y
Z

42. 理想

43. この後やること
Width [pixel]
(x, y, z) [mm]
描画領域の単位[pixel]とPoint Cloudで使われる座標系の単位[mm]を統一

44. この後やること
(x, y, z) [mm]
nearからfarの距離[mm]をウィンドウや画像の縦のサイズHeight [pixel]に合わせる
near[mm]
far[mm]
Height[pixel]
Top View

45. スキャンラインの3次元データを可視化
int near=500;
int far=1200;
void draw(){
/*記述省略*/
for(int i = 0; i < depth.width; i++){
int index = depth.width * scanHeight + i;
PVector p = realWorld[index];
float y = (p.z - near) / (far - near); //near-far間の相対位置
y = y * depth.height; //画像の縦方向の座標に変換
vertex(p.x,p.z); //y座標を書き換える
}
endShape(); //点の描画終了
}
vertex(p.x, y); //y座標を書き換える

46. 動作確認

47. この後やること
(x, y, z) [mm]
rightからleftの距離[mm]をウィンドウや画像の横のサイズWidth [pixel]に合わせる
right [mm]
Width [pixel]
left [mm]
(right-left) [mm]

48. スキャンラインの3次元データを可視化
int right = 500;
int left = -500;
void draw(){
/*記述省略*/
for(int i = 0; i < depth.width; i++){
int index = depth.width * scanHeight + i;
PVector p = realWorld[index];
float y = (p.z - near) / (far - near);
float x = (p.x - left) / (right - left); //left-right間の相対位置
y = y * depth.height;
x = x * depth.width; //画像の横方向の座標に変換
vertex(p.x, y); //y座標を書き換える
}
/*以下省略*/
vertex(x, y); //x座標を書き換える

49. 動作確認

50. スキャンラインの3次元データを可視化
int right=500;
int left=-500;
void draw(){
/*記述省略*/
for(int i = 0; i < depth.width; i++){
int index = depth.width * scanHeight + i;
PVector p = realWorld[index];
float y = (p.z - near) / (far - near);
float x = (p.x-left) / (right-left);
y = y * depth.height;
x = x * depth.width;
vertex(x, y);
}
/*以下省略*/
float y = 1 - (p.z - near) / (far - near); //上下反転

51. 次のステップに進む前に・・・
保存新規作成 【新規作成】
 新規ボタンをクリック
 Sample2の内容を
コピー＆ペースト
【保存】
 保存ボタンをクリック
 Sample3して保存

52. 動作確認用の可視化コードを削除
PVector[] realWorld = kinect.depthMapRealWorld();
stroke(255,0,0);
beginShape(POINTS); //これから点を描画
strokeWeight(10);//サイズは10pixel
for(int i = 0; i < depth.width; i++){ //横一列スキャン
int index = depth.width * scanHeight + i;
PVector p = realWorld[index]; //指定位置の3次元座標を取得
float y = 1 - (p.z - near) / (far - near);
float x = (p.x - left) / (right - left);
y = y * depth.height;
x = x * depth.width;
vertex(x, y); //この座標に描く
}
endShape( ); //点の描画終了
削除
削除
削除

53. 考え方
上向きのKinectに手をかざす
スキャン結果を2値画像化中心っぽい位置を算出投影面に描画
+
Point Cloudで3D化 特定平面(垂直)でスキャン

54. 考え方
上向きのKinectに手をかざす
中心っぽい位置を算出投影面に描画
+
Point Cloudで3D化
スキャン結果を2値画像化
特定平面(垂直)でスキャン

55. スキャンデータの画像化
PImage img = createImage(320, 240, ALPHA); //1ch画像を作成
void draw(){
/*記述省略(Kinect画像を取得したり線を引いたり)*/
img.loadPixels(); //Pixelの読み込み
for (int i = 0; i < img.pixels.length; i++) {
img.pixels[i] = color(0); //画像処理用の画像を黒で初期化
}
PVector[] realWorld = kinect.depthMapRealWorld();
for(int i=0;i<depth.width;i++){
/*画像のスキャンと座標変換処理*/
}
img.updatePixels(); //処理結果を反映
image(img,0,0); //画像を描画
}

56. スキャンデータの画像化
void draw(){
/*記述省略*/
PVector[] realWorld = kinect.depthMapRealWorld();
for(int i = 0; i < depth.width; i++){
int index = depth.width * scanHeight + i;
PVector p = realWorld[index];
float y = 1 - (p.z - near) / (far - near);
float x = (p.x - left) / (right - left);
y = y * depth.height;
x = x * depth.width;
}
/*以下省略*/
if(x>0 && x<1 && y>0 && y<1){
y=y * img.height; //画像処理用の画像のY座標に変換
x=x * img.width; //画像処理用の画像のX座標に変換
}

57. スキャンデータの画像化
for(int i =0; i < depth.width; i++){
int index = depth.width * scanHeight + i;
PVector p = realWorld[index];
float y = 1 - (p.z - near) / (far - near);
float x = (p.x - left) / (right - left);
if(x>0 && x<1 && y>0 && y<1){
y = y * img.height;
x = x * img.width;
//画像処理で使う画像の一次元配列のindexに変換
index = ((int)y * img.width + (int)x);
//Depthが検出された箇所を白く塗る
img.pixels[index] = color(255);
}
}

58. 動作確認

59. OpenCVを使用する準備
import SimpleOpenNI.*;
import gab.opencv.*; //OpenCVをインポート
OpenCV cv; //OpenCVを扱う変数
SimpleOpenNI kinect;
PImage img = createImage(320, 240, ALPHA); //処理用画像
void setup(){
size(640,480);
kinect = new SimpleOpenNI(this);
if(kinect.isInit() == false){
exit();
return;
}
kinect.enableDepth();
cv = new OpenCV(this, img.width, img.height);
}
処理する画像の
width,heightを指定

60. 膨張処理による画素の連結
for(int i =0; i < depth.width; i++){
/*省略：座標変換と画像への白画素書き込み*/
}
img.updatePixels();
cv.loadImage(img);
cv.dilate();
cv.dilate();
img = cv.getSnapshot();
image(img,0,0);
http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/index.html
【モルフォロジー演算】
近傍の画素を見比べて白画素の膨張や収縮
を行う処理。(※二値画像の場合)
膨張のことをDilation、収縮のことをErosion
という。また、収縮→膨張の順に処理した場合
をOpening、逆の処理をClosingと呼ぶ。

61. 考え方
上向きのKinectに手をかざす
中心っぽい位置を算出投影面に描画
+
Point Cloudで3D化
スキャン結果を2値画像化
特定平面(垂直)でスキャン

62. 考え方
上向きのKinectに手をかざす
投影面に描画
Point Cloudで3D化 特定平面(垂直)でスキャン
スキャン結果を2値画像化中心っぽい位置を算出
+

63. 膨張処理による画素の連結
img.updatePixels();
cv.loadImage(img);
cv.dilate();
cv.dilate();
img = cv.getSnapshot();
image(img,0,0);
ArrayList<Contour>contours = cv.findContours(false,true);
if(contours.size() > 0){
java.awt.Rectangle rect = contours.get(0).getBoundingBox();
double cx = rect.getCenterX();
double cy = rect.getCenterY();
cx = width * cx / img.width; //画像処理用の画像→スクリーン変換
cy = height * cy / img.height; //画像処理用の画像→スクリーン変換
fill(255, 0, 0);
ellipse((float)cx, (float)cy ,60 ,60);
}

64. いい感じにする
void draw(){
noStroke();
fill(255,255,255,5);
rect(0,0,width,height);
kinect.update();
PImage depth = kinect.depthImage();
image(depth, 0, 0 );
stroke(255,255,255);
strokeWeight(1);
line(0, scanHeight, depth.width, scanHeight);
img.loadPixels();
for (int i = 0; i < img.pixels.length; i++) {
img.pixels[i] = color(0);
}
PVector[] realWorld = kinect.depthMapRealWorld();

65. いい感じにする
void draw(){
noStroke();
fill(255,255,255,5);
rect(0,0,width,height);
kinect.update();
PImage depth = kinect.depthImage();
image(depth, 0, 0 );
stroke(255,255,255);
strokeWeight(1);
line(0, scanHeight, depth.width, scanHeight);
img.loadPixels();
for (int i = 0; i < img.pixels.length; i++) {
img.pixels[i] = color(0);
}
PVector[] realWorld = kinect.depthMapRealWorld();
削除

66. 壁のサイズに合わせる
int near = 880;
int far = 1800;
int right = 860;
int height = -860;
void setup(){
size(1280,800);
/*以下省略*/
}
880
1800

67. 完成