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
Unity WebGL向けにjsでネイティブプラグイン書いた話
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
あるど
May 28, 2021
Technology
0
490
Unity WebGL向けにjsでネイティブプラグイン書いた話
あるど
May 28, 2021
Tweet
Share
More Decks by あるど
See All by あるど
OSSをゆるっとやるだけでも 楽しいなって話
mizotake
2
3.9k
手軽なトラッキング技術で遊んでみた
mizotake
0
3.5k
GitHub_Actionsをセルフホストランナーで導入する
mizotake
0
3.6k
Kotlin/Native With Unity
mizotake
1
270
Unity開発でCI/CDを使おうと思った時
mizotake
0
1.2k
Other Decks in Technology
See All in Technology
VRTと真面目に向き合う
hiragram
1
510
Amazon ElastiCacheのコスト最適化を考える/Elasticache Cost Optimization
quiver
0
300
新規事業における「一部だけどコア」な AI精度改善の優先順位づけ
zerebom
0
420
SREじゃなかった僕らがenablingを通じて「SRE実践者」になるまでのリアル / SRE Kaigi 2026
aeonpeople
1
120
Mosaic AI Gatewayでコーディングエージェントを配るための運用Tips / JEDAI 2026 新春 Meetup! AIコーディング特集
genda
0
130
AIとともに歩む情報セキュリティ / Information Security with AI
kanny
4
2.8k
月間数億レコードのアクセスログ基盤を無停止・低コストでAWS移行せよ!アプリケーションエンジニアのSREチャレンジ💪
miyamu
0
220
2人で作ったAIダッシュボードが、開発組織の次の一手を照らした話― Cursor × SpecKit × 可視化の実践 ― Qiita AI Summit
noalisaai
1
300
ファシリテーション勉強中 その場に何が求められるかを考えるようになるまで / 20260123 Naoki Takahashi
shift_evolve
PRO
3
410
「AIでできますか?」から「Agentを作ってみました」へ ~「理論上わかる」と「やってみる」の隔たりを埋める方法
applism118
13
8.5k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
13k
re:Inventで出たインフラエンジニアが嬉しかったアップデート
nagisa53
4
230
Featured
See All Featured
Test your architecture with Archunit
thirion
1
2.1k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
86
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
230
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
GraphQLとの向き合い方2022年版
quramy
50
14k
How to train your dragon (web standard)
notwaldorf
97
6.5k
What does AI have to do with Human Rights?
axbom
PRO
0
2k
HDC tutorial
michielstock
1
330
It's Worth the Effort
3n
188
29k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.6k
Transcript
Unity WebGL向けにjsで ネイティブプラグイン書いた話
UnityでWeb周り触ったこと ないので触ってみたい
ネタで作ったサイト
PartyParrotVRM
PartyParrot
そのVRM版
PartyParrotVRM
というgifが作れるサイト
どうやって作ったか
要素 - gifダウンロード - 顔のトラッキング - VRM読み込み
要素 - gifダウンロード - UnityのWebGLビルドでgif撮影/保存する - 顔のトラッキング - tensorflow facemesh
(当時) → mediapipe facemesh (現行) - VRM読み込み - UnityのWebGLで作ったサイトにドラッグ&ドロップでVRMを出現させる
要素 - gifダウンロード - UnityのWebGLビルドでgif撮影/保存する - 顔のトラッキング - tensorflow facemesh
(当時) → mediapipe facemesh (現行) - VRM読み込み - UnityのWebGLで作ったサイトにドラッグ&ドロップでVRMを出現させる
WebGL対応ライブラリ探すのが めんどくさかったのでjs書いてました
顔のトラッキング
基本画面が目に毒
顔のトラッキング - tensorflow/tfjs-models (一部アーカイブされてmediapipeへ移行) - サンプルコードを少し書くだけで簡単に顔のパーツ取得可能 - VRMへの適応はVRMBlendShapeProxyを使用
https://github.com/tensorflow/tfjs-models/blob/master/facemesh/mesh_map.jpg
顔のトラッキング - 画像を拡大すると顔パーツごとに配列のindexが確認できる - 顔パーツの配列で位置などが返ってくる - 顔パーツの位置はわかるので一定距離近づいたら瞬きなどをVRMへ適応
簡易的なトラッキングでも 案外それっぽく見える
jsネイティブプラグインとの やりとりで気づいたこと
ネイティブプラグインとのやり取り - jsの関数を定義、必要な引数を用意する - C#側で呼び出したい関数の定義、引数とかをネイティブとそろえる - ネイティブからコールバックなどをSendMessageで受け取る - GameObject名や関数を指定する必要がある -
引数に入れて設定しても良いが引数が多くなって増減がめんどくさい
ネイティブプラグインとのやり取り - jsの関数を定義、引数を文字列のみにする - C#側で呼び出したい関数の定義、引数を文字列のみにする - C#で呼び出す際、渡したいパラメーターをjsonにして関数に渡す - js側でjsonをparseして取り扱う(SendMessageの時も同様) -
引数が増減しても受け取る関数を変えなくてよくなる - 言語の違いによるデータ型を合わせる意識が必要ない
ネイティブプラグイン書く時の 選択肢として結構よさそう
まとめ - 基本画面は落ち着いた画面にしておけばよかった - ネタもの作るだけでも学びが案外ある - 簡易トラッキングでも案外それっぽくなって楽しい - ネイティブプラグインのやり取りをjsonでやるのよさそう