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
480
Unity WebGL向けにjsでネイティブプラグイン書いた話
あるど
May 28, 2021
Tweet
Share
More Decks by あるど
See All by あるど
OSSをゆるっとやるだけでも 楽しいなって話
mizotake
2
3.7k
手軽なトラッキング技術で遊んでみた
mizotake
0
3.3k
GitHub_Actionsをセルフホストランナーで導入する
mizotake
0
3.4k
Kotlin/Native With Unity
mizotake
1
260
Unity開発でCI/CDを使おうと思った時
mizotake
0
1.2k
Other Decks in Technology
See All in Technology
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
910
AWSにおけるTrend Vision Oneの効果について
shimak
0
120
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
130
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
140
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
980
バイブコーディングと継続的デプロイメント
nwiizo
2
420
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
170
o11yで育てる、強い内製開発組織
_awache
3
120
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
100
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
330
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
77k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2.1k
Context Engineering - Making Every Token Count
addyosmani
5
180
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Why Our Code Smells
bkeepers
PRO
339
57k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
GitHub's CSS Performance
jonrohan
1032
460k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Making Projects Easy
brettharned
119
6.4k
Building an army of robots
kneath
306
46k
Speed Design
sergeychernyshev
32
1.1k
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でやるのよさそう