軽率にBabylon.jsを C#で使う技術 にー兄さん(@ninisan_drumth) Babylon.js 勉強会 LT会

にー兄さん(@ninisan_drumath) ソフトウェアエンジニア 株式会社ホロラボ / Iwaken Lab. / Babylon.js勉強会 お仕事ではUnityを使ったxR開発がメイン 趣味ではBabylon.jsをよく触る 唐突な うちの猫たち→

本日の話 Babylon.js

本日の話 BabylonCS

本日の話 BabylonCS JavaScriptではなくC#で Babylon.js開発ができる 仕組みを考えてみました （Babylonよりも.NETの話が多いかも......）

アジェンダ - こんなものを作りました　～BabylonCSの話～ - BabylonCSを支える技術 - BabylonCSの意義と今後の話 - おわりに

こんなものを作りました ～BabylonCSの話～

さっそくデモタイム！

改めての概要 BabylonCSはBabylon.jsをC#で書く仕組みを考えるプロジェクト デモ・サンプルコードがある 実は1月頭にノリで始めた（作業ログ）

シンプルなBabylon.jsコード（TypeScript） import { Engine, MeshBuilder, Scene } from "@babylonjs/core"; const main = () => { const renderCanvas = document.querySelector("#renderCanvas"); if (!renderCanvas) { return; } const engine = new Engine(renderCanvas); const scene = new Scene(engine); scene.createDefaultCameraOrLight(true, true, true); MeshBuilder.CreateBox("box", { size: 0.2 }); window.addEventListener("resize", () => engine.resize()); engine.runRenderLoop(() => scene.render()); }; main(); canvasを取得し、 engineやsceneを初期化して サイズ0.2のCubeを表示する

BabylonCSを使った場合（C#） using System; using BabylonCS; if (!Document.TryGetRenderCanvas("renderCanvas", out var renderCanvas)) { Console.Error.WriteLine("canvas not found"); return; } var engine = new Engine(renderCanvas, true); var scene = new Scene(engine); scene.CreateDefaultCameraOrLight(true, true, true); MeshBuilder.CreateBox("box", 0.2f); engine.SetupResize(); engine.RunRenderLoop(() => scene.Render()); canvasを取得し、 engineやsceneを初期化して サイズ0.2のCubeを表示する

GitHubで公開しています https://github.com/drumath2237/BabylonCS

BabylonCSを支える技術

開発環境 - JS Side - Babylon.js 6.32.1 - TypeScript 5 - Vite 5 - C# Side - .NET 8.0.100 (C#12) - JS Interop on WASMが使える.NET 7以上

.NET×WebフロントといえばBlazor！ですが...... - BlazorはC#で使えるWebフロントエンドフレームワーク - コンポーネントベースでUIを定義できる - ASP.NET Coreを使ったServer Sider Renderingや WebAssemblyベースのClient Sider Renderingをサポート - .NET 7からBlazorの基盤であるWebAsseblyビルドが独立した - JS Interopにより既存のWebアプリに.NETを組み込むことも可能

JS Interop（JavaScript相互運用）について - JSコードから.NETのメソッドを呼び出す - .NETコードからJS関数呼び出す

JSExportのイメージ C# JavaScript JSからC#のメソッドを呼び出す

JSImportのイメージ C# JavaScript C#からJSの関数を呼び出す

JS Interopの動作 WASM化された.NET Runtime上で WASM化されたC#コードが JSと連携して動作するような関係 開発者目線ではC#とJSが 直接対話しているように見える

BabylonCSのプロジェクト構成 / ├─ BabylonCS │ ├─ BabylonCS ← InteropをラップしたC# API │ ├─ BabylonCS.Interop ← JS Interop部分 │ └─ Playground ← 検証用プロジェクト │ └─ BabylonCS.JS ├─ lib ← TypeScript API └─ src ← 検証用コード

プロジェクト構成図 TypeScript APIは Viteのlib modeで開発 ビルドしたJS Moduleを dotnet.jsのAPIで C#側へ公開 C#でInteropコードを ラップした Babylon.js風APIを提供

BabylonCSの意義と今後の話

Babylon.jsコミュニティにはUnity経験者が多い - もともとUnityやUEをやっている人が 興味ではじめるケースが結構多い（自分もそう） - Web上でリアルタイム3DCGやXR体験を扱う需要の高まり？

イチからWebやNode.jsの勉強するのは大変 - Web出身ではない人にとっての敷居の高さ - Babylon.jsはがっつりJS/TSのコードを書くので 慣れていないと結構大変 - Webも3DCGも知識が必要だから、とっつきにくい - せっかくいいライブラリなのにもったいない！！ - 慣れているC#で書けないかと思ったのが発端

今後やりたいこと - パッケージ公開 - 機能追加 - アセンブリ構成の見直し - C#実装の自動生成

おわりに

まとめと感想 - C#でBabylon.js開発ができないか試行してみた - JS Interop on WASMのパワーによって動く気がした - Babylon.js入門の敷居を低くできないかと考えている - あまり触ったことのない技術を触れてたのしい

参考 Use .NET from any JavaScript app in .NET 7 https://devblogs.microsoft.com/dotnet/use-net-7-from-any-javascript-app-in-net-7/ .NET 7の.NET JavaScript interop on WebAssemblyを試す https://qiita.com/yamachu/items/f070ef516c6792ac7e67 ASP.NET Core Blazor JavaScript interoperability (JS interop) https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-8.0 ASP.NET Core Blazor で .NET メソッドから JavaScript 関数を呼び出す https://learn.microsoft.com/ja-jp/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=asp netcore-5.0 JavaScript から .NET を実行する https://learn.microsoft.com/ja-jp/aspnet/core/client-side/dotnet-interop?view=aspnetcore-8.0 Configuring and hosting .NET WebAssembly applications https://github.com/dotnet/runtime/blob/main/src/mono/wasm/features.md