shader-dev
Shader Craft — تقنيات تظليل GLSL
إنشاء تظليل GLSL كاملة وجاهزة للإنتاج للمؤثرات البصرية في الوقت الفعلي — من مشاهد ثلاثية الأبعاد بأسلوب ray-marching إلى محاكاة السوائل — كلها تعمل في المتصفح مع WebGL2.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "shader-dev". إنشاء نمط kaleidoscope باستخدام معالجة UV القطبية مع لوحة ألوان Voronoi
النتيجة المتوقعة:
- صفحة HTML كاملة مع لوحة WebGL2
- تظليل الأجزاء مع تحويل الإحداثيات القطبية/اللوغاريتمية القطبية
- دالة ضوضاء Voronoi/Worley لتوليد نمط الخلايا
- تعيين لوحة ألوان جيب التمام لألوان زاهية
- تناظر Kaleidoscope عبر التكرار الزاوي (مثل التناظر 8 أضعاف)
- تدوير قائم على الوقت متحرك لمؤثر بصري ديناميكي
استخدام "shader-dev". بناء مشهد إضاءة عامة بتتبع المسار مع ظلال ناعمة ونزيف لوني
النتيجة المتوقعة:
- متبع مسار كامل مع أخذ عينات مونت كارلو
- تعريف مشهد SDF مع كائنات ومواد متعددة
- أخذ عينات BSDF المنتشرة والعاكسة
- إنهاء المسار بالروسييت
- مخزن تراكمي للعرض التدريجي
- تعيين نغمات وعرض للصورة المتقاربة
التدقيق الأمني
آمنThis skill consists entirely of GLSL shader reference documentation (36 markdown files in techniques/ and reference/ directories). Detected risk factors (external_commands, scripts, filesystem, network) are false positives triggered by code examples in markdown documentation. The skill contains no executable scripts, no network requests, no filesystem operations, and no external command invocations. All code samples are GLSL shader snippets for educational/reference purposes. Safe to publish.
درجة الجودة
ماذا يمكنك بناءه
��ن التظليل التفاعلي ومشهد Demoscene
إنشاء قطع فنية بصرية مبهرة أو إنتاجات demoscene أو تثبيتات فنية توليدية باستخدام تظليل GLSL التي تعمل في الوقت الفعلي في متصفح الويب. ادمج تقنيات مثل ray marching والضوضاء الإجرا��ية وتشويه المجال لإنتاج بصريات فريدة.
مؤثرات وتظليل ألعاب WebGL
تنفيذ مؤثرات بصرية جاهزة للألعاب بما في ذلك أسطح المياه/المحيود وعرض التضاريس وأنظمة الجسيمات للنار/الشرر/الثلوج وخطوط أنابيب ما بعد المعالجة والإضاءة الجوية — كلها تعمل من جانب العميل في WebGL2.
التصور العلمي والمحاكاة
بناء تصورات مسرعة بواسطة GPU للبيانات العلمية: محاكاة ديناميكا السوائل ومحاكاة جاذبية N-جسم والخلايا الآلية وأنماط التفاعل-الانتشار وعرض السحب/الضباب الحجمي.
جرّب هذه الموجهات
إنشاء صفحة HTML مستقلة مع مشهد SDF بأسلوب ray-marching يضم عدة كائنات هندسية (كرات وصناديقات وشدادات) مجتمعة مع الحد الأدنى الناعم (smin). أضف ظلالًا ناعمة وإضاءة محيطة ونموذج إضاءة خارجي بثلاثة أضواء. ضمّن عناصر تحكم مدار الكاميرا عبر الماوس.
توليد تظليل WebGL2 يعرض منظرًا طبيعيًا إجرائيًا. استخدم ray marching لحقل الارتفاع مع تضاريس FBM (6 طبقات مع مشتقات لتفاصيل تشبه التآكل). أضف تظليلًا ثنائي المستوى والتشتت الجوي القائم على الارتفاع مع Rayleigh/Mie ومحيط بموجات Gerstner عند مستوى سطح البحر. طبق تعيين نغمات ACES و SSAA 2x.
بناء محاكاة سوائل باستخدام محلل Navier-Stokes في GLSL مع مخازن إطار مؤقت ping-pong متعددة المراحل. ضمّن الحمل والانتشار وإسقاط الضغط (تكرار Jacobi) والتفاعل مع الماوس لإضافة الصبغة/السرعة. استخدم لوحة ألوان لتصور مجال التدفق.
إنشاء تظليل نظام جسيمات عديم الحالة لمؤثر النار. استخدم الضوضاء الإجرائية للاضطراب ولوحة ألوان دافئة للتدرج من الأصفر الفاتح إلى الأحمر العميق والمزج الصحيح لألفا. ضمّن طبقة ثانية من الشرر باستخدام نظام جسيمات منفصل مع الجاذبية.
أفضل الممارسات
- احترم دائمًا ميزانيات الأداء: ≤ 128 خطوة ray march، ≤ 32 عينة حجمية، ≤ 6 طبقات FBM، ≤ 1000 تكرار حلقة متداخلة لكل بكسل
- أعلن عن الوظائف قبل الاستخدام في GLSL — على عكس C/C++، لا تدعم GLSL الإعلانات الأمامية في جميع التنفيذات
- استخدم تقنية multipass-buffer للمؤثرات التي تتطلب استمرارية الحالة عبر الإطارات (محاكاة السوائل وتتبع المسار وأنظمة الجسيمات)
- قم بتكيف كود ShaderToy بشكل صحيح: لف mainImage() في main()، استخدم gl_FragCoord بدلاً من fragCoord، أعلن عن out vec4 fragColor
- فضّل const على #define للقيم — لا يمكن لوحدات الماكرو GLSL استخدام استدعاءات الوظائف ولها قيود
تجنب
- تجاوز ميزانيات الأداء — الحلقات التي تزيد عن 1000 تكرار لكل بكسل ستجمد المتصفح
- استخدام وحدات الماكرو #define للقيم المحسوبة — لا يمكن للمعالج المسبق لـ GLSL تقييم استدعاءات الوظائف في وحدات الماكرو
- الوصول إلى الزي الموحد التي قد يتم تحسينها بواسطة المترجم — تأكد دائمًا من استخدام الزي الموحد في مخرجات الأجزاء
- تداخل ray marching أو أخذ العينات الحجمية داخل حلقة أخرى — هذا يضاعف التعقيد ويتجاوز حدود وقت GPU