Loading…
3D والحركة — تجارب ويب تفاعلية
تستكشف هذه المشاريع كيف يمكن لتقنيات 3D وWebGL التفاعلية أن تجعل قصة المنتج أو العلامة التجارية ملموسة داخل المتصفح. تربط كل تجربة بين الحركة والتأثيرات البصرية ورحلة مستخدم محددة.
- الدور
- تطوير تجارب الويب التفاعلية وWebGL — الفكرة وإعداد مشاهد 3D والعمل على الـShaders وتنسيق GSAP والتمرير من البداية إلى النهاية في كل مشروع.
- التقنيات المستخدمة
- Three.jsReact Three FiberGSAP (ScrollTrigger)GLSL ShadersBlenderLenis
نظرة عامة
كاميرا تتحول إلى نافذة تطل على ذكريات شخص ما، ولوحة مفاتيح يصبح كل مفتاح فيها أداة مبعثرة تنتظر أن تتوحد، وجزيئات تتشكل من جديد لأن المنتج نفسه يدور حول التحول. هذه مجموعة من تلك الأعمال — صفحات هبوط كاملة تتمحور حول فكرة 3D واحدة، وتجارب مستقلة أصغر تستكشف تقنية واحدة في كل مرة.
لا تنصف لقطات الشاشة الثابتة هذا العمل — فكل صفحة تستحق وجود 3D فيها لأنها تربطه مباشرة بالقصة التي تحكيها.
الواجهة
خمس قصص، وخمس تقنيات
Everline — عرض لتأجير السيارات
رحلة سينمائية من تشغيل المحرك إلى صالة العرض — ادخل إلى قمرة القيادة، ثم شاهد أسطول السيارات يظهر تحت إضاءة الاستوديو.
الواجهة
خمس قصص، وخمس تقنيات
Everline — عرض لتأجير السيارات
رحلة سينمائية من تشغيل المحرك إلى صالة العرض — ادخل إلى قمرة القيادة، ثم شاهد أسطول السيارات يظهر تحت إضاءة الاستوديو.
عناصر المختبر
ليست كل فكرة بحاجة إلى صفحة كاملة تتمحور حولها
تجارب مستقلة — تقنية واحدة معزولة ودُفعت أبعد مما تتطلبه صفحة هبوط واحدة.
عناصر المختبر
ليست كل فكرة بحاجة إلى صفحة كاملة تتمحور حولها
تجارب مستقلة — تقنية واحدة معزولة ودُفعت أبعد مما تتطلبه صفحة هبوط واحدة.
حجر زجاجي لوني
سحابة جزيئات محبوسة داخل زجاج لوني مُحاكى — تنكسر مرتين وتُبرز في عزلة حتى يبقى التوهج داخل الشكل بدل أن يتسرب خارجه.
مكوّن الجزيئات
عشرات الآلاف من نقاط GPU مظللة كبخار أو كرات مضيئة، تتحول بين الأشكال مع أدوات تحكم مباشرة في الموضع والحركة والمظهر.
حقل Shader متموج
سطح تجريدي متحرك بُني بالكامل من خصائص المواد — انعكاسات وأضواء متدرجة تتحرك عبر Shader لمحاكاة حقل متموج ذي نتوءات.
النهج التقني
خمس عادات تمنع هذه التجارب من أن تكون سبب بطء تحميل الصفحة أو ارتفاع حرارة الهاتف — تراكمت عبر المشاريع، ثم انتقلت إلى كل فئة من العمل منذ ذلك الحين.
كلما ازدادت ثقلًا، أصبحت أخف في كل مرة
01
يبدأ تحسين النموذج في Blender لا في الكود01يبدأ تحسين النموذج في Blender لا في الكود
تقليل عدد المضلعات وحجم النسيج قبل وصول النموذج إلى المتصفح — فأرخص مكسب في الأداء يحدث قبل كتابة سطر واحد من Three.js.
02
لا يُحمّل شيء قبل الحاجة إليه02لا يُحمّل شيء قبل الحاجة إليه
تُحمّل المشاهد والنماذج الثقيلة بشكل ديناميكي وتؤجل حتى الحاجة إليها فعلًا — فلا تدفع الصفحة الأولى ثمن مشهد 3D لم يصل إليه المستخدم بالتمرير بعد.
03
تتوقف الرسوم المتحركة خارج إطار العرض03تتوقف الرسوم المتحركة خارج إطار العرض
المشهد غير المرئي لا يحتاج إلى الاستمرار في التصيير. تتوقف الرسوم وحلقات التصيير عند خروج القسم من إطار العرض، وتُفكك المشاهد تمامًا إذا فقدت علامة التبويب التركيز.
04
تبقى مشغلات GSAP قريبة مما تحركه04تبقى مشغلات GSAP قريبة مما تحركه
تُحصر مثيلات ScrollTrigger داخل القسم الذي تنتمي إليه ولا تُفعّل إلا عند اقتراب ذلك القسم — بدل خط زمني واحد يحاول التعامل مع الصفحة كلها دفعة واحدة.
05
يحصل الهاتف على مشهد مختلف، لا مشهد أصغر05يحصل الهاتف على مشهد مختلف، لا مشهد أصغر
تُستبدل مشاهد WebGL الثقيلة بنسخ أخف أو صور ثابتة على الهاتف، بدل إجبار المشهد نفسه على العمل بجودة أقل — قرار يُتخذ لكل مشروع، لا حلًا احتياطيًا شاملًا.
النتائج
ليست حكاية أرقام — بل حكاية إتقان
إطلاق خمس تجارب مختلفة في 3D والحركة، لكل منها تقنية مختلفة — مشاهد قائمة على الاستعارة، وسرد سينمائي بالتمرير، وعمل مخصص على الـShaders، وشخصية مستجيبة للتمرير باستمرار
مجموعة ثابتة من عادات الأداء — تحسين النماذج، والتحميل المؤجل، والإيقاف الواعي بإطار العرض — نُقلت وطُوّرت عبر كل مشروع
تجارب مستقلة في الـShaders والجزيئات بُنيت بعيدًا عن أي صفحة هبوط، كتدريب مقصود على التقنية
تطبيق طريقة التفكير نفسها في البنية، المكتسبة من أعمال لوحات التحكم وSaaS، على تنظيم هذه المشاهد وتحميلها