WebGPU Migration Phase 0: Custom 3D Engine Foundation + GPU Physics

[Copilot]

• Phase 0: Engine skeleton, GPU physics, docs, tests
• GameEngine Koordinationsschicht (EventBus, GameLoop, SystemRegistry, AssetRegistry)
• Multi-Kamera & PiP-Viewports
  • FollowCamera.js — FIXED_OFFSET / ORBIT / FREE Modi, Lag-Smoothing, orbitPan/Tilt/Zoom
  • CameraManager.js — Registry für beliebig viele benannte Kameras, Follow-Target-Binding
  • ViewportManager.js — HTML-Canvas PiP-Overlays mit Drag, Resize, Close
  • css/viewport-overlay.css — Sci-Fi-Styling (X4/EVE-inspiriert: cyan, monospace, blur)
  • GameEngine.js — cameras + viewports integriert; addFollowViewport() One-Call-Helper
  • index.js — alle neuen Exporte ergänzt
• Spieleklassiker-Inspirationsschicht (js/engine/game/)
  • EventSystem.js — gewichtete Zufalls-Events mit Conditions + Choices (Stellaris / Victoria 3)
  • ResearchTree.js — DAG Tech-Tree, Prerequisites, Era-Gates, Fraktions-Affinitäten (Endless Space 2 / Master of Orion)
  • FleetFormation.js — 6 Formations (LINE/WEDGE/SPHERE/DELTA/COLUMN/ESCORT/CUSTOM) + Kohäsionskräfte (X4 / Homeworld)
  • ColonySimulation.js — Pop-Wachstum, Job-Allokation, Ressourcen, Hunger, Unrest (Victoria 3 / Master of Orion)
  • docs/GAME_CLASSICS_INSPIRATION.md — vollständige Design-Attributions-Dokumentation
• Tests: 170 Tests, alle grün (11 Test-Dateien)
  • tests/webgpu/multicamera.test.js — 30 Tests (FollowCamera, CameraManager, ViewportManager)
  • tests/webgpu/game-systems.test.js — 44 Tests (EventSystem, ResearchTree, FleetFormation, ColonySimulation)
• CodeQL: 0 Alerts
• Keine Breaking Changes

Original prompt

WebGPU Migration: Custom 3D Graphics Engine Foundation

Ziel

Etablierung einer eigenen, produktionsreifen 3D Graphics Engine mit WebGPU-Unterstützung als Hauptrenderer, inspiriert durch Best-Practices von Three.js, Babylon.js und WebGPU Samples. Gradueller Wechsel von WebGL zu WebGPU mit vollständiger Fallback-Strategie.

Scope

1. Architektur & Design 📐

• Abstrakte Graphics API (Renderer-Abstraction Layer)
• WebGPU-Renderer als Primary Engine
• WebGL2-Fallback für Legacy-Browser
• Modular aufgebaute Component-Struktur
• Post-Processing Pipeline (bestehend + WebGPU-optimiert)

2. WebGPU Renderer Core 🎯

• Initialisierung + Device Management
• Buffer Management (Vertex, Index, Uniform, Storage)
• Texture Management (2D, 3D, Cubemap, renderable)
• Shader Compilation (WGSL + Auto-Transpilation)
• Render Pass Management
• Resource Pooling & Memory Management

3. Scene Graph & Rendering Pipeline 🌳

• Camera System (Perspective, Orthographic)
• Geometry + Material System
• Lighting System (Point, Directional, Ambient)
• Transformation Hierarchies (Matrix4, Vector3)
• Batching & Culling Strategies

4. Post-Processing Framework ✨

• Effect Composer (bestehend, auf WebGPU portiert)
• Shader-agnostische Pass-System
• Performance-optimierte Bloom, Vignette, ChromaticAberration
• Compute Shader Support für NPC-AI Offloading

5. Attribution & Licensing ⚖️

• Detailliertes Component Inventory
• Quellcode-Referenzen für jeden übernommenen Teil
• Attribution-Headers in jedem File
• WEBGPU_ENGINE_ATTRIBUTION.md

6. Dokumentation & Roadmap 📚

• webgl_engine_analysis.md (Ist-Analyse)
• webgpu_migration_roadmap.md (Migrationsstrategie)
• webgpu_architecture.md (Technisches Design)
• webgpu_implementation_guide.md (Developer Guide)
• API-Referenz + Best-Practices

7. Testing & Validation ✅

• Fallback-Tests (WebGPU → WebGL)
• Performance Benchmarks
• Visual Regression Tests
• Canvas Comparison (WebGPU vs WebGL output)

---

Deliverables

A. Engine-Struktur (js/engine/)

js/engine/
├── core/
│   ├── WebGPURenderer.js          # Main WebGPU renderer
│   ├── WebGLRenderer.js           # Fallback (drei.js wrapper)
│   ├── RendererFactory.js         # Factory pattern
│   └── GraphicsContext.js         # Abstraction layer
│
├── webgpu/
│   ├── WebGPUDevice.js            # Device/Queue management
│   ├── WebGPUBuffer.js            # GPU Buffer abstraction
│   ├── WebGPUTexture.js           # Texture management
│   ├── WebGPUShader.js            # Shader compilation (WGSL)
│   ├── WebGPURenderPass.js        # Render pass encoder
│   ├── WebGPUCompute.js           # Compute shader support
│   └── WebGPUResourcePool.js      # Memory pooling
│
├── scene/
│   ├── Camera.js                  # Perspective/Orthographic
│   ├── Transform.js               # Matrix hierarchies
│   ├── Geometry.js                # Vertex data
│   ├── Material.js                # Material + Shader binding
│   ├── Light.js                   # Point/Directional/Ambient
│   └── SceneGraph.js              # Hierarchy management
│
├── post-effects/
│   ├── EffectComposer.js          # (existing, ported to WebGPU)
│   ├── passes/
│   │   ├── RenderPass.js
│   │   ├── BloomPass.js
│   │   ├── VignettePass.js
│   │   ├── ChromaticPass.js
│   │   └── ComputePass.js         # NEW: for NPC offloading
│   └── shaders/
│       ├── bloom.wgsl
│       ├── vignette.wgsl
│       └── chromatic.wgsl
│
├── math/
│   ├── Vector2.js
│   ├── Vector3.js
│   ├── Vector4.js
│   ├── Matrix4.js
│   ├── Quaternion.js
│   └── MathUtils.js
│
├── utils/
│   ├── WebGPUCapabilities.js      # Device capability detection
│   ├── ShaderCompiler.js          # WGSL transpiler helpers
│   ├── PerformanceMonitor.js      # FPS, GPU memory tracking
│   └── ResourceTracker.js         # Memory leak detection
│
├── loaders/
│   ├── TextureLoader.js
│   ├── GeometryLoader.js
│   └── ShaderLoader.js
│
├── constants.js                   # API constants, enums
├── types.js                       # TypeScript-style type definitions
└── index.js                       # Main export

B. Dokumentation

docs/
├── webgl_engine_analysis.md               # Current state analysis
├── webgpu_migration_roadmap.md            # Timeline + milestones
├── webgpu_architecture.md                 # Technical design
├── webgpu_implementation_guide.md         # Developer guide
├── webgpu_api_reference.md                # API docs
└── WEBGPU_ENGINE_ATTRIBUTION.md           # Licensing + attribution

C. Migration Files

js/
├── engine-compat.js               # WebGPU/WebGL2 fallback selector
├── post-effects.js                # Updated to support both renderers
├── starfield-webgpu.js            # WebGPU version (or compatibility layer)
└── galaxy3d-webgpu.js             # WebGPU version (or compatibility layer)

D. Tests

tests/
└── webgpu/
    ├── renderer.test.js
    ├── buffer.test.js
    ├── texture.test.js
    ├── shader.test....

</details>



<!-- START COPILOT CODING AGENT SUFFIX -->

*This pull request was created from Copilot chat.*
>

<!-- START COPILOT CODING AGENT TIPS -->
---

⌨️ Start Copilot coding agent tasks without leaving your editor — available in [VS Code](https://gh.io/cca-vs-code-docs), [Visual Studio](https://gh.io/cca-visual-studio-docs), [JetBrains IDEs](https://gh.io/cca-jetbrains-docs) and [Eclipse](https://gh.io/cca-eclipse-docs).