Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
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