Skip to content

Instantly share code, notes, and snippets.

@nandordudas
Last active October 28, 2024 21:26
Show Gist options
  • Save nandordudas/c60a0880365ff8acd644fc88a46918ca to your computer and use it in GitHub Desktop.
Save nandordudas/c60a0880365ff8acd644fc88a46918ca to your computer and use it in GitHub Desktop.
flowchart TB
    subgraph MainThread["Main Thread"]
        direction TB
        Store["Pinia Store"]
        Orchestrator["Worker Orchestrator"]
        Monitor["Health Monitor"]
        Metrics["Performance Metrics"]
        
        Orchestrator --> Store
        Orchestrator --> Monitor
        Orchestrator --> Metrics
    end
    
    subgraph SharedMemory["Shared Memory (32KB)"]
        direction LR
        GameState["Game State\n(0-1023 bytes)"]
        InputState["Input State\n(1024-1279 bytes)"]
    end

    subgraph Workers["Web Workers"]
        direction TB
        Game["Game Worker"]
        Render["Render Worker"]
        Network["Network Worker"]
    end

    subgraph Channels["Message Channels"]
        GameRender["Game ⟺ Render"]
        GameNetwork["Game ⟺ Network"]
        RenderNetwork["Render ⟺ Network"]
    end

    %% Main connections
    Orchestrator --> Game
    Orchestrator --> Render
    Orchestrator --> Network
    
    %% Shared memory access
    Game --> SharedMemory
    Render --> SharedMemory
    Network --> SharedMemory
    
    %% Channel connections
    Game <--> GameRender
    Game <--> GameNetwork
    Render <--> GameRender
    Render <--> RenderNetwork
    Network <--> GameNetwork
    Network <--> RenderNetwork
    
    %% Health monitoring
    Monitor --> Game
    Monitor --> Render
    Monitor --> Network
    
    %% Performance metrics
    Game --> Metrics
    Render --> Metrics
    Network --> Metrics
    
    %% Styling
    classDef thread fill:#e1f5fe,stroke:#01579b
    classDef worker fill:#fff3e0,stroke:#ff6f00
    classDef channel fill:#f3e5f5,stroke:#4a148c
    classDef memory fill:#e8f5e9,stroke:#1b5e20
    classDef monitor fill:#fbe9e7,stroke:#bf360c
    
    class MainThread thread
    class Game,Render,Network worker
    class GameRender,GameNetwork,RenderNetwork channel
    class SharedMemory,GameState,InputState memory
    class Monitor,Metrics monitor
    ```
    
    
Loading
sequenceDiagram
participant U as User/Client
participant MT as Main Thread
participant IW as Input Worker
participant PW as Physics Worker
participant NW as Network Worker
participant WS as WebSocket Server
participant RW as Render Worker
participant SAB as SharedArrayBuffer

Note over U,SAB: Input Phase (2ms)
U->>MT: KeyDown Event
MT->>IW: Binary Input [type:2|ts:8|id:1|key:1] (12 bytes)
activate IW
IW->>SAB: Atomic.store(inputState)
IW->>PW: Binary Input State [type:2|ts:8|id:1|state:4] (15 bytes)
deactivate IW

Note over PW,SAB: Physics Phase (4ms)
activate PW
PW->>SAB: Read Current State

rect rgb(200, 200, 240)
    Note over PW: Physics Tick
    PW->>PW: Collision Detection
    PW->>PW: Position Update
    PW->>PW: Velocity Update
end

Note over PW,WS: Network Phase (Parallel)
par Network Sync & Render Update
    PW->>NW: Delta State [type:1|ts:8|id:2|delta:16] (27 bytes)
    activate NW
    NW->>WS: Binary SSE Message
    WS-->>NW: State Validation
    NW->>SAB: Update Network State
    NW->>RW: Validated State
    deactivate NW
and
    PW->>RW: Physics Update [type:1|ts:8|id:2|state:32] (43 bytes)
    deactivate PW
end

Note over RW: Render Phase (8ms)
activate RW
rect rgb(200, 240, 200)
    Note over RW: Frame Preparation
    RW->>RW: State Interpolation
    RW->>RW: Transform Calculation
    RW->>RW: OffscreenCanvas Update
end
RW-->>MT: Frame Ready Signal
deactivate RW

Note over U,SAB: Total Tick Time: ~16ms (60 FPS)
Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment