Drone Show Designer
WIPBrowserbasierter Node-Editor für Drohnen-Lichtshows: ein typisierter ShowGraph als Single Source of Truth, Live-3D-Preview im Main-Thread, deterministisches Bake mit voller Physik-Validierung im Web-Worker. Dazu ein KI-Agent mit 30+ Tools, der direkt am Graphen arbeitet. Live auf drones.prototyp.ms, in aktiver Entwicklung.
Drohnen-Choreographie ist heute in Blender-Plugins und proprietäre Desktop-Programme eingesperrt: weder kollaborativ skriptbar, noch im Browser bearbeitbar, noch KI-zugänglich. Hier entsteht eine web-native Alternative, von Grund auf neu entwickelt: ein typisierter ShowGraph (launch → formation → transition → idle → land) ist die kanonische Zustandsquelle; React-Flow-Canvas, Three.js-Viewport, Inspector, Validator und Exporter sind allesamt abgeleitete Sichten. Ein Claude-Tool-Calling-Agent kann den Graphen direkt schreiben; jeder Schreibvorgang macht vorher einen Snapshot, sodass sich jede KI-Änderung mit Ctrl+Z rückgängig machen lässt. Eine Standalone-Variante daneben nimmt einen Text-Prompt und liefert ein Formation-JSON plus Blender-Import-Script. Aktuell live auf drones.prototyp.ms; Engine, Preview, Bake und KI-Agent stehen, neue Tools und Music-Sync landen laufend.
Schlüsselentscheidung
Welcher Teil des Editors ist die Wahrheit? Der ShowGraph. Eine typisierte Datenstruktur (launch → formation → transition → idle → land), aus der Canvas, Three.js-Viewport, Inspector, Validator und Exporter allesamt abgeleitet werden. Das hält allen State an einer Stelle und zieht die unbequeme Konsequenz mit: Live-Preview darf approximieren, Bake darf das nicht. Diese Trennung steckt in zwei explizit verschiedenen Codepfaden, jeder mit eigenen Tests.
Technische Details
Stack, Architektur, Trade-offs
Technologien
Runtime
UI / 3D
Modelle
Storage
Tests
Aktiv in Entwicklung. Das Live-Deployment auf drones.prototyp.ms läuft, der Kern (Graph-Engine, Preview, Bake, KI-Agent) steht. Neue Tools, Music-Sync und Feinschliff landen laufend.
Status - was steht, was in Arbeit ist
Was steht
stableGraph-Engine, Preview-Pfad, deterministisches Bake im Worker, 8 Transitions / 11 Idles / 10 Color-Programme, IndexedDB-Autosave, CSV-Export. 41 Testdateien decken die harten Teile ab: Topology, Timing, Round-Trip-Serialisierung, Split/Merge-Flow.
Was in Arbeit ist
in arbeitKI-Agent ist live aber neue Tools landen laufend; Music-Sync-Pipeline wird noch ausgebaut; MP4-Render-Export ist optional und nicht produktionsfest. Standalone-Companion ist ein eigener kleiner App-Slot, der noch nicht voll mit dem Haupt-Editor verheiratet ist.
Was bewusst draußen ist
non-goalsMulti-User-Collaboration, Cloud-Storage, eigenes Hardware-Protokoll. Der Editor ist single-user, browser-first, exportiert in offene Formate (CSV-Waypoints + JSON-Projekt). Das soll auch so bleiben.
Schlüsselentscheidungen
Graph als Single Source of Truth
Ein einziges typisiertes Modell ist die kanonische Zustandsquelle: launch / formation / transition / idle / land plus flow- und attachment-Kanten. React-Flow-Canvas, Three.js-Viewport, Inspector-Panels, Validator und Exporter sind allesamt abgeleitete Sichten. Kein doppelter State, keine Drift.
Preview vs. Bake - zwei klare Pfade
evaluateAtTime() läuft im Main-Thread, unter 16ms pro Frame für 60-fps-Scrubbing, mit zugelassenen Approximationen wie linearer Interpolation und nicht durchgesetzten Geschwindigkeits-Constraints. bakeShow() läuft in einem Web-Worker mit voller Physik-Enforcement und ist als einziges berechtigt, Export-Trajektorien zu produzieren. Der Vertrag zwischen beiden ist explizit und getestet.
KI-Agent als vollwertiger Editor
Ein Claude-Tool-Calling-Agent hat Zugriff auf 30+ typisierte Tools: create_formation_from_text, add_transition_node, set_color_program, generate_music_synced_show, analyze_image_for_formation, fix_all_violations. Jedes Write-Tool schreibt vorher einen History-Snapshot; jede KI-Änderung lässt sich mit Ctrl+Z rückgängig machen.
Registries als einzige Erweiterungs-Oberfläche
Eine neue Transition, ein Formation-Generator, ein Farbprogramm: ein einziger register…()-Call. Das macht das System für mich selbst und für KI-Tooling gleichermaßen erweiterbar. Die Engine kennt nur Strategien, nicht die spezifischen Implementierungen.
Physik-Validierung getrennt vom Editor
Per-Segment-Geschwindigkeit (horizontal + vertikal), Beschleunigung, Drohnen-Paar-Abstand, Höhen-Floor und Geofence werden gegen das gebakte Resultat geprüft. Auto-Fix-Patches existieren für die häufigen Verstöße; Auto-Timing weist Dauern so zu, dass Constraints erfüllt sind.
Crash-Recovery via IndexedDB
Autosave landet in IndexedDB. Reload nach einem Crash bietet an, die zuletzt in Bearbeitung befindliche Show wiederherzustellen: kein verlorener Stand bei Browser-Crash oder versehentlich geschlossenem Tab.
Architektur-Gesetze
Vier Regeln, die im Code (und in Tests) durchgesetzt werden. Sie machen den Editor erweiterbar, ohne den Kern aufzuweichen.
- 1
ShowGraph ist kanonisch. Alles andere ist eine abgeleitete Sicht.
- 2
Live-Preview darf approximieren; Bake nicht.
- 3
Transitionen besitzen Point-Mapping, Entry/Exit und Motion-Interpolation, aber niemals Timing oder Drohnen-Allokation.
- 4
Registries sind die einzige Erweiterungs-Oberfläche. Eine neue Transition, ein Generator, ein Farbprogramm ist ein einzelner register…()-Aufruf.
Im Editor enthalten
Die Bibliotheken hinter den Knoten. Alles registrierbar, alles vom KI-Agenten erreichbar.
Formation-Generatoren
ring · grid · sphere · spiral · line · heart · star
7 prozedurale Generatoren: Parameter-getrieben, direkt aus dem Inspector editierbar.
firework-burst · apple-tree-shake · breathing-sphere
3 animierte Formationen mit eigenem internem Timing.
create_formation_from_text
Frei-Text zu Punktwolke, generiert vom KI-Agenten direkt im Graphen.
Transition-Strategien
stagger · spiral · explosion · implosion · cascade · morph · color-sweep · bounce
8 Strategien. Jede besitzt ihr eigenes Point-Mapping und einen Minimum-Dauer-Schätzer; Timing und Drohnen-Allokation gehören aber nicht dazu (siehe Architektur-Gesetz Nr. 3).
Idle-Verhalten
hover · orbit · breathe · random-walk · figure-8 · swarm · sparkle · pulse · wave · spin · drift
11 Idle-Verhalten für Drohnen, die an Formation-Knoten attached sind, mit per-Achse-Inheritance-Flags.
Farbprogramme
solid · gradient · rainbow · pulse · chase (10 Programme)
10 Farbprogramme: Konstanten, Gradients, Regenbogen, Pulse, Chase-Pattern.
Projekt-Größe (Stand jetzt)
Eckdaten aus dem aktuellen Stand. Test-LOC wird nicht zur 'Größe' gezählt, ist aber relevant für die Qualität der harten Teile.
| Kennzahl | Wert |
|---|---|
| Quelldateien (ohne Tests) | 110 |
| Quell-LOC (ohne Tests) | ~22.700 |
| Testdateien | 41 |
| Test-LOC | ~7.900 |
| Registrierte KI-Tools | 30+ |
| Transition-Strategien | 8 |
| Idle-Verhalten | 11 |
| Formation-Generatoren | 7 + 3 animiert |
Deployment
Statisches Vite-Build, ausgeliefert über nginx auf der gleichen VPS wie meine anderen .prototyp.ms-Apps. Keine Server-Komponente: alle KI-Aufrufe laufen mit einem benutzer-bereitgestellten Claude-API-Key direkt aus dem Browser. Ohne Key arbeitet der Editor vollständig; nur das Chat-Panel ist dann deaktiviert.