# sebastien-lempens/webgl-skydiving architecture

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

- Interactive diagram: https://gitdiagram.com/sebastien-lempens/webgl-skydiving
- Repository: https://github.com/sebastien-lempens/webgl-skydiving

## Overview

This repository is a React Three Fiber starter rendered as an interactive skydiving scene. The user-facing flow mounts the React app, which creates a WebGL canvas and composes the environment, skydiver, wind particles, camera controls, and visual effects; the canvas and overlaid credits/loading UI form the result. Source excerpts show the scene composition and asset references, but the referenced sky texture is not present in the supplied tree, so asset loading details beyond those references are not inferred.

Main entry points: [`src/App.jsx`](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/App.jsx) (Scene Composer), [`src/components/Model.jsx`](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/components/Model.jsx) (Animated Skydiver), [`src/index.jsx`](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/index.jsx) (React Mount), [`src/components/World.jsx`](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/components/World.jsx) (Sky World)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App Entry"]
  node_root["React Mount<br/>[index.jsx]"]
  node_app["Canvas App<br/>[App.jsx]"]
end

subgraph group_scene["3D Scene"]
  node_scene["Scene Composer<br/>[App.jsx]"]
  node_world["Sky World<br/>[World.jsx]"]
  node_wind["Wind Particles<br/>[WindEffect.jsx]"]
  node_model["Animated Skydiver<br/>[Model.jsx]"]
  node_controls["Camera Controls<br/>[App.jsx]"]
  node_lighting["Scene Lighting<br/>[App.jsx]"]
  node_postfx["Postprocessing<br/>[App.jsx]"]
end

subgraph group_assets["Scene Assets"]
  node_skyasset["Sky Texture<br/>[World.jsx]"]
  node_modelasset["Skydiver Model<br/>[Model.jsx]"]
  node_textures["Model Textures<br/>[Model.jsx]"]
end

subgraph group_overlay["Overlay UI"]
  node_credits["Credits Links<br/>[Credit.jsx]"]
  node_loader["Suspense Loader<br/>[App.jsx]"]
end

node_user(("Viewer"))

node_user -->|"opens app"| node_root
node_root -->|"renders"| node_app
node_app -->|"mounts canvas"| node_scene
node_app -->|"renders"| node_credits
node_app -->|"renders"| node_loader
node_scene -->|"mounts"| node_world
node_scene -->|"mounts"| node_wind
node_scene -->|"mounts"| node_model
node_scene -->|"configures"| node_controls
node_scene -->|"configures"| node_lighting
node_scene -->|"configures"| node_postfx
node_world -->|"loads texture"| node_skyasset
node_model -->|"loads model"| node_modelasset
node_model -->|"loads textures"| node_textures

click node_root "https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/index.jsx"
click node_app "https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/App.jsx"
click node_scene "https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/App.jsx"
click node_world "https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/components/World.jsx"
click node_wind "https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/components/WindEffect.jsx"
click node_model "https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/components/Model.jsx"
click node_controls "https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/App.jsx"
click node_lighting "https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/App.jsx"
click node_postfx "https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/App.jsx"
click node_skyasset "https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/components/World.jsx"
click node_modelasset "https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/components/Model.jsx"
click node_textures "https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/components/Model.jsx"
click node_credits "https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/components/Credit.jsx"
click node_loader "https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/App.jsx"

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_root,node_app,node_user toneBlue
class node_scene,node_world,node_wind,node_model,node_controls,node_lighting,node_postfx toneAmber
class node_skyasset,node_modelasset,node_textures toneMint
class node_credits,node_loader toneRose
```

## Components

### App Entry

- [React Mount](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/index.jsx): `src/index.jsx`
- [Canvas App](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/App.jsx): `src/App.jsx`

### 3D Scene

- [Scene Composer](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/App.jsx): `src/App.jsx`
- [Sky World](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/components/World.jsx): `src/components/World.jsx`
- [Wind Particles](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/components/WindEffect.jsx): `src/components/WindEffect.jsx`
- [Animated Skydiver](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/components/Model.jsx): `src/components/Model.jsx`
- [Camera Controls](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/App.jsx): `src/App.jsx`
- [Scene Lighting](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/App.jsx): `src/App.jsx`
- [Postprocessing](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/App.jsx): `src/App.jsx`

### Scene Assets

- [Sky Texture](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/components/World.jsx): `src/components/World.jsx`
- [Skydiver Model](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/components/Model.jsx): `src/components/Model.jsx`
- [Model Textures](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/components/Model.jsx): `src/components/Model.jsx`

### Overlay UI

- [Credits Links](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/components/Credit.jsx): `src/components/Credit.jsx`
- [Suspense Loader](https://github.com/sebastien-lempens/webgl-skydiving/blob/main/src/App.jsx): `src/App.jsx`

### Other components

- **Viewer**

## Connections

- Viewer → React Mount: opens app
- React Mount → Canvas App: renders (evidence: `src/index.jsx`)
- Canvas App → Scene Composer: mounts canvas (evidence: `src/App.jsx`)
- Canvas App → Credits Links: renders (evidence: `src/App.jsx`)
- Canvas App → Suspense Loader: renders (evidence: `src/App.jsx`)
- Scene Composer → Sky World: mounts (evidence: `src/App.jsx`)
- Scene Composer → Wind Particles: mounts (evidence: `src/App.jsx`)
- Scene Composer → Animated Skydiver: mounts (evidence: `src/App.jsx`)
- Scene Composer → Camera Controls: configures (evidence: `src/App.jsx`)
- Scene Composer → Scene Lighting: configures (evidence: `src/App.jsx`)
- Scene Composer → Postprocessing: configures (evidence: `src/App.jsx`)
- Sky World → Sky Texture: loads texture (evidence: `src/components/World.jsx`)
- Animated Skydiver → Skydiver Model: loads model (evidence: `src/components/Model.jsx`)
- Animated Skydiver → Model Textures: loads textures (evidence: `src/components/Model.jsx`)