مكتبة Shaders تضيف تأثيرات WebGPU جاهزة لمشاريع React وVue وأطر أخرى
يوفر مشروع Shaders أكثر من 200 تأثير بصري مبني على WebGPU يمكن تركيبها كمكوّنات داخل React وVue وSvelte وSolid أو JavaScript. ويشمل محرراً بصرياً يصدّر شجرة المكوّنات إلى الكود، فيما يبقى محرك المكتبة وحزمها مفتوحَي المصدر بترخيص MIT.
أبرز النقاط
- مكتبة Shaders تقدم أكثر من 200 تأثير بصري WebGPU على هيئة مكوّنات قابلة للتركيب.
- تدعم React وVue وSvelte وSolid وJavaScript مع واجهات استخدام متشابهة بين الأطر.
- يعالج مكوّن Shader الطبقات بالترتيب ويمزجها على معالج الرسوميات.
- يتيح محرر shaders.com تصميم التأثيرات بصرياً ثم تصدير شجرة المكوّنات إلى كود.
- يمكن إنشاء تأثيرات مخصصة باستخدام defineShader وWGSL، بينما المحرك والحزم مرخصة بترخيص MIT.
تقديم خلفيات متدرجة أو ضبابية أو تأثيرات تتفاعل مع حركة المؤشر في الويب غالباً ما يتطلب كتابة رسوميات مخصصة وضبطاً دقيقاً للأداء. مشروع Shaders يحاول تبسيط هذه المهمة عبر تحويل التأثيرات البصرية المعتمدة على WebGPU إلى مكوّنات يمكن إضافتها مباشرة إلى واجهة التطبيق.
تضم المكتبة أكثر من 200 تأثير، تشمل التدرجات اللونية والضوضاء البصرية والزجاج والمعادن والإضاءة والتشويهات والتمويهات والانتقالات وتأثيرات المؤشر. بدلاً من بناء كل تأثير من الصفر، يضع المطور مكوّنات داخل مكوّن Shader، ثم يعالجها المحرك كطبقات مرتبة من الأعلى إلى الأسفل ويخلطها على معالج الرسوميات.
مثلاً، يمكن الجمع بين تدرج لوني وأثر لحركة المؤشر في React بهذا الشكل:
import { Shader, LinearGradient, CursorTrail } from 'shaders/react'
<Shader className="w-full h-64">
<LinearGradient colorA="#0f172a" colorB="#7c3aed" />
<CursorTrail />
</Shader>
الفكرة نفسها متاحة عبر مداخل مخصصة لـ React وVue وSvelte وSolid وJavaScript، مع المحافظة على أسماء الخصائص وطريقة استخدامها قدر الإمكان بين الأطر المختلفة.
محرر بصري يكتب شجرة المكوّنات
إلى جانب الحزمة البرمجية، يقدم المشروع محرراً على موقع shaders.com يعمل كلوحة تصميم غير محدودة. يستطيع المستخدم تكديس التأثيرات وتعديل خصائصها من عناصر تحكم مرئية وربط بعضها بحركة المؤشر أو بخط زمني، ثم تصدير النتيجة ككود مكوّنات للإطار الذي يستخدمه.
كما توفر أداة سطر أوامر أوامر لربط مشروع برمجي بمشروع Shaders، وتثبيت المكوّنات المصممة وتحديثها لاحقاً. وتقول الوثائق إن الأداة تتعرف على الإطار المستخدم، وتكتب الملفات في مجلد المكوّنات، وتسجل ما ثبّتته في ملف قفل، من دون حاجة إلى تثبيت عالمي.
مساحة للتخصيص العميق
لا تقتصر Shaders على التأثيرات الجاهزة. يمكن للمطور إنشاء مكوّن مخصص عبر defineShader، بتحديد الخصائص وما يرسم عند كل بكسل. وتدعم المكتبة كتابة هذا الجزء بلغة WGSL، وهي لغة تظليل خاصة بـ WebGPU، أو تركيب التأثير من بدائيات المكتبة التجريبية.
محرك Shaders ومكوّناته وربطه بالأطر البرمجية موجودة في المستودع نفسه ومُرخّصة بترخيص MIT. أما محرر التصميم والجاهزيات والقوالب الإضافية في shaders.com فهي خدمات منفصلة بشروط استخدام خاصة بها؛ ويوفر المستوى المدفوع، وفق المشروع، جاهزيات وقوالب أقسام للمواقع وخيارات تصدير عالية الدقة وتكاملاً مع Framer وميزات أخرى.
عملياً، تستهدف المكتبة الفرق التي تريد إضافة رسوميات واجهات حديثة من دون تحويل كل تأثير إلى مشروع رسوميات مستقل، مع الإبقاء على خيار كتابة Shader مخصص عند الحاجة.
لماذا يهم؟
تخفض Shaders حاجز استخدام WebGPU في واجهات الويب: فبدلاً من كتابة منطق رسوميات لكل تدرج أو تمويه أو تفاعل مع المؤشر، يمكن بدء العمل بمكوّنات جاهزة ثم الانتقال إلى WGSL عند الحاجة إلى تأثير خاص. كما أن توحيد الواجهة بين عدة أطر قد يسهل نقل أنماط التصميم بين المشاريع والفرق.