# amyhakim/camvas architecture

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

- Interactive diagram: https://gitdiagram.com/amyhakim/camvas
- Repository: https://github.com/amyhakim/camvas

## Overview

Showcam is a browser-based 3D scene editor for Gaussian splats and GLB scenes. The main workflow is to open a scene, navigate and inspect it, make project edits, then author and review a camera move on the timeline. The editor also supports proxy-actor blocking, semantic labels, audio, collaboration, and optional camera-path planning. PlayCanvas handles rendering and interaction; Next.js API routes provide planning, asset lookup, and worker integrations. The graph follows documented capabilities and sampled route ownership; unsampled UI wiring is shown only where the README establishes it.

Main entry points: [`src/editor/editor.tsx`](https://github.com/amyhakim/camvas/blob/main/src/editor/editor.tsx) (Editor shell), [`src/features/viewport/live-viewport.tsx`](https://github.com/amyhakim/camvas/blob/main/src/features/viewport/live-viewport.tsx) (Live viewport), [`src/features/timeline/timeline.tsx`](https://github.com/amyhakim/camvas/blob/main/src/features/timeline/timeline.tsx) (Timeline), [`src/app/editor/page.tsx`](https://github.com/amyhakim/camvas/blob/main/src/app/editor/page.tsx) (Editor page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Editor and projects"]
  node_editor_page["Editor page<br/>[page.tsx]"]
  node_editor["Editor shell<br/>[editor.tsx]"]
  node_project["Project state<br/>[use-project.ts]"]
  node_project_features["Projects<br/>[collection.ts]"]
end

subgraph group_scene["Scene runtime"]
  node_viewport["Live viewport<br/>[live-viewport.tsx]"]
  node_scene_data["Scene model<br/>[data.ts]"]
  node_scene_browser["Scene browser<br/>[object-browser.tsx]"]
  node_inspector["Object inspector"]
end

subgraph group_authoring["Scene authoring"]
  node_props["Props and models<br/>[prop-controls.tsx]"]
  node_blocking["Actor blocking<br/>[model.ts]"]
  node_semantics["Semantic labels<br/>[controls.tsx]"]
  node_collision["Collision review<br/>[controls.tsx]"]
end

subgraph group_camera["Camera and timeline"]
  node_camera_authoring["Shot authoring<br/>[shot-authoring.tsx]"]
  node_flight_plan["Flight planning"]
  node_cinematraj["CinemaTraj paths<br/>[cinematraj.ts]"]
  node_timeline["Timeline<br/>[timeline.tsx]"]
  node_audio["Timeline audio<br/>[engine.ts]"]
end

subgraph group_services["Services and collaboration"]
  node_collaboration["Peer collaboration"]
  node_plan_api["Shot planning API<br/>[route.ts]"]
  node_optimization_api["Optimization API<br/>[route.ts]"]
  node_worker["GPU worker client<br/>[worker.ts]"]
  node_semantic_api["Labeling API<br/>[route.ts]"]
  node_model_api["Model search API<br/>[route.ts]"]
  node_sketchfab["Sketchfab"]
  node_audio_api["Audio search API<br/>[route.ts]"]
  node_audio_provider["Audio providers"]
  node_webrtc["WebRTC signaling"]
end

node_user(("Editor user"))

node_user -->|"opens"| node_editor_page
node_editor_page -->|"renders"| node_editor
node_editor -->|"displays scene"| node_viewport
node_editor -->|"edits project"| node_project
node_project -->|"stores project data"| node_project_features
node_viewport -->|"renders scene"| node_scene_data
node_viewport -->|"selects geometry"| node_scene_browser
node_scene_browser -->|"inspects selection"| node_inspector
node_editor -->|"edits props"| node_props
node_editor -->|"blocks actors"| node_blocking
node_editor -->|"labels scene"| node_semantics
node_editor -->|"reviews collisions"| node_collision
node_editor -->|"authors shots"| node_camera_authoring
node_camera_authoring -->|"creates track"| node_timeline
node_editor -->|"plans flight"| node_flight_plan
node_flight_plan -->|"requests plan"| node_plan_api
node_editor -.->|"requests path"| node_cinematraj
node_cinematraj -.->|"submits path"| node_user
node_editor -->|"plays and scrubs"| node_timeline
node_timeline -->|"schedules clips"| node_audio
node_editor -->|"shares scene state"| node_collaboration
node_collaboration -->|"signals peers"| node_webrtc
node_editor -->|"searches models"| node_model_api
node_model_api -->|"searches catalog"| node_sketchfab
node_editor -->|"searches audio"| node_audio_api
node_audio_api -->|"queries catalog"| node_audio_provider
node_editor -->|"requests labels"| node_semantic_api
node_editor -->|"submits snapshot"| node_optimization_api
node_optimization_api -->|"creates job"| node_worker

click node_editor_page "https://github.com/amyhakim/camvas/blob/main/src/app/editor/page.tsx"
click node_editor "https://github.com/amyhakim/camvas/blob/main/src/editor/editor.tsx"
click node_project "https://github.com/amyhakim/camvas/blob/main/src/editor/use-project.ts"
click node_project_features "https://github.com/amyhakim/camvas/blob/main/src/features/project/collection.ts"
click node_viewport "https://github.com/amyhakim/camvas/blob/main/src/features/viewport/live-viewport.tsx"
click node_scene_data "https://github.com/amyhakim/camvas/blob/main/src/features/scene/data.ts"
click node_scene_browser "https://github.com/amyhakim/camvas/blob/main/src/features/scene/object-browser.tsx"
click node_inspector "https://github.com/amyhakim/camvas/blob/main/src/features/scene/object-inspector.tsx"
click node_props "https://github.com/amyhakim/camvas/blob/main/src/features/props/prop-controls.tsx"
click node_blocking "https://github.com/amyhakim/camvas/blob/main/src/features/blocking/model.ts"
click node_semantics "https://github.com/amyhakim/camvas/blob/main/src/features/semantics/controls.tsx"
click node_collision "https://github.com/amyhakim/camvas/blob/main/src/features/collision/controls.tsx"
click node_camera_authoring "https://github.com/amyhakim/camvas/blob/main/src/features/camera/shot-authoring.tsx"
click node_flight_plan "https://github.com/amyhakim/camvas/blob/main/src/editor/automatic-flight-workflow.ts"
click node_cinematraj "https://github.com/amyhakim/camvas/blob/main/src/features/camera/cinematraj.ts"
click node_timeline "https://github.com/amyhakim/camvas/blob/main/src/features/timeline/timeline.tsx"
click node_audio "https://github.com/amyhakim/camvas/blob/main/src/features/audio/engine.ts"
click node_collaboration "https://github.com/amyhakim/camvas/blob/main/src/features/collaboration/use-scene-collaboration.ts"
click node_plan_api "https://github.com/amyhakim/camvas/blob/main/src/app/api/plan/route.ts"
click node_optimization_api "https://github.com/amyhakim/camvas/blob/main/src/app/api/optimizations/route.ts"
click node_worker "https://github.com/amyhakim/camvas/blob/main/src/backend/worker.ts"
click node_semantic_api "https://github.com/amyhakim/camvas/blob/main/src/app/api/semantic-labels/route.ts"
click node_model_api "https://github.com/amyhakim/camvas/blob/main/src/app/api/models/search/route.ts"
click node_audio_api "https://github.com/amyhakim/camvas/blob/main/src/app/api/audio/search/route.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_editor_page,node_editor,node_project,node_project_features,node_user toneBlue
class node_viewport,node_scene_data,node_scene_browser,node_inspector toneAmber
class node_props,node_blocking,node_semantics,node_collision toneMint
class node_camera_authoring,node_flight_plan,node_cinematraj,node_timeline,node_audio toneRose
class node_collaboration,node_plan_api,node_optimization_api,node_worker,node_semantic_api,node_model_api,node_sketchfab,node_audio_api,node_audio_provider,node_webrtc toneIndigo
```

## Components

### Editor and projects

- [Editor page](https://github.com/amyhakim/camvas/blob/main/src/app/editor/page.tsx): `src/app/editor/page.tsx`
- [Editor shell](https://github.com/amyhakim/camvas/blob/main/src/editor/editor.tsx): `src/editor/editor.tsx`
- [Project state](https://github.com/amyhakim/camvas/blob/main/src/editor/use-project.ts): `src/editor/use-project.ts`
- [Projects](https://github.com/amyhakim/camvas/blob/main/src/features/project/collection.ts): `src/features/project/collection.ts`

### Scene runtime

- [Live viewport](https://github.com/amyhakim/camvas/blob/main/src/features/viewport/live-viewport.tsx): `src/features/viewport/live-viewport.tsx`
- [Scene model](https://github.com/amyhakim/camvas/blob/main/src/features/scene/data.ts): `src/features/scene/data.ts`
- [Scene browser](https://github.com/amyhakim/camvas/blob/main/src/features/scene/object-browser.tsx): `src/features/scene/object-browser.tsx`
- [Object inspector](https://github.com/amyhakim/camvas/blob/main/src/features/scene/object-inspector.tsx): `src/features/scene/object-inspector.tsx`

### Scene authoring

- [Props and models](https://github.com/amyhakim/camvas/blob/main/src/features/props/prop-controls.tsx): `src/features/props/prop-controls.tsx`
- [Actor blocking](https://github.com/amyhakim/camvas/blob/main/src/features/blocking/model.ts): `src/features/blocking/model.ts`
- [Semantic labels](https://github.com/amyhakim/camvas/blob/main/src/features/semantics/controls.tsx): `src/features/semantics/controls.tsx`
- [Collision review](https://github.com/amyhakim/camvas/blob/main/src/features/collision/controls.tsx): `src/features/collision/controls.tsx`

### Camera and timeline

- [Shot authoring](https://github.com/amyhakim/camvas/blob/main/src/features/camera/shot-authoring.tsx): `src/features/camera/shot-authoring.tsx`
- [Flight planning](https://github.com/amyhakim/camvas/blob/main/src/editor/automatic-flight-workflow.ts): `src/editor/automatic-flight-workflow.ts`
- [CinemaTraj paths](https://github.com/amyhakim/camvas/blob/main/src/features/camera/cinematraj.ts): `src/features/camera/cinematraj.ts`
- [Timeline](https://github.com/amyhakim/camvas/blob/main/src/features/timeline/timeline.tsx): `src/features/timeline/timeline.tsx`
- [Timeline audio](https://github.com/amyhakim/camvas/blob/main/src/features/audio/engine.ts): `src/features/audio/engine.ts`

### Services and collaboration

- [Peer collaboration](https://github.com/amyhakim/camvas/blob/main/src/features/collaboration/use-scene-collaboration.ts): `src/features/collaboration/use-scene-collaboration.ts`
- [Shot planning API](https://github.com/amyhakim/camvas/blob/main/src/app/api/plan/route.ts): `src/app/api/plan/route.ts`
- [Optimization API](https://github.com/amyhakim/camvas/blob/main/src/app/api/optimizations/route.ts): `src/app/api/optimizations/route.ts`
- [GPU worker client](https://github.com/amyhakim/camvas/blob/main/src/backend/worker.ts): `src/backend/worker.ts`
- [Labeling API](https://github.com/amyhakim/camvas/blob/main/src/app/api/semantic-labels/route.ts): `src/app/api/semantic-labels/route.ts`
- [Model search API](https://github.com/amyhakim/camvas/blob/main/src/app/api/models/search/route.ts): `src/app/api/models/search/route.ts`
- **Sketchfab**
- [Audio search API](https://github.com/amyhakim/camvas/blob/main/src/app/api/audio/search/route.ts): `src/app/api/audio/search/route.ts`
- **Audio providers**
- **WebRTC signaling**

### Other components

- **Editor user**

## Connections

- Editor user → Editor page: opens
- Editor page → Editor shell: renders
- Editor shell → Live viewport: displays scene
- Editor shell → Project state: edits project
- Project state → Projects: stores project data
- Live viewport → Scene model: renders scene
- Live viewport → Scene browser: selects geometry
- Scene browser → Object inspector: inspects selection
- Editor shell → Props and models: edits props
- Editor shell → Actor blocking: blocks actors
- Editor shell → Semantic labels: labels scene
- Editor shell → Collision review: reviews collisions
- Editor shell → Shot authoring: authors shots
- Shot authoring → Timeline: creates track
- Editor shell → Flight planning: plans flight
- Flight planning → Shot planning API: requests plan
- Editor shell → CinemaTraj paths: requests path
- CinemaTraj paths → Editor user: submits path
- Editor shell → Timeline: plays and scrubs
- Timeline → Timeline audio: schedules clips
- Editor shell → Peer collaboration: shares scene state
- Peer collaboration → WebRTC signaling: signals peers
- Editor shell → Model search API: searches models
- Model search API → Sketchfab: searches catalog
- Editor shell → Audio search API: searches audio
- Audio search API → Audio providers: queries catalog
- Editor shell → Labeling API: requests labels
- Editor shell → Optimization API: submits snapshot
- Optimization API → GPU worker client: creates job