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
440
Unity WebGL向けにjsでネイティブプラグイン書いた話
あるど
May 28, 2021
Tweet
Share
More Decks by あるど
See All by あるど
OSSをゆるっとやるだけでも 楽しいなって話
mizotake
2
3.1k
手軽なトラッキング技術で遊んでみた
mizotake
0
2.7k
GitHub_Actionsをセルフホストランナーで導入する
mizotake
0
2.9k
Kotlin/Native With Unity
mizotake
1
230
Unity開発でCI/CDを使おうと思った時
mizotake
0
1.1k
Other Decks in Technology
See All in Technology
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
Lambda10周年!Lambdaは何をもたらしたか
smt7174
2
110
Lexical Analysis
shigashiyama
1
150
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
150
AIチャットボット開発への生成AI活用
ryomrt
0
170
iOSチームとAndroidチームでブランチ運用が違ったので整理してます
sansantech
PRO
0
130
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
500
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
750
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
120
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Ruby is Unlike a Banana
tanoku
97
11k
Thoughts on Productivity
jonyablonski
67
4.3k
How to Ace a Technical Interview
jacobian
276
23k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
120
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
What's in a price? How to price your products and services
michaelherold
243
12k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Agile that works and the tools we love
rasmusluckow
327
21k
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でやるのよさそう