Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブラウザ上での機械学習と描画処理でインタラクティブな「透明マント・光学迷彩」 / HL2022...
Search
you(@youtoy)
PRO
December 01, 2022
Technology
1
160
ブラウザ上での機械学習と描画処理でインタラクティブな「透明マント・光学迷彩」 / HL2022「MAID」部門最終選考会
you(@youtoy)
PRO
December 01, 2022
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
59
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
180
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
110
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
100
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
53
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
57
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
110
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
240
Other Decks in Technology
See All in Technology
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
22k
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
10
4.6k
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
4
13k
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
170
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
520
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
310
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Facilitating Awesome Meetings
lara
54
6.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Designing for humans not robots
tammielis
253
25k
Transcript
ブラウザ上での機械学習と描画処理で インタラクティブな「透明マント・光学迷彩」 2022年12月1日 (木) HL2022「MAID」部門最終選考会 @オンライン 豊田陽介( ) @youtoy
自己紹介 豊田陽介( ) @youtoy ・昨年のヒーローズ・リーグ2021 で初応募 ・最終選考などに残ったのは今回が初 ヒーローズ・リーグの応募歴 ・「ProtoPediaの時間」をよく見ています ・コンビニに立ち寄ると荷物が増えます
その他 応募歴の浅いニューフェイスなので お手柔らかに
作品を作った動機
手軽に面白いことをしたい! (SF・🎮ゲームの世界的な方向で)
説明の前にデモ動画
動画:既にプレゼンが始まる前にやったけれど... 光学迷彩・透明マント のような表現
利用素材と処理のおおまかな流れ 処理の流れと素材の利用箇所 両手を認識 背景取得 映像の一部を 背景画像に 利用した開発素材 ・Googleが提供する機械学習の 仕組みのJavaScript版の一部 ・高速・高精度な手の認識
・JavaScript の描画ライブラリ ・Canvas API が扱いやすくなる ・便利な関連ライブラリも多数 ・2Dだけでなく3Dも
利用時の流れなどを動画にしてみた 仕組みの裏側が分かる 失敗例を混ぜつつ
背景取り込み時から PCは動かしてはいけない...
Twitter上でプチバズった!(自分的には) 日本国内だけでなく、海外の 方からのコメントも!
海外の方から いただいたコメント
海外の方からの引用リツイートでのコメント
DeepLで確認した
映画やSFアニメなどの世界に近づけたかも!? 他に、攻殻機動隊のキャラ名を含む ツイートも
終わり!
TensorFlow.jsベースのため ブラウザ上で動作
「MediaPipe」のJavaScript版のHands MediaPipe Hands 画像から手のキーポイント の位置(複数)を認識 ※ 指を立てたかどうかの判定は 位置座標などから自前で計算
MediaPipe JavaScript版で扱えるもの 手を対象としたもの以外の一部を紹介 MediaPipe Face Mesh MediaPipe Holistic