GlobeTrail 3D: كرة أرضية سينمائية للسفر، بُنيت بشكل فردي وداخل المتصفح بالكامل: معاينة
3D فوريThree.jsWebCodecsCloudflareمنتج فرديGlobeTrail 3D

GlobeTrail 3D: كرة أرضية سينمائية للسفر، بُنيت بشكل فردي وداخل المتصفح بالكامل

يحوّل GlobeTrail 3D قائمة من الأماكن إلى فيلم. تضيف المحطات، فترسم الكرة الأرضية المسار، ثم تُعاد الرحلة كمقطع متحرك يمكن تصديره فيديو MP4 أو مجموعة ملصقات أو كتيّبًا مطبوعًا، دون أي تثبيت ودون رفع أي شيء إلى أن تختار المشاركة بنفسك. صمّمتُ المنتج كاملًا وبنيته وأطلقته بمفردي: مشهد WebGL، ومحرك التشغيل، ومسار ترميز الفيديو، وكاتب PDF، والخلفية على الحافة، والحسابات. وهذه هي الهندسة وراءه.

الدور
المؤسس والمهندس الوحيد. تصميم المنتج، والتصيير، والخلفية، والبنية التحتية، والإطلاق.
الفترة
يوليو 2026 حتى الآن4 دقيقة قراءة
التقنيات
Vue 3 · TypeScript · Three.js · WebGL · WebCodecs · Vite · Cloudflare Pages Functions · D1 · R2 · Service worker (PWA) · Playwright · Vitest
5
عوالم للكرة الأرضية
219k
مكان
4K
تصدير فيديو
3,577
اختبار وحدة
454
اختبار متصفح
800
بند في خارطة الطريق

المشكلة

خريطة السفر مجرد صورة ثابتة. كان على المنتج أن يجعل المسار يبدو رحلة حقيقية، ثم يسلّم المسافر ملفًا ينشره أو يطبعه أو يحتفظ به، دون تصيير على الخادم ودون تثبيت، مع بقاء بياناته على جهازه افتراضيًا.

المنهجية

خط تركيب واحد يقود التشغيل على الشاشة والإطار المصدَّر معًا، فلا يمكن أن تختلف المعاينة عن الملف. كل العمليات الثقيلة تجري داخل المتصفح. أما الخلفية فموجودة فقط لما يعجز المتصفح عنه وحده: رابط مشاركة، ومعرض، وحساب.

النتيجة

منتج حي بخمسة عوالم للكرة الأرضية، وسبع حالات إضاءة، وتصدير فيديو بدقة 4K، وكتيّب مطبوع بخطوط مضمّنة، وصفحات رحلات مشتركة، ومعرض منتقى، وحسابات بلا كلمات مرور، كله من بناء مهندس واحد وصيانته.

السياق والتحدي

معظم أدوات خرائط السفر تنتج صورة: دبابيس على خريطة مسطحة، وربما قوس بينها. لكن ما يريد الناس مشاركته فعلًا هو قصة الرحلة، وللقصة ترتيب وإيقاع ونهاية. بُني GlobeTrail 3D حول هذه الفكرة. الرحلة سلسلة من المحطات لها تواريخ وأماكن ووسائل تنقل وصور، ومهمة المنتج أن يعيد تشغيلها بجودة تدفع المسافر إلى نشر النتيجة.

فرض هذا التأطير ثلاثة قيود. كان على الفيلم أن يبدو متطابقًا داخل التطبيق وفي الملف المصدَّر، وهو ما يستبعد تصيير الاثنين بطريقتين مختلفتين. وكان على المنتج أن يعمل بمبدأ الأولوية المحلية، فتعيش الرحلة على الجهاز ولا تغادره إلا بفعل يقوم به المسافر، وهو ما يستبعد التصيير على الخادم وخط الرفع والمعالجة التقليدي. وكان عليه أن يكون منتجًا مكتملًا لا عرضًا تجريبيًا، أي ملصقات وكتاب مطبوع ومشاركة ودعمًا للعمل دون اتصال وحسابات والمستندات القانونية المصاحبة، بصيانة شخص واحد.

المنهجية

الكرة الأرضية مشهد Three.js بخمسة عوالم: أرض بصور الأقمار الصناعية، وخريطة Atlas مرجعية، وخريطة تضاريس مع تظليل الانحدارات، وعالمان مرسومان هما Toon وInk. تُولَّد العوالم المرسومة من بيانات ارتفاع وأعماق حقيقية عبر نصوص برمجية داخل المستودع، فتكون الرسوم قابلة لإعادة الإنتاج لا مرسومة يدويًا. حدود الدول مأخوذة من مجموعة Natural Earth بمنظور الهند، أما دليل المدن فمن طبقتين: فهرس أساسي صغير يُشحن مع التطبيق، و234 حزمة لكل دولة من GeoNames تضم نحو 219,000 مكان، تُجلب فقط حين تمر رحلة بتلك الدولة.

التشغيل خطة لا مؤقت. يحسب مُخرِج داخلي كل حركة كاميرا ومدة وقوف وانتقال انطلاقًا من محطات الرحلة، ويستهلك كل من المسرح على الشاشة والمسجّل مخرجات composeFrame نفسها. هذه القاعدة وحدها هي ما يجعل ملف MP4 المصدَّر نسخة أمينة مما شاهده المسافر. فالعناوين، والمركبة التي تسير على القوس، وصورة البولارويد التي ترتفع عند محطة مصوّرة، وبطاقة الختام، كلها جزء من ذلك الإطار الواحد.

يجري التصدير داخل المتصفح عبر WebCodecs. تُرمَّز الإطارات إلى H.264 وتُدمج في MP4 على الخيط الرئيسي دون أي خادم، بدقة Full HD أو 2K أو 4K، وبمعدل 24 إطارًا في الثانية دائمًا. ويمكن للفيلم بصيغة الريل أو المربع أن يقسّم نفسه إلى أجزاء بحدود المنصات، والقطع يقع عند حدود المحطات فقط، مع إلحاق بطاقة الختام بالجزء الأخير. ويصيّر الخط نفسه مجموعة الملصقات وبطاقة المشاركة الاجتماعية.

الخلفية صغيرة عن قصد. تقدّم Cloudflare Pages Functions صفحة الرحلة المشتركة ببطاقة Open Graph خاصة بها، وتخزّن الحمولة في D1 وحزمة الصور في R2، وتشغّل معرضًا منتقى وغرفة إدارة. الحسابات بريد إلكتروني ورمز من ستة أرقام، دون أي كلمة مرور في النظام كله. ويجعل عامل الخدمة التطبيق قابلًا للتثبيت ويُبقي الكرة الأرضية تعمل دون اتصال، بذواكر مؤقتة محدودة ومرقّمة الإصدارات للقوام والمعاينات.

القرارات الهندسية

امتلاك صيغ الملفات. الكتيّب ملف PDF حقيقي بنص قابل للتحديد وخطوط Source Serif وSource Sans مضمّنة ومجزّأة، كتبه كاتب PDF طوّرته لهذا المشروع بدل الاعتماد على مكتبة جاهزة. ورمز QR على بطاقة المشاركة يأتي من مرمّز داخلي وفق ISO 18004، أُثبت في الاختبارات بقارئ مستقل يعيد قراءة مخرجاته. وقارئ EXIF الذي يستخرج التواريخ والإحداثيات من الصورة خالٍ من الاعتماديات، ويعامل كل إخفاق كحقل ناقص لا كعطل. كان امتلاك كل واحد منها أرخص من الاعتماد على غيره، وأتاح ألا يكون هناك سلوك خفي في المسار بين بيانات المسافر والملف الذي ينزّله.

خطة واحدة ومصيّران. يُنسَّق الكتيّب مرة واحدة إلى صفحات من عناصر أولية، ثم يُرسم على لوحة canvas للمعاينة وإلى الملف للتنزيل. ويقيس الاثنان النص بمقادير الخطوط الخاصة بملف PDF نفسه، فتكون المعاينة صورة للصفحة لا تقريبًا لها. والفيديو يعمل بالطريقة نفسها. فحيثما يعرض المنتج معاينة، تتشارك المعاينة والمخرج النهائي الخطة ذاتها.

الآلة تقترح والمسافر يقرر. يُستنتج نوع التنقل بين المحطات من الهندسة وحدها: عبور بحري تحت حد معيّن يرجّح قاربًا، والقفزة الطويلة ترجّح رحلة جوية، وسابقة المسافر نفسه تتقدم على الاثنين. أما تاريخ الصورة وموقعها فيُعرضان ولا يُطبَّقان. وتُوسَم تخمينات الآلة داخل البيانات حتى لا تُخلط أبدًا بما قاله المسافر. تسري هذه القاعدة في المنتج كله، وهي سبب ألا يجادل التطبيق مستخدمًا في تفاصيل رحلته.

القياس قبل القرار. يحتفظ المشروع بسجل قرارات من 296 مدخلًا وتقرير لكل التزام برمجي، وكثير منها يوثّق قياسًا: الإطار الذي توقف 553 مللي ثانية عند تغيير لون إلى أن انتقل العمل خلف الرسم، وقاعدة تعارض التسميات المستعارة من محركات الخرائط بعدما تراكبت خمسة أسماء مدن، وسقف التصدير الذي فُحص مسبقًا ليُخبَر الهاتف بصدق بما يستطيع تسجيله. تغطي مجموعة اختبارات الوحدة المنطق الصافي، وتغطي مجموعة المتصفح الواجهات، وتلتقط 44 مرجعية مظهر محفوظة أي تغيّر في شكل الكرة الأرضية قبل إطلاقه.

تُعالَج الخصوصية في التصميم نفسه لا في مستند سياسات. لا تعمل التحليلات إلا بموافقة، ولا تحمل سوى أعداد وقوائم محددة، دون أي نص، فلا يمكن بنيويًا لاسم مكان أن يغادر الجهاز. ويُحرَّر مستند الخصوصية في الالتزام البرمجي نفسه مع أي تغيير فيما يخزّنه المنتج، ويمشي اختبار على الشيفرة ليُبقي الاثنين متوافقين. وتبقى الصور في قاعدة بيانات المتصفح نفسه، ولا تسافر إلا داخل نسخة احتياطية أو مشاركة أو حساب سجّل المسافر فيه.

النتيجة

GlobeTrail 3D يعمل الآن على globetrail3d.com. يستطيع المسافر بناء مساره بالبحث عن المدن، أو لصق رابط من خرائط Google، أو استيراد مسار GPX، أو إسقاط مجموعة صور وترك التواريخ والإحداثيات تحدد المحطات. ويمكنه مشاهدتها مع موسيقى محيطة مولَّدة، وتصديرها فيلمًا بالعرض الأفقي أو الريل أو المربع، وطباعة مجموعة ملصقات أو كتيّب، ومشاركة رابط ببطاقة معاينة خاصة به، وتسجيل الدخول للاحتفاظ بنسخة عبر أجهزته.

حجم الشيفرة يعكس منتجًا مكتملًا لا نموذجًا أوليًا: نحو 175,000 سطر من TypeScript وVue عبر التطبيق ودوال الحافة، و3,577 اختبار وحدة، و454 اختبار Playwright في 70 ملف مواصفات، و800 بند متتبَّع في خارطة الطريق مع قرار مكتوب وراء كل تراجع. كل ذلك من تصميم وبناء واختبار ونشر مهندس واحد.

ما الذي يثبته هذا العمل

العمل رسومات ثلاثية الأبعاد فورية وترميز فيديو، مقدَّمة كمنتج استهلاكي، بكامل الطبقات تحت سيطرة شخص واحد. وتسري فيه من الطرف إلى الطرف العادات نفسها التي يقوم عليها العمل المؤسسي: إبقاء الحسابات الثقيلة على وحدة معالجة الرسومات وبعيدًا عن الخيط الرئيسي، وتصميم خط واحد تتشاركه عدة مخرجات، والتعامل مع الأداء والخصوصية بوصفهما مسألة صحة وظيفية.

كما يُظهر حكمًا منتَجيًا. فلكل ميزة تُشحن سبب مكتوب، وأُزيلت ميزات بُنيت فعلًا حين تبيّن أنها تجادل المسافر بدل أن تخدمه. العمل الفردي هو ما جعل هذا الانضباط ضروريًا، وسجل القرارات هو ما أبقى المنتج متماسكًا عبر ألف التزام برمجي.

النتائج

  • تصميم وإطلاق منتج سفر ثلاثي الأبعاد متكامل بشكل فردي، من مشهد WebGL إلى الخلفية على الحافة، وهو في الإنتاج على globetrail3d.com
  • بناء خط فيديو داخل المتصفح على WebCodecs يصدّر MP4 بدقة Full HD و2K و4K، مع تصيير التشغيل على الشاشة والملف من مركّب إطارات واحد
  • كتابة كاتب PDF خاص بالمنتج بخطوط مضمّنة ومجزّأة، ومرمّز QR داخلي، وقارئ EXIF داخلي، وكل منها مُثبت باختبارات أمام قارئات مستقلة
  • توليد خمسة عوالم للكرة الأرضية من بيانات ارتفاع وأعماق حقيقية، مع دليل أماكن من طبقتين يضم 219,000 مكان تُحمَّل لكل دولة عند الطلب
  • إطلاق المشاركة ومعرض منتقى وحسابات بلا كلمات مرور وغرفة إدارة على Cloudflare Pages Functions وD1 وR2، مع طبقة تحليلات مشروطة بالموافقة يستحيل بنيويًا أن تحمل بيانات شخصية
  • الحفاظ على تماسك 175,000 سطر من الشيفرة عبر سجل قرارات وتقرير لكل التزام برمجي وبوابة اختبارات من 3,577 اختبار وحدة و454 اختبار متصفح