استخدام Shaders لإنشاء تأثيرات خاصة واقعية في تصميم الويب

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

سنقوم اليوم باستكشاف بعض المفاهيم التي توضح فوائد استخدام أدوات التظليل. سنركز على GLSL.

GLSL لتقف على مكتبة الرسومات Shader Language. إنه جزء لا يتجزأ من WebGL ، ومسؤول عن غالبية الحلول المذهلة التي نراها في البرية. ترقى إلى مستوى اسمها ، فهي توفر للمطورين أدوات للتعامل مع الرسومات بشكل حدسي. إذا كانت في اليد اليمنى ، فهي قادرة على بث الحياة في أي فكرة تقريبًا.

تعج Codepen بالفعل بالمشاريع الرائعة التي تم إنشاؤها بمساعدة أدوات التظليل. ومع ذلك ، فإن تلك التي تظهر تأثيرات واقعية هي الأكثر إثارة للإعجاب وإلهامًا. وسوف نثبت ذلك في مجموعة اليوم. دعنا نتعمق.

Waterdroplet WebGL Shader بواسطة ستيفان ويك

افتتح ستيفان ويرك جولتنا برائعته الفنية ، ليثبت للجميع أن التقنيات المتطورة هي سحر حقيقي. تمكن من إعادة تساقط المطر على النافذة (أو في حالتنا ، شاشة). إن سلوك وإدراك قطرات المطر حقيقيان لدرجة أنك تريد أن تلمسها. هنا ، يقف JavaScript وراء محاكاة المطر بينما يتحمل WebGL shader مسؤولية التأثير اللزج والانكسار.

Three js water shader بواسطة جوناثان بلير / تجميع ShaderToy بواسطة David Hartley

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

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

Pixijs.v3 Shader مثال لعمر شحاتة

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

تساقط الثلوج WebGL Shader بواسطة بوريس شيهوفاك

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

مفهوم من قبل أناند دافاسورين

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

غيوم شادر بواسطة ديفيد هارتلي

هذه تحفة فنية أخرى ابتكرها ديفيد هارتلي. هذه المرة يوضح الفنان رأيه في السحب وسلوكها العائم. مرة أخرى ، يقف Pixi.js وراء هذا المشروع الضخم. هنا ، تمر الكاميرا مباشرة عبر السحب ، مما يتيح لك الشعور بجمال الفكرة بالكامل. لكن ذلك لم يكن كافيًا لداود. لقد وفر لنا أيضًا فرصة لاستكشاف المشهد عن طريق تحريك المؤشر حوله. فقط لا يصدق.

تظليل النار من 14islands

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

GLSL: Chrome بواسطة Liam Egan

يتميز Chrome من Liam Egan بأنه سائل بكثافة عالية. يذكر المشروع قليلاً بمشهد من ملحمة Terminator 2 ، عندما أظهر T-1000 الشرير تركيبته المعدنية السائلة. يبدو المفهوم مصطنعًا ، دون أدنى شك. ومع ذلك ، يبدو السلوك والسطح اللامع نابضين بالحياة بشكل لا يصدق. علاوة على ذلك ، فنحن نرحب بك للتجول عن طريق تحريك الماوس لأعلى ولأسفل لتغيير معلمة التنعيم.

تأثير تموج بواسطة مارتن لاكسينير

هذا المشروع من قبل Martin Laxenaire هو مثال ممتاز للتظليل المطبق. هنا ، تمكن المؤلف من تحقيق تأثير تموج حقيقي يجعل الصورة تتحرك مثل الستارة عند تحريك الماوس. Curtains.js يدعم هذا المفهوم. العيب الوحيد هو أنه قد يكون من السابق لأوانه توفير كل صورة على موقع ويب بهذا التأثير نظرًا لأنه لا يزال ثقيلًا جدًا على جهاز كمبيوتر منخفض المستوى "يستوعبها".

اليراعات المعطلة بواسطة فابيان موت

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

ارمي بعض الظل

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

ومع ذلك ، مع القوة العظمى تأتي مسؤولية كبيرة. هناك بعض المشكلات التي تحتاج إلى أخذها في الاعتبار قبل القفز إلى هذا الشيء المظلل بأكمله.

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