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

UnityでWeb周り触ったことないので触ってみたい

ネタで作ったサイト

PartyParrotVRM

PartyParrot

そのVRM版

PartyParrotVRM

というgifが作れるサイト

どうやって作ったか

要素 - gifダウンロード - 顔のトラッキング - VRM読み込み

要素 - gifダウンロード - UnityのWebGLビルドでgif撮影/保存する - 顔のトラッキング - tensorﬂow facemesh
(当時) → mediapipe facemesh (現行) - VRM読み込み - UnityのWebGLで作ったサイトにドラッグ&ドロップでVRMを出現させる

WebGL対応ライブラリ探すのがめんどくさかったのでjs書いてました

顔のトラッキング

基本画面が目に毒

顔のトラッキング - tensorﬂow/tfjs-models (一部アーカイブされてmediapipeへ移行) - サンプルコードを少し書くだけで簡単に顔のパーツ取得可能 - VRMへの適応はVRMBlendShapeProxyを使用

https://github.com/tensorﬂow/tfjs-models/blob/master/facemesh/mesh_map.jpg

顔のトラッキング - 画像を拡大すると顔パーツごとに配列のindexが確認できる - 顔パーツの配列で位置などが返ってくる - 顔パーツの位置はわかるので一定距離近づいたら瞬きなどをVRMへ適応

簡易的なトラッキングでも案外それっぽく見える

jsネイティブプラグインとのやりとりで気づいたこと

ネイティブプラグインとのやり取り - jsの関数を定義、必要な引数を用意する - C#側で呼び出したい関数の定義、引数とかをネイティブとそろえる - ネイティブからコールバックなどをSendMessageで受け取る - GameObject名や関数を指定する必要がある -
引数に入れて設定しても良いが引数が多くなって増減がめんどくさい

ネイティブプラグインとのやり取り - jsの関数を定義、引数を文字列のみにする - C#側で呼び出したい関数の定義、引数を文字列のみにする - C#で呼び出す際、渡したいパラメーターをjsonにして関数に渡す - js側でjsonをparseして取り扱う(SendMessageの時も同様) -
引数が増減しても受け取る関数を変えなくてよくなる - 言語の違いによるデータ型を合わせる意識が必要ない

ネイティブプラグイン書く時の選択肢として結構よさそう

まとめ - 基本画面は落ち着いた画面にしておけばよかった - ネタもの作るだけでも学びが案外ある - 簡易トラッキングでも案外それっぽくなって楽しい - ネイティブプラグインのやり取りをjsonでやるのよさそう

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

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

あるど

More Decks by あるど

Other Decks in Technology

Featured

Transcript