Skip to content

Babylon.Blazor Developer Manual

Babylon.Blazor wraps the well-known 3D library Babylon.js into a Razor component you can use in a C# Blazor project. The library focuses on chemical molecule visualization, but also exposes a general-purpose 3D API for creating custom scenes with meshes, materials, sprites, and cameras.

Where to Start

Feature Overview

Feature Entry point What it does Docs
3D Canvas BabylonCanvas Razor component that hosts a Babylon.js scene inside a Blazor page BabylonCanvas
Molecule Viewer ChemicalData Describe atoms and bonds, the library renders the 3D molecule automatically Chemical Data
Custom Scenes SceneCreator Subclass to build any 3D scene with spheres, boxes, cylinders, tori, tubes Custom Scene
Sprites SpriteManager, Sprite 2D sprites and sprite-sheet animations inside a 3D scene Sprites
Materials Material, DynamicTexture Colored and textured materials with diffuse/emissive properties Materials
Camera ArcRotateCamera Orbit camera that rotates around a target with auto-rotate support API Reference
Lights HemisphericLight, PointLight Scene lighting API Reference
Chemical Formula ChemFormulaViewer Razor component that renders a chemical formula with subscript numbers API Reference
Loading Indicator LoadingTemplate Customizable overlay shown while the Babylon engine initializes BabylonCanvas

Architecture at a Glance

The library sits between your Blazor component and the Babylon.js JavaScript engine. C# wrapper classes hold IJSObjectReference handles to JavaScript objects. All communication happens through the BabylonInstance interop layer.

graph LR
    RC[BabylonCanvas Razor Component] --> IC[InstanceCreatorBase DI]
    IC --> BI[BabylonInstance C# Wrapper]
    BI -->|IJSObjectReference| JS[babylonInterop.js]
    JS --> BJ[Babylon.js Engine]
    CD[ChemicalData] --> MC[MoleculeCreator]
    MC --> BI
    SC[SceneCreator subclass] --> BI

Demo Applications

License

MIT — see the LICENSE file in the repository.