{"id":37043621,"url":"https://github.com/alexnek/babylonblazor","last_synced_at":"2026-01-14T05:01:07.643Z","repository":{"id":53917182,"uuid":"380507257","full_name":"AlexNek/BabylonBlazor","owner":"AlexNek","description":"This library packages the well-known Java Script 3D library [Babylon.js](https://www.babylonjs.com/) into a Razor component that can be used in a C# Blazor project. .NET 8.0 required for the new release","archived":false,"fork":false,"pushed_at":"2024-12-21T11:49:43.000Z","size":2667,"stargazers_count":81,"open_issues_count":0,"forks_count":19,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-09-25T19:55:04.789Z","etag":null,"topics":["3d","blazor","csharp","net50","web"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlexNek.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-06-26T13:23:24.000Z","updated_at":"2025-09-09T00:53:03.000Z","dependencies_parsed_at":"2024-04-10T01:49:47.449Z","dependency_job_id":"a90a3485-4ac3-4a50-b395-0e870fa375a7","html_url":"https://github.com/AlexNek/BabylonBlazor","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/AlexNek/BabylonBlazor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexNek%2FBabylonBlazor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexNek%2FBabylonBlazor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexNek%2FBabylonBlazor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexNek%2FBabylonBlazor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlexNek","download_url":"https://codeload.github.com/AlexNek/BabylonBlazor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexNek%2FBabylonBlazor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28410078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T01:52:23.358Z","status":"online","status_checked_at":"2026-01-14T02:00:06.678Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","blazor","csharp","net50","web"],"created_at":"2026-01-14T05:01:06.495Z","updated_at":"2026-01-14T05:01:07.633Z","avatar_url":"https://github.com/AlexNek.png","language":"C#","readme":"# Babylon.Blazor \n[![Build status](https://ci.appveyor.com/api/projects/status/c6hl19cdakmoxjiq?svg=true)](https://ci.appveyor.com/project/AlexNek/babylonblazor) [![Publish Status](https://img.shields.io/github/workflow/status/AlexNek/BabylonBlazor/Publish?label=publish)](https://www.nuget.org/packages/BaBylon.Blazor/)  [![NuGet Status](https://img.shields.io/nuget/v/Babylon.Blazor)](https://www.nuget.org/packages/Babylon.Blazor/)\n\nThis library packages the well-known 3D library [Babylon.js](https://www.babylonjs.com/) into a Razor component that can be used in a C# Blazor project.\nThe library is intended to use for creation of molecules visualization and used limited API of Babylon library.  \nIt is possible to compare different types of hosting models:\n\n- [Demo application .NET 5.0 Wasm](https://BabylonBlazorApp202208.azurewebsites.net) - Demo application to show different parts of the library.  \n- [Demo application .NET 8.0 SSR](https://babylonblazorappnet80.azurewebsites.net) - Demo application to show different parts of the library. *Server side prerendering mode.*  \n- [Demo application .NET 8.0 Wasm](https://babylonblazorwasmnet80.azurewebsites.net) - Demo application to show different parts of the library.  \n\n[Pubchem Viewer](https://pubchemviewer.azurewebsites.net) - Demo application using library reference. Show chemical information from `pubchem.ncbi.nlm.nih.gov`\n\n\n## Getting Started\nYou can find the old version (.NET 5.0 and 6.0 compatible) on the branch [net50](https://github.com/AlexNek/BabylonBlazor/tree/net50) or use old nuget version\nNew version supports .NET 9.0 and I use Blazor Web App template with server prerendring for demo purposes.\n\n### Prerequisites\n\nTo create Blazor Apps, install the latest version of Visual Studio with the ASP.NET and web development workload.\nFor using .Net 9.0 you need at least Visual Studio 2022 17.12+.\nAnother alternative would be to use Visual Studio code. Click [here](https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started?view=aspnetcore-3.1\u0026tabs=visual-studio-code) for more information.\n\n\nLibrary used [IJSObjectReference](https://docs.microsoft.com/en-us/dotnet/api/microsoft.jsinterop.ijsobjectreference?view=dotnet-plat-ext-6.0)\n\n\n### Installing\n\nAfter you have created your Blazor project, you need to do the following steps:\n\n\n**Install the latest NuGet Package**\n\nUsing Package Manager\n```\nInstall-Package Babylon.Blazor\n```\n\nUsing .NET CLI\n```\ndotnet add package Babylon.Blazor\n```\n\nUsing MS VS Manage NuGet Packages search for `Babylon.Blazor`\n\nAdd reference to babylon js library. Add 2 lines (with babylonjs) into app.razor/index.html\nYou will also need to add a reference to babylonInterop.js.\n\n```html\n\u003cbody\u003e\n    \u003cRoutes /\u003e\n    \u003cscript src=\"https://preview.babylonjs.com/babylon.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"module\" src=\"_content/Babylon.Blazor/babylonInterop.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"_framework/blazor.web.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\nAdd `InstanceCreator` to **DI**\n*Server Part*\n```C#\n public class Program\n    {\n        public static async Task Main(string[] args)\n        {\n       ...\n           builder.Services.AddTransient\u003cInstanceCreatorBase\u003e(sp =\u003e new InstanceCreatorAsyncMode(sp.GetService\u003cIJSRuntime\u003e()));\n           var app = builder.Build(); \n        }\n    }\n```\n\u003e **Note** Server side support only `IJSObjectReference`\n\n*Client Part*\n```C#\nbuilder.Services.AddTransient\u003cInstanceCreatorBase\u003e(sp =\u003e new InstanceCreator(sp.GetService\u003cIJSRuntime\u003e()));\n\nawait builder.Build().RunAsync();\n\n```\n\nAdd Razor page and replace context to similar code\n```C#\n@page \"/test\"\n@using Babylon.Blazor.Chemical\n@rendermode InteractiveAuto\n\u003ch1\u003eWater\u003c/h1\u003e\n\n\u003cp\u003e Chemical formula of water is H\u003csub\u003e2\u003c/sub\u003eO\u003c/p\u003e\n\n\u003cdiv style=\"height: 600px;\"\u003e\n   \u003cBabylonCanvas CanvasId=\"Canvas1\" SceneData=@PanelData/\u003e\n\u003c/div\u003e\n\n@code {\n\n    ChemicalData PanelData { get; } = new ChemicalData();\n\n    async Task InitDataAsync()\n    {\n        // Fake await line\n        await Task.FromResult(1);\n\n\n        PanelData.Atoms.Add(new AtomDescription() { Name = \"O\", X = 2.5369, Y = -0.1550, Z = 0.0000 });\n        PanelData.Atoms.Add(new AtomDescription() { Name = \"H\", X = 3.0739, Y =  0.1550, Z = 0.0000 });\n        PanelData.Atoms.Add(new AtomDescription() { Name = \"H\", X = 2.0000, Y =  0.1550, Z = 0.0000 });\n\n        PanelData.Bonds.Add(new BondDescription(1, 2,  BondDescription.BondType.Single));\n        PanelData.Bonds.Add(new BondDescription(1, 3, BondDescription.BondType.Single));\n    }\n\n    protected override async Task OnInitializedAsync()\n    {\n        await InitDataAsync();\n    }\n\n}\n```\n\nAdd to _Imports.razor\n```\n@using Babylon.Blazor\n```\n\u003e **_NOTE:_**  You can skip this step\n\n### Demo Application\n\n\nFor demo application I implemented: Water, Benzene, Epinephrine and Sprite example.\nAll descriptions was get from [PubChem catalog](https://pubchem.ncbi.nlm.nih.gov/).\nAs I not found atom size into description - I not set it. The same is for double and triple bonds - the parallel lines rotation vector mostly oriented along the Y axis. Colors selected automatically from color palette.\nIf chemist sees something wrong then please tell me. My goal was to create a C# interface to a Java Script library. Not to draw molecules absolutely correctly.\n\nWater  H\u003csub\u003e2\u003c/sub\u003eO\n\n![--water pic--](docs/images/water.png)\n\nBenzene  C\u003csub\u003e6\u003c/sub\u003eH\u003csub\u003e6\u003c/sub\u003e\n\n![--Benzene pic--](docs/images/benzene.png)\n\nEpinephrine C\u003csub\u003e9\u003c/sub\u003eH\u003csub\u003e13\u003c/sub\u003eNO\u003csub\u003e3\u003c/sub\u003e\n\n![--Epinephrine pic--](docs/images/epinephrine.png)\n\n\nIn addition, I draw some tests\n\nTest1 (not used anymore)\n\n![--Test1 pic--](docs/images/test1.png)\n\nTest2  \n![--Test2 pic--](docs/images/test2.png)\n\n### How it works?\n\nWith .NET 5.0 and above, it is very easy to transfer objects between Java Script and C#. Calling functions from a JS object in C# is also easy.\n\nYou can read more in article [Using JS Object References in Blazor WASM to wrap JS libraries](https://blog.elmah.io/using-js-object-references-in-blazor-wasm-to-wrap-js-libraries/)\n\nHere is the steps you need to wrap JS library for Blazor Web Assembly application:\n1. Create Razor library with *LibraryName*.\n2. Create under wwwroot js export file with functions like this:\n```JavaScript\nexport function functionName(parameters) {\n        ...\n        return javaObject;\n}\n```\n3. Create library wrapper\n```C#\nIJSInProcessObjectReference libraryWrapper = await _jSInstance.InvokeAsync\u003cIJSInProcessObjectReference\u003e(\"import\",\n                                                             \"./_content/LibraryName/LibraryJSExport.js\");\n```\n\u003e **_NOTE:_**  You can get _jSInstance into main application over dependency injection or service provider call\n\n4. Create C# wrapper\n```C#\npublic async Task\u003cCsharpObj\u003e CsFunctionName(int parameter)\n{\n        var jsObjRef = await _libraryWrapper.InvokeAsync\u003cIJSObjectReference\u003e(\"jsFunctionName\", parameter);\n        return new CsharpObj(jsObjRef);\n}\n```\n5. Call the wrapped function\n```C#\nvar CsharpObj = await LibraryWrapper.CsFunctionName(2);\n```\n\u003e **_NOTE:_** you can use JS object as function parameter. Use *jsObjRef* for it.\n\n### How to create custom scene?\n\nIf you don't want to draw molecules then it is possible to create your own component\n1. Create your own creator class\n```C#\npublic class MySceneCreator : SceneCreator\n{\n    public override async Task CreateAsync(BabylonCanvasBase canvas)\n    {\n    ...\n    }\n}\n```\n2. Create Data class\n```C#\npublic class MyCustomData:IData\n{\n\n}\n```\n3. Create new canvas\n```C#\npublic class MyCustomCanvas : BabylonCanvasBase\n{\n       protected virtual async Task InitializeSzene(LibraryWrapper LibraryWrapper, string canvasId)\n        {\n            MyCustomData panelData;\n            if (ChemicalData is MyCustomData)\n            {\n                panelData = (MyCustomData)SceneData;\n\t            MySceneCreator creator = new MySceneCreator(LibraryWrapper, canvasId, panelData);\n    \t        await creator.CreateAsync(this);\n            }\n        }\n}\n```\n4. Create new Rasor component\n```html\n@inherits MyCustomCanvas\n\u003ccanvas id=@CanvasId touch-action=\"none\" /\u003e\n```\n## What's New\n\n### in Version 1.5\n - update to .NET 9.0\n\n### in Version 1.4\n - update to .NET 8.0\n - added show loading component. Currently we use server-side prerendering, but the babylog engine could only work client-side. The Babylon engine takes some time to render. We want to show the user a 'loading' notification instead of an empty area. The default text is \"Loading...\". You can change it to something else using 'LoadingTemplate'\n \n ```csharp\n\u003cBabylonCanvas CanvasId=\"Canvas1\" SceneData=@PanelData\u003e\n    \u003cLoadingTemplate\u003e\n        \u003cdiv\u003eLoading Custom Demo...\u003c/div\u003e\n    \u003c/LoadingTemplate\u003e\n\u003c/BabylonCanvas\u003e\n```\n \n### in Version 1.3\n\n - added sprite manager\n - added sprite with base attributes\n - added callback function sample JS to .NET \n - added sprite sample  \n ![--Sprite sample pic--](docs/images/sprites.png)\n\n### in Version 1.2\n\n - added single color Box\n - added Torus\n - added sample of custom scene drawing  \n ![--Custom Draw pic--](docs/images/customdraw.png)\n\n\n### in Version 1.1\n\nNew features:\n - Show errors on 3D canvas\n - Added new component ChemFormulaViewer\n - Expand ChemicalData. Added new properties: ErrorText, MolecularFormula, Name, ShowErrorText\n\n\n\n##Developer notes\n\nIf you want to change the library then don't use IIS express by debugging because JS files will be not easy to change.\n\nIn some cases, you can try to refresh the page from developer mode with the cache disabled.\n\n![--Sprite sample pic--](docs/images/disable-cache.png)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexnek%2Fbabylonblazor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexnek%2Fbabylonblazor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexnek%2Fbabylonblazor/lists"}