Unity WebGL向けにjsでネイティブプラグイン書いた話

1. Unity WebGL向けにjsで ネイティブプラグイン書いた話
2. UnityでWeb周り触ったこと ないので触ってみたい
3. ネタで作ったサイト
4. PartyParrotVRM
5. PartyParrot
6. そのVRM版
7. PartyParrotVRM
8. というgifが作れるサイト
9. どうやって作ったか
10. 要素 - gifダウンロード - 顔のトラッキング - VRM読み込み
11. 要素 - gifダウンロード - UnityのWebGLビルドでgif撮影/保存する - 顔のトラッキング - tensorflow facemesh (当時) → mediapipe facemesh (現行) - VRM読み込み - UnityのWebGLで作ったサイトにドラッグ&ドロップでVRMを出現させる
12. 要素 - gifダウンロード - UnityのWebGLビルドでgif撮影/保存する - 顔のトラッキング - tensorflow facemesh (当時) → mediapipe facemesh (現行) - VRM読み込み - UnityのWebGLで作ったサイトにドラッグ&ドロップでVRMを出現させる
13. WebGL対応ライブラリ探すのが めんどくさかったのでjs書いてました
14. 顔のトラッキング
15. 基本画面が目に毒
16. 顔のトラッキング - tensorflow/tfjs-models (一部アーカイブされてmediapipeへ移行) - サンプルコードを少し書くだけで簡単に顔のパーツ取得可能 - VRMへの適応はVRMBlendShapeProxyを使用
17. https://github.com/tensorflow/tfjs-models/blob/master/facemesh/mesh_map.jpg
18. 顔のトラッキング - 画像を拡大すると顔パーツごとに配列のindexが確認できる - 顔パーツの配列で位置などが返ってくる - 顔パーツの位置はわかるので一定距離近づいたら瞬きなどをVRMへ適応
19. 簡易的なトラッキングでも 案外それっぽく見える
20. jsネイティブプラグインとの やりとりで気づいたこと
21. ネイティブプラグインとのやり取り - jsの関数を定義、必要な引数を用意する - C#側で呼び出したい関数の定義、引数とかをネイティブとそろえる - ネイティブからコールバックなどをSendMessageで受け取る - GameObject名や関数を指定する必要がある - 引数に入れて設定しても良いが引数が多くなって増減がめんどくさい
22. ネイティブプラグインとのやり取り - jsの関数を定義、引数を文字列のみにする - C#側で呼び出したい関数の定義、引数を文字列のみにする - C#で呼び出す際、渡したいパラメーターをjsonにして関数に渡す - js側でjsonをparseして取り扱う(SendMessageの時も同様) - 引数が増減しても受け取る関数を変えなくてよくなる - 言語の違いによるデータ型を合わせる意識が必要ない
23. ネイティブプラグイン書く時の 選択肢として結構よさそう
24. まとめ - 基本画面は落ち着いた画面にしておけばよかった - ネタもの作るだけでも学びが案外ある - 簡易トラッキングでも案外それっぽくなって楽しい - ネイティブプラグインのやり取りをjsonでやるのよさそう