تجربة ويب ثلاثية الأبعاد · Three.js · مبادرة شخصية، هدية

Yehia Rashdan Car Museum

يحيى رشدان جامع سيارات مصري يتابعه نحو 551 ألفًا على إنستجرام، وقد قال في أكثر من بودكاست إن حلمه أن يفتح متحفًا حتى لا تموت سياراته وحكاياتها. فبنيت له متحفًا ثلاثي الأبعاد في المتصفح، هديةً: 85 مركبة من مركباته الحقيقية على ثلاثة طوابق، ويمكن التجول فيه من الجوال.

شاشة البداية عند الغروب: سيارة BMW M2 بنفسجية تنجرف وسط دخان الإطارات خلف عنوان متحف يحيى رشدان وزر البدء.
شاشة البداية نفسها على الجوال.

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

الدور
البحث والبناء ثلاثي الأبعاد والصوت والإعلان
المجال
تجربة تفاعلية ثلاثية الأبعاد · ثقافة السيارات · مصر
المنصة
Three.js (WebGL2) · Cloudflare Workers
85مركبة: 84 سيارة وعربة الرحلات
3طوابق و8 أقسام
3أيام من البحث حتى النشر
$6.24تكلفة الذكاء الاصطناعي لمشاهدة 812 فيديو
$0استضافة على Cloudflare Workers
65ثانية مدة الإعلان على إنستجرام

قالها في بودكاست: «نفسي أفتح متحف». فبنيت له واحدًا.

قالها في أكثر من برنامج خلال 2026: «نفسي أفتح متحف»، حتى تبقى السيارات وحكاياتها لمصر وللأجيال القادمة. المبنى الحقيقي يحتاج سنوات وثروة، أما المتحف على الويب فيحتاج رابطًا.

المبنى حلقة على شكل شعاره YR، وسطحه كله حلبة دريفت. في الداخل 85 مركبة من مركباته على ثلاثة طوابق وثمانية أقسام. وفي الخارج يقف يحيى نفسه يغسل سيارته الموستانج الكلاسيكية ويرحّب بك بصوته الحقيقي. بدأ البحث في 15 أكتوبر، وكان أول commit في 16، ونُشر المتحف في 17.

01 · البحث

812 فيديو شوهدت بتكلفة 6.24 دولار.

معظم سياراته تظهر في القصص والقصص المميزة لا في التعليقات، لذلك كان لا بد أن تُستخرج قائمة السيارات من اللقطات نفسها. فهرست حسابه على إنستجرام دون تسجيل دخول ودون تنزيل أي وسائط على جهازي. اتصالي المنزلي محدود بـ 5 جيجابايت يوميًا، فنُفذت كل المهام الثقيلة على Google Cloud Build برصيد الشركات الناشئة، وشاهد Gemini كل فيديو: أي السيارات تظهر، ومن يتكلم، وماذا يقول، وهل السيارة ملكه.

551,437متابعًا
787منشورًا
163قصة مميزة
1,085منشورًا وقصة مفهرسة
812فيديو وصورة حللها Gemini
250ظهورًا لسيارة
80مقطعًا صوتيًا صالحًا
$6.24إجمالي تكلفة الذكاء الاصطناعي
  1. إنستجرامبيانات وصفية فقط، دون تسجيل دخول
  2. Cloud BuildGemini يشاهد كل فيديو
  3. الفهرسسيارات وأصوات وكلاب وغسيل سيارات
  4. صفحة المراجعةإبقاء أو حذف، يدويًا
  5. القائمة النهائية85 مركبة على ثلاثة طوابق

ثبتت ملكية كل سيارة من لوحاته المميزة «ي ر» واسمه على ملصقات السيارات وكلامه هو. حُذفت السيارات التي تبيّن أنها ليست له، ومنها رولز رويس فانتوم، ولا تُعرض المجسمات ولا السيارات اللاسلكية.

02 · المبنى والافتتاحية

شعاره، كما يُرى من السماء.

الافتتاحية لقطة واحدة. تمر طائرة مسيّرة فوق الـ M2 البنفسجية وهي تنزلق حول السطح وسط دخان الإطارات، ثم تهبط إلى المدخل فتجد يحيى يغسل سيارته الموستانج ومعه كلبه الكين كورسو وكلبه البوميرانيان. يقول «أنتو جاهزين؟ أنا مش جاهز. يلا بينا. بسم الله.»، ثم يرش الماء نحوك فتبتل الشاشة، وتدخل.

لقطة علوية بالمسيّرة: مبنى دائري مرسوم على شكل حرفي YR، وسطحه كله حلبة دريفت عليها M2 بنفسجية يتبعها الدخان.
حلقة YRنسخة أولى من المبنى: حرفاه مخطط للمبنى، وحلبة دريفت سطح له
الـ M2 البنفسجية تنجرف على حلبة السطح عند الغروب.
الدريفتدخان الإطارات على حلبة السطح
المسيّرة تهبط إلى المدخل حيث لافتة YR ولوحة الدليل وعربة الرحلات.
الهبوطإلى لافتة YR وعربة الرحلات
يحيى ثلاثي الأبعاد يغسل سيارته بجانب عربة الرحلات ومعه الكين كورسو والبوميرانيان، مع عبارة «يلا بينا».
الترحيبصوته الحقيقي، وفمه متزامن معه
المشهد نفسه مع عبارة «أنتو جاهزين؟» وهو يرفع خرطوم الماء.
الرشالخرطوم، ثم مؤثر العدسة المبتلة
الدريفت على الجوال.
على الجوالالافتتاحية نفسها بالطول
الهبوط على الجوال.
الهبوطحتى المدخل
ترحيب يحيى على الجوال.
الترحيب«أنتو جاهزين؟»

صوته حقيقي: جملة واحدة من فيديو له، فُصلت عن الموسيقى ونُقّيت بـ BS-Roformer وDeepFilterNet3. لا استنساخ للصوت، ولا كلمة لم يقلها.

03 · التجول

تجوّل فيه من جوالك.

WASD أو الأسهم على الكمبيوتر، وعصا تحكم على الجوال، والسحب للنظر، والمسافة أو زر «نط» للقفز. سلالم حقيقية تصل إلى كل طابق، ومبدّل للطوابق، ويظهر اسم كل قسم بهدوء عند دخوله.

البهو: مرسيدس 280SE كابريوليه زرقاء من الستينيات بمقصورة حمراء على منصة دائرية، والطوابق والسلالم فوقها.
البهومرسيدس 280SE كابريوليه من الستينيات على منصتها، أحب سياراته إليه
البهو على الجوال مع مبدّل الطوابق وزر القفز.
على الجوالمبدّل الطوابق وعصا التحكم و«نط»
صف الكلاسيكيات ولوحة تعريف أمام كل سيارة.
الكلاسيكياتكل سيارة مقدمتها للخارج ولوحتها أمامها
خنفساء وحافلة فولكس فاجن في ركن فولكس.
ركن فولكسالخنفساء والحافلة
صفوف من السيارات تحت أغطية حمراء عليها شعار YR.
لسه متغطيةنحو عشر سيارات غامضة تحت أغطية YR الحمراء
ركن الهزار مع سيتروين آمي وسيارات جيب.
ركن الهزارسيتروين آمي وسيارات جيب
طابق BMW مع الـ M2 البنفسجية وصف من سيارات BMW.
BMWطابق خاص بها
طابق الحلبة مع سيارات السباق ولوحاتها.
الحلبةالسيارات التي يسابق بها
السيارات الخارقة في الطابق العلوي.
الصواريخالسيارات الخارقة في الطابق العلوي
الكلاسيكيات على الجوال.
الكلاسيكياتعلى الجوال
السيارات المغطاة على الجوال.
لسه متغطيةعلى الجوال
السيارات الخارقة على الجوال مع تلميح التحكم.
الصواريخمع تلميح التحكم الذي يظهر مرة واحدة
04 · كل سيارة

كل سيارة عن قرب.

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

ألبينا C2 2.7 معزولة على قاعدتها مع بطاقة الاسم.
Alpina C2 2.7مفتوحة من البهو
مرسيدس 280SL باجودا معزولة على قاعدتها.
Mercedes-Benz 280SL Pagodaالكلاسيكيات
BMW E30 تورينج معزولة على قاعدتها.
BMW E30 Touringطابق BMW
فيراري F8 سبايدر حمراء معزولة على قاعدتها.
Ferrari F8 Spiderالصواريخ
مرسيدس 560 SEC معزولة على الجوال.
Mercedes-Benz 560 SECعلى الجوال
BMW E36 كابريوليه معزولة على الجوال.
BMW E36 Cabrioletعلى الجوال
05 · الأداء

صُنع ليعمل على الجوال الذي في يد متابعيه.

معظم الزوار سيفتحون الرابط داخل إنستجرام على جوال أندرويد، لذلك يضع الجوال كل الحدود. يعمل المتحف بـ Three.js على WebGL2، لأن متصفح إنستجرام الداخلي على أندرويد لا يدعم WebGPU.

  • لكل سيارة نسخة خفيفة: 17.9 ميجابايت بدل 64، وبـ 22.6% من المضلعات.
  • السيارات بالجودة الكاملة تُحمّل قربك فقط: في نطاق 16 مترًا على الكمبيوتر و9 أمتار على الجوال، وبحد أقصى 30 و8 في الوقت نفسه.
  • خامات الزجاج التي كانت تجمّد الشاشة من ثانيتين إلى خمس ثوانٍ تُزال عند التحميل.
  • أسوأ إطار 42 ملّي ثانية، ولا إطار فوق 50، بقياس على معالج رسومات بويندوز.
  • التحميل الأول 14.4 ميجابايت مع عدّاد للتقدم، وكل ملف يُعاد طلبه تلقائيًا بعد أن قطع خط إنترنت مصري حقيقي HTTP/3 في منتصف التنزيل.
  • استضافة ثابتة على Cloudflare Workers بتكلفة 0 دولار، مع حماية تمنع المواقع الأخرى من تضمين النماذج.
  • أكثر من 70 commit، ونحو 4,500 سطر JavaScript للمتحف، وأكثر من 20 سكربت اختبار آلي على Chrome بلا واجهة: المشي والسلالم والتجمد ومستوى التفاصيل واللوحات.
طابق BMW على الجوال.
طابق BMWنسخ خفيفة بعيدًا، وكاملة قربك
طابق الحلبة على الجوال.
الحلبةالمشهد نفسه بحدود الجوال
06 · الإعلان

إعلان مدته 65 ثانية، والمحرر الذي بنيته لقصّه.

يبدأ الإعلان بكلماته هو في البودكاست: «نفسي أفتح متحف»، ثم «عشان كده بنيتله واحد»، وينتقل إلى المتحف مع الإيقاع. 14 مقطعًا من 4 برامج قُصّت إلى 26 جزءًا، مع 44 بطاقة متحركة بخط ثمانية بالكشيدة وكلمات مفتاحية ذهبية، وموسيقى ولّدها Lyria من جوجل، تنخفض تحت الكلام ومضبوطة على −14 LUFS لإنستجرام.

بطاقة على خلفية سوداء: «نفسي أفتح متحف».
البدايةكلماته على الأسود
البهو مع جملة المتحف المصري.
السبب«زي المتحف المصري»
بطاقة: «عشان كدا بنيتله واحد».
التحولفبنيت له واحدًا
الـ M2 البنفسجية تنجرف.
الافتتاحيةدريفت السطح
سيارة ماكلارين فورمولا 1 على منصتها.
حكاية الفورمولا 1الماكلارين
بطاقة الختام: متحف يحيى رشدان، ادخله الآن.
الختام«ادخله دلوقتي»
محرر الإعلان في المتصفح: خط زمني للأجزاء وأزرار ضبط نقاط القص وحقول النص ومعاينة حية.
المحررخط زمني لكل الأجزاء، ومعاينة حية بالصوت، وضبط ±0.05 ثانية لكل نقطة قص، وأزرار للنص والذهبي والكشيدة، واختيار الموسيقى، والتراجع، والتصدير بضغطة. تظهر في المعاينة لقطة من البودكاست

فُحصت كل نقطة قص بمجسّات صوتية من Gemini ومنحنيات ارتفاع الصوت، فلا تُقطع كلمة ولا يتسرب صوت المذيع. يُصدَّر الإعلان عبر سلسلة ffmpeg في Node مع تخزين مؤقت لكل جزء، وتسلّم حزمة التصدير مقاطع نظيفة ومسارات صوت منفصلة وترجمة SRT إلى CapCut أو Filmora.

التقنيات

  • ثلاثي الأبعاد: Three.js (WebGL2) وglTF/GLB ومؤثرات مخصصة للعدسة المبتلة ودخان الدريفت والطريق
  • الذكاء الاصطناعي: Gemini لفهم الفيديو والمجسّات الصوتية، وLyria للموسيقى، وHunyuan3D-2.1 لهيكل الجسم الأساسي، وBS-Roformer وDeepFilterNet3 للصوت
  • السحابة: Google Cloud Build وCloud Storage، وApify لبيانات إنستجرام الوصفية
  • الاستضافة: Cloudflare Workers على نطاق فرعي من tamim.works
  • الفيديو: سلسلة ffmpeg في Node ومحرر متصفح مخصص والتقاط بـ Playwright
  • الاختبار: Playwright مع Chrome بلا واجهة على معالج رسومات حقيقي، أكثر من 20 سكربت

حدود العمل بصدق

  • مبادرة شخصية وهدية. لم يطلبها يحيى رشدان ولم يدفع مقابلها، ولا تعني تأييده لها.
  • نماذج السيارات ثلاثية الأبعاد نماذج مجانية برخصة CC BY من Sketchfab (واحد منها CC BY-SA)، ومنسوبة لأصحابها داخل المتحف. نظّفتها وضبطت مقاسها واتجاهها الحقيقيين، وطليت كلًّا منها بلون سيارته، وبنيت لكل منها نسخة خفيفة.
  • نموذجان من عملي: عربة الرحلات، صممتها من صوره، وسيارة البهو 280SE كابريوليه، حوّلتها من نموذج W111 سيدان بأربعة أبواب إلى الكابريوليه ذات البابين بمقصورة حمراء.
  • جسم يحيى ثلاثي الأبعاد بدأ بهيكل أساسي بالذكاء الاصطناعي (Hunyuan3D-2.1) من صوره، ثم أُعيد تلوينه وتجهيزه للحركة. أما صوته فصوته هو.
  • مقاطع البودكاست في الإعلان ملك للبرامج التي أُخذت منها.
  • هذه نسخة أولى من المبنى، والغلاف الزجاجي ما زال يُعاد تصميمه. لا ندّعي أي أرقام زيارات أو انتشار.

شكر وتقدير لأصحاب النماذج

الإعلان

الإعلان الترويجي.

65 ثانية بمقاس 9:16 لإنستجرام. شغّل الصوت.

منشور

تجوّل في المتحف من جوالك.