# babylonjs/babylon.js architecture

> Architecture diagram of the GitHub repository babylonjs/babylon.js, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/babylonjs/babylon.js
- Repository: https://github.com/babylonjs/babylon.js

## Overview

Babylon.js is a TypeScript 3D engine and extensible runtime. The README’s example gives the principal workflow: an application creates an engine for a canvas, builds a scene with a camera, light, and meshes, then runs a render loop that renders the scene. The repository also contains substantial rendering, animation, audio, and addon systems. Relationships below are limited to those explicit in the README or sampled source references; many modules were not inspected, so their internal wiring is not inferred.

Main entry points: [`packages/dev/core/src/Engines/abstractEngine.pure.ts`](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Engines/abstractEngine.pure.ts) (Engine), [`packages/dev/core/src/Engines/IPipelineContext.ts`](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Engines/IPipelineContext.ts) (Pipeline context), [`packages/dev/core/src/scene.pure.ts`](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/scene.pure.ts) (Scene), [`packages/dev/core/src/Engines/WebGL/webGLPipelineContext.ts`](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Engines/WebGL/webGLPipelineContext.ts) (WebGL backend)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Scene authoring"]
  node_scene["Scene<br/>[scene.pure.ts]"]
  node_renderloop["Render loop"]
end

subgraph group_render["Rendering engine"]
  node_engine["Engine"]
  node_effects["Effects<br/>[effect.pure.ts]"]
  node_pipeline["Pipeline context"]
  node_webgl["WebGL backend"]
  node_webgpu["WebGPU backend"]
  node_native["Native backend"]
  node_buffers["GPU buffers<br/>[dataBuffer.ts]"]
  node_textures["Textures<br/>[internalTexture.ts]"]
end

subgraph group_content["Scene capabilities"]
  node_camera["Cameras<br/>[camera.ts]"]
  node_lights["Lights"]
  node_meshes["Meshes"]
  node_animations["Animations<br/>[animation.ts]"]
  node_audio["Audio<br/>[audioEngine.ts]"]
end

subgraph group_addons["Runtime addons"]
  node_navigation["Navigation"]
  node_atmosphere["Atmosphere<br/>[atmosphere.ts]"]
  node_htmlmesh["HTML meshes<br/>[htmlMesh.ts]"]
  node_msdf["MSDF text<br/>[textRenderer.ts]"]
end

node_developer(("Application developer"))
node_canvas["Canvas"]

node_developer -->|"creates"| node_engine
node_canvas -->|"initializes"| node_engine
node_developer -->|"creates"| node_scene
node_developer -->|"creates"| node_camera
node_developer -->|"creates"| node_lights
node_developer -->|"creates"| node_meshes
node_developer -->|"starts"| node_renderloop
node_renderloop -->|"runs on"| node_engine
node_renderloop -->|"renders"| node_scene
node_webgl -->|"implements"| node_pipeline
node_webgpu -->|"implements"| node_pipeline
node_native -->|"implements"| node_pipeline
node_engine -->|"uses"| node_textures

click node_engine "https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Engines/abstractEngine.pure.ts"
click node_scene "https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/scene.pure.ts"
click node_camera "https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Cameras/camera.ts"
click node_lights "https://github.com/babylonjs/babylon.js/tree/master/packages/dev/core/src/Lights"
click node_meshes "https://github.com/babylonjs/babylon.js/tree/master/packages/dev/core/src/Meshes"
click node_renderloop "https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Engines/abstractEngine.pure.ts"
click node_effects "https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Materials/effect.pure.ts"
click node_pipeline "https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Engines/IPipelineContext.ts"
click node_webgl "https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Engines/WebGL/webGLPipelineContext.ts"
click node_webgpu "https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Engines/WebGPU/webgpuPipelineContext.ts"
click node_native "https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Engines/Native/nativePipelineContext.ts"
click node_buffers "https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Buffers/dataBuffer.ts"
click node_textures "https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Materials/Textures/internalTexture.ts"
click node_animations "https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Animations/animation.ts"
click node_audio "https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Audio/audioEngine.ts"
click node_navigation "https://github.com/babylonjs/babylon.js/tree/master/packages/dev/addons/src/navigation"
click node_atmosphere "https://github.com/babylonjs/babylon.js/blob/master/packages/dev/addons/src/atmosphere/atmosphere.ts"
click node_htmlmesh "https://github.com/babylonjs/babylon.js/blob/master/packages/dev/addons/src/htmlMesh/htmlMesh.ts"
click node_msdf "https://github.com/babylonjs/babylon.js/blob/master/packages/dev/addons/src/msdfText/textRenderer.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_scene,node_renderloop toneBlue
class node_engine,node_effects,node_pipeline,node_webgl,node_webgpu,node_native,node_buffers,node_textures toneAmber
class node_camera,node_lights,node_meshes,node_animations,node_audio toneMint
class node_navigation,node_atmosphere,node_htmlmesh,node_msdf toneRose
class node_developer,node_canvas toneIndigo
```

## Components

### Scene authoring

- [Scene](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/scene.pure.ts): `packages/dev/core/src/scene.pure.ts`
- [Render loop](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Engines/abstractEngine.pure.ts): `packages/dev/core/src/Engines/abstractEngine.pure.ts`

### Rendering engine

- [Engine](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Engines/abstractEngine.pure.ts): `packages/dev/core/src/Engines/abstractEngine.pure.ts`
- [Effects](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Materials/effect.pure.ts): `packages/dev/core/src/Materials/effect.pure.ts`
- [Pipeline context](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Engines/IPipelineContext.ts): `packages/dev/core/src/Engines/IPipelineContext.ts`
- [WebGL backend](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Engines/WebGL/webGLPipelineContext.ts): `packages/dev/core/src/Engines/WebGL/webGLPipelineContext.ts`
- [WebGPU backend](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Engines/WebGPU/webgpuPipelineContext.ts): `packages/dev/core/src/Engines/WebGPU/webgpuPipelineContext.ts`
- [Native backend](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Engines/Native/nativePipelineContext.ts): `packages/dev/core/src/Engines/Native/nativePipelineContext.ts`
- [GPU buffers](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Buffers/dataBuffer.ts): `packages/dev/core/src/Buffers/dataBuffer.ts`
- [Textures](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Materials/Textures/internalTexture.ts): `packages/dev/core/src/Materials/Textures/internalTexture.ts`

### Scene capabilities

- [Cameras](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Cameras/camera.ts): `packages/dev/core/src/Cameras/camera.ts`
- [Lights](https://github.com/babylonjs/babylon.js/tree/master/packages/dev/core/src/Lights): `packages/dev/core/src/Lights`
- [Meshes](https://github.com/babylonjs/babylon.js/tree/master/packages/dev/core/src/Meshes): `packages/dev/core/src/Meshes`
- [Animations](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Animations/animation.ts): `packages/dev/core/src/Animations/animation.ts`
- [Audio](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/core/src/Audio/audioEngine.ts): `packages/dev/core/src/Audio/audioEngine.ts`

### Runtime addons

- [Navigation](https://github.com/babylonjs/babylon.js/tree/master/packages/dev/addons/src/navigation): `packages/dev/addons/src/navigation`
- [Atmosphere](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/addons/src/atmosphere/atmosphere.ts): `packages/dev/addons/src/atmosphere/atmosphere.ts`
- [HTML meshes](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/addons/src/htmlMesh/htmlMesh.ts): `packages/dev/addons/src/htmlMesh/htmlMesh.ts`
- [MSDF text](https://github.com/babylonjs/babylon.js/blob/master/packages/dev/addons/src/msdfText/textRenderer.ts): `packages/dev/addons/src/msdfText/textRenderer.ts`

### Other components

- **Application developer**
- **Canvas**

## Connections

- Application developer → Engine: creates
- Canvas → Engine: initializes
- Application developer → Scene: creates
- Application developer → Cameras: creates
- Application developer → Lights: creates
- Application developer → Meshes: creates
- Application developer → Render loop: starts
- Render loop → Engine: runs on (evidence: `packages/dev/core/src/Engines/abstractEngine.pure.ts`)
- Render loop → Scene: renders (evidence: `packages/dev/core/src/Engines/abstractEngine.pure.ts`)
- WebGL backend → Pipeline context: implements (evidence: `packages/dev/core/src/Engines/WebGL/webGLPipelineContext.ts`)
- WebGPU backend → Pipeline context: implements (evidence: `packages/dev/core/src/Engines/WebGPU/webgpuPipelineContext.ts`)
- Native backend → Pipeline context: implements (evidence: `packages/dev/core/src/Engines/Native/nativePipelineContext.ts`)
- Engine → Textures: uses (evidence: `packages/dev/core/src/Engines/abstractEngine.pure.ts`)