現実とCGの連動 WebカメラとWebGL

Webカメラに映った赤いボールを認識し、WebGLで生成した赤いボールと連動させます。

うまく説明できないので、先に結果を・・・

球技をリアルタイムで3Dに置き換えるときなどに使えます。

環境・バージョン

Windows10
Python 3.6.1
OpenCV 3.3.1
Node.js 6.11.0

WebGL連動までの流れ

Python初心者が、できるだけJavaScriptとJSONでなんとかしたいと思ったら、こうなってしまいました・・・。

1.Webカメラでボール撮影

2.Python(OpenCV)でボールを認識

3.ボールの座標をJSONファイルに書き込み

4.Node.js(chokidar)でJSONファイル変更を感知

5.soket.ioで座標をブラウザに通知

6.ボール座標をWebGL(three.js)に取り込みレンダリング

 

今回は、流れを書くのみに留めます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)