ブラウザ上での機械学習と描画処理でインタラクティブな「透明マント・光学迷彩」 / HL2022「MAID」部門最終選考会

Transcript

1. ブラウザ上での機械学習と描画処理で インタラクティブな「透明マント・光学迷彩」 2022年12月1日 (木) HL2022「MAID」部門最終選考会 @オンライン 豊田陽介（ ） @youtoy
2. 自己紹介 豊田陽介（ ） @youtoy ・昨年のヒーローズ・リーグ2021 で初応募 ・最終選考などに残ったのは今回が初 ヒーローズ・リーグの応募歴 ・「ProtoPediaの時間」をよく見ています ・コンビニに立ち寄ると荷物が増えます その他 応募歴の浅いニューフェイスなので お手柔らかに
3. 作品を作った動機
4. 手軽に面白いことをしたい！ （SF・🎮ゲームの世界的な方向で）
5. 説明の前にデモ動画
6. 動画：既にプレゼンが始まる前にやったけれど... 光学迷彩・透明マント のような表現
7. 利用素材と処理のおおまかな流れ 処理の流れと素材の利用箇所 両手を認識 背景取得 映像の一部を 背景画像に 利用した開発素材 ・Googleが提供する機械学習の 　仕組みのJavaScript版の一部 ・高速・高精度な手の認識 ・JavaScript の描画ライブラリ ・Canvas API が扱いやすくなる ・便利な関連ライブラリも多数 ・2Dだけでなく3Dも
8. 利用時の流れなどを動画にしてみた 仕組みの裏側が分かる 失敗例を混ぜつつ
9. 背景取り込み時から PCは動かしてはいけない...
10. Twitter上でプチバズった！（自分的には） 日本国内だけでなく、海外の 方からのコメントも！
11. 海外の方から いただいたコメント
12. 海外の方からの引用リツイートでのコメント
13. DeepLで確認した
14. 映画やSFアニメなどの世界に近づけたかも！？ 他に、攻殻機動隊のキャラ名を含む ツイートも
15. 終わり！
16. TensorFlow.jsベースのため ブラウザ上で動作
17. 「MediaPipe」のJavaScript版のHands MediaPipe Hands 画像から手のキーポイント の位置（複数）を認識 ※ 指を立てたかどうかの判定は 　 位置座標などから自前で計算
18. MediaPipe JavaScript版で扱えるもの 手を対象としたもの以外の一部を紹介 MediaPipe Face Mesh MediaPipe Holistic