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
140
ブラウザ上での機械学習と描画処理でインタラクティブな「透明マント・光学迷彩」 / HL2022「MAID」部門最終選考会
you(@youtoy)
PRO
December 01, 2022
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
34
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
84
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
180
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
2.5k
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
95
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
610
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
2.4k
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
5k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
1
2.6k
Other Decks in Technology
See All in Technology
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
1.5k
ソフトウェアエンジニアと仕事するときに知っておいたほうが良いこと / Key points for working with software engineers
pinkumohikan
1
140
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
2
360
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
690
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
12
3.6k
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
180
OPENLOGI Company Profile
hr01
0
60k
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
450
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
6
1.9k
CDKのコードを書く環境を作りました with Amazon Q
nobuhitomorioka
1
140
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
250
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Documentation Writing (for coders)
carmenintech
67
4.6k
Typedesign – Prime Four
hannesfritz
40
2.5k
GitHub's CSS Performance
jonrohan
1030
460k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Rails Girls Zürich Keynote
gr2m
94
13k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
A better future with KSS
kneath
238
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Your Own Lightsaber
phodgson
104
6.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
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