GoのEbitengineでカメラの中のGopherくんに触れるサイトを作った
目的
hamaoさんが取り組んでいた以下記事を見つけ、少し発展させたなにかをしたいと思い作りました
成果物
カメラの映像上にあるGopherくんを触ってぷかぷか浮かべられるサイトが出来ました
以下で試せます(静的コンテンツのDL以外通信しないので安心してください)
背景だけが写っている状態にしてPG CAPTUREボタンを教えてください、基準となる背景が登録されるのでボタンをおした後に新しく写ったものが物体として認識されてGopherくんを触ることができます!
昔に流行った身体の動きで操作して遊べるマイクロソフトのKinect(キネクト)というデバイスの真似事です
コード
解説
Webカメラからの画像データをGoのsyscall/jsを使うことでGo側に取り込む部分は先に取り上げました、hamaoさんの解説とほぼ同じです
一点、Go側への画像の取り込み処理部分は以下の組み合わせに変更しています
- jsの
getImageData+Uint8Array - Goの
CopyBytesToGo
https://github.com/ponyo877/lifting-gopher/blob/v1.0.0/main.go#L80-L87
上記の変更により参考記事で課題となっていた「処理のほとんどをEbitengineのDraw内で行なってしまっている」を解消し、描画の処理以外はUpdate内に処理を移すことができました
また結果としてWebカメラ映像描画のFPSを向上させることが出来ました
古典的な背景差分法を使って身体の一部を認識しています
簡単にいうとあらかじめ撮影した背景と今の画像の差分が新しい物体だと判断せる方法で以前から天気予報図の背景に天気予報士を建てせることなどに利用されていた技術です(そういう時はグリーンバックと呼ばれる緑一色の背景を使い差分を取りやすくしている)
先に取得した背景と現在の画像のグレースケールの差分を計算し、その各ピクセルに対して差分がある一定値を超えていたらそこに新しい物体がある、超えていなければ元の背景と変わらないと判断しています
Gopherくんには重力が働いていて、フレームごとに速度を計算させて、Gopherくんが背景差分で計算した結果のある物体があアルピクセルに重なったら上向きの加速度を加えてあげることでぷかぷか浮くように見せています
まとめ
EbitengineにはWebカメラ映像を使ったゲームを作れるという可能性を示せたと思います
ぷかぷか遊んでみてください
Discussion