drawtonomy — 自動運転シナリオのためのホワイトボード

drawtonomy とは？

drawtonomy は、自動運転（AV/AD）および ADAS シナリオ作成のための無料ブラウザベースホワイトボードです。

レーン、交差点、車両、歩行者、信号機、道路標示をファーストクラスの図形として配置できます。インストール不要・アカウント不要・データのアップロードもなし。

しかし、描いたシーンはそこで終わりではありません。Scenario モードでは、同じキャンバスが OpenSCENARIO 作成ツールに変わります。アクターにフェーズ、イベント、トリガーを与え、再生ボタンを押すと、esmini を WebAssembly にコンパイルしたものがブラウザで実行されます。最後に PASS / FAIL 判定が表示されます。OpenSCENARIO の作成と実行は独立した柱であり、単なる橋渡しではありません。

真の橋渡しとは、シーンを隣のツールチェーンに横流しすることです。ASAM OpenDRIVE 1.8 へのエクスポートと Lanelet2 OSM マップ・ROS 占有格子のインポート機能がそれです（詳しくは以下のシミュレーション・地図スタックへの橋渡しを参照してください）。

シナリオがすでにある場所でも使えます。.xosc ファイルの多くは Git リポジトリに置かれているので、drawtonomy for GitHub Chrome 拡張機能を使えば、リポジトリをクローンしたりシミュレータを用意したりせずに、github.com 上でそのままシナリオを再生したり、フォルダごと閲覧したりできます。

シーンを描く。動きを付ける。

シーンを描く レーン、交差点、車両、歩行者がファーストクラスで、トポロジーを保つ図形として用意されています。空のキャンバスから論文、スライド、設計レビュー用の書き出し済みスケッチまで、わずか 5 分。

動きを付ける アクターにフェーズ、イベント、トリガーを与え、esmini-WASM でブラウザ内再生、PASS / FAIL 判定を読みます。最初のシナリオ実行まで 5 分。

この両者は別々のプロダクトではなく、ひとつのパイプラインです。描いたものはそのまま実行されます。シーン内のレーン、アクター、ジオメトリは、シナリオが再生される際の道路ネットワークとエンティティになります。間に書き出しステップはなく、別のツールも不要です。スケッチ → 実行可能なシナリオ → PASS / FAIL 判定付きのシェアリング可能なリンク。

まずは証拠を確認してみませんか？ esmini リポジトリのリアルなシナリオをいますぐ再生してみてください。ワンクリックで GitHub から .xosc を取得してブラウザで実行します。パブリックな GitHub の .xosc リンクはすべて同じように動作します。詳しくは .xosc を開いて再生を参照してください。

論文に載せる図、設計レビュー前に描くスライド、コーナーケースをチームに説明するときの通話中の図、OpenSCENARIO ファイルを書く前のシーンスケッチ — それらすべてにこのキャンバスが使えます。自動運転（AV）の研究図、自動運転（AD）の設計レビュー、ADAS テストシナリオのスケッチ（カットイン、車線変更、非保護左折、ラウンドアバウト進入、歩行者横断、先行車減速など、よくあるシナリオはすべて日常的に描けます）に、同じキャンバスで対応します。

レーン・車両・交差点の語彙は十分な汎用性を持つため、教習所の指導教材、交通安全教育の資料、交通工学の概念図、個人的な道路シーンのスケッチにも使えます。ユースケースのページで全リストをご覧ください。

キャンバスには Math (LaTeX) ツールも搭載しています。KaTeX で数式を描画すれば、コスト関数やコントローラの式をシナリオの隣に直接配置できます。単体の無料ブラウザベース LaTeX 数式エディタとして、論文の図、スライド、Notion、ブログ記事に数式を挿入する際にも活用できます。詳しくは論文図への数式挿入とスライド・ブログへの数式挿入を参照してください。

このツールが生まれた理由は単純です。一般的な作図ツールやスライドツールは「レーン」が何かを知りません。何かを移動するたびに道路ジオメトリを最初から構築し直す必要があります。drawtonomy はレーン、交差点、その他の運転シナリオ語彙をビルトイン図形として扱うため、繰り返し編集しても図形が正確に保たれます。

他の用途にも対応

ホワイトボードが主な機能ですが、隣接する作業の軽量ブラウザフロントエンドとしても機能します。

OpenDRIVE エディタ .xodr を開いてレーンと交差点をビジュアル編集し、ASAM OpenDRIVE 1.8 としてエクスポート。

OpenSCENARIO エディタ ストーリーボードをビジュアル作成 — フェーズ、イベント、アクション、トリガー — ASAM OpenSCENARIO 1.2 の esmini 対応 zip としてエクスポート。

OpenSCENARIO シミュレータ .xosc + .xodr をドロップすれば、埋め込まれた esmini-WASM がストーリーボードをブラウザで実行 — シーク、Follow Ego、ゴーストトレイル、.webm エクスポート。esmini ベースです。

Lanelet2 エディタ .osm マップを開いてレーンジオメトリをビジュアル編集し、規制要素を伴って Lanelet2 にラウンドトリップ。

レーン描画ツール レーン、交差点、横断歩道、道路標示がファーストクラス図形で、トポロジー保持の接続に対応。

道路ネットワーク設計ツール レーン、交差点、ラウンドアバウト、インターチェンジをレイアウトし、OpenDRIVE または Lanelet2 でエクスポート。

次に見るべきところ

来訪の目的に合わせて入り口を選んでください。

シナリオを作成・実行する ストーリーボード — フェーズ、イベント、アクション、トリガー — を構築し、PASS / FAIL 条件を設定して、埋め込まれた esmini-WASM エンジンでブラウザ実行。

利用事例を見る 論文・学位論文の図、設計レビューのスライド、ADAS テストシナリオのスケッチ、Lanelet2 編集、ROS マップへの注釈など。カタログを参照して、自分の用途がそこに含まれているかを確認できます。

他のツールと比較する RoadRunner、MATLAB Driving Scenario Designer、Truevision Designer、JOSM、Vector Map Builder、スライドツール、オンラインホワイトボード との中立的な並べ書き比較。

フォーマットについて読む OpenSCENARIO、OpenDRIVE、Lanelet2、esmini、Autoware HD マップ、ROS 占有格子、シナリオ分類（機能・論理・具体）が実際に指すものは何か、drawtonomy がどう関わるかの解説。

GitHub 上でシナリオをプレビューする OpenSCENARIO の .xosc ファイルを github.com 上でそのまま再生できる Chrome 拡張機能。フォルダごとプレビューし、エディタで開いて編集、クリップとして書き出せます。クローン不要、シミュレータのインストールも不要。

使い始める 空のキャンバスからエクスポート済みシーンまで 5 分。その先はチュートリアル、ハウツー、リファレンス、エクステンション開発者向け SDK。

何に使われているか

論文・学位論文の図

LaTeX、スライド、Markdown にきれいに埋め込める、シャープなベクター形式の自動運転（AV/AD/ADAS）シナリオ図。 .drawtonomy.svg（drawtonomy 独自の再編集可能な SVG 形式）、PDF、EPS でエクスポートできます。

設計議論の図

車線変更マニューバ、非保護左折、オクルージョンケースなどを数秒でスケッチ。 結果を共有し、翌日に同じキャンバスで議論を続けられます。

シナリオ作成前のスケッチ

OpenSCENARIO XML を書く前にシーンを描き、スケッチが固まったら .xosc / .xodr にエクスポートできます。

地図・ROS のアノテーション

衛星画像背景の上にレーンをトレースしたり、Lanelet2 OSM 地図を編集したり、 ROS 占有格子地図にパスや障害物を書き込んだりできます。

一般的な作図ツールより速い理由

運転ドメインの図形

レーン、交差点、横断歩道、信号機、道路標示、車両、歩行者をビルトインで提供。 独自の SVG テンプレートを追加し、PR で貢献することもできます。

トポロジーを意識したレーン

各レーンは Next / Previous / Left / Right の接続情報を持ちます。 境界を共有する 2 本のレーンは同じ境界点を共有するため、ドラッグ 1 回で両方が動きます。

無限キャンバスと衛星画像背景

任意の大きさのレイアウトを自由にパン・ズーム。 衛星地図やロードマップ背景を配置して実在の場所からトレースできます。 スナップと共有点機能で、手作業の修正なしにジオメトリの整合性を保てます。

無料・ブラウザだけで動作

インストール、アカウント、アップロード不要。保存した drawtonomy.svg を後から開けば、 接続関係や重なりを含めて元のシーンがそのまま復元されます。

シミュレーション・地図スタックへの橋渡し

ホワイトボードが主な機能ですが、描いたシーンをワークフロー内に流すための橋渡し機能を用意しています。

論文・スライド向けの再編集可能な SVG

.drawtonomy.svg 形式は通常の SVG としてブラウザ・GitHub・スライドでプレビュー可能で、 さらに drawtonomy で再度開くとすべての接続情報が保持されたまま編集できます。 後で編集する可能性のある図（論文、スライド、ドキュメント、ブログ記事）には、まずこの形式を選びます。

Lanelet2 のラウンドトリップ

Lanelet2 の OSM マップを開いて編集し、OSM に書き戻せます — Autoware のサンプル地図とその規制要素も含みます。 既存の HD マップへの変更をスケッチするときに便利です。

ASAM OpenDRIVE のラウンドトリップ

OpenDRIVE の .xodr マップを開いてレーンや接続をビジュアルに編集し、 OpenDRIVE 1.8 + OpenSCENARIO 1.2 としてエクスポートできます — esmini 対応 zip にまとめることも可能です。 触れていない道路はキャリースルーでそのまま出力されます。

OpenDRIVE ⇄ Lanelet2 ブリッジ

両フォーマットは同じ内部レーンモデルに変換されるため、 drawtonomy は OpenDRIVE と Lanelet2 のブラウザ上変換ブリッジとして機能します。 片方をインポートしてビジュアル編集し、もう片方でエクスポート可能。 レーン、交差点、規制要素（信号・標識・優先権）を双方向に変換します。

使い始めるとき

実際に描き始めるときは、目的別に整理された 4 つの入り口から選んでください。

チュートリアル 手を動かして学ぶ。空のキャンバスから完成したシーンまで、ステップごとに進むレッスン。

ハウツーガイド 特定の作業を済ませる。レーン、車両、エクスポート、インポートのレシピ集。

リファレンス 事実を調べる。ショートカット、ファイル形式、図形カタログ、SDK API。

解説 モデルを理解する。drawtonomy がなぜ今のかたちで動くのかを説明します。

エクステンション開発者向け

drawtonomy を使うだけでなく上に何かを構築したい場合は、drawtonomy を拡張するを参照してください。SDK のソースコード、サンプル、リファレンスはこのサイトと同じく github.com/kosuke55/drawtonomy にあります。