วิดีโอ Flyover เส้นทางที่สร้างอัตโนมัติด้วย MapLibre และ Puppeteer

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

เคยอยากดูตัวอย่างเส้นทางปั่นจักรยานก่อนที่จะปั่นไหม? เราสร้างระบบอัตโนมัติที่สร้างวิดีโอ flyover สวยงามสำหรับทุกเส้นทาง Party Onbici ให้นักปั่นได้ดูตัวอย่างแบบภาพยนตร์ว่าจะเจออะไรในการเดินทาง

ความท้าทาย

เมื่อจัดหรือเข้าร่วมกิจกรรมปั่นจักรยาน การเข้าใจเส้นทางเป็นสิ่งสำคัญ แผนที่แบบคงที่มีประโยชน์ แต่ไม่สามารถถ่ายทอดประสบการณ์การปั่นเส้นทางจริงได้ เราต้องการให้ผู้ใช้มีวิธี “บินผ่าน” เส้นทางเสมือนจริงก่อนตัดสินใจเข้าร่วม

โซลูชันของเรา: Headless Video Rendering

เราสร้างบริการ Node.js ที่รัน headless Chrome browser โดยใช้ Puppeteer แสดงผลเส้นทางบนแผนที่ MapLibre GL แบบโต้ตอบ และจับเฟรมขณะที่กล้องเสมือนบินไปตามเส้นทาง นี่คือวิธีการทำงาน:

1. การ Interpolate เส้นทาง

เส้นทางปั่นจักรยานอาจมีพิกัดนับพันจุด เพื่อสร้างวิดีโอที่ลื่นไหลที่ 30 FPS เป็นเวลา 15 วินาที เราต้องการ 450 เฟรมพอดี เราใช้การ interpolate ตามระยะทางเพื่อสุ่มตัวอย่างเส้นทางอย่างสม่ำเสมอ:

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


// คำนวณระยะทางสะสมโดยใช้สูตร Haversine
const distances = [0];
for (let i = 1; i < coordinates.length; i++) {
 const dist = haversineDistance(coordinates[i-1], coordinates[i]);
 totalDistance += dist;
 distances.push(totalDistance);
}

// สุ่มตัวอย่างที่ totalFrames จุดพอดี
for (let frame = 0; frame < totalFrames; frame++) {
 const targetDist = (frame / (totalFrames - 1)) * totalDistance;
 // Interpolate ตำแหน่งที่ระยะทางนี้...
}

2. Animation กล้องด้วย Bearing ที่ลื่นไหล

การชี้กล้องไปในทิศทางการเดินทางเฉยๆ จะสร้างการเคลื่อนไหวกระตุกบนเส้นทางคดเคี้ยว เราทำให้ bearing ของกล้องลื่นไหลโดยใช้ค่าเฉลี่ยเคลื่อนที่ 12 เฟรม พร้อมการจัดการพิเศษสำหรับการข้าม 360°/0°:

Node.js on Party Onbici Blog

วิดีโอ Flyover เส้นทางที่สร้างอัตโนมัติด้วย MapLibre และ Puppeteer

ความท้าทาย

โซลูชันของเรา: Headless Video Rendering

1. การ Interpolate เส้นทาง

2. Animation กล้องด้วย Bearing ที่ลื่นไหล