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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
あるど
May 28, 2021
Technology
0
500
Unity WebGL向けにjsでネイティブプラグイン書いた話
あるど
May 28, 2021
Tweet
Share
More Decks by あるど
See All by あるど
OSSをゆるっとやるだけでも 楽しいなって話
mizotake
2
3.9k
手軽なトラッキング技術で遊んでみた
mizotake
0
3.5k
GitHub_Actionsをセルフホストランナーで導入する
mizotake
0
3.7k
Kotlin/Native With Unity
mizotake
1
280
Unity開発でCI/CDを使おうと思った時
mizotake
0
1.2k
Other Decks in Technology
See All in Technology
Claude Codeと駆け抜ける 情報収集と実践録
sontixyou
2
1.2k
「使いにくい」も「運用疲れ」も卒業する UIデザイナーとエンジニアが創る持続可能な内製開発
nrinetcom
PRO
1
760
2026年のAIエージェント構築はどうなる?
minorun365
12
2.9k
Devinを導入したら予想外の人たちに好評だった
tomuro
0
530
2026-02-25 Tokyo dbt meetup プロダクトと融合したCI/CD で実現する、堅牢なデータパイプラインの作り方
y_ken
0
150
三菱UFJ銀行におけるエンタープライズAI駆動開発のリアル / Enterprise AI_Driven Development at MUFG Bank: The Real Story
muit
10
20k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
5
18k
男(監査)はつらいよ - Policy as CodeからAIエージェントへ
ken5scal
4
650
Master Dataグループ紹介資料
sansan33
PRO
1
4.4k
LLM活用の壁を超える:リクルートR&Dの戦略と打ち手
recruitengineers
PRO
1
170
20260222ねこIoTLT ねこIoTLTをふりかえる
poropinai1966
0
310
Databricks (と気合い)で頑張るAI Agent 運用
kameitomohiro
0
340
Featured
See All Featured
Navigating Team Friction
lara
192
16k
Optimizing for Happiness
mojombo
379
71k
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
64
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
270
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.3k
Rails Girls Zürich Keynote
gr2m
96
14k
Navigating Weather and Climate Data
rabernat
0
130
A Tale of Four Properties
chriscoyier
162
24k
The Curse of the Amulet
leimatthew05
1
9.3k
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
1
1.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
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でやるのよさそう