Tweet
Tweet

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