$30 off During Our Annual Pro Sale. View Details »

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

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

you(@youtoy)
PRO

December 01, 2022
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

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