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
57
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
5min GuardDuty Extended Threat Detection EKS
takakuni
0
190
怖くない!はじめてのClaude Code
shinya337
0
380
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
810
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
310
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
6.8k
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
100
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.3k
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
390
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
390
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
220
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
240
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.7k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Unsuck your backbone
ammeep
671
58k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Making Projects Easy
brettharned
116
6.3k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Raft: Consensus for Rubyists
vanstee
140
7k
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