Web で顔認識して Live2D のモデルを動かす

すでにやられているネタで、特に新規性はないのですが

せっかく作ったので一応記事にします。
clmtrackr という、 JS で顔認識してくれるライブラリを使い、 Live2D の WebGL 版で Canvas に描画するというもの。

• 成果物: https://nijigenize.herokuapp.com
  • Chrome なら PC でも Android でも動きました。
• ソースコード: https://github.com/kimamula/nijigenize
  • 細かいことは README に書いてありますが、 Live2D の利用規約の関係で Live2D 関連のファイルを gitignore しているので、 git clone してすぐ動くようにはなってません。
  • 無駄に (?) React とか使っているせいで、一目で見て分かりやすい感じではないです。コードを見るなら参考資料にも貼ってあるこちらが分かりやすいでしょう。

モデルは 6 つから選べるようになっているので適当に遊んでいただければ。
左上のメニュー的なものが邪魔な場合は、画面上の何もないところをクリックすると消えます。

残念な点

重い

• clmtrackr の顔認識部分がボトルネックな感じ。
• clmtrackr で取得した情報を Live2D 用のパラメータに変換するのに Web worker を使ったりしてみたが、そこまで早くならなかった。
• Android/Chrome でも一応動くが、かなり遅い

まばたき・ウィンクしない

• clmtrackr がまばたきを認識してくれない。
• まばたきすると目の位置が下にずれるような認識をしているので、それを利用してまばたきの判定をしようとがんばってみたが、誤検知も多くてうまくいかなかったので、結局目は開きっぱなしに。
• 美少女にウィンクさせたかったです。。

参考資料

Live2D 公式

• WebGL のチュートリアル的なもの: http://sites.cybernoids.jp/cubism2/sdk_tutorial/platform-setting/webgl/sample
• 各種パラメータの説明: http://sites.cybernoids.jp/cubism2/modeler/parameter/standard-parameters

clmtrackr

API がシンプルなので README 読めば大体わかります。

先人の成果

• https://trap.tokyotech.org/blog/2015/12/i_am_a_girl/
  • ここにリンクの貼ってある gist がだいぶ参考になりました。