ブラウザで OpenSCENARIO をシミュレーションする
drawtonomy は自動運転シナリオを描くための無料ブラウザ用ホワイトボードです。同じキャンバスが、そのまま**OpenSCENARIO シミュレータとしても動作**します。.xosc と .xodr をドロップするだけで、インストール不要でシナリオをブラウザ内で再生できます。タイムラインのシーク、フレーム単位の移動、Ghost トレイルの表示、Ego 車両を追従してキャンバスがパンする Follow Ego カメラ、そして .webm へのワンクリック書き出しに対応しています。
内部では、ブラウザシミュレータが esmini を WebAssembly にコンパイルして組み込んでいます。スウェーデンの ADAS コミュニティが開発した OpenSCENARIO 1.x のオープンソース・リファレンス実装であり、Linux CLI で動く esmini と全く同じシミュレーションコア — 同じストーリーボードセマンティクス (acts・sequences・maneuvers・triggers)、同じパーサ、同じ車両状態計算 — がブラウザのページの中で動いています。シミュレーション正しさのすべてのクレジットは esmini プロジェクトのメンテナに帰属します。drawtonomy はその上に乗っかったブラウザのシェルに過ぎません。C++ のビルドも MATLAB も、アカウント登録も不要です。
OpenSCENARIO ファイルの読み込み
Section titled “OpenSCENARIO ファイルの読み込み”.xosc と .xodr のペアをキャンバスに読み込む方法は 2 つあります。
- 両ファイルをまとめてキャンバスにドラッグ&ドロップします。複数のシナリオが含まれている場合は xosc-picker バナーが表示されます。
- ハンバーガーメニュー → Import → OpenSCENARIO を選択し、
.xosc(と同じ場所にない場合は対応する.xodr) を指定します。
drawtonomy は OpenDRIVE の道路ネットワークを解析し、.xosc を内蔵の esmini-WASM ランタイムに渡します。画面下部の通常ツールバーが PlaybackControl に切り替わります。
手元に .xosc がない場合は、esmini プロジェクトにテスト用シナリオが同梱されています。esmini/resources/xosc/ 内の .xosc と .xodr のペアをドロップすれば、すぐにシミュレータを試せます。
シミュレーション・一時停止・シーク
Section titled “シミュレーション・一時停止・シーク”シミュレーション中は PlaybackControl がキャンバス下部に固定されます。主な操作は以下の通りです。
| 操作 | 方法 |
|---|---|
| 再生 / 一時停止 | Space キー、または ▶ / ❚❚ ボタン |
| シーク | タイムラインのスクラバーをドラッグ |
| フレーム戻し / 送り | ← / → キー |
| 任意時刻へジャンプ | 時刻表示をクリックして値を入力 |
シークは正確です。各エンティティのポーズはシミュレーションから算出されるため、どのフレームを選んでも状態が確定しています。これがブラウザシミュレータをレビューツールとして活かせるポイントです。シミュレーションを流しながら推測するのではなく、カットインが起きた正確なフレームで一時停止してジオメトリをじっくり確認できます。
シミュレーション速度の調整
Section titled “シミュレーション速度の調整”PlaybackControl の速度チップをクリックすると、速度ポップオーバーが開きます。プリセット (0.25×、0.5×、1×、2×、4×) を選ぶか、スライダーでカスタム値を設定します。設定した速度はセッションをまたいで保持されます。
速度を落とすと、短時間に集中した複雑なインタラクションをフレーム単位で丁寧に確認できます。逆に速度を上げると、長時間シナリオを最初にざっと流してから目的のシーンにシークするという使い方が効率的です。
Follow Ego — キャンバスが Ego を追従する
Section titled “Follow Ego — キャンバスが Ego を追従する”デフォルトのカメラはシーン全体のバウンディングボックスに合わせて表示されます。Follow Ego をオンにすると、シナリオが進む間キャンバスが Ego 車両を追いかけてパンし、Ego が常に画面中央に保たれます。
高速道路でのカットイン、車線変更、長い曲線道路での ACC 走行など、アクションが Ego と一緒に移動するシナリオで効果的です。固定の bbox カメラだと、インタラクションが見えなくなるほどズームアウトされたり、Ego が画面端に切れたりしてしまう場面で活躍します。
Ghost トレイル — Path と Footprint
Section titled “Ghost トレイル — Path と Footprint”Ghost をオンにすると、各エンティティのシミュレーション済み軌跡がキャンバス上に表示されます。
- Path ghosts — エンティティがたどった経路を細いポリラインで表示します。
- Footprint ghosts — 一定の時間間隔でサンプリングしたエンティティの輪郭を表示します。加速・減速のようすを一目で把握するのに役立ちます。
表示間隔は変更可能です (例: 0.5 秒 / 1 秒 / 2 秒ごと)。Ghost は画像・SVG エクスポートにも焼き込まれます。スライドや論文用に保存した図には、現在フレームだけでなく軌跡も含まれます。
Ghost の詳しい仕組み (シナリオ作成時の使い方) は Path と Footprint を参照してください。ブラウザシミュレータでは、シミュレーション実行結果の可視化として機能します。
編集後の Re-simulate
Section titled “編集後の Re-simulate”インポート後にシナリオを編集した場合 — エンティティを移動したり、Path を変更したり、車両を入れ替えたりすると — ブラウザシミュレータは影響を受けた軌跡を古い状態 (stale) としてマークします。Re-simulate ボタンをクリックすると、内蔵の esmini-WASM ランタイムでストーリーボードを再実行し、キャッシュされた軌跡を更新します。シミュレーション結果は常に最新のシナリオ状態を反映します。
シミュレーションを .webm にエクスポート
Section titled “シミュレーションを .webm にエクスポート”PlaybackControl の Export をクリックすると、シミュレーションを .webm 動画として録画します。
Export ポップオーバーでは 2 つの設定を行います。
- アスペクト比 — Free (bbox ぴったり)、16:9 (横向き・YouTube)、9:16 (縦向き・Reels / TikTok / Shorts)、1:1、4:3。Free 以外のアスペクト比はバウンディングボックスに背景色のパディングを加えて指定の比率に合わせます。細長いレーンシナリオが極端な細長動画にならないための工夫です。
- カメラモード — Bbox (シーン全体) または Follow Ego (Ego を追従・半径プリセット 30 / 50 / 100 m)。
録画中はキャンバスに Export video の進捗オーバーレイとキャンセルボタンが表示されます。録画にはブラウザの MediaRecorder を使用するため、すべてローカルで完結します。サーバーへのアップロードもアカウントも不要です。
CI から .xosc を読み込んで Export をクリックするだけで、失敗ケースの共有可能な .webm が数秒で手に入ります。OpenSCENARIO 開発のデモ録画ツールとしても重宝します。
esmini コマンドラインとの比較
Section titled “esmini コマンドラインとの比較”drawtonomy のブラウザシミュレータとネイティブの esmini インストールは、同じシミュレーションコア — esmini 本体 — を共有しています。esmini プロジェクトの成果があってこそ、drawtonomy のブラウザシミュレーションは成り立っています。違うのはシェルの部分です。
- drawtonomy はブラウザ上で esmini を動かし (WebAssembly)、キャンバスと一体化した UI を提供します。タイムラインスクラバー、Follow Ego、Ghost トレイル、
.webmエクスポート、.drawtonomy.svgソースとの連携が使えます。 - esmini CLI はネイティブで動作し、3D の OpenSceneGraph ビューア、ヘッドレス CI モード、C++ / Python への組み込み API が利用できます。
CI マシン上での実行、Python ノートブックへの組み込み、ネイティブ 3D ビューアが必要な場合 → esmini を直接使ってください。今すぐブラウザでシナリオを確認したい場面 — トリアージ、コードレビュー、教育目的、さっと .webm を録りたいとき — はブラウザシミュレータが最も手軽です。
OpenSCENARIO バンドルエクスポートで書き出した .xosc と .xodr はローカルの esmini でもそのまま使えるため、両方のフローはエンドツーエンドで連携しています。