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
460
Unity WebGL向けにjsでネイティブプラグイン書いた話
あるど
May 28, 2021
Tweet
Share
More Decks by あるど
See All by あるど
OSSをゆるっとやるだけでも 楽しいなって話
mizotake
2
3.4k
手軽なトラッキング技術で遊んでみた
mizotake
0
3.1k
GitHub_Actionsをセルフホストランナーで導入する
mizotake
0
3.2k
Kotlin/Native With Unity
mizotake
1
250
Unity開発でCI/CDを使おうと思った時
mizotake
0
1.1k
Other Decks in Technology
See All in Technology
ローカル環境でAIを動かそう!
falken
PRO
1
170
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
360k
ゴリラ.vim #36 ~ Vim x SNS ~ スポンサーセッション
yasunori0418
1
360
ソフトウェアは捨てやすく作ろう/Let's make software easy to discard
sanogemaru
10
5.8k
GitHub Copilot Use Cases at ZOZO
horie1024
0
110
面接を通過するためにやってて良かったこと3選
sansantech
PRO
0
140
Flutterアプリを⾃然⾔語で操作する
yukisakai1225
0
140
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.2k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
38k
テストを実施する前に考えるべきテストの話 / Thinking About Testing Before You Test
nihonbuson
PRO
15
2.1k
ソフトウェアテストのAI活用_ver1.10
fumisuke
0
240
MCP Clientを活用するための設計と実装上の工夫
yudai00
1
810
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
The Cult of Friendly URLs
andyhume
78
6.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Embracing the Ebb and Flow
colly
85
4.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
850
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Bash Introduction
62gerente
614
210k
GraphQLとの向き合い方2022年版
quramy
46
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
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でやるのよさそう