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)
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
you
PRO
0
16
最近発売された端末+UIFlow 2.0の組み合わせ(+1.0の話)をUSB接続で / ビジュアルプログラミングIoTLT vol.21
you
PRO
0
6
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
120
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
2.7k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
140
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
2.5k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
170
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
310
Other Decks in Technology
See All in Technology
データ分析エージェント Socrates の育て方
na0
7
2.6k
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
590
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
500
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/06 - 2025/08
oracle4engineer
PRO
0
110
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
niizawat
0
120
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
1
160
AIがコード書きすぎ問題にはAIで立ち向かえ
jyoshise
1
160
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
280
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
組織を巻き込む大規模プラットフォーム移行戦略 〜50+サービスのマルチリージョン・マルチプロダクト化で学んだステークホルダー協働の実践〜 / Platform migration strategy engaging all stakeholders
toshi0607
2
180
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
330
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
It's Worth the Effort
3n
187
28k
Optimizing for Happiness
mojombo
379
70k
BBQ
matthewcrist
89
9.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Writing Fast Ruby
sferik
628
62k
Raft: Consensus for Rubyists
vanstee
140
7.1k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Visualization
eitanlees
148
16k
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