りさーちゃーのひよこ: OpenCV

ラベル OpenCV の投稿を表示しています。すべての投稿を表示

2014年7月1日火曜日

画像ベースビジュアルサーボシミュレータ

#はじめに
これまでちまちまとOpenGLやらOpenCVなどの記事を書いていたのは、こいつを完成させたかったからです。 
 →<a href="http://ameblo.jp/morimoridiary/entry-11879411734.html" target="_blank" title=""></a><a href="https://www.blogger.com/null"></a><a href="http://ameblo.jp/morimoridiary/entry-11879411734.html" target="_blank" title="">OpenGL描画→OpenCV処理→ピクチャボックス描画</a> 
まぁ色々とありましてアップロードした方が後々便利なので上げました。 
カテゴリを迷いましたが、OpenGLの要素が多かったのでとりあえずこちらの成果物ということで。

#動画
<iframe allowfullscreen="" frameborder="0" height="225" src="//www.youtube.com/embed/Gn69p-gGegg" width="400"></iframe> 
To Be Continued? には、この後パワーアップさせるかどうかの迷いが込められています。 
色々ありましてね。

#参考文献
Chaumette, François, and Seth Hutchinson. "Visual servo control. I. Basic approaches." Robotics & Automation Magazine, IEEE 13.4 (2006): 82-90.

2014年6月17日火曜日

OpenGL描画→OpenCV処理→ピクチャボックス描画

#背景
画像処理シミュレータを作成しようとした際、下記のような悩みを持ったことはないだろうか。

- カメラも画像処理をする対象も準備するのはお金かかるし、シミュレーションで検証できないかな。
- じゃあOpenGLで仮想世界を作ってみよう。
- OpenGLでレンダリングした画像をOpenCV側の画像に変換すれば画像処理ができるな。
- その結果をツールに表示したいな。色々検証したいからGUIも使えたら便利そうだな。

少なくとも私はしたいと思いました。 
これまでいくつか書いた記事は、これを実現するためのものでした。フォームアプリはまったくの初心者だったので、試行錯誤でようやくそれっぽいものを実現しました。 
ようやくフローが分かってきたので、一旦まとめようと思います。今回は実装ではなく、概念の部分です。実装は過去の記事で補完するものとします。

#OpenGL→ピクチャボックス
あれ、OpenCVは？と思いますが、まずはここを理解する必要があります。まずは次の図を見てみます。 
<a class="detailOn" href="http://blog-imgs-86.fc2.com/m/o/r/morimoridiary254/blog_import_568b669c74696.png" id="i12976104839"><img alt="O" src="http://blog-imgs-86.fc2.com/m/o/r/morimoridiary254/blog_import_568b669c74696.png" id="1403000325203" ratio="1.3008130081300813" style="border: none; height: 307.5px; width: 400px;" /></a> 
過去に一部を示しましたが、簡単におさらいします。大きく分けて２段階の処理に分かれます。初期処理と逐次処理です。 
<ul>
<li>初期処理</li>
OpenGLで描画する際にはフォームのピクチャボックスのハンドルからレンダリングコンテキストを取得する必要があります。 →<a href="http://morimoridiary254.blogspot.jp/2016/01/ccli-openglgui.html" target="_blank" title="">C++/CLI フォームアプリとOpenGLの連携（フォームへのレンダリングとGUI操作）</a> 
<li>逐次処理（※動画にしたい場合。静止画なら１回でいいです。）</li>
描画対象のレンダリングコンテキストをカレントにし、OpenGLでバッファにレンダリングします。ただし、私の場合、ダブルバッファモードですのでレンダリングした画像はまだVRAMではない他のメモリに格納されており、ピクチャボックスに反映されません（オフスクリーンレンダリング）。 　これをSwapbuffers()で入れ替えて、晴れてピクチャボックスに表示されます（オンスクリーン化）。 　これをTimerなりで設定して繰り返し行えば動画が表示されます。　</ul>
なお、オフスクリーンレンダリングの説明記事としては、次のサイトが分かりやすかったです。 
<a href="http://sonson.jp/?p=60" target="_blank" title="">sonson@Picture&Software－[OpenGL] オフスクリーンレンダリング</a> 
※ちなみに、オンスクリーンレンダリングは直接ピクチャボックスの領域に書き込むことを指します。描画の過程まで表示されるので描画の量が多いと画面がちらつきます。

#OpenGL→OpenCV→ピクチャボックス
OpenGLで描画できましたが、私がやりたいのはこれだけではありません。OpenGLでレンダリングした画像を表示させずに、OpenCVで処理した結果だけをピクチャボックスに表示したいのです。ここで、上述したオフスクリーンレンダリングが役に立ちます。 
下の図は先ほどの図にOpenCVの処理を追加したものです。先ほどと同様に説明をします。 
<a class="detailOn" href="http://blog-imgs-86.fc2.com/m/o/r/morimoridiary254/blog_import_568b669d77d11.png" id="i12976105091"><img alt="O" src="http://blog-imgs-86.fc2.com/m/o/r/morimoridiary254/blog_import_568b669d77d11.png" id="1403001197254" ratio="1.3008130081300813" style="border: none; height: 307.5px; width: 400px;" /></a> 
<ul>
<li>初期処理</li>
OpenGLでレンダリングする場合とまったく同じです。OpenGLでピクチャボックスに書き込むわけではないのですが、どちらにしてもピクチャボックスからウィンドウハンドルを取得し、それからデバイスコンテキストを取得しなければなりません。デバイスコンテキストはどこからともなく沸いて出てくるものではないようです。 （ピクチャボックスに限らず、何らかのウィンドウハンドルを取得できればいいとは思いますが、わざわざ余計なことを考えることもないでしょう。ピクチャボックスから取得すればウィンドウサイズも同一ですし。）
<li>逐次処理（※動画にしたい場合。静止画なら１回でいいです。）</li>
先ほどオフスクリーンレンダリングをしたイメージバッファをcv::Matのイメージバッファにコピーします。 →<a href="http://morimoridiary254.blogspot.jp/2016/01/ccli-opencvcvmat.html" target="_blank" title="">C++/CLI フォームアプリとOpenCVの連携（cv::Mat）－【1. OpenGL画像をOpenCV画像(cv::Mat)に変換】</a></ul>
<ul>　コピーしたら画像処理を好き勝手します。OpenCV画像処理の解説は他の有用なサイトを参照ください。</ul>
<ul>　cv:MatのイメージバッファをBitmat形式に変換し、ピクチャボックスに描画します。Windowsのフォームに書き込もうと思ったら、Bitmapオブジェクトの利用は避けられません。 →<a href="http://morimoridiary254.blogspot.jp/2016/01/ccli-opencvcvmat.html" target="_blank" title="">C++/CLI フォームアプリとOpenCVの連携（cv::Mat）－【3. 結果画像(cv::Mat)をフォームのピクチャボックスに表示】</a> 　注意点ですが、OpenCVのバッファを表示する際はSwapBuffursは行ってはいけません。短時間のうちにOpenGLの画像とOpenCVの画像が高速に切り替わり画面がちらつきます。表示させるのは目的に応じてどちらか一方にしましょう。</ul>

#まとめ
手順は以上です。 
これまであれが足りないこれが足りないと一個一個調べて作っていたものが、ようやく１つのループになりました。 
下記画像の①、②については過去の記事でサンプルを公開しています（上記説明で前述ですが、まとめとして書きます）。 
①：ウィンドウハンドルからレンダリングコンテキストを習得 
　　→<a href="http://morimoridiary254.blogspot.jp/2016/01/ccli-openglgui.html" style="line-height: 1.5;" target="_blank" title="">C++/CLI フォームアプリとOpenGLの連携（フォームへのレンダリングとGUI操作）</a> 
②：OpenGLのイメージバッファをOpenCVのイメージバッファにコピー 
　　OpenCVのイメージバッファをピクチャボックスに表示 
　　→<a href="http://morimoridiary254.blogspot.jp/2016/01/ccli-opencvcvmat.html" style="line-height: 1.5;" target="_blank" title="">C++/CLI フォームアプリとOpenCVの連携（cv::Mat）</a> 
<a class="detailOn" href="http://blog-imgs-86.fc2.com/m/o/r/morimoridiary254/blog_import_568b669ec4df1.png" id="i12976105224"><img alt="O" src="http://blog-imgs-86.fc2.com/m/o/r/morimoridiary254/blog_import_568b669ec4df1.png" id="1403000292920" ratio="1.3008130081300813" style="border: none; height: 307.5px; width: 400px;" /></a> 
これで少しは遊べるようになりました。 余談ですが、C#に興味はありましたが無理に使う必要はなさそうですね。C++に対するC#のメリットはWebや通信関係を便利にするくらいだと思います。C++でもGUIはフォームで簡単に作れますし。 
会社で今度C#のセミナを受けさせてもらうことになったので、気が向いたら投稿しようと思います。 それでは。

2014年6月16日月曜日

C++/CLI フォームアプリとOpenCVの連携（cv::Mat）

#背景
先日OpenGLの画像をフォームに貼り付けました。 
→<a href="https://www.blogger.com/null"></a><a href="http://ameblo.jp/morimoridiary/entry-11878063364.html" target="_blank" title="">C++/CLI フォームアプリとOpenGLの連携（フォームへのレンダリングとGUI操作）</a> 
それはよいのですが、更に以下のようなことをしたくなった。 
 
1. OpenGL画像をOpenCV画像(cv::Mat)に変換 
2. 画像処理 
3. 結果画像(cv::Mat)をフォームのピクチャボックスに表示 
 
2は知ったこっちゃ無いですね。cv::Matさえ扱えればよいのです。 
1と3だけメモります。

#手順
##1. OpenGL画像をOpenCV画像(cv::Mat)に変換
超簡単です。 
<pre class="brush: cpp;">
// この前の段階でOpenGLレンダリングコンテキストをカレントにしておく
cv::Mat cvImg = cv::Mat::zeros(winHeight, winWidth, CV_8UC3);
glReadPixels(0, 0, winWidth, winHeight, GL_BGR_EXT, GL_UNSIGNED_BYTE, cvImg.data);
cv::flip(cvImg , cvImg , 0);
</pre>

##3. 結果画像(cv::Mat)をフォームのピクチャボックスに表示
結構はまりました。コードは簡単ですが。 
めぐりめぐって結局次のサイトを組み合わせて実現しました。 
<a href="https://www.blogger.com/null"></a><a href="http://imagingsolution.blog107.fc2.com/blog-entry-91.html" target="_blank" title="">画像処理ソリューション－【OpenCV】C++/CLIによるサンプルプログラム</a> 
<a href="https://www.blogger.com/null"></a><a href="http://imagingsolution.blog107.fc2.com/blog-entry-108.html" target="_blank" title="">画像処理ソリューション－【C++/CLI】Graphicsオブジェクトの作成</a> 
<a href="https://www.blogger.com/null"></a><a href="http://www.codeproject.com/Tips/741107/How-to-Display-Image-In-Picturebox-in-VCplusplus-f" target="_blank" title="">Code Project－How to Display Image In Picturebox in VC++ from Iplimage and Mat</a> 
 
2番目のサイトによると、 
<div>
1. Imageオブジェクトから作成（速いからオススメ！）</div>
<div>
2. CreateGraphicsメソッドを使う方法（遅いし再描画必要からオススメしない！） 
とあるので、両方試してみた。 
 
どちらにしろ流れはこんな感じ。 
　・ピクチャボックスに対するGraphics オブジェクト作成する。 
　・Bitmat オブジェクトのバッファにOpenCV のバッファを渡す。 
　・Graphics オブジェクトでBitmat のバッファをピクチャボックスに描画する。 
 
以下サンプルです。 
 
1. Imageオブジェクトから作成 
　・10回計測: 平均 = 5838[us], 標準偏差 = 102[us] 
<pre class="brush: cpp;">
// どこかから cv::Mat cvImg がやってきたとする。
Bitmap^ bmp;
IntPtr ip(cvImg.ptr());　// OpenCVの画像バッファをintポインタに変換

if ((pictureBox1->Image == nullptr)
　　|| (pictureBox1->Width != cvImg.cols)
　　|| (pictureBox1->Height != cvImg.rows)){
　　　　//ピクチャボックスをビットマップ画像サイズに合わせる 
　　　　pictureBox1->Width = cvImg.cols;
　　　　pictureBox1->Height = cvImg.rows;
　　　　//PictureBoxと同じ大きさのBitmapクラスを作成する。
　　　　Bitmap^ bmpPicBox = gcnew Bitmap(pictureBox1->Width, pictureBox1->Height);
　　　　//空のBitmapをPictureBoxのImageに指定する。 
　　　　pictureBox1->Image = bmpPicBox;
}
Graphics^g = Graphics::FromImage(pictureBox1->Image); 　　// グラフィックオブジェクト作成

bmp = gcnew Bitmap(cvImg.cols, cvImg.rows, cvImg.step,
　　System::Drawing::Imaging::PixelFormat::Format24bppRgb, ip);
// bmp->Save("test.jpg");　// これはデバッグ用。バッファがコピーされているか確認。
g->DrawImage(bmp, 0, 0, cvImg.cols, cvImg.rows);
// this->pictureBox3->Image = bmp;
pictureBox1->Refresh(); 　　　// これは必要
delete g;
delete bmp;
</pre>

2. CreateGraphicsメソッドを使う方法</div>
・10回計測: 平均 = 3563[us], 標準偏差 = 239[us]　←　勝利

<pre class="brush: cpp;">
// どこかから cv::Mat cvImg がやってきたとする。
Bitmap^ bmp;
IntPtr ip(cvImg.ptr());　// OpenCVの画像バッファをintポインタに変換

Graphics^g = pictureBox1->CreateGraphics();　　// グラフィックオブジェクト作成

bmp = gcnew Bitmap(cvImg.cols, cvImg.rows, cvImg.step,System::Drawing::Imaging::PixelFormat::Format24bppRgb, ip);

// bmp->Save("test.jpg");　// これはデバッグ用。バッファがコピーされているか確認。
g->DrawImage(bmp, 0, 0, cvImg.cols, cvImg.rows); 
// pictureBox3->Refresh();　// これは除外。動画だと画面がちらつく。

delete g;
delete bmp;
</pre>

え？2の方が速いですよ。再描画いらないし。 
しかも1は再描画がいらないと書いてあるけど、Refresh()関数を呼ばないとうまく描画されません。多分説明が反対なのかもしれませんね。

2014年5月22日木曜日

OpenCV Ver.2.4.9 をインストールする

#はじめに
前線を退いて早3年である。一念発起で3年ぶりにOpenCVをインストールしてみる。 
とりあえず動くものを、を主眼にしているので、保証はできません。

ツールのダウンロードと基本的な手順は下記のサイトを参照。 
金子邦彦研究室　Windows に OpenCV バージョン 2.4.5 をインストール 
<a href="https://www.blogger.com/null"></a><a href="http://www.kkaneko.com/rinkou/opencv/opencvinstallwindows.html" target="" title="">http://www.kkaneko.com/rinkou/opencv/opencvinstallwindows.html</a> 
ありがとうございました。 
 
ただし、今回は本エントリ掲載当時最新のCpenCV2.4.9をインストールしてみました。 
なので、以下に記すは上記サイトとの差分のみとします。

#手順
##OpenCVをダウンロード・ファイルの解凍
　解凍フォルダ選択先を C:\opencv249 としました。

##CMakeで展開
　設定パスが一部項目が異なります。

- Source code: C:\opencv249/opencv/sources
- binaries: C:\opencv249/opencv/build

私の環境はVisual Studio Express 2012 なので、Visual Studio 11 を選択。 
<a class="detailOn" href="http://blog-imgs-86.fc2.com/m/o/r/morimoridiary254/blog_import_568b667ed6fa7.png" id="i12948914167"><img alt="CVinst02" src="http://blog-imgs-86.fc2.com/m/o/r/morimoridiary254/blog_import_568b667ed6fa7.png" id="1402317375000" ratio="1.3846153846153846" style="border: none; height: 288.8888888888889px; width: 400px;" /></a>
　あとは Confgure → BUILD_EXAMPLES にチェックを入れる → Generate　でOK。

##OpenCVのプロジェクトをビルド
C:\opencv249\opencv\build\OpenCV.sln を開きます。Debug、Releaseの両方でビルドを行います。 
　※各構成ごとに20分近くかかるので、他の作業をしているときに放っておくことをお勧めします。

##環境変数Pathの設定
　以下の二つのパスを環境変数Pathに追加します。パスの区切りは半角セミコロン( ; )で。

- デバッグ用：C:\opencv249\opencv\build\bin\Debug
- リリース用：C:\opencv249\opencv\build\bin\Release

##ひと休み
　さて、ようやくOS側の準備ができました。次はツール側の設定です。ここ以降があまり私にはなじみがないファイルが登場するので、試行錯誤して着地しました。これが正しいのかはわかりませんが、簡単なプログラムでビルド実行はできました。

##Visual Studioの設定
- インクルードディレクトリの設定 
　Visual Studio 2012から「ツール→オプション」からの追加ディレクトリ設定は推奨されなくなりました。回避方法があるようですが、とりあえず今回はプロジェクトごとに設定をします。

<a class="detailOn" href="http://blog-imgs-86.fc2.com/m/o/r/morimoridiary254/blog_import_568b667f95cb7.png" id="i12948914169"><img alt="CVinst03" src="http://blog-imgs-86.fc2.com/m/o/r/morimoridiary254/blog_import_568b667f95cb7.png" id="1400712914508" ratio="2.1272727272727274" style="border: none; height: 188.03418803418802px; width: 400px;" /></a> 
　「プロジェクト→プロパティ」を開きます。　「構成プロパティー　→　C/C++　→　全般　→　追加のインクルードディレクトリ」に下記のフォルダを追加します。

- C:\opencv249\opencv\build\include
- C:\opencv249\opencv\build\include\opencv

これが正しいのかはわかりませんが、この２つは最低限ないとのちのちコンパイルが通りません。

- リンカーの設定 
　追加のライブラリディレクトリを追加します。
　「プロジェクト→プロパティ」を開きます。　「構成プロパティー　→　リンカー　→　全般　→　追加のライブラリディレクトリ」に下記のフォルダを追加します。
 - デバッグ：C:\opencv249\opencv\build\lib\Debug
 - リリース：C:\opencv249\opencv\build\lib\Release">

スタティックリンクライブラリを追加します。　同じく「リンカー→入力→追加の依存ファイル」に以下の項目を追加します。

- デバッグ　opencv_highgui249d.lib; opencv_core249d.lib; opencv_ml249d.lib; opencv_imgproc249d.lib
- リリース　opencv_highgui249.lib; opencv_core249.lib; opencv_ml249.lib; opencv_imgproc249.lib

な、なんだこの耳慣れないライブラリ名は。かの有名なhighgui.lib がずいぶん長い名前になっております。今回はとりあえずちゃっちゃか動かしたいだけなので、今後このlibに含まれないもので使いたい関数があったら、つど必要なライブラリを調べてリンクすればよし、ということで次に進みます。 ようやくセットアップの完了です。当該リンクのプログラムを実行して、画像読み込みから出力までできました。 Windowsのサンプルピクチャの絵です。著作権的には私的利用ということでOKと思います。

<a class="detailOn" href="http://blog-imgs-86.fc2.com/m/o/r/morimoridiary254/blog_import_568b66867b7c4.png" id="i12948923064"><img alt="CVinst07" src="http://blog-imgs-86.fc2.com/m/o/r/morimoridiary254/blog_import_568b66867b7c4.png" id="1402317459743" ratio="1.2987012987012987" style="border: none; height: 308px; width: 400px;" /></a> 
<div style="text-align: left;">
2014/6/9　追記：追加の依存ライブラリにopencv_imgproc249.libを追加。これが無いと画像処理系の関数を使うときに未解決となる。</div>

登録: 投稿 (Atom)