MapLibreとPuppeteerによる自動生成ルート上空飛行動画

Wed, 20 Mar 2024 00:00:00 +0000

サイクリングルートを走る前にプレビューできたらと思ったことはありませんか？Party Onbiciの全てのパーティールートに対して美しい上空飛行動画を生成する自動化システムを構築し、ライダーに旅で何が待っているかの映画的なプレビューを提供しています。

課題

サイクリングイベントを企画したり参加したりする際、ルートを理解することは非常に重要です。静的な地図は役立ちますが、実際にルートを走る体験を伝えることはできません。ライドにコミットする前に、ルートを仮想的に「飛行」できる方法をユーザーに提供したいと考えました。

私たちのソリューション：ヘッドレス動画レンダリング

Puppeteerを使用してヘッドレスChromeブラウザを実行し、インタラクティブなMapLibre GLマップ上でルートをレンダリングし、仮想カメラがパスに沿って飛行する間にフレームをキャプチャするNode.jsサービスを構築しました。仕組みは以下の通りです：

1. ルート補間

サイクリングルートには数千の座標点がある場合があります。15秒間30FPSのスムーズな動画を作成するには、正確に450フレームが必要です。距離ベースの補間を使用してルートを均等にサンプリングします：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// Calculate cumulative distances using Haversine formula
const distances = [0];
for (let i = 1; i < coordinates.length; i++) {
 const dist = haversineDistance(coordinates[i-1], coordinates[i]);
 totalDistance += dist;
 distances.push(totalDistance);
}

// Sample at exactly totalFrames points
for (let frame = 0; frame < totalFrames; frame++) {
 const targetDist = (frame / (totalFrames - 1)) * totalDistance;
 // Interpolate position at this distance...
}

2. スムーズな方位によるカメラアニメーション

単純に進行方向にカメラを向けると、曲がりくねったルートでぎくしゃくした動きが発生します。360度/0度のラップアラウンドの特別な処理を含め、12フレームの移動平均を使用してカメラの方位をスムーズにします：

Node.js on Party Onbici Blog

MapLibreとPuppeteerによる自動生成ルート上空飛行動画

課題

私たちのソリューション：ヘッドレス動画レンダリング

1. ルート補間

2. スムーズな方位によるカメラアニメーション