Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

you（@youtoy）
December 01, 2022
Technology
1
38

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

you（@youtoy）

December 01, 2022
Tweet

More Decks by you（@youtoy）

See All by you（@youtoy）
IoTを始めたきっかけの話と個人でできるIoTの今後 / 新年LT会「私の愛するIoT 2023」
you
0
150
UIFlowの2.0がやってきた！ / ビジュアルプログラミングIoTLT vol.13
you
0
230
2022年のメーカーフェアに出展した作品を振り返ってみる / スイッチサイエンス Maker Awards 2022授賞式＆LT大会
you
0
64
p5.jsを使ったクリエイティブコーディングに機械学習やデバイス連携などを組み合わせている話 / Creative Coding作品の周辺を語る会 03
you
0
77
個人で手軽にブラウザやビジュアルプログラミングでIoT /【イマドキのIoTを支える技術】/ TechFeed Experts Night#10
you
2
56
第2回ナブかつLABキャリアトーク / 豊田陽介
you
0
11
個人的に使いやすいと思う／好きなガジェットをいくつか紹介してみる / トヨタ ガジェット研究所
you
1
91
続・Webの技術でできる様々なこと 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 8th Anniversary
you
2
140
p5.jsを使ったクリエイティブコーディングやJavaScriptによる機械学習・デバイス制御などの処理と組み合わせる話 / PWA Night vol.44
you
2
170

Other Decks in Technology

See All in Technology
Kubernetes_EKSに入門してみる
toru_kubota
0
230
230125 古いタブレットの活用 かーでぃさん
comucal
PRO
0
12k
ML PM, DS PMってどんな仕事をしているの？
line_developers
PRO
1
210
マネーフォワードクラウドを支える事業者基盤
machisuke
0
430
IoT から見る AWS re:invent 2022 ― AWSのIoTの歴史を添えて/Point of view the AWS re:invent 2022 with IoT - with a history of IoT in AWS
ma2shita
0
220
Astroで始める爆速個人サイト開発
takanorip
12
8.4k
データ分析基盤の要件分析の話（202201_JEDAI）
yabooun
0
190
PCI DSS に準拠したシステム開発
yutadayo
0
280
マイクロサービス宣言から8年 振り返りとこれから / Eight Years After the Microservices Declaration A Look Back and A Look Ahead
eisuke
2
130
ステート管理を超えるRecoil運用の考え方
uhyo
7
5.5k
ラズパイとGASで加湿器の消し忘れをLINEでリマインド＆操作
minako__ph
0
130
WebLogic Server for OCI 概要
oracle4engineer
PRO
3
850

Featured

See All Featured
The Cult of Friendly URLs
andyhume
68
5.1k
Building Adaptive Systems
keathley
27
1.3k
Building a Scalable Design System with Sketch
lauravandoore
451
31k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Done Done
chrislema
178
14k
Designing Experiences People Love
moore
130
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
7
570
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
Building an army of robots
kneath
301
40k
What the flash - Photography Introduction
edds
64
10k

Transcript

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

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

    その他 応募歴の浅いニューフェイスなので お手柔らかに

  3. 作品を作った動機

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

  5. 説明の前にデモ動画

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

  7. 利用素材と処理のおおまかな流れ 処理の流れと素材の利用箇所 両手を認識 背景取得 映像の一部を 背景画像に 利用した開発素材 ・Googleが提供する機械学習の 　仕組みのJavaScript版の一部 ・高速・高精度な手の認識

    ・JavaScript の描画ライブラリ ・Canvas API が扱いやすくなる ・便利な関連ライブラリも多数 ・2Dだけでなく3Dも

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

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

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

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

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

  13. DeepLで確認した

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

  15. 終わり！

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

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

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