المهارات shader-programming-glsl
📦

shader-programming-glsl

آمن

Escribe Shaders para GPU con GLSL

Crea efectos visuales impresionantes y optimiza el renderizado de gráficos con shaders para GPU. Esta guía enseña la sintaxis de GLSL, shaders de vértices y fragmentos, y matemáticas de shaders para gráficos en tiempo real.

يدعم: Claude Codex Code(CC)
📊 70 كافٍ
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "shader-programming-glsl". Crea un shader que haga un efecto de brillo pulsante centrado en la pantalla

النتيجة المتوقعة:

Un fragment shader usando smoothstep y funciones sin basadas en tiempo para crear animación de gradiente radial con interpolación de color desde el centro hacia los bordes

استخدام "shader-programming-glsl". ¿Cómo optimizo este bucle de shader que ejecuta 100 iteraciones?

النتيجة المتوقعة:

Recomendaciones para reducir el conteo de iteraciones, usar terminación temprana, precomputar constantes en CPU y reemplazar branching con funciones step/mix para mejor rendimiento GPU

التدقيق الأمني

آمن
v1 • 2/25/2026

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.

1
الملفات التي تم فحصها
122
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
31
المجتمع
100
الأمان
83
الامتثال للمواصفات

ماذا يمكنك بناءه

Desarrollador Web Creando Visuales Interactivos

Crea shaders personalizados para proyectos Three.js, incluyendo fondos animados, sistemas de partículas y efectos de post-procesamiento para sitios web.

Desarrollador de Juegos Implementando Efectos Personalizados

Escribe shaders para Unity o Unreal Engine para crear estilos visuales únicos, generación de terreno y efectos de iluminación en tiempo real.

Creative Coder Explorando Arte Generativo

Experimenta con generación procedimental usando SDFs, raymarching y técnicas de fragment shader para instalaciones de arte digital.

جرّب هذه الموجهات

Configuración Básica de Fragment Shader 
Ayúdame a escribir un fragment shader básico en GLSL que cree un degradado de color basado en coordenadas UV para usar en Three.js.
Vertex Shader con Transformación 
Genera un vertex shader que aplique una deformación de onda a una malla usando un uniform de tiempo y funciones sin/cos.
Escena SDF con Raymarching 
Crea un fragment shader de raymarching con múltiples formas SDF (esfera y caja) combinadas usando operaciones de unión suave.
Efecto de Post-Procesamiento 
Escribe un shader de post-procesamiento bloom que extraiga píxeles brillantes, aplique desenfoque gaussiano y lo composite sobre la imagen original.

أفضل الممارسات

  • Usa mix() para interpolación y step()/smoothstep() para umbrales en lugar de branching con if-else
  • Precomputa valores constantes en CPU y pásalos como uniforms en lugar de calcular en el shader
  • Empaqueta datos relacionados en vec4 para minimizar ancho de banda de memoria y aprovechar unidades vectoriales GPU

تجنب

  • El branching condicional pesado dentro de bucles reduce el paralelismo GPU y causa divergencia de hilos
  • Computar valores estáticos por-fragmento en lugar de pasar uniforms precomputados desde CPU
  • Precisión innecesaria (usar highp cuando mediump es suficiente) desperdicia ancho de banda y energía en móviles

الأسئلة المتكررة

¿Cuál es la diferencia entre vertex y fragment shaders?
Los vertex shaders transforman posiciones de vértices 3D a coordenadas de pantalla 2D. Los fragment shaders determinan el color final de cada píxel. Los vertex shaders se ejecutan una vez por vértice; los fragment shaders se ejecutan una vez por píxel.
¿Por qué mi shader muestra una pantalla negra?
Verifica que gl_Position.w sea igual a 1.0, verifica que los uniforms estén configurados desde tu aplicación host, asegura que las coordenadas UV estén en el rango 0-1, y confirma que tu shader se compiló sin errores.
¿Qué significa swizzling en GLSL?
Swizzling te permite reordenar o seleccionar componentes vectoriales usando sufijos como .xyzw, .rgba, o .stpq. Por ejemplo, color.zyx invierte los canales RGB de un vec3.
¿Cómo paso datos del vertex al fragment shader?
Usa la palabra clave varying. Declara un varying en ambos shaders, asígnalo en el vertex shader y léelo en el fragment shader. Los valores se interpolan a través del primitivo.
¿Qué es raymarching y cuándo debería usarlo?
Raymarching renderiza escenas 3D avanzando a lo largo de rayos usando funciones de distancia con signo. Úsalo para geometría procedimental, formas orgánicas y efectos difíciles con rasterización tradicional.
¿Cómo puedo mejorar el rendimiento de shaders en dispositivos móviles?
Usa precisión mediump cuando sea posible, minimiza las consultas de texturas, reduce iteraciones de bucles, evita branching dinámico y precomputa cálculos complejos en la CPU.

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

المستودع

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/shader-programming-glsl

مرجع

main

بنية الملفات

📄 SKILL.md