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「MAID」部門最終選考会
Search
you(@youtoy)
PRO
December 01, 2022
Technology
1
130
ブラウザ上での機械学習と描画処理でインタラクティブな「透明マント・光学迷彩」 / HL2022「MAID」部門最終選考会
you(@youtoy)
PRO
December 01, 2022
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
31
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
340
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
180
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
2k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
300
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.5k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
3
2.3k
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you
PRO
0
89
LINEでのコミュニケーションにマスコットキーホルダーを使ってみる / LINEを使ったLT大会 #5
you
PRO
0
2.4k
Other Decks in Technology
See All in Technology
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
150
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
270
Featured
See All Featured
It's Worth the Effort
3n
181
27k
Building Adaptive Systems
keathley
34
2k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Code Reviewing Like a Champion
maltzj
517
39k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
The Invisible Customer
myddelton
117
13k
Why Our Code Smells
bkeepers
PRO
332
56k
Typedesign – Prime Four
hannesfritz
37
2.2k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Embracing the Ebb and Flow
colly
81
4.3k
The Cult of Friendly URLs
andyhume
75
5.9k
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