Capture motion on real time by smart phone and take it to browser and move 3D avatar there. Use TDPT for motion capture, Three.js and VRM for rendering graphic on browser.

1. TDPTとブラウザによる大容量
リアルタイムリモートダンス
H i r o n o r i

2. iOS用アプリ「TDPT」とは
▪ スマホだけでモーキャプができます
▪ 動画からでもできます
▪ iOS用のアプリですiPhone11、SE2
以上のスペックが必要です
▪ それ以外はごめんなさい
▪ コンセプトは、とにかく簡単すぐにモーキャプ

3. ▪ プレミアムメニューは490円！
▪ VRoid Hubと連携
▪ RTMPとかReplayKitでライブ配信
▪ VMC Protocol送信をサポート
▪ BVH、VMDのモーションファイルをExport
TDPTプレミア機能

4. WebRTCでVMCプロトコルの
モーションデータをブラウザに送信
4
TDPT
VMC プロトコル
On WebRTC
WEBブラウザ
SkyWay
WebRTC
Gateway
VRM
P2P
Three.js

5. 送信データ形式： VMC Protocol on WebRTC
/VMC/Ext/PeerID,testid
/VMC/Ext/Root/Pos,root,-0.126,0.106,0.955,0.000,0.000,0.000,1.000
/VMC/Ext/Bone/Pos,Hips,0.000,0.894,0.006,0.006,0.048,0.052,0.997
/VMC/Ext/Bone/Pos,LeftUpperLeg,-0.077,-0.040,-0.005,0.296,-0.009,-0.104,0.950
/VMC/Ext/Bone/Pos,RightUpperLeg,0.077,-0.040,-0.005,0.107,-0.014,0.070,0.992
/VMC/Ext/Bone/Pos,LeftLowerLeg,0.020,-0.342,-0.007,0.105,-0.924,0.318,0.184
・・・
・・・
↓送信データ例
• VMCプロトコルベースで、配信元のPeer IDのみ付加したモーションデータをUDPで送信
これだけ追加！
送り主のPeer ID

6. こんな感じになります（動画あります）

7. ▪ 端末10台でブラウザにモーションを送信し、
正常に動作するか検証
検証編その１：10人同時実行
2021/11/2

8. 10人同時実行（構成）
WEBブラウザ
P2P
P2P
P2P
P2P
P2P
P2P
P2P
モーション端末 データ受信PC

9. 動作環境
 モーキャプ端末： 検証用に作成したWindowsフォームアプリで代用
× 10プロセス
※30fpsでVMC on WebRTCのモーションデータを送信
 データ受信PC： Windows10, Intel® Core™i7-9700@3.00GHz,
NVIDIA GeForce RTC 2060 SUPER,メモリ32GB
 ネットワーク：社内イントラネット

10. こんか感じでサクサク動きました！（動画あります）

11. 検証編その２：
P2Pによるブラウザ連鎖送信
「モーションデータを受信しているブラウザから、
更に別ＰＣのブラウザにP2Pで接続」を連鎖させて、
モーションデータを数珠繋ぎに送信し、
それぞれの環境のＶＲＭを躍らせられるか検証
P2P

12. P2Pによるブラウザ連鎖送信（構成）
WEBブラウザ WEBブラウザ
P2P
P2P
P2P
P2P
P2P
P2P
・・・
モーション端末 中継PC 末端PC

13.  モーキャプ端末： 検証用に作成したWindowsフォームアプリで代用 × 3プロセス
30fpsでVMC on WebRTCのモーションデータを送信
 中継PC： Windows10, CPU Intel® Core™ i7-10700F ,
NVIDIA GeForce RTC 3070 SUPER,メモリ32GB
 末端PC： Windows10, Intel® Core™i7-9700@3.00GHz,
NVIDIA GeForce RTC 2060 SUPER,メモリ32GB
 ネットワーク：社内イントラネット
初回結果：ハイスペックマシンで3人迄ならギリギリ大丈夫・・・？
実行環境
結果
末端PCのアバターがカクカク動く
⇒ 中継PCから上手くモーションデータを送信出来ていない？？

14. ボトルネック検証とチューニング
モーション
データ受
信
パース
３D空間
の描画
モーション
データ送
信
現状の処理の流れ
シングルスレッドで毎フレーム
下記の処理を行っている
改善方法
WebWorkerで3D描画を行い
モーションデータの送受信とスレッドを分ける
モーション
データ受信
モーション
データ送信
パース
３D空間の
描画

15. これでサクサク動きました！
 モーキャプ端末： 検証用に作成したWindowsフォームアプリで代用 × 3プロセス
30fpsでVMC on WebRTCのモーションデータを送信
 中継PC： Windows10, Intel® Core™i7-9700@3.00GHz,
NVIDIA GeForce RTC 2060 SUPER,メモリ32GB
 末端PC： M1 Mac Book Air
 ネットワーク：社内イントラネット
実行環境
結果
動画あります！

16. 今後の取り組み： 踊りを軸としたサービス化
一緒に踊る
セキュリティ面の検討など
ダンス練習
採点機能とランキングなど

17. 株式会社デジタル・スタンダード
Hironori @hironori_yan
17
 Hubsのカスタマイズ（フロントエンド＆バックエンド）
 TDPT関連
slideshare.net/hironroinakae
これまでの登壇実績
お問い合わせは info@digital-standard.com 迄、
宜しくお願い致します。
好きな言語
 日によって変わる・・・

18. 正社員募集：SE/プログラマー
18
ご興味ある方はinfo@digital-standard.com、あるいはDMにて
ご連絡をお願い致します。
 技術や仕様への好奇心・探求心
 言語を問わずとにかくたくさんプログラミングしたい方
 案件例
 勤務地：大阪 梅田ゲートタワービル
 iOS用アプリ「TDPT」の拡張サービス開発
 Hubsのカスタマイズ（フロントエンド＆バックエンド）
 各種大学研究用アプリケーション
 各種業務アプリケーション
 iOS/Androidアプリ
 Windowsアプリケーション、クラウド（AWS/Azure）など他多数

19. 2021/11/2
その他応用編2：AR化

20. 2021/11/2
その他応用編2：MMDとコラボ
MMDの
・音楽
・アバターモーション
・カメラモーション
を利用して、ブラウザ上でリッチなダンス演出
利用例
①アバターのみVRMアバターに差し替える
②MMDにVRMアバターを追加読み込みして、MMDのアバターと一緒に踊る
https://takahirox.github.io/MMDLoader-
app/index.html#app_music_live