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

Transcript

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

   View Slide

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

   View Slide

3. 作品を作った動機
   

   View Slide

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

   View Slide

5. 説明の前にデモ動画
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. DeepLで確認した
    

    View Slide

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

    View Slide

15. 終わり！
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide