STADT-OPERATION 3D

Ein taktischer First-Person-Shooter, der komplett im Browser läuft – mit echter 3D-Stadt, fahrbaren Fahrzeugen, Panzer-Kanone, Scharfschützen-Scope, wechselndem Wetter, einem freien Custom-Modus und einer Level-Kampagne. Ein Benchmark-Projekt: was kann ein LLM in einer einzigen Session für ein spielbares 3D-Erlebnis liefern?

---

🎮 Was ist das?

Du bist ein CT in einer lebendigen 3D-Stadt. Statt reiner CS-Nachahmung gibt es hier Landschaft, Fahrzeuge und freie Taktik:

• Echte 3D-Stadt (Map V2) – Straßen mit Gehwegen, betretbare Häuser (Türöffnung, Innenraum mit Boden/Decke/Möbeln, Fenster mit warmem Licht), Hecken, Metallcontainer, Paletten-Stacks, Kisten, Baumstämme, Metallzäune, Laternen + Ampeln, Bäume, Büsche, geparkte Autos, A/B-Bombenzonen, Himmel-Kuppel, ACES-Tonemapping, Abendlicht. Prozedurale Texturen mit korrektem Welt-Maßstab (1 Kachel ≈ 2 m).
• Fahrzeuge – steig in ein Auto (E) und fahre durch die Stadt. Im Panzer drehst du den Turm mit der Maus und schießt die Kanone (RMB).
• Scharfschütze – AWP mit echtem Scope (RMB): Zoom, Fadenkreuz, reduzierte Streuung, verlangsamtes Tempo.
• Inventar (I) – Waffen wechseln, Munition, Panzer, Medikits.
• Wetter – Abend, Regen, Nebel, Schnee (Licht, Nebel, Partikel).
• Zwei Modi – Freier Einsatz (Wetter, Mission, Gegneranzahl frei wählbar) und Level-Kampagne (5 Einsätze mit Aufgaben, Freischaltungen & Karte).
• Minimap + große Einsatz-Karte (K).

Steuerung

Taste	Aktion
Maus	Zielen & Schießen (Linksklick)
RMB	Scope an/aus (Sniper) · Kanone (Panzer)
W A S D	Bewegen / Fahren
E	Ein-/Aussteigen (Fahrzeug)
Shift	Sprinten
R	Nachladen
I	Inventar
Q	Medikit nutzen
1 / 2	Waffe wechseln (Slot 0/1)
K	Einsatz-Karte
M	Ton an/aus
Esc	Pause

---

🚀 Starten

python3 -m http.server 8099   # → http://localhost:8099
# oder: npx serve .

Ein lokaler Server ist nötig, weil der Maus-Lock (requestPointerLock) einen sicheren Kontext (localhost/https) verlangt.

---

🗂️ Projektstruktur

cs_benchmark/
├── index.html              # HTML, HUD, Overlays (Menü, Shop, Inventar, Scope, Level-Map)
├── css/style.css           # Stile (Dark-Theme, HUD, Scope, Level-Liste, Minimap)
├── js/
│   ├── config.js           # Waffen, Fahrzeuge, Wetter, Missionen, Level, Zustand
│   ├── audio.js            # WebAudio (Oszillatoren + Rauschen, Motor, Kanone)
│   ├── textures.js         # Prozedurale Canvas-Texturen (Stadt, Natur, Tarn)
│   ├── world.js            # Szene, Licht, Stadt-Layout, Kollision, Fahrzeuge, Bombe
│   ├── models.js           # Bots + Waffe-Viewmodel
│   ├── vehicles.js         # Ein-/Aussteigen, Fahren, Panzer-Kanone
│   ├── bots.js             # Bot-KI: Wegpunkte, Sichtlinien, Strafen
│   ├── combat.js           # Raycasting, Scope, Schaden, Kill-Feed
│   ├── game.js             # Wetter, Missionen, Level-Modus, Sieg/Niederlage
│   └── main.js             # Shop, Inventar, Update-Loop, HUD, Minimap, Tasten
├── assets/textures/        # CC0-Texturen (Polyhaven, Public Domain)
└── tools/fetch_textures.py # lädt fehlende Texturen nach

---

🛠️ Technik

• Three.js r128 (CDN) – WebGL, Kamera, Licht, Schatten
• Prozedurale Texturen – alle per Canvas 2D erzeugt (keine externen Assets nötig)
• WebAudio API – Oszillatoren + Rausch-Impulse (keine Sound-Dateien)
• Pointer Lock API – First-Person-Maussteuerung
• Kein Build-Step – kein Bundler, kein Transpiler, keine Node-Modules

Kollision & Sichtblockade

Zwei-Achsen-Resolver (x dann z, 3× iterativ) für Spieler, Bots und Fahrzeuge. Kugeln nutzen Ray-AABB – Wände, Zäune, Container und Kisten blocken Schüsse; flache Kugeln fliegen über niedrige Deckung (Hecken, Baumstämme). Die Türöffnung in den Häusern ist bewusst keine Kollisionsbox → durchschossbar. Spieler-Radius 0,55 m passt durch die 1,6 m Türöffnung.

Fahrzeuge & Zerstörung

Auto und Panzer haben eigene Kollisionsboxen, Beschleunigung, Lenkung und Rollwiderstand. Die Panzer-Turm-Richtung folgt der Maus; die Kanone schießt in Turm-Richtung: Bots per Raycast, Zerstörbares per Kugel-Ray – jetzt auch Kisten, Paletten, Container und Baumstämme neben Autos, Bäumen und Büschen. Flächenschaden (~7,5 m), Kettenreaktionen, Bots im Sprengkreis werden geschädigt. Die Zerstörung bleibt dauerhaft (Kollision + Minimap + Level-Map).

Scope

RMB schaltet den Scope: FOV wird interpoliert (Zoom), Fadenkreuz + Vignette als Overlay, Streuung sinkt, Maus-Sensitivität und Laufgeschwindigkeit passen sich an.

Wetter & Beleuchtung

Vier Zustände (Abend/Regen/Nebel/Schnee). Standard ist die warme Abendstimmung: tiefstehende Sonne (4096-px-Shadow-Map), ACES-Tonemapping, Himmel-Kuppel mit Farbverlauf, Straßenlaternen mit PointLight, Fenster mit warmem Emissive. Regen/Schnee als THREE.Points, mit dem Spieler mitbewegend.

Level-Modus

5 Einsätze mit Aufgaben (Kills, Bombe, Fahrzeug, Panzer, Scharfschütze). Jeder abgeschlossene Level schaltet die nächste Waffe frei. Minimap + große Einsatz-Karte zeigen Straßen, Häuser, Sites und Fahrzeuge.

---

📦 Features

• ✅ Echte 3D-Stadt (Straßen, Gehwege, betretbare Häuser, Zäune, Container, Kisten, Bäume, Autos)
• ✅ Fahrbare Fahrzeuge (Auto + Panzer mit Kanone)
• ✅ Scharfschützen-Scope (Zoom, Fadenkreuz, reduzierte Streuung)
• ✅ Inventar (Waffen, Munition, Panzer, Medikits)
• ✅ 4 Wetterzustände mit Partikeln
• ✅ Freier Custom-Modus (Wetter, Mission, Gegneranzahl)
• ✅ Level-Kampagne (5 Einsätze, Freischaltungen, Karte)
• ✅ Minimap + große Einsatz-Karte
• ✅ 8 Waffen + Panzer + Medikit, Arsenal-Shop
• ✅ 3 Schwierigkeitsgrade
• ✅ Raycasting mit Wand-Blockade & Tracer
• ✅ Zerstörbare Welt: Panzer-Kanone sprengt Autos, Bäume, Büsche, Kisten, Paletten, Container, Baumstämme (Flächenschaden + Kettenreaktion)
• ✅ Bot-KI (Wegpunkte, Sichtlinien, Strafen, Stuck-Erkennung)
• ✅ Bombe-Entwaffnung, Kill-Feed, Screenshake, Feuerwerk
• ✅ Alle Sounds per WebAudio-Synth, alle Texturen prozedural
• ✅ Responsive, Dark-Theme, saubere Projektstruktur

Nicht implementiert (bewusst)

• Online-Multiplayer
• Granaten
• Mobile Touch-Steuerung
• Sound-Dateien (bewust nur Synthese, für Portabilität)

---

🧪 Testen

index.html öffnen → "Freier Einsatz" → 5 Runden überleben

Bugs finden? Konsole (F12) – alle Module sind klar getrennt.

Automatisierter Smoke-Test (Playwright/Chromium, WebGL via Swiftshader):

python3 -m http.server 8099 &
python3 tools/smoke_test.py   # Welt-Build, Runde, Fahrzeug, Panzer, Shop

---

📜 Lizenz

MIT – frei benutzt, verändert, weitergegeben. Texturen: CC0 (Public Domain) via Polyhaven.