AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう
-
Taka_Yoshinaga
- 4293
- 18
- 1
- 58
-
- いいね！58
今回はハンドトラッキングを使ったARライトセイバー
TakashiYoshinaga Ph.D.
@Taka_Yoshinaga
ハンズオン資料完成！今日中に事前準備に関するメールを送付します。 AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう xr-fukuoka.connpass.com/event/226240/ #AR_Fukuoka #mediapipe #AI #WebAR
2021-10-28 07:19:05
じゅん@3/22-25応物学会@東京 4/17XRMTG北海道エリアのお世話 9/28💉7
@jun_mh4g
本日はこちらでWebAR勉強します('ω') Glitchのサンプルデモが動く事の事前確認だけやっとけば、本番でだいたいなんとか完成する😎 #AR_Fukuoka twitter.com/taka_yoshinaga…
2021-10-30 07:44:49Webブラウザで体験！
Window/AndroidとMac(Intel CPU), iOS(Safari以外)
https://ar-lightsaber4arfukuoka.glitch.me
iOS/Mac(M1チップ)のSafari
https://ar-lightsaber4arfukuoka-m1ios.glitch.me
勉強会スタート
じゅん@3/22-25応物学会@東京 4/17XRMTG北海道エリアのお世話 9/28💉7
@jun_mh4g
#AR_Fukuoka はじまた 5分からスタート pic.twitter.com/qR9iMq0bsb
2021-10-30 13:01:58
拡大
Koji Honma
@LaboZeroKH
学習開始 AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう xr-fukuoka.connpass.com/event/226240/?… #AR_Fukuoka
2021-10-30 13:13:21
じゅん@3/22-25応物学会@東京 4/17XRMTG北海道エリアのお世話 9/28💉7
@jun_mh4g
いつもの自己紹介 吉永さん ARに関する研究開発のおしごと コミュニティ活動 ARコンテンツ作成勉強会 #AR_Fukuoka 皆で手を動かしながらハンズオンをやる 少人数で全員ゴールまで。基本的には初心者もOK 別の地域でも開催 スケジュールは .@AR_Fukuoka まで 再開催も可 pic.twitter.com/cqfgFxxUZd
2021-10-30 13:15:57
拡大
拡大
拡大
じゅん@3/22-25応物学会@東京 4/17XRMTG北海道エリアのお世話 9/28💉7
@jun_mh4g
進捗を共有したいときはハッシュタグ #AR_Fukuoka あると見つけやすいよ（重要 pic.twitter.com/A4lnDnFn04
2021-10-30 13:16:43
拡大
じゅん@3/22-25応物学会@東京 4/17XRMTG北海道エリアのお世話 9/28💉7
@jun_mh4g
#AR_Fukuoka はぐれたらコピペで復活できる pic.twitter.com/1lLk8MCW4M
2021-10-30 13:18:07
拡大
じゅん@3/22-25応物学会@東京 4/17XRMTG北海道エリアのお世話 9/28💉7
@jun_mh4g
#AR_Fukuoka つまづいたらテキストでどんどん教えてください 本日のゴール 親指を立てたら光の剣 pic.twitter.com/cBvg1WXJVI
2021-10-30 13:22:16
拡大
拡大
じゅん@3/22-25応物学会@東京 4/17XRMTG北海道エリアのお世話 9/28💉7
@jun_mh4g
#AR_Fukuoka テンプレ複製タイム （たまーにGlitchの方が開けないときがあるらしい） ブラウザにカメラ許可を出す Glitchはサーバー兼エディタ 開発と公開がセットで出来る 参加者の開発環境を揃えるために活用 pic.twitter.com/MdlJF6uYZI
2021-10-30 13:30:16
拡大
拡大
拡大
じゅん@3/22-25応物学会@東京 4/17XRMTG北海道エリアのお世話 9/28💉7
@jun_mh4g
#AR_Fukuoka 本日の流れ 画像表示→手認識→セイバー表示→手の姿勢計算 →追従の表示→親指の状態でON/OFF制御 pic.twitter.com/UramF1em7x
2021-10-30 13:34:06
拡大
サンプル解説
じゅん@3/22-25応物学会@東京 4/17XRMTG北海道エリアのお世話 9/28💉7
@jun_mh4g
#AR_Fukuoka 3つのセクション pic.twitter.com/iXhJfMh1wi
2021-10-30 13:37:20
拡大
じゅん@3/22-25応物学会@東京 4/17XRMTG北海道エリアのお世話 9/28💉7
@jun_mh4g
#AR_Fukuoka idで管理してjavascriptから操作できるようにするパート 読み込むライブラリの解説 処理の中身の解説 pic.twitter.com/O6DbqhMbwM
2021-10-30 13:58:15
拡大
拡大
拡大
じゅん@3/22-25応物学会@東京 4/17XRMTG北海道エリアのお世話 9/28💉7
@jun_mh4g
#AR_Fukuoka 中身パート ①canvasCtxまでの関連付け ②ハンドトラッキング ③カメラの初期化 pic.twitter.com/Ahtl298Kpy
2021-10-30 14:06:04
拡大
拡大
拡大
カメラ画像や手の認識結果を表示
じゅん@3/22-25応物学会@東京 4/17XRMTG北海道エリアのお世話 9/28💉7
@jun_mh4g
#AR_Fukuoka テンプレ改造開始 カメラ表示のコードを追加 pic.twitter.com/jlhGoRFFtP
2021-10-30 14:11:40
拡大
じゅん@3/22-25応物学会@東京 4/17XRMTG北海道エリアのお世話 9/28💉7
@jun_mh4g
#AR_Fukuoka プレビュータイム カメラ映像でているのだけど自分の環境のおかげかフレームレートが低い(毎秒5フレくらい） azurekinect使えるようにしてからなんか時々起こるんだけどなんだろう pic.twitter.com/edTxkqHJzd
2021-10-30 14:23:19
拡大
じゅん@3/22-25応物学会@東京 4/17XRMTG北海道エリアのお世話 9/28💉7
@jun_mh4g
#AR_Fukuoka ハンドトラッキング 骨と関節を表示（勝手にごんぶとにしてみた） pic.twitter.com/unt2OcJc1B
2021-10-30 14:32:35
拡大
拡大
じゅん@3/22-25応物学会@東京 4/17XRMTG北海道エリアのお世話 9/28💉7
@jun_mh4g
#AR_Fukuoka カメラの鏡像を表示 片手だけ認識に変更 pic.twitter.com/cOyAYpHvJP
2021-10-30 15:00:11
拡大
拡大
拡大