OpenSCENARIO im Browser simulieren: .xosc laden & abspielen

Sie wollen nicht nur abspielen, sondern selbst erstellen?

Diese Anleitung dreht sich ums Abspielen eines Szenarios. Wenn Sie eines aufbauen wollen — mit Phasen, Events, Aktionen, Triggern und PASS-/FAIL-Bedingungen —, starten Sie im Bereich Scenario editor oder direkt bei Ihr erstes Szenario erstellen. Für die Ladeseite im Detail, einschließlich der ?open=-GitHub-Route, siehe Eine bestehende .xosc öffnen und abspielen.

drawtonomy ist ein kostenloses Browser-Whiteboard für Fahrszenarien. Dieselbe Zeichenfläche funktioniert zugleich als kostenloser, browserbasierter OpenSCENARIO-Simulator: Sie legen eine .xosc samt zugehöriger .xodr ab, und drawtonomy simuliert das Storyboard direkt im Browser — mit Zeitleisten-Scrubbing, Einzelbild-Navigation, Ghost-Spuren, einer Follow-Ego-Kamera, die dem Ego-Fahrzeug folgt, sowie einem .webm-Export per Klick.

Unter der Haube läuft der Browser-Simulator auf Basis von esmini, kompiliert zu WebAssembly — der quelloffenen Referenz-Laufzeit für OpenSCENARIO 1.x aus der schwedischen ADAS-Community. Es ist derselbe Simulationskern, der auch auf der Linux-Kommandozeile läuft, nur eben in der Seite selbst: gleiche Storyboard-Semantik (Acts, Sequences, Maneuvers, Trigger), gleicher Parser, gleicher Fahrzeugzustand. Die Korrektheit der Laufzeit ist vollständig dem esmini-Projekt zu verdanken; drawtonomy stellt nur die Browser-Hülle drumherum. Keine Installation, kein MATLAB, kein C++-Build, kein Konto nötig.

Eine ACC-Cut-in-.xosc laden, im Browser über esmini-WASM simulieren, die Zeitleiste scrubben und den Lauf als .webm aufzeichnen.

Eine OpenSCENARIO-Datei laden

Es gibt zwei Wege, ein .xosc + .xodr-Paar auf die Zeichenfläche zu bringen:

1. Drag & Drop — beide Dateien gemeinsam auf die Zeichenfläche ziehen. drawtonomy erkennt das Paar automatisch und zeigt bei mehreren vorhandenen Szenarien das xosc-Auswahlbanner an.
2. Menü → Import → OpenSCENARIO, dann die .xosc auswählen (und die passende .xodr, falls sie nicht am selben Ort liegt).

drawtonomy parst das OpenDRIVE-Straßennetz, übergibt die .xosc an die eingebettete esmini-WASM-Laufzeit und wechselt am unteren Bildrand von der gewohnten Werkzeugleiste zur PlaybackControl.

Falls Sie gerade keine eigene .xosc zur Hand haben: Das esmini-Projekt bringt einen kleinen Katalog an Testszenarien mit. Laden Sie eines der .xosc + .xodr-Paare aus esmini/resources/xosc/ herunter, um den Simulator sofort auszuprobieren.

Simulieren, pausieren und in der Zeitleiste navigieren

Während der Simulation dockt die PlaybackControl am unteren Rand der Zeichenfläche an. Die wichtigsten Bedienelemente:

Aktion	So geht’s
Simulieren / Pausieren	Leertaste, oder die ▶- / ❚❚-Schaltfläche
Zeitleiste scrubben	Den Regler auf der Zeitleiste ziehen
Frame zurück / vor	← / →
Zu einem Zeitpunkt springen	Auf die Zeitanzeige klicken und einen Wert eingeben

Das Scrubben ist exakt: Die Pose jeder Entität stammt direkt aus der Simulation, sodass jeder ausgewählte Frame einen wohldefinierten Zustand hat. Genau das macht den Browser-Simulator als Review-Werkzeug wertvoll — Sie pausieren exakt an dem Frame, in dem der Cut-in passiert, und untersuchen die Geometrie in Ruhe, statt während des laufenden Durchlaufs zu raten.

Simulationsgeschwindigkeit anpassen

Klicken Sie auf den Geschwindigkeits-Chip in der PlaybackControl, um das Geschwindigkeits-Popover zu öffnen. Wählen Sie ein Preset (0,25×, 0,5×, 1×, 2×, 4×) oder ziehen Sie den Regler für einen individuellen Wert. Die gewählte Geschwindigkeit bleibt über Sitzungen hinweg gespeichert.

Eine langsamere Wiedergabe ist der einfachste Weg, eine kritische Interaktion Frame für Frame zu untersuchen; eine schnellere Wiedergabe eignet sich am besten, um ein lang laufendes Szenario zu überfliegen, bevor Sie gezielt an eine Stelle springen.

Follow Ego — die Kamera folgt dem Ego-Fahrzeug

Standardmäßig passt die Kamera die gesamte Szene in die Bounding Box ein. Schalten Sie Follow Ego ein, und die Zeichenfläche schwenkt mit dem Ego-Fahrzeug mit, sodass es während des gesamten Szenarios zentriert im Bild bleibt.

Das zahlt sich bei Szenarien aus, deren Geschehen sich mit dem Ego-Fahrzeug mitbewegt — ein Cut-in auf der Autobahn, ein Spurwechsel, ein langer ACC-Lauf auf einer kurvigen Straße. Bei einer fest eingestellten Bbox-Kamera würde entweder so weit herausgezoomt, dass die eigentliche Interaktion kaum noch zu erkennen ist, oder das Ego-Fahrzeug würde am Bildrand abgeschnitten.

Ghost-Spuren — Path und Footprint

Schalten Sie Ghosts ein, um die simulierte Trajektorie jeder Entität direkt auf der Zeichenfläche anzuzeigen:

• Path-Ghosts — eine dünne Polylinie entlang des bisher zurückgelegten Wegs.
• Footprint-Ghosts — der Umriss der Entität, abgetastet in einem festen Zeitintervall. Praktisch, um Beschleunigen und Abbremsen auf einen Blick zu erkennen.

Das Intervall lässt sich konfigurieren (z. B. alle 0,5 s / 1 s / 2 s). Ghosts werden außerdem in Bild- und SVG-Exporte eingebrannt — die Abbildung, die Sie für eine Folie oder ein Paper speichern, zeigt so die gesamte Trajektorie statt nur den aktuellen Frame.

Wie Ghosts beim Erstellen von Szenarien funktionieren, erläutert Path und Footprint im Detail; im Browser-Simulator visualisieren sie den simulierten Ablauf.

Nach dem Bearbeiten neu simulieren

Wenn Sie das Szenario nach dem Import bearbeitet haben — eine Entität verschoben, einen Path geändert, ein Fahrzeug ausgetauscht —, markiert der Browser-Simulator die betroffenen Trajektorien als veraltet. Klicken Sie auf Re-simulate, um das Storyboard erneut durch die eingebettete esmini-WASM-Laufzeit laufen zu lassen und die zwischengespeicherte Trajektorie zu aktualisieren. So spiegelt die Simulation stets den aktuellen Stand des Szenarios wider, nie einen veralteten Schnappschuss.

Die Simulation als .webm exportieren

Klicken Sie auf Export in der PlaybackControl, um die Simulation als .webm-Video aufzuzeichnen.

Im Export-Popover stehen zwei Einstellungen zur Verfügung:

• Seitenverhältnis — Free (eng an der Bbox), 16:9 (Querformat, YouTube), 9:16 (Hochformat, Reels / TikTok / Shorts), 1:1 oder 4:3. Bei allen Verhältnissen außer Free wird die Bounding Box mit der Hintergrundfarbe aufgefüllt, bis das gewählte Format erreicht ist — so wird aus einem langen, schmalen Fahrspur-Szenario kein hauchdünner Streifen.
• Kameramodus — Bbox (gesamte Szene) oder Follow Ego (die Ansicht folgt dem Ego-Fahrzeug, mit Radius-Presets von 30 / 50 / 100 m).

Sie können auch nur einen Ausschnitt des Laufs aufzeichnen statt des gesamten Szenarios: Stellen Sie RANGE auf Trim und ziehen Sie die beiden Griffe, die auf der Zeitleiste erscheinen — siehe Nur einen Teil des Laufs aufzeichnen.

Während der Aufzeichnung zeigt die Zeichenfläche eine Export-video-Fortschrittsanzeige mit Abbrechen-Schaltfläche. Der Export nutzt die MediaRecorder-API Ihres Browsers, sodass alles lokal bleibt — kein Server-Upload, kein Konto erforderlich.

Damit eignet sich der Browser-Simulator auch als praktischer Demo-Recorder für die OpenSCENARIO-Arbeit: Eine .xosc aus der CI laden, auf Export klicken, und Sie haben in wenigen Sekunden ein teilbares .webm des fehlgeschlagenen Falls.

Der Vergleich zu esmini auf der Kommandozeile

Der Browser-Simulator von drawtonomy und eine native esmini-Installation teilen sich denselben Simulationskern — esmini selbst. Der Unterschied liegt in der Hülle:

• drawtonomy führt esmini im Browser aus (WebAssembly), mit einer Benutzeroberfläche direkt in der Zeichenfläche: Zeitleisten-Regler, Follow Ego, Ghost-Spuren, .webm-Export, gemeinsame Nutzung über eine .drawtonomy.svg-Quelldatei.
• esmini CLI führt esmini nativ aus, mit einem 3D-Viewer auf Basis von OpenSceneGraph, einem Headless-CI-Modus sowie C++- und Python-APIs zum Einbetten.

Wenn Sie die vollständige Storyboard-Semantik auf einer CI-Maschine, in einem Python-Notebook oder mit dem nativen 3D-Viewer benötigen → nutzen Sie esmini direkt. Wenn Sie das Szenario sofort in einem Browser simulieren wollen — für Triage, Code-Review, Lehre oder ein schnelles Demo-.webm — ist der Browser-Simulator der schnellste Weg.

Der OpenSCENARIO-Bundle-Export übergibt dieselbe .xosc + .xodr an Ihre lokale esmini-Installation, sodass beide Abläufe nahtlos ineinandergreifen.

Siehe auch

• Scenario editor — Szenarien erstellen, nicht nur abspielen.
• Eine bestehende .xosc öffnen und abspielen — die Ladeseite im Detail: Dateipaare, die ?open=-GitHub-Route und die Katalog-Warnung.
• Playback — die Transportleiste im Scenario editor.
• Anwendungsfall: OpenSCENARIO-Simulator
• OpenDRIVE + OpenSCENARIO als esmini-fertiges Bundle exportieren
• Was ist OpenSCENARIO?
• Was ist esmini?
• Path und Footprint
• drawtonomy vs esmini
• drawtonomy vs CARLA