Upgrade to Pro — share decks privately, control downloads, hide ads and more …

軽率にBabylon.jsを C#で使う技術 / using-babylonjs-with-c...

軽率にBabylon.jsを C#で使う技術 / using-babylonjs-with-csharp

Babylon.js 勉強会 LT会で登壇した資料です

にー兄さん

January 24, 2024
Tweet

More Decks by にー兄さん

Other Decks in Programming

Transcript

  1. シンプルなBabylon.jsコード(TypeScript) import { Engine, MeshBuilder, Scene } from "@babylonjs/core"; const

    main = () => { const renderCanvas = document.querySelector<HTMLCanvasElement>("#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を表示する
  2. 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を表示する
  3. 開発環境 - 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以上
  4. .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を組み込むことも可能
  5. BabylonCSのプロジェクト構成 / ├─ BabylonCS │ ├─ BabylonCS ← InteropをラップしたC# API

    │ ├─ BabylonCS.Interop ← JS Interop部分 │ └─ Playground ← 検証用プロジェクト │ └─ BabylonCS.JS ├─ lib ← TypeScript API └─ src ← 検証用コード
  6. 参考 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