shader-programming-glsl
كتابة برامج التظليل GPU باستخدام GLSL
إنشاء تأثيرات بصرية مذهلة وتحسين عرض الرسومات باستخدام برامج التظليل GPU. يعلمك هذا الدليل صياغة GLSL، برامج التظليل الرأسية والفرagmentية، والرياضيات الخاصة بالتظليل للرسومات في الوقت الفعلي.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "shader-programming-glsl". Create a shader that makes a pulsing glow effect centered on the screen
النتيجة المتوقعة:
برنامج تظليل فرagmentation يستخدم smoothstep والوظائف الزمنية الجيبية (sin) لإنشاء حركة تدرج دائري مع интерполяция الألوان من المركز إلى الحواف
استخدام "shader-programming-glsl". How do I optimize this shader loop that runs 100 iterations?
النتيجة المتوقعة:
توصيات لتقليل عدد التكرارات، واستخدام الإنهاء المبكر، وحساب الثوابت مسبقًا على CPU، واستبدال التفرع بوظائف step/mix لأداء أفضل على GPU
التدقيق الأمني
آمنAll 33 static analysis findings are false positives. The SKILL.md file is educational documentation about GLSL shader programming. Backtick-quoted text represents GLSL code examples in markdown format, not shell command execution. C2 keywords and system reconnaissance patterns are GLSL built-in variables (gl_Position, gl_FragColor, varying) and shader language syntax. No actual security risks detected.
درجة الجودة
ماذا يمكنك بناءه
مطور ويب ينشئ صورًا تفاعلية
بناء برامج تظليل مخصصة لمشاريع Three.js، بما في ذلك الخلفيات المتحركة وأنظمة الجسيمات وتأثيرات المعالجة اللاحقة للمواقع الإلكترونية.
مطور ألعاب ينفذ تأثيرات مخصصة
كتابة برامج تظليل لـ Unity أو Unreal Engine لإنشاء أنماط بصرية فريدة وتوليد التضاريس وتأثيرات الإضاءة في الوقت الفعلي.
مبدع برمجي يستكشف الفن التوليدي
التجرب مع التوليد الإجرائي باستخدام SDFs و raymarching وتقنيات تظليل الفرagmentation التركيبية للفنانين الرقميين.
جرّب هذه الموجهات
Help me write a basic GLSL fragment shader that creates a color gradient based on UV coordinates for use in Three.js.
Generate a vertex shader that applies a wave deformation to a mesh using a time uniform and sin/cos functions.
Create a raymarching fragment shader with multiple SDF shapes (sphere and box) combined using smooth union operations.
Write a bloom post-processing shader that extracts bright pixels, applies Gaussian blur, and composites back over the original image.
أفضل الممارسات
- استخدم mix() для интерполяции و step()/smoothstep() للمدخلات بدلاً من التفرع if-else
- احسب القيم الثابتة مسبقًا على CPU ومررها كمتغيرات موحدة (uniforms) بدلاً من حسابها في برنامج التظليل
- حزم البيانات ذات الصلة في vec4 لتقليل عرض النطاق الترددي والاستفادة من وحدات المعالجة المتجهية على GPU
تجنب
- التفرع الشرطي الثقيل داخل الحلقات يقلل التوازي على GPU ويتسبب في تباعد الخيوط
- حساب القيم الثابتة لكل جزء (fragment) بدلاً من تمرير المتغيرات الموحدة المحسوبة مسبقًا من CPU
- الدقة غير الضرورية (استخدام highp عندما يكفي mediump) تهدر عرض النطاق الترددي والطاقة على الأجهزة المحمولة
الأسئلة المتكررة
ما هو الفرق بين برامج التظليل الرأسية و programs التظليل الفرagmentation؟
لماذا يُظهر تظهيلي شاشة سوداء؟
ماذا يعني الـ swizzling في GLSL؟
كيف أقوم بتمرير البيانات من برنامج التظليل الرأسي إلى برنامج تظليل الفرagmentation؟
ما هو raymarching ومتى يجب استخدامه؟
كيف يمكنني تحسين أداء التظليل على الأجهزة المحمولة؟
تفاصيل المطور
المؤلف
sickn33الترخيص
MIT
المستودع
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/shader-programming-glslمرجع
main
بنية الملفات
📄 SKILL.md