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
360
Unity WebGL向けにjsでネイティブプラグイン書いた話
あるど
May 28, 2021
Tweet
Share
More Decks by あるど
See All by あるど
OSSをゆるっとやるだけでも 楽しいなって話
mizotake
2
2.2k
手軽なトラッキング技術で遊んでみた
mizotake
0
2k
GitHub_Actionsをセルフホストランナーで導入する
mizotake
0
2.2k
Kotlin/Native With Unity
mizotake
1
200
Unity開発でCI/CDを使おうと思った時
mizotake
0
1k
Other Decks in Technology
See All in Technology
サービスメッシュ環境における OpenTelemetry 活用 / OpenTelemetry in Service Mesh
k6s4i53rx
2
810
Ask-LLM論文紹介: How to Train Data-Efficient LLMs
s_ota
0
110
大規模データとの戦い方
knih
1
150
8週連続ウェビナー_イチから学ぶFivetran
cmsuzu
0
160
Kubeflow Pipelines v2 で変わる機械学習パイプライン開発
asei
4
330
マイクロサービス環境におけるDB戦略 in DMMプラットフォーム
pospome
11
3k
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
210
LLMプロダクト事業の立ち上げにおける挑戦
layerx
PRO
7
1.4k
バッチ処理のSLOをどう設計するか
rynsuke
7
540
Getting started with controlling LEGO using Swift
hcrane
0
120
オブジェクト指向CSSが叶えたかったことと、CSSのいま / The aims of Object-oriented CSS and the current state of CSS usage
shinkufencer
11
3.2k
技術広報として2023年度に頑張ったこと / What we did well in FY2023 as a DevRel
pauli
5
450
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
The Language of Interfaces
destraynor
150
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
4 Signs Your Business is Dying
shpigford
174
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Design by the Numbers
sachag
274
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
Being A Developer After 40
akosma
56
580k
Raft: Consensus for Rubyists
vanstee
130
6.2k
GraphQLとの向き合い方2022年版
quramy
28
12k
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でやるのよさそう