🔖

React+TypeScriptでWebAssembly007。今回も純粋C++。OpenCV,ArUcoマーカの姿勢推定してみた。

2024/01/28に公開

C++

OpenCV

aruco

tech

<- React+TypeScriptでWebAssembly006
React+TypeScriptでWebAssembly008 ->

Abstract

前回で、開発環境が構築できたので、さっそくOpenCVのアプリを作ってみた。
最終的にはWebAssemblyにするものの、ひとまず純粋C++アプリで。
作るのはArUcoライブラリで、ArUcoマーカの姿勢推定のサンプル。

結論

今回の成果物はココ↓

前提

windowsでOpenCV,C++の開発環境構築済み。 [環境構築]React+TypeScriptでWebAssembly002。WindowsでOpenCV,C++,VSCode,CMake。
WebAssemblyのビルド環境も構築済み。[環境構築]Ubuntu22.04で、WebAssemblyのOpenCV,C++,CMakeの開発環境を構築してみた。
React+Typescriptの開発環境は構築済 [環境構築]WindowsにVSCode+React+TypeScriptの開発環境を構築してみた。
ベースはこれ→reacttscppwasm_tmplate。

WindowsでC++開発。

準備

1.テンプレートのソースコード一式を取得

github取得

$ cd D:\Products\React.js
$ git chttps://github.com/aaaa1597/reacttscppwasm_tmplate.git
$ ren reacttscppwasm_tmplate ReactTs-WebAsm007
$ cd ReactTs-WebAsm007/cpp

2. VSCodeでプロジェクトフォルダを開く

VSCodeの拡張機能C/C++、CMake Toolsを入れてなければ入れておく。
　　　　　　↓

C/C++: Edit Configurations(JSON)を選択
Ctrl + Shift + P -> "C/C++: Edi"まで入力と出てくる。

　　　　　　↓
c_cpp_properties.jsonが生成される。ついでに右下にビルド/デバッグ/実行ボタンも表示される。

3. CMakeの設定

Ctrl + Shift + P -> "CMake: Configure"を選択。
X86を選ぶ。(WebAssemblyは32bitなので。)

↓

4. インクルードパスを追加

ifcpp.cppに戻ると、赤波線でエラーになっている。

↓
OpenCVのインストールパスを設定。
D:\apps\opencv\opencv-4.x\build\install\include

↓
赤波線が消えている。

5. 実行

ブレークポイントを設定して、カブト虫ボタンを押す。

↓
ちょっと待つと、ブレークポイントで止まる。

↓
再開

準備完了。

ArUcoマーカの姿勢推定の実装

ここから、ArUcoマーカの姿勢推定を実装する。

参考(OpenCV公式のドキュメント)

下記、URLにサンプルコードがあるのでそのまま実行するんだけど、カメラパラメータだけは全然違ったので、別サイトの情報を使わせてもらった。
Pose Estimation

手順

まずArUcoマーカの準備。以下の画像をプリントアウトする。

ここから、ArUcoマーカの姿勢推定をコーディングする。
とはいえ、↓ここにサンプルコード、ほぼそのまんま。

成果物はココにコミットしたので、そっち参照してもらうということで。

で、実行。

出来た!!
けど、正しいのと正しくないのとある。
姿勢推定の性能がいまいちイケてないのが課題。

デバッグ時のお助け情報1
Matの中身ってそのままだと確認しづらいけど、下記方法で確認しやすくなる。
https://qiita.com/h2suzuki/items/6b40f69bb287799d8bf6