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 OpenSCENARIO file
Section titled “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.xodrif 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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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,
.webmexport, sharing a.drawtonomy.svgsource. - 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.