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

ブラウザ上での機械学習と描画処理でインタラクティブな「透明マント・光学迷彩」 2022年12月1日 (木) HL2022「MAID」部門最終選考会 @オンライン豊田陽介（） @youtoy

自己紹介豊田陽介（） @youtoy ・昨年のヒーローズ・リーグ2021 で初応募・最終選考などに残ったのは今回が初ヒーローズ・リーグの応募歴・「ProtoPediaの時間」をよく見ています・コンビニに立ち寄ると荷物が増えます
その他応募歴の浅いニューフェイスなのでお手柔らかに

作品を作った動機

手軽に面白いことをしたい！（SF・🎮ゲームの世界的な方向で）

説明の前にデモ動画

動画：既にプレゼンが始まる前にやったけれど... 光学迷彩・透明マントのような表現

利用素材と処理のおおまかな流れ処理の流れと素材の利用箇所両手を認識背景取得映像の一部を背景画像に利用した開発素材・Googleが提供する機械学習の　仕組みのJavaScript版の一部・高速・高精度な手の認識
・JavaScript の描画ライブラリ・Canvas API が扱いやすくなる・便利な関連ライブラリも多数・2Dだけでなく3Dも

利用時の流れなどを動画にしてみた仕組みの裏側が分かる失敗例を混ぜつつ

背景取り込み時から PCは動かしてはいけない...

Twitter上でプチバズった！（自分的には）日本国内だけでなく、海外の方からのコメントも！

海外の方からいただいたコメント

海外の方からの引用リツイートでのコメント

DeepLで確認した

映画やSFアニメなどの世界に近づけたかも！？他に、攻殻機動隊のキャラ名を含むツイートも

終わり！

TensorFlow.jsベースのためブラウザ上で動作

「MediaPipe」のJavaScript版のHands MediaPipe Hands 画像から手のキーポイントの位置（複数）を認識 ※ 指を立てたかどうかの判定は　位置座標などから自前で計算

MediaPipe JavaScript版で扱えるもの手を対象としたもの以外の一部を紹介 MediaPipe Face Mesh MediaPipe Holistic

ブラウザ上での機械学習と描画処理でインタラクティブな「透明マント・光学迷彩」 / HL2022...