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

by you（@youtoy）

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

作品を作った動機

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

説明の前にデモ動画

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

DeepLで確認した

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

終わり！

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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