المواقع ثلاثية الأبعاد (3D): متى تستحق العناء وكيف تحافظ على سرعتها

الإجابة المختصرة

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

يستند هذا الدليل إلى مشروعين من مشاريعنا: Janus Observatory، وهو تجربة في المتصفح تضم عشرة عوالم ثلاثية الأبعاد، وdardo.studio، الذي تُفتتح صفحته الرئيسية بمشهد ثلاثي الأبعاد يُعرض في الوقت الفعلي.

متى تستحق العناصر ثلاثية الأبعاد مكانها

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

متى لا تستحق

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

ثلاثي الأبعاد أم فيديو أم صور؟

يعمل WebGL في كل المتصفحات الحديثة. أما WebGPU فأحدث وأسرع في بعض المهام، لكن دعمه لا يزال متفاوتًا، لذا خطّط لبديل احتياطي. فالمدخل ثلاثي الأبعاد في dardo.studio يحاول استخدام WebGPU أولًا ثم يرجع إلى WebGL 2، بينما صفحات الخدمات والأعمال والتواصل HTML عادي لا ينتظر أي مشهد ثلاثي الأبعاد.

ما تعلّمناه من بناء Janus Observatory

يحوّل Janus Observatory عشرة سيناريوهات منشورة لمستقبل الأرض إلى قصة من 17 فصلًا وأطلس ومرصد، مع عشرة عوالم أصلية منخفضة المضلعات (low-poly) وعالِم فلك فضائي بمفاصل متحركة. ويعمل على الخطة المجانية لـCloudflare Workers، التي تضع حدًا لحجم التطبيق. ويسجّل تقرير الإصدار الخاص بالمشروع بتاريخ 27 سبتمبر 2026 ما تطلّبه الحفاظ على سرعته:

• اضغط النماذج واحتفظ ببديل احتياطي. تُشحن النماذج ثلاثية الأبعاد البالغ عددها 59 نموذجًا كنسخ gzip يبلغ مجموعها 8.2 ميغابايت بدلًا من 15.8 ميغابايت، أي أقل بنسبة 47.9% في التنزيل. أما المتصفحات التي لا تستطيع فك ضغطها فتحصل على الملفات الأصلية.
• فك الترميز خارج الخيط الرئيسي، ثم التوقف. يعمل فك ترميز Meshopt على عامل خلفي (background worker) واحد يتوقف بعد خمس ثوانٍ من الخمول.
• ضع ميزانية لـJavaScript وألزم بها. يبلغ حجم JavaScript الأولي للصفحة الرئيسية 197,059 بايت بعد ضغط gzip مقابل ميزانية قدرها 256,000 بايت، وتتحقق عملية البناء من ذلك.
• انتبه لعواصف الطلبات. أطلقت حلقة جلب مسبق تخميني (speculative prefetch) في حزمة Next.js وOpenNext ما مجموعه 11,704 طلبات في تتبّع واحد فاشل للمتصفح. وكان الحل إيقاف الجلب المسبق لتلك الروابط، وأصبحت الاختبارات تشترط ألا يصدر أي طلب تخميني.
• ثبّت الدقة بدلًا من مطاردة معدل الإطارات. تُعرض عناصر canvas بنسبة بكسلات جهاز ثابتة بين 1 و1.5. كما سحب التقرير رقمًا سابقًا لمعدل الإطارات كان يعتمد على خفض الدقة، لذا لا نذكر أي رقم.

ابنِ الموقع ليعمل دون العناصر ثلاثية الأبعاد

لدى Janus قاعدة واحدة تحدد كل ما عداها: يجب أن تعمل التجربة الأساسية دون WebGL ودون ذكاء اصطناعي. فكل سجلات السيناريوهات العشرة تُحمَّل مع تعطيل JavaScript، وعناصر التحكم تعمل دون WebGL، والتدوير بلوحة المفاتيح والتركيز المرئي وتقليل الحركة بُنيت مع كل ميزة. وتسرد صفحة إمكانية الوصول الخاصة به عناصر التحكم والمكافئات غير البصرية والحدود المعروفة. والهدف هو المستوى AA من WCAG 2.2، ويُتحقق منه باختبارات آلية في Chromium وFirefox وWebKit.

وتساعد هذه القاعدة أيضًا محركات البحث ومساعدات الذكاء الاصطناعي: فالنصوص والأسماء والبيانات موجودة في HTML، لا داخل عنصر canvas.

قائمة تحقق لصفحة ثلاثية الأبعاد سريعة وسهلة الوصول

1. اكتب الصفحة دون عناصر ثلاثية الأبعاد أولًا. إذا لم تكن نسخة HTML مفهومة، فلن تصلحها العناصر ثلاثية الأبعاد.
2. حدّد ما الذي تشرحه العناصر ثلاثية الأبعاد، واحذف كل ما وُجد فقط ليبدو مبهرًا.
3. ضع ميزانيات لـJavaScript ووزن النماذج وحجم الخامات (textures) قبل أن تبدأ النمذجة، وتحقق منها في عملية البناء.
4. اضغط النماذج بأدوات مثل meshoptimizer، وقدّمها بصيغة glTF، واحتفظ ببديل غير مضغوط حين تعتمد على ميزات أحدث في المتصفحات مثل DecompressionStream.
5. حمّل المشهد بعد المحتوى، وفقط حين يوشك أن يظهر.
6. ضع حدًا أقصى لنسبة البكسلات حتى لا تعرض الشاشات عالية الكثافة أربعة أضعاف البكسلات.
7. احترم prefers-reduced-motion، وامنح كل تفاعل مسارًا عبر لوحة المفاتيح، وضع مكافئًا نصيًا بجانب كل عنصر canvas.
8. اختبر على هواتف حقيقية متوسطة الفئة وعلى أكثر من محرك متصفح، ثم تابع Core Web Vitals بعد الإطلاق.

كم يكلّف

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

كيف تبني Dardo المواقع ثلاثية الأبعاد

نصمّم التجارب ثلاثية الأبعاد ونبنيها من خلال خدمة المواقع التفاعلية ثلاثية الأبعاد، وأعمال الحركة والتمرير الأخف من خلال التطوير الإبداعي. ففي Hyper بنينا قصة ثلاثية الأبعاد يقودها التمرير باستخدام React Three Fiber، تحوّل الإشارات المتفرقة إلى ملف عميل واحد. وإذا كانت لديك فكرة تحتاج إلى مساحة لتُفهم، حدّثنا عنها.