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
470
Unity WebGL向けにjsでネイティブプラグイン書いた話
あるど
May 28, 2021
Tweet
Share
More Decks by あるど
See All by あるど
OSSをゆるっとやるだけでも 楽しいなって話
mizotake
2
3.5k
手軽なトラッキング技術で遊んでみた
mizotake
0
3.1k
GitHub_Actionsをセルフホストランナーで導入する
mizotake
0
3.3k
Kotlin/Native With Unity
mizotake
1
250
Unity開発でCI/CDを使おうと思った時
mizotake
0
1.2k
Other Decks in Technology
See All in Technology
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
Lazy application authentication with Tailscale
bluehatbrit
0
210
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
9
4.3k
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
250
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
270
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
190
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
250
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
140
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
120
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
250
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Site-Speed That Sticks
csswizardry
10
690
Visualization
eitanlees
146
16k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Code Review Best Practice
trishagee
69
18k
Gamification - CAS2011
davidbonilla
81
5.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Designing Experiences People Love
moore
142
24k
Music & Morning Musume
bryan
46
6.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
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でやるのよさそう