بني واستكشف طوكيو ثلاثية الأبعاد إجرائية فالمتصفح

شنو هو Procedural Tokyo؟

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

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

تقدر تجرّب النسخة المستضافة فـ jeantimex.github.io/tokyo. التجربة مصممة لمتصفحات الحاسوب وما منصوحش بها فمتصفحات الهاتف.

استكشف المشاهد المتاحة

كل مشهد كيغطي منطقة تقريباً بمساحة 3.4 فـ 2.8 كيلومتر. المناطق المشمولة هي:

• Tokyo: محطة طوكيو، مارونوتشي، وخنادق القصر الإمبراطوري.
• Shiba: برج طوكيو، زوجو-جي، وحديقة شيبا.
• Shibuya: ممر العبور الشهير، محطة شيبويا، والطريق السيار.
• Shinjuku: محطة شينجوكو، حي ناطحات السحاب، كابوكيتشو، وحديقة شينجوكو غيوين.
• Chiyoda: أكيهابارا، كاندا، وأوتشانوميزو.
• Chuo: تسوكيجي، كاتشيدوكي، تسوكيشيما، هارومي، المناطق الساحلية، والقنوات.
• Fujinomiya: بلدة قريبة من جبل فوجي، مع خلفية تضاريسية كتمتد لـ 60 كيلومتر.

PLATEAU كيغطي مئات المدن اليابانية، ولكن مستوى التفاصيل المتاح كيختلف. مراكز المدن تقدر تشمل أشكال مفصلة ديال الأسطح، وقوام صور جوية، بينما البلدات الصغيرة ممكن تستعمل كتل بنايات أبسط.

الخصائص الرئيسية

بنايات وأرض واقعية

البنايات كتستعمل البصمات الحقيقية، والعلو، وعدد الطوابق، ومعلومات الاستعمال. فالأماكن اللي كيوفر فيها PLATEAU هياكل مفصلة وتصوير جوي للأسطح، كتستعمل هاد الأصول مباشرة. الواجهات المولّدة، والنوافذ، والشرفات، والحواجز، وتجهيزات السطوح، وشرائط لافتات المحلات كيزيدو التفاصيل من مسافة قريبة.

الأرض كتستعمل نموذج ارتفاع بمقياس خمسة أمتار، وتصوير جوي، وأسطح الطرق، والأرصفة، والحدائق، والغابات، والماء. علامات الطرق كتشمل خطوط المسارات، وممرات الراجلين، وخطوط التوقف، والأسهم، وعلامات 止まれ اليابانية، وحدود السرعة المدهونة.

حياة المدينة المتحركة

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

الوقت والطقس والانعكاسات

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

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

ثبّت المشروع وشغّلو

نسخ المستودع وثبّت التبعيات ديالو باستعمال npm:

npm install

نزّل القوام CC0 اللي كيستعملها المشروع. هاد الخطوة خاصها تدار مرة وحدة، وكتخزّن تقريباً 14 MB فـ public/textures/:

node tools/assets/fetch_textures.mjs

من بعد، جيب المعطيات الخام ديال منطقة. المثال التالي كينزّل معطيات المصدر ديال طوكيو:

npm run fetch -- --area=tokyo

جمّع السجلات المنزّلة فـ قطع جاهزة للمتصفح:

npm run compile -- --area=tokyo

وأخيراً، شغّل خادم التطوير:

npm run dev

حلّ http://localhost:5280 فمتصفح ديال الحاسوب. ملفات المدن المجمّعة ما كتكونش داخل المستودع، لذلك كل منطقة خاصها تعاود البناء انطلاقاً من معطيات المصدر ديالها.

فهم مسار معالجة المعطيات

المسار فيه جوج مراحل رئيسية. الأمر fetch كينزّل الملفات الأصلية فـ data/raw/<area>/ والصور الجوية فـ public/ortho/<area>/. الأمر compile كيحوّل هاد السجلات لقطع كيتبثّو من public/tiles/<area>/.

شغّل المسار كامل لمنطقة معينة بهاد الأوامر:

npm run fetch -- --area=shibuya
npm run compile -- --area=shibuya

التنزيلات الخام تقدر تكون كبيرة حيث كتتضمن تصوير بنايات PLATEAU. ملف README كيدكر تقريباً 3.6 GB لطوكيو، و3.0 GB لشيبا، و1.3 GB لشيبويا، و0.2 GB لفوجينوميا. التجميع كياخذ من ثواني حتى بضع دقايق حسب المنطقة.

فحص واختبار المعطيات المجمّعة

صايب معاينة من الفوق لمنطقة بهاد الأمر:

npm run preview -- --area=tokyo

شغّل اختبارات المشروع باش تتأكد من جولات القطع وخلوّ علامات الطرق من العوائق:

npm test

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

استعمل أدوات التحكم فالمتصفح

• جرّ باش تحرّك المنظر.
• جرّ بالزرّ ليمن باش تدوّر.
• ستعمل عجلة الفأرة باش تكبّر ولا تصغّر.
• ستعمل WASD باش تتحرّك.
• شدّ Shift وانت كتتحرّك باش تمشي بسرعة كثر.
• ضغط على N باش تبدّل بين النهار والليل.
• كليك على شي بناية باش تشوف التفاصيل ديالها.

لوحة Settings فالزاوية الفوقانية على اليمين كتخلّيك تبدّل المناطق وتعدّل الوقت، الترافيك، السحاب، الضو، وجودة العرض. الإعدادات كتتحفظ فالمتصفّح.

حلّ مشهد باستعمال معاملات الرابط

معاملات الرابط مفيدة باش تشارك منظر معيّن ولا تجرّب إعدادات العرض. مثلاً:

https://jeantimex.github.io/tokyo/?area=shibuya&time=18.5&traffic=0

المعاملات المدعومة كتضم:

• area=tokyo|shiba|shibuya|shinjuku|chiyoda|chuo|fujinomiya كتختار منطقة.
• time=18.5 كيعَيّن الساعة المحلية فطوكيو.
• night=1 كيشغّل وضع الليل.
• cam=x,z,distance,azimuth,elevation كيعَيّن الكاميرا.
• radius=900 كيتحكّم فنطاق الرؤية النشيط.
• traffic=0 كيعطّل الترافيك.
• cars=600 كيبدّل عدد الطوموبيلات.
• birds=150 كيبدّل عدد الطيور.
• clouds=0.25 كيتحكّم فنسبة تغطية السحاب.
• ortho=0 كيعطّل الوضع المتعامد.

الصفحة اللي كتتحلّ بمعاملات الرابط ما كتبدّلش إعدادات المتصفّح المحفوظة.

كيفاش كتخدم البلاطات المجمّعة

العميل كيستعمل نظام إحداثيات محلي بالمتر، والمبدأ ديالو فوسط المنطقة. المحور x كيتّجه للشرق، والمحور y للفوق، والمحور z للجنوب. البلاطات مربّعات طول الضلع ديالها 256 متر، وكتتشكّل باستعمال Web Workers بينما الموقع كيبثّ البلاطات القريبة من المنظر الحالي.

المنطقة المجمّعة فيها الملفات التالية:

• manifest.json كيخزّن المبدأ، الحدود، لائحة البلاطات، شبكة التضاريس، أسطح القناطر، ومعلومات نسب البيانات.
• t_<x>_<z>.bin كيخزّن بلاطة وحدة ديال البنايات، أسطح الأرض، علامات الطرق، العناصر، الأسلاك، واللافتات.
• terrain.bin كيخزّن شبكة ارتفاعات التضاريس بصيغة Float32 وبمسافة خمسة أمتار بين النقاط.
• roads.json كيخزّن شبكة الطرق، مستويات النقط، والتقاطعات المزوّدة بالإشارات.
• rails.json وstructures.json كيخزّنو خطوط السكك، الأرصفة، المظلّات، والقناطر الخاصة بالراجلين.
• backdrop.bin كيخزّن تضاريس تقريبية اختيارية محيطة بالمنطقة.

إضافة منطقة ولا إعدادها

باش تزيد مدينة أخرى مغطّاة ببيانات PLATEAU، عرّف مدخلة فـ tools/pipeline/config.mjs. المنطقة كتحدّد نقطة الوسط ومربّعات شبكة PLATEAU اللي خاصها المعالجة. ويمكن حتى تحدّد اختيارياً حجم الخلفية والمنظر الافتتاحي ديال الكاميرا.

جميع سكريبتات خطّ المعالجة كتقبل نفس خيار المنطقة:

npm run fetch -- --area=my-area
npm run compile -- --area=my-area
npm run preview -- --area=my-area

ملفات PLATEAU كتتجاب عبر API ديال كتالوج بيانات PLATEAU. خطّ المعالجة كينحّي التكرار من السجلات باستعمال gml:id، وهادشي مهم ملي كيبان مربّع من بيانات طوكيو تابع لأكثر من حيّ. التغطية كتختلف بين المدن، وداكشي علاش العميل كيرجع للتفاصيل المولّدة ملي كتكون القواقع المفصّلة، الخامات المصوّرة، ولا تجهيزات الشوارع ما متوفّراش.

تفاصيل تقنية متقدّمة

التضاريس، الطرق، والقناطر

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

مخططات الطرق اللي ناقصاها التفاصيل كتتقسم لمسالك السيارات والرصيف باستعمال محاور OpenStreetMap الوسطية. القناطر والممرات العلوية كتاخذ بروفايلات منفصلة: قناطر الشوارع كتتسوّى من ضفة لضفة، الطرق السيارة كتترفع حسب الطبقة، والمنحدرات كتتدرّج باش تربط مزيان.

الإضاءة والانعكاسات

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

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

العرض والأداء

المُصيّر كيستعمل three.js مع المُركّب postprocessing ديال pmndrs. التأثيرات ديالو كتضم n8ao للإضاءة المحيطة، الانعكاسات، الغلاف الجوي، السحاب، bloom، وتحويل النغمات. الطيور كتتموضع فـ vertex shader، وهادشي كيخلّي الأسراب الكبيرة تستعمل وقت قليل بزاف من المعالج.

باش تحسّن الأداء، خلّي النطاق النشيط متوسط، نقص عدد الطوموبيلات والطيور، عطّل السحاب، ولا هبّط جودة العرض من لوحة Settings. الوضع الافتراضي للبث كيحمّل البلاطات القريبة؛ خيار whole city كيحمّل جميع البلاطات المتوفّرة وقد يحتاج لذاكرة أكثر بزاف.

نشر الموقع المجمّع

من بعد ما تجمع المناطق اللي بغيتي تنشر، شغّل:

npm run deploy

هاد الأمر كيبني التوزيعة وكيدير force-push لـ dist/ كـ commit واحد لفرع gh-pages ديال origin فالمستودع. النشر كيتضمّن المدن اللي تجمعات فداك الجهاز. ملف README كيقدّر الحجم بحوالي 650 MB للمناطق السبعة المضمّنة.

نسب البيانات والتراخيص

الكود مطلوق بموجب رخصة MIT، ولكن بيانات المدينة باقا خاضعة للشروط ديال المصادر الأصلية ديالها. مشروع PLATEAU كيوفّر نماذج المدن ثلاثية الأبعاد، وتصاور السطوح، والقناطر، وتجهيزات الشوارع. هيئة GSI كتوفر بيانات الارتفاعات والتصاور الجوية. المساهمين فـ OpenStreetMap كيوفرو الطرقان، والسكك الحديدية، والأماكن بموجب رخصة ODbL. الخامات ديال Poly Haven مرخّصة بـ CC0، والشجر كيستعمل ez-tree بموجب رخصة MIT، ومكوّنات الغلاف الجوي والسحاب جاية من three-geospatial بموجب رخصة MIT.

الخلاصة

Procedural Tokyo كيبين كيفاش مجموعات البيانات الجغرافية العمومية تقدر تولّي تجربة غنية ومتحركة فالمتصفح. باش تخدم بها، ثبّت الاعتماديات، نزّل الخامات وبيانات المناطق، جمّع البيانات فـ مربعات، وشغّل خادم التطوير. من تما، معاملات URL، وإعدادات خط المعالجة، والاختبارات، وأوامر النشر كيوفرو طرق عملية باش تستكشف المشروع وتوسّعو.