كيف تعمل تقنية WebGL على إعادة إنشاء تراث الفلاش
هل تتذكر كل تلك المشاريع ذات التفاعلات الرائعة ، والرسوم المتحركة التي تهب بالعقل ، والمؤثرات الصوتية المرافقة المثيرة التي أدت إلى تجربة غامرة بشكل مكثف للمستخدم؟ نعم ، هناك احتمالات تم إنشاؤها بمساعدة الفلاش.
على الرغم من أنني أكره الاعتراف بذلك ، فقد انتهى عصر هذه المنصة الغنية بالوسائط المتعددة. فلاش ميت أخيرًا لكن لا تخف! وكما يحدث غالبًا عند إغلاق أحد الأبواب ، يفتح الآخر ، ويتم استبدال Flash ببطء بواسطة خليفة أكثر نشاطًا وحيوية. تقنيات مثل تقنية WebGL ، ومرافقة مكتبات جافا سكريبت مثل Three.js تنمو بسرعة - مما يتيح للمطورين إنشاء مشاريع تشبه الفلاش ، دون مشكلات أمنية مصاحبة.
سنركز اليوم على WebGL و Three.js. هذا الاقتران هو خيار قوي ل UX غامرة.
WebGL و Three.js
يعمل WebGL كقاعدة توفر أدوات للتلاعب باستخدام رسومات الكمبيوتر ثلاثية الأبعاد و 2 D التفاعلية. فهو يمنحك فرصة لخلط العناصر ومطابقتها مع عناصر HTML ودمجها مع المكونات الأخرى للصفحة أو الخلفية.
Three.js هي مكتبة جافا سكريبت تحتوي على قائمة بالميزات المتطورة التي تتيح لك العمل مع المشاهد والكاميرات والأضواء والهندسة والمزيد. الغرض منه هو فتح إمكانات WebGL عن طريق إضافة وظائف إضافية إلى النظام الأساسي. يجعل الأمر سهلاً لإنشاء رسوم متحركة ثلاثية الأبعاد معجزة لـ GPU بدون الاعتماد على مكونات المستعرض الإضافية.
قضايا التوافق
مع التقنيات الحديثة ، أنت دائمًا ما تكون في مأزق: إما إنشاء مشروع "مقاس واحد يناسب الجميع" والذي سيعمل على أجهزة مختلفة ويعرض تجربة مستخدم متناسقة ، أو يضع كل شيء على الخط ويثير إعجاب الجمهور الذي يمكنك الوصول إليه على الفور. .
مع WebGL و Three.js هي نفس القصة. تشبه Safari و Opera ومعظم متصفحات الجوّال (وهذا لا يقول شيئًا عن Internet Explorer) ذبابة في Chardonnay. لسوء الحظ ، هناك عدد كبير من المستخدمين عالقون في المتصفحات القديمة ، لذا فإن التوافق يمثل عقبة - ولكن الدعم يتزايد (وهو أكثر مما يمكن أن يقال عن Flash) ، بشرط ألا تستخدمه في أي مهمة مهمة ، مثل WebGL و Three.js هي خيارات ممتازة.
أمثلة
باطل
باطل هي تجربة بواسطة Hi-ReS! ، وهو استوديو مبدع في لندن. أراد المطورون التجريد من القيود المتأصلة في المنصات والمتصفحات الحديثة واختبار حدود التقنيات الحالية. يبدو أنهم سمّروه
وهو تطبيق سطح مكتب بحت يتم تشغيله بواسطة ميزات WebGL و Web Audio. إلى جانب Howler.js و GSAP و Coffee Collider ، شاركت Three.js في إنتاج هذا الملعب الرائع الذي يجتذب الزوار عبر الإنترنت إلى رحلة تشبه إلى حد كبير كتابًا رقميًا.
إعادة تشكيل التميز
هذه الحملة التفاعلية وتُعد هذه الذكرى السنوية المكرسة لذكرى سنهيسر ملحمة ملحمية لا تجمع فقط بين المناظر الطبيعية المثيرة للخيال العلمي ، بل تضم العديد من الميزات والتفاصيل المتطورة. إنها تجربة Chrome خالصة تسمح للزائرين بالمشاركة في تشكيل وصياغة نص الصوت. على الرغم من أن مرحلة التشكيل قد اكتملت - فقد شارك مليون شخص في جميع أنحاء العالم في الحدث - إنه يعكر الصخور. نرحب بك لتقديم مساهمتك الخاصة ، وفحص هذا التمثال الهائل للصوت والتمتع بالفيديو التمهيدي والتنفيذ المتميز.
برونو كوينتيلا
محفظة شخصية من برونو كوينتيلا هي عبارة عن تجربة WebGL مقدمة في الوقت الفعلي والتي توضح إمكانات الفنان وإمكانات تقنيات الويب الحالية. استخدم الماوس لفحص المشهد بدقة. اسحبه في اتجاهات مختلفة لمعرفة ما تم إخفاؤه داخل هذا الجزء الأكبر من المضلعات ثلاثية الأبعاد بدقة مع الأسطح اللامعة. تمثل هذه الفكرة بداية ممتازة لموقع الويب الذي يترك انطباعًا أوليًا قويًا ودائمًا.
اختبار الجسيمات
هذا المشروع يعرض زوبعة من أنابيب أقل مرتبة ومنظمة من الجسيمات التي تشع فيبي عالي التقنية. هناك مركز تحكم يشجعك على اللعب بمثل هذه السمات مثل نصف قطر سحابة على شكل أسطواني ، كثافة الأنابيب ، الارتفاع ، المقياس ، وأكثر من ذلك. المفهوم هو يفتن.
شادر الماء
هذا الفنان نجح تقليد سطح الماء من خلال محاكاة السلوك الطبيعي للسائل. إن الشكل المحدب والسطح المتموج مع انعكاسات الشمس كأنها اللمسات الأخيرة يعيدان خلق مشهد واقعي حقيقي يمسك العين من أول ثانية.
WebGL رئيس الجسيمات
كما كان الحال عندما كان الفلاش ناجحا ، كانت الجسيمات هي الغضب في الوقت الحاضر. ويمكن رؤية الرسوم المتحركة من مختلف الأحجام والنوع في العديد من المشاريع ، و هذا العمل هو واحد من هذا القبيل. النسخة الرقيقة من الرأس التي تذكرنا بشكل غامض بروبوت ذكي شبيه بالإنسان من روايات إسحاق آسيموف هو تحفة حقيقية. ليس فقط مفاجأة إدراك ، ولكن أيضا سلوكها. يتفاعل مع حركات الماوس ، إمالة الرأس الطبيعي إلى اليمين ، اليسار ، إلى الأعلى والأسفل.
ديناميكية 3D النثار والنص
يعتبر تأثير النص أحد طرق تجسير الوصلات المملة مع ملاحظة عن المرح والبرودة وكذلك التأكيد على الحروف المطلوبة. راشيل سميث حل مستوحاة من النثار سيساعد بالتأكيد على إثراء التصميم مع المشاعر الساطعة ووضع العنوان في مركز الصدارة. اكتب كلمة في حقل الإدخال أدناه لرؤية السحر بالكامل. قطع هندسية ثلاثية الأبعاد حيوية ونابضة بالحياة ستشكل الطلب وستجعل النتيجة تفاعلية بشكل جميل.
3D بانوراما عارض
Three.js يأتي في متناول اليدين في المشاريع المشتركة كما يثبت ماكس Chuhryaev. حله يحول الصور البانورامية بسهولة إلى تفاصيل أساسية لتجربة المستخدم. لديه منظور لطيف وكاميرا تتحرك ببطء: معا تجعلك تشعر جزء من التركيبة. تسير الأمور على ما يرام مع المناظر الطبيعية ومناظر المدينة والداخلية ، مما يتيح للمستخدمين الاستمتاع بجمال الوسائط المتعددة الثابتة.
المثلث نمط مولد
هذه التجربة يعطيك خلفية مضلعة رائعة مع شعور ثلاثي الأبعاد. كما أنها بمثابة ملعب حيث يمكنك جعل بعض المناطق أكثر سطوعًا وأخرى باهتة: استخدم الماوس فقط. تتيح لك لوحة الخيارات إمكانية ضبط مجموعة كبيرة من التفاصيل المتعلقة بالقماش بما في ذلك إعدادات الضوء والشبكات وعرضها وحتى إعدادات التصدير.