TypeScriptで実現するUnity WebGLネイティブプラグイン開発の改善

2.1K Views

October 25, 24

#ホロテク24

スライド概要

2024/10/11に実施されたHololab Conference 2024のセッションスライドです。

■セッションアーカイブはこちら

ーーー
■公式HP
https://hololab.co.jp/

■公式Twitter
https://twitter.com/HoloLabInc

ホロラボ

@HoloLab

スライド一覧

ホロラボです Unityを使用したHoloLensのアプリ開発を中心にしています。最近では建設業でのBIMデータ、製造業でのCAD データ、空間の3Dスキャン(点群データやメッシュデータ)も扱っています。物理世界とデジタル世界をどのように連携するか。ということを日々考えています。

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 1.49MB)

関連スライド

3DモデルとPower BIの悪魔合体「建物みえるくん」をつくってみた！

holoconf23 bim

ホロラボ 33.1K

トヨタのxR活用事例ご紹介～ホロラボとの開発秘話を中心に (ホロラボカンファレンス 2022 トヨタ自動車株式会社栢野様発表スライド)

hololens mixed reality holoconf22

ホロラボ 31.1K

BIMから3次元モデルを消してみたら、意外に便利でした

holoconf23 bim

ホロラボ 29.4K

三菱重工業との取り組み事例　～HoloLensなどを活用した現場向けコミュニケーションツールの開発～

holoconf22 hololens mixed reality

ホロラボ 17.8K

ホロラボカンファレンス 2022 基調講演

hololens mixed reality holoconf22

ホロラボ 13.4K

⽵中⼯務店の“建設DX”と “open BIM”と“xR” (ホロラボカンファレンス 2022 株式会社竹中工務店橋口様、川上様発表スライド)

hololens mixed reality holoconf22

ホロラボ 13.3K

各ページのテキスト

ViteとTypeScriptで実現する Unity WebGLネイティブプラグイン開発の改善 HoloLab Tech Showcase 2024 株式会社ホロラボ堤海斗 1

Unity WebGLネイティブプラグインとは WebGLビルドされたUnityプロジェクトでブラウザから使えるJavaScriptコードを呼び出すしくみ WebブラウザやサードパーティのJavaScript SDKなどが扱える使用例） FirebaseをWebGLで使う（Unity SDKはWebGLサポートされていない）ファイル選択やWebSocketなどそのままでは動かない機能 © 2024 HoloLab Inc. All rights reserved 7

[beta]

プラグインの作り方
.jslib ファイルの中にJavaScript関数を記述
mergeInto(LibraryManager.library, {
HelloString: function (strPtr) {
window.alert(UTF8ToString(strPtr));
},
});

C#からDLL呼び出しにより実行
class WebGLPlugin{
[DllImport("__Internal")]
private static extern void HelloString(string str);
}

© 2024 HoloLab Inc. All rights reserved

8

https://docs.unity3d.com/ja/2022.3/Manual/IL2CPP.html

10.

11.

12.

コードのモジュール化が難しい import/requireによる参照が（容易に）できない -> 結果、巨大なjslibが出来上がってしまうメンテナンス難易度が上がる開発体験の悪さ特殊な環境ゆえにエディタによるコード補完がうまく効かない（JS由来の部分もある）型検査がうまくできないのでビルドして初めてわかるエラーも多いしかし！jslib変更後のビルドは時間がかかる © 2024 HoloLab Inc. All rights reserved 12

13.

14.

JS外部化：Emscriptenからの解放特殊なJSコードになるのはEmscriptenへの依存が原因 -> JS外部化して自前でビルドしよう！ Unity・Emscripten非依存になるため開発環境の選択肢が広がる -> TypeScript / Vite / pnpm / Biomeなどモダンツールを導入しよう © 2024 HoloLab Inc. All rights reserved 14

15.

16.

17.

C#とTypeScriptの処理をつなげる C#からは名前によるメソッドの参照が必要（DllImportで指定） TypeScriptからはEmscripten独自のAPIコールが必要（UTF8ToStringなど） jslibが二つをつなぐ役割をすることでグローバルな名前空間を介してアクセスするフローを実装(jslib→) © 2024 HoloLab Inc. All rights reserved 17

18.

19.

改善によって得られた恩恵動作確認のイテレーションが高速化 jslibを変更しないのでビルドキャッシュが効いてビルドが爆速に一部はUnityを介さずWebフロント単体で動作確認できる TypeScriptやViteによって堅牢で高速に、モジュラリティのあるコードが書けるようにモダンWebフロント開発ツールを活用できるこの方法の課題 main.jsを別途ビルドする必要があるサードパーティをバンドルするとmain.jsが肥大化する main.jsをコミットするとコンフリクトの原因に（解決も困難） © 2024 HoloLab Inc. All rights reserved 19

20.

21.

まとめ WebGLネイティブプラグインはjslibを作成しEmscriptenを通してビルドされる特殊な環境制約により開発体験が悪いことがある JS外部化・TypeScript化によって解決を試みた開発体験が向上したのと同時にデメリットもあった自分なりに開発体験向上を目指して試行中の段階です。もしご参考になりましたら幸いです。 © 2024 HoloLab Inc. All rights reserved 21

22.

参考文献 [Unity]WebGLのプラグインをモダンに書く方法 https://qiita.com/yaegaki/items/71cdebc7798784aa3464 とても参考になりました Async/await with jslib plugin?(Unity Discussions) https://discussions.unity.com/t/async-await-with-jslib-plugin/877967 Unity WebGL C# <=> JS (jslib) https://qiita.com/gtk2k/items/9c2679d612e9b5ac7b2e WebGL: ブラウザースクリプトとの相互作用 https://docs.unity3d.com/ja/2022.3/Manual/webglinteractingwithbrowserscripting.html © 2024 HoloLab Inc. All rights reserved 22

TypeScriptで実現するUnity WebGLネイティブプラグイン開発の改善

ホロラボ

関連スライド

3DモデルとPower BIの悪魔合体 「建物みえるくん」をつくってみた！

トヨタのxR活用事例ご紹介 ～ ホロラボとの開発秘話を中心に (ホロラボカンファレンス 2022 トヨタ自動車株式会社 栢野様 発表スライド)

BIMから3次元モデルを消してみたら、意外に便利でした

三菱重工業との取り組み事例 ～HoloLensなどを活用した現場向けコミュニケーションツールの開発～

ホロラボカンファレンス 2022 基調講演

⽵中⼯務店の“建設DX”と “open BIM”と“xR” (ホロラボカンファレンス 2022 株式会社竹中工務店 橋口様、川上様 発表スライド)

各ページのテキスト

3DモデルとPower BIの悪魔合体「建物みえるくん」をつくってみた！

トヨタのxR活用事例ご紹介～ホロラボとの開発秘話を中心に (ホロラボカンファレンス 2022 トヨタ自動車株式会社栢野様発表スライド)

三菱重工業との取り組み事例　～HoloLensなどを活用した現場向けコミュニケーションツールの開発～

⽵中⼯務店の“建設DX”と “open BIM”と“xR” (ホロラボカンファレンス 2022 株式会社竹中工務店橋口様、川上様発表スライド)