TensorFlow.js

Googleが開発している、学習データをwebブラウザで扱えるようにしているライブラリです。こちらのサイトでは学習データを使ったゲームが公開されておりますが、その中でもパックマンのゲームは、自分の顔や画像などを左右上下のコントローラに割り当ててあらかじめ登録した画像を学習させ、登録した画像をコントローラにして移動を制御する仕組みで、遊び方がなかなか斬新です。リンクのサイトではもう一つ、PoseNetというリアルタイムに人間のボーンを解析するデモがあります。これがなかなか精度が良い感じだったので、デモとして自分の体でテトリスブロックを制御する人間テトリスを作ってみました。といってもジェスチャーがあまりないので、PoseNetのボーンデータの効力を活かし切れていませんが。。。

ゲームロジック

テトリスのゲームロジックはすでに色々な方が解説していますが、私はこちらの方のアルゴリズムを参考にしました。ただ、ブロックの1区画毎にデザインしたかったため、p5.jsで使えるように変更しています。

PoseNetの組み込み

PoseNetは1人のみ検出と複数人検出の2つのクラスがあります。ただ、学習データに渡すパラメータは同じのようです。こちらのサイトを参考にさせていただいています。

遊び方

MOVE	ROATATION
自分が左右に移動するとブロックも左右に移動する	ジャンプするたびにブロックが回転する

パフォーマンス

Tensorflow.jsはWebGLをベースに開発されているので、パフォーマンスも端末のGPUに依存します。私の環境だとシングルポーズでだいたい 15fps前後でした。複数人の検出だともう少し速度が落ちると思います。

また、OutputStrideとimageScaleFactorのパラメータにも依存します。ストライドについては勉強不足で理解できていませんが、こちらのサイトに説明がありました。

最後に

ボーンデータの検出は今までKinectなど赤外線等を使った機器でないと、精度が期待されていませんでしたが、このPoseNetはWebCameraだけでそこそこの精度と速度で動作するのでかなり魅力的です。インタラクティブコンテンツでうまく採用していけそうな予感がします。こちらに今回のdemoを置いておきますので、よろしければ参考にしてください。サイトが立ち上がらない場合は、Githubからビルドをお願いします。

また、蛇足ですが、デモをもう一つ作ったので、何かのお役に立てれば嬉しいです。ソースコードはこちらです。