# cocos/cocos-engine architecture

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

- Interactive diagram: https://gitdiagram.com/cocos/cocos-engine
- Repository: https://github.com/cocos/cocos-engine

## Overview

Cocos Engine is the runtime framework integrated with Cocos Creator. A developer uses its TypeScript-facing engine to build a game; at runtime, game state, assets, animation, physics, audio, UI, and rendering produce the interactive experience. The graph preserves the README’s major product capabilities, while sampled source supports only selected internal call and dependency links. Several subsystem paths point to their exact enclosing directories because implementation files for those capabilities were not sampled.

Main entry points: [`cocos/2d/framework/ui-renderer.ts`](https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/2d/framework/ui-renderer.ts) (UI renderer), [`cocos/rendering`](https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/rendering) (Render pipelines), [`cocos/scene-graph`](https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/scene-graph) (Scene graph), [`cocos/core`](https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/core) (Core services)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime foundation"]
  node_scene["Scene graph"]
  node_core["Core services"]
  node_director["Game director<br/>[director.ts]"]
end

subgraph group_content["Game content"]
  node_assets["Asset manager"]
  node_animation["Animation system"]
  node_animcontroller["Marionette controller"]
  node_physics["Physics system"]
  node_audio["Audio system"]
  node_particles["Particle system"]
  node_terrain["Terrain support"]
end

subgraph group_rendering["Rendering"]
  node_ui["UI components"]
  node_ui_renderer["UI renderer<br/>[ui-renderer.ts]"]
  node_renderdata["Render data<br/>[render-data.ts]"]
  node_rendering["Render pipelines"]
  node_custom_pipeline["Custom pipeline<br/>[web-pipeline.ts]"]
  node_rendergraph["Render graph<br/>[render-graph.ts]"]
  node_compiler["Pipeline compiler<br/>[compiler.ts]"]
  node_gfx["Graphics API"]
  node_webgpu["WebGPU backend"]
end

subgraph group_platform["Platform systems"]
  node_audio_platform["Audio platform<br/>[audio-manager.ts]"]
  node_native["Native runtime"]
end

node_developer(("Game developer"))

node_developer -.->|"authors with"| node_scene
node_animcontroller -->|"uses components"| node_scene
node_animcontroller -->|"evaluates graphs"| node_animation
node_animcontroller -->|"uses services"| node_core
node_assets -->|"uses services"| node_core
node_director -.->|"manages scenes"| node_scene
node_ui_renderer -->|"uses types"| node_core
node_ui_renderer -.->|"produces data"| node_renderdata
node_ui_renderer -.->|"submits rendering"| node_rendering
node_ui -.->|"renders through"| node_ui_renderer
node_custom_pipeline -->|"builds graph"| node_rendergraph
node_custom_pipeline -->|"invokes compiler"| node_compiler
node_rendering -.->|"uses graphics API"| node_gfx
node_gfx -.->|"provides backend"| node_webgpu
node_audio -->|"uses services"| node_core
node_audio -.->|"runs through"| node_audio_platform
node_physics -.->|"affects world"| node_scene
node_particles -.->|"renders effects"| node_rendering
node_terrain -.->|"renders terrain"| node_rendering
node_native -.->|"supports runtime"| node_gfx

click node_scene "https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/scene-graph"
click node_core "https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/core"
click node_director "https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/game/director.ts"
click node_assets "https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/asset/asset-manager"
click node_animation "https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/animation"
click node_animcontroller "https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/animation/marionette/animation-controller.ts"
click node_physics "https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/physics"
click node_audio "https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/audio"
click node_particles "https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/particle"
click node_terrain "https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/terrain"
click node_ui "https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/2d/components"
click node_ui_renderer "https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/2d/framework/ui-renderer.ts"
click node_renderdata "https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/2d/renderer/render-data.ts"
click node_rendering "https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/rendering"
click node_custom_pipeline "https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/rendering/custom/web-pipeline.ts"
click node_rendergraph "https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/rendering/custom/render-graph.ts"
click node_compiler "https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/rendering/custom/compiler.ts"
click node_gfx "https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/gfx"
click node_webgpu "https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/gfx/webgpu/webgpu-pipeline-state.ts"
click node_audio_platform "https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/audio/audio-manager.ts"
click node_native "https://github.com/cocos/cocos-engine/tree/v3.8.9/native/cocos"

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_core,node_director toneBlue
class node_assets,node_animation,node_animcontroller,node_physics,node_audio,node_particles,node_terrain toneAmber
class node_ui,node_ui_renderer,node_renderdata,node_rendering,node_custom_pipeline,node_rendergraph,node_compiler,node_gfx,node_webgpu toneMint
class node_audio_platform,node_native toneRose
class node_developer toneIndigo
```

## Components

### Runtime foundation

- [Scene graph](https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/scene-graph): `cocos/scene-graph`
- [Core services](https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/core): `cocos/core`
- [Game director](https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/game/director.ts): `cocos/game/director.ts`

### Game content

- [Asset manager](https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/asset/asset-manager): `cocos/asset/asset-manager`
- [Animation system](https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/animation): `cocos/animation`
- [Marionette controller](https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/animation/marionette/animation-controller.ts): `cocos/animation/marionette/animation-controller.ts`
- [Physics system](https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/physics): `cocos/physics`
- [Audio system](https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/audio): `cocos/audio`
- [Particle system](https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/particle): `cocos/particle`
- [Terrain support](https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/terrain): `cocos/terrain`

### Rendering

- [UI components](https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/2d/components): `cocos/2d/components`
- [UI renderer](https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/2d/framework/ui-renderer.ts): `cocos/2d/framework/ui-renderer.ts`
- [Render data](https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/2d/renderer/render-data.ts): `cocos/2d/renderer/render-data.ts`
- [Render pipelines](https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/rendering): `cocos/rendering`
- [Custom pipeline](https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/rendering/custom/web-pipeline.ts): `cocos/rendering/custom/web-pipeline.ts`
- [Render graph](https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/rendering/custom/render-graph.ts): `cocos/rendering/custom/render-graph.ts`
- [Pipeline compiler](https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/rendering/custom/compiler.ts): `cocos/rendering/custom/compiler.ts`
- [Graphics API](https://github.com/cocos/cocos-engine/tree/v3.8.9/cocos/gfx): `cocos/gfx`
- [WebGPU backend](https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/gfx/webgpu/webgpu-pipeline-state.ts): `cocos/gfx/webgpu/webgpu-pipeline-state.ts`

### Platform systems

- [Audio platform](https://github.com/cocos/cocos-engine/blob/v3.8.9/cocos/audio/audio-manager.ts): `cocos/audio/audio-manager.ts`
- [Native runtime](https://github.com/cocos/cocos-engine/tree/v3.8.9/native/cocos): `native/cocos`

### Other components

- **Game developer**

## Connections

- Game developer → Scene graph: authors with (evidence: `README.md`)
- Marionette controller → Scene graph: uses components (evidence: `cocos/animation/marionette/animation-controller.ts`)
- Marionette controller → Animation system: evaluates graphs (evidence: `cocos/animation/marionette/animation-controller.ts`)
- Marionette controller → Core services: uses services (evidence: `cocos/animation/marionette/animation-controller.ts`)
- Asset manager → Core services: uses services (evidence: `cocos/asset/asset-manager/pipeline.ts`)
- Game director → Scene graph: manages scenes
- UI renderer → Core services: uses types (evidence: `cocos/2d/framework/ui-renderer.ts`)
- UI renderer → Render data: produces data (evidence: `cocos/2d/framework/ui-renderer.ts`)
- UI renderer → Render pipelines: submits rendering
- UI components → UI renderer: renders through (evidence: `cocos/2d/components/ui-mesh-renderer.ts`)
- Custom pipeline → Render graph: builds graph (evidence: `cocos/rendering/custom/web-pipeline.ts`)
- Custom pipeline → Pipeline compiler: invokes compiler (evidence: `cocos/rendering/custom/web-pipeline.ts`)
- Render pipelines → Graphics API: uses graphics API (evidence: `cocos/rendering/pipeline-state-manager.ts`)
- Graphics API → WebGPU backend: provides backend (evidence: `cocos/gfx/webgpu/webgpu-pipeline-state.ts`)
- Audio system → Core services: uses services (evidence: `cocos/audio/audio-manager.ts`)
- Audio system → Audio platform: runs through
- Physics system → Scene graph: affects world (evidence: `cocos/physics/physx/character-controllers/physx-character-controller.ts`)
- Particle system → Render pipelines: renders effects
- Terrain support → Render pipelines: renders terrain
- Native runtime → Graphics API: supports runtime