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
あるど
May 28, 2021
Technology
0
450
Unity WebGL向けにjsでネイティブプラグイン書いた話
あるど
May 28, 2021
Tweet
Share
More Decks by あるど
See All by あるど
OSSをゆるっとやるだけでも 楽しいなって話
mizotake
2
3.2k
手軽なトラッキング技術で遊んでみた
mizotake
0
2.9k
GitHub_Actionsをセルフホストランナーで導入する
mizotake
0
3k
Kotlin/Native With Unity
mizotake
1
240
Unity開発でCI/CDを使おうと思った時
mizotake
0
1.1k
Other Decks in Technology
See All in Technology
FastConnect の冗長性
ocise
1
9.6k
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
A better future with KSS
kneath
238
17k
Writing Fast Ruby
sferik
628
61k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Designing Experiences People Love
moore
139
23k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Automating Front-end Workflow
addyosmani
1367
200k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Music & Morning Musume
bryan
46
6.3k
Faster Mobile Websites
deanohume
306
31k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
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でやるのよさそう