브라우저에서 OpenSCENARIO 파일 시뮬레이션 — .xosc를 불러와 실행합니다

drawtonomy는 드라이빙 시나리오를 위한 무료 브라우저 화이트보드입니다. 같은 캔버스는 또한 **무료 브라우저 기반 OpenSCENARIO 시뮬레이터**이기도 합니다: .xosc와 .xodr을 드롭하면 drawtonomy가 스토리보드를 브라우저에서 바로 시뮬레이션합니다 — 스크롤, 프레임 스텝, 고스트 궤적, 이고 차량을 추적하는 Follow Ego 카메라, 그리고 한 번의 클릭으로 .webm을 내보낼 수 있습니다.

내부적으로 브라우저 시뮬레이터는 **WebAssembly로 컴파일된 esmini**를 기반으로 합니다 — 스웨덴 ADAS 커뮤니티의 오픈소스 OpenSCENARIO 1.x 런타임입니다. Linux CLI에서 실행되는 같은 시뮬레이션 코어가 페이지 내에서 실행됩니다: 같은 스토리보드 의미론(행, 시퀀스, 동작, 트리거), 같은 파서, 같은 차량 상태. 런타임 정확성에 대한 모든 공로는 esmini 프로젝트에 돌아갑니다; drawtonomy는 그저 그 주변의 브라우저 셸입니다. 설치, MATLAB, C++ 빌드, 계정 불필요합니다.

ACC 컷인 .xosc를 불러와 esmini-WASM을 통해 브라우저에서 시뮬레이션하고, 타임라인을 스크롤하고, 실행을 .webm으로 기록합니다.

OpenSCENARIO 파일 로드

.xosc + .xodr 쌍을 캔버스에 올려놓는 두 가지 방법입니다:

드래그 앤 드롭: 두 파일을 함께 캔버스로 드래그합니다. drawtonomy는 쌍을 감지하고 여러 시나리오가 있으면 xosc-picker 배너를 표시합니다.
Hamburger menu → Import → OpenSCENARIO, 그런 다음 .xosc를 선택합니다 (일치하는 .xodr이 다른 위치에 있으면 선택).

drawtonomy는 OpenDRIVE 도로 네트워크를 파싱하고 .xosc를 내장된 esmini-WASM 런타임으로 전달한 후 화면 하단을 일반 도구 스트립에서 PlaybackControl로 전환합니다.

.xosc 파일이 없으면 esmini 프로젝트는 작은 테스트 시나리오 카탈로그를 제공합니다. esmini/resources/xosc/에서 .xosc + .xodr 쌍 중 하나를 드롭하면 시뮬레이터를 바로 시도할 수 있습니다.

시뮬레이션, 일시 중지 및 스크롤

PlaybackControl은 시뮬레이션 중 캔버스 하단에 도킹됩니다. 핵심 컨트롤:

동작	방법
시뮬레이션 / 일시 중지	`Space`, 또는 ▶ / ❚❚ 버튼
스크롤	타임라인 스크롤바 드래그
프레임 뒤로 / 앞으로	`←` / `→`
특정 시간으로 이동	시간 표시를 클릭하고 값을 입력

스크롤은 정확합니다 — 모든 엔티티의 포즈는 시뮬레이션에서 나오므로 선택한 모든 프레임은 정의된 상태를 가집니다. 이것이 브라우저 시뮬레이터를 검토 도구로 유용하게 만드는 것입니다: 컷인이 일어나는 정확한 프레임에서 일시 중지하고 시뮬레이션이 계속 롤링되는 동안 추측하지 말고 기하학을 검사합니다.

시뮬레이션 속도 조정

PlaybackControl의 speed chip을 클릭하면 속도 팝오버가 열립니다. 사전 설정(0.25×, 0.5×, 1×, 2×, 4×)을 선택하거나 슬라이더를 드래그하여 사용자 정의 값을 입력합니다. 선호하는 속도는 세션 간에 유지됩니다.

시뮬레이션을 느리게 하는 것은 타이트한 상호작용을 프레임 단위로 검사하는 가장 쉬운 방법이며, 빠르게 하는 것은 결정을 내리기 전에 오래 실행되는 시나리오를 훑어보는 가장 쉬운 방법입니다.

Follow Ego — 카메라가 이고 차량을 추적

기본적으로 카메라는 전체 장면 경계 상자에 맞습니다. Follow Ego를 토글하면 캔버스가 이고 차량과 함께 팬하여 시나리오가 실행되는 동안 중앙에 유지됩니다.

이것은 액션이 이고와 함께 움직이는 시나리오에서 중요합니다 — 고속도로 컷인, 차선 변경, 곡선 도로에서의 긴 ACC 실행 — 여기서 고정 bbox 카메라는 상호작용이 보이지 않을 정도로 멀리 줌아웃하거나, 이고를 뷰 가장자리에서 자를 수 있습니다.

고스트 궤적 — 경로 및 발자국

Ghosts를 켜면 각 엔티티의 시뮬레이션 궤적이 캔버스에 직접 표시됩니다:

경로 고스트: 엔티티가 있었던 곳의 얇은 폴리라인입니다.
발자국 고스트: 엔티티의 윤곽선이 고정 시간 간격으로 샘플링되었습니다. 한눈에 가속 / 감속을 발견하는 데 유용합니다.

간격은 설정 가능합니다(예: 0.5s / 1s / 2s마다). 고스트는 이미지 및 SVG 내보내기에도 포함되므로 슬라이드나 논문용으로 저장하는 그림은 현재 프레임이 아닌 궤적을 보여줍니다.

시나리오를 저작할 때 Ghost가 어떻게 작동하는지에 대한 더 자세한 내용은 경로 및 발자국을 참고하세요; 브라우저 시뮬레이터에서는 시뮬레이션된 실행을 시각화합니다.

편집 후 재시뮬레이션

임포트 후 시나리오를 편집했다면 — 엔티티를 이동했다면, Path를 변경했다면, 차량을 교환했다면 — 브라우저 시뮬레이터는 영향을 받은 궤적을 stale로 표시합니다. Re-simulate 버튼을 클릭하여 스토리보드를 내장된 esmini-WASM 런타임을 통해 다시 실행하고 캐시된 궤적을 새로고침합니다. 시뮬레이션은 항상 stale 스냅샷이 아닌 현재 시나리오를 반영합니다.

시뮬레이션을 .webm으로 내보내기

PlaybackControl에서 Export를 클릭하여 시뮬레이션을 .webm 비디오로 기록합니다.

Export 팝오버는 두 가지 옵션을 제공합니다:

가로세로 비율: Free(bbox-tight), 16:9(가로, YouTube), 9:16(세로, Reels / TikTok / Shorts), 1:1, 또는 4:3. 비-Free 비율은 선택한 모양에 맞추기 위해 배경색으로 경계 상자를 채웁니다 — 따라서 길고 얇은 차선 시나리오가 얇은 띠처럼 나오지 않습니다.
카메라 모드: Bbox(전체 장면) 또는 Follow Ego(뷰가 이고를 추적하며 반경 사전 설정 30 / 50 / 100 m).

또한 전체 실행이 아닌 실행의 일부만 기록할 수 있습니다: RANGE를 Trim으로 전환하고 스크롤바에 나타나는 두 핸들을 드래그합니다 — 실행의 일부만 기록을 참고하세요.

기록 중 캔버스는 취소 버튼이 있는 Export video 진행 상황 오버레이를 표시합니다. 내보내기는 브라우저의 MediaRecorder를 사용하므로 모든 것이 로컬로 유지됩니다 — 서버 업로드, 계정 불필요합니다.

이는 브라우저 시뮬레이터를 OpenSCENARIO 작업의 유용한 데모 레코더로 만듭니다: CI에서 .xosc를 드롭하고, Export를 누르고, 몇 초 안에 실패하는 경우의 공유 가능한 .webm을 얻을 수 있습니다.

커맨드 라인에서 esmini 실행과의 비교

drawtonomy의 브라우저 시뮬레이터와 네이티브 esmini 설치는 같은 시뮬레이션 코어 — esmini를 공유합니다. 다른 점은 셸입니다:

drawtonomy는 브라우저에서 esmini를 실행(WebAssembly)하며 캔버스 네이티브 UI를 제공합니다: 타임라인 스크롤바, Follow Ego, Ghost trails, .webm 내보내기, .drawtonomy.svg 소스 공유.
esmini CLI는 esmini를 네이티브로 실행하며 3D OpenSceneGraph 뷰어, headless CI 모드, C++ / Python API for embedding을 제공합니다.

CI 머신, Python 노트북 또는 네이티브 3D 뷰어에서 완전한 스토리보드 의미론이 필요하면 → esmini를 직접 실행하세요. 만약 지금 브라우저에서 시나리오를 시뮬레이션하고 싶다면 — 심사, 코드 검토, 교육, 또는 빠른 데모 .webm — Scenario Play가 가장 빠른 방법입니다.

OpenSCENARIO 번들 내보내기는 같은 .xosc + .xodr을 로컬 esmini로 전달하므로 두 흐름이 end-to-end로 맞습니다.

참고 항목

Scenario editor — 시나리오를 재생하는 것이 아니라 저작합니다.
기존 .xosc 열기 및 재생 — 로드 측면을 자세히: 파일 쌍, ?open= GitHub 경로, 카탈로그 경고.
Playback — 시나리오 편집기 내부의 전송 행.
Use case: OpenSCENARIO 시뮬레이터
OpenDRIVE + OpenSCENARIO esmini-ready 번들 내보내기
OpenSCENARIO란?
esmini란?
경로 및 발자국
drawtonomy vs esmini
drawtonomy vs CARLA