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
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
240
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
170
An introduction to Claude Code SDK
choplin
2
1k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
230
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
390
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
400
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
500
Delegating the chores of authenticating users to Keycloak
ahus1
0
190
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Bash Introduction
62gerente
613
210k
Music & Morning Musume
bryan
46
6.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Become a Pro
speakerdeck
PRO
29
5.4k
Documentation Writing (for coders)
carmenintech
72
4.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
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でやるのよさそう