Simulate an OpenSCENARIO file in the browser — load a .xosc and run it

drawtonomy is a free browser whiteboard for driving scenarios. The same canvas is also a free, browser-based OpenSCENARIO simulator: drop in a .xosc and its .xodr, and drawtonomy simulates the storyboard right in your browser — with seek, frame-step, ghost trails, a Follow Ego camera that tracks the ego vehicle, and a one-click .webm export.

Under the hood, the browser simulator is built on top of esmini compiled to WebAssembly — the open-source reference OpenSCENARIO 1.x runtime from the Swedish ADAS community. The same simulation core that runs on a Linux CLI runs inside the page: same storyboard semantics (acts, sequences, maneuvers, triggers), same parser, same vehicle state. All credit for the runtime correctness goes to the esmini project; drawtonomy is just the browser shell around it. No install, no MATLAB, no C++ build, no account.

Load an ACC cut-in .xosc, simulate it in-browser via esmini-WASM, scrub the timeline, and record the run as .webm.

Load an OpenSCENARIO file

Two ways to get a .xosc + .xodr pair onto the canvas:

Drag and drop both files onto the canvas together. drawtonomy detects the pair and shows the xosc-picker banner if multiple scenarios are present.
Hamburger menu → Import → OpenSCENARIO, then select the .xosc (and the matching .xodr if it isn’t co-located).

drawtonomy parses the OpenDRIVE road network, hands the .xosc to the embedded esmini-WASM runtime, and switches the bottom of the screen from the normal tool strip to the PlaybackControl.

If you don’t have a .xosc handy, the esmini project ships a small catalog of test scenarios. Drop in one of the .xosc + .xodr pairs from esmini/resources/xosc/ to try the simulator right away.

Simulate, pause, and seek

The PlaybackControl docks to the bottom of the canvas during a simulation. The core controls:

Action	How
Simulate / Pause	`Space`, or the ▶ / ❚❚ button
Seek	Drag the timeline scrubber
Frame back / forward	`←` / `→`
Jump to time	Click the time readout and type a value

Seeking is exact — every entity’s pose comes from the simulation, so any frame you pick has a defined state. This is what makes the browser simulator useful as a review tool: pause on the exact frame where the cut-in happens and inspect the geometry instead of guessing while the simulation rolls on.

Adjust simulation speed

Click the speed chip in the PlaybackControl to open the speed popover. Pick a preset (0.25×, 0.5×, 1×, 2×, 4×) or drag the slider for a custom value. The preferred speed persists across sessions.

Slowing the simulation down is the easiest way to inspect a tight interaction frame-by-frame; speeding it up is the easiest way to skim a long-running scenario before deciding to seek.

Follow Ego — the camera tracks the ego vehicle

By default the camera fits the full scene bounding box. Toggle Follow Ego and the canvas pans along with the ego vehicle so it stays centred in the view as the scenario runs.

This matters for scenarios where the action moves with the ego — a highway cut-in, a lane change, a long ACC run on a curved road — where a fixed bbox camera would either zoom out so far that the interaction becomes invisible, or chop the ego off the edge of the view.

Ghost trails — Path and Footprint

Turn on Ghosts to show each entity’s simulated trajectory directly on the canvas:

Path ghosts — a thin polyline of where the entity has been.
Footprint ghosts — the entity’s outline sampled at a fixed time interval. Useful for spotting acceleration / deceleration at a glance.

The interval is configurable (e.g. every 0.5s / 1s / 2s). Ghosts also bake into image and SVG exports, so the figure you save for a slide or paper shows the trajectory, not just the current frame.

See Path and Footprint for a deeper look at how Ghosts work when authoring scenarios; in the browser simulator they visualise the simulated run.

Re-simulate after editing

If you’ve edited the scenario after import — moved an entity, changed a Path, swapped a vehicle — the browser simulator marks the affected trajectories as stale. Click the Re-simulate button to re-run the storyboard through the embedded esmini-WASM runtime and refresh the cached trajectory. The simulation always reflects the current scenario rather than a stale snapshot.

Export the simulation as .webm

Click Export in the PlaybackControl to record the simulation as a .webm video.

The Export popover gives you two knobs:

Aspect ratio — Free (bbox-tight), 16:9 (landscape, YouTube), 9:16 (portrait, Reels / TikTok / Shorts), 1:1, or 4:3. Non-Free ratios pad the bounding box with the background colour to hit the chosen shape — so a long, thin lane scenario doesn’t come out as a sliver.
Camera mode — Bbox (full scene) or Follow Ego (the view tracks the ego, with a radius preset of 30 / 50 / 100 m).

While recording, the canvas shows an Export video progress overlay with a Cancel button. The export uses MediaRecorder in your browser, so everything stays local — no server upload, no account needed.

This makes the browser simulator a useful demo recorder for OpenSCENARIO work: drop in a .xosc from CI, hit Export, and you have a shareable .webm of the failing case in a few seconds.

How it compares to running esmini on the command line

drawtonomy’s the browser simulator and a native esmini install share the same simulation core — esmini itself. What differs is the shell:

drawtonomy runs esmini in your browser (WebAssembly), with a canvas-native UI: timeline scrubber, Follow Ego, Ghost trails, .webm export, sharing a .drawtonomy.svg source.
esmini CLI runs esmini natively, with a 3D OpenSceneGraph viewer, headless CI mode, plus C++ / Python APIs for embedding.

If you need full storyboard semantics on a CI machine, in a Python notebook, or with the native 3D viewer → run esmini directly. If you want to simulate the scenario right now in a browser — for triage, code review, teaching, or a quick demo .webm — Scenario Play is the fastest way.

The OpenSCENARIO bundle export hands the same .xosc + .xodr to your local esmini, so the two flows fit end-to-end.