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

shader-programming-glsl

آمن

Write GPU Shaders with GLSL

Create stunning visual effects and optimize graphics rendering with GPU shaders. This guide teaches GLSL syntax, vertex and fragment shaders, and shader math for real-time graphics.

يدعم: Claude Codex Code(CC)
🥉 73 برونزي
1

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

2

رفع في Claude

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

3

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

اختبرها

استخدام "shader-programming-glsl". Create a shader that makes a pulsing glow effect centered on the screen

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

A fragment shader using smoothstep and time-based sin functions to create radial gradient animation with color interpolation from center to edges

استخدام "shader-programming-glsl". How do I optimize this shader loop that runs 100 iterations?

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

Recommendations to reduce iteration count, use early termination, precompute constants on CPU, and replace branching with step/mix functions for better GPU performance

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

آمن
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
المحتوى
50
المجتمع
100
الأمان
83
الامتثال للمواصفات

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

Web Developer Creating Interactive Visuals

Build custom shaders for Three.js projects, including animated backgrounds, particle systems, and post-processing effects for websites.

Game Developer Implementing Custom Effects

Write shaders for Unity or Unreal Engine to create unique visual styles, terrain generation, and real-time lighting effects.

Creative Coder Exploring Generative Art

Experiment with procedural generation using SDFs, raymarching, and fragment shader techniques for digital art installations.

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

Basic Fragment Shader Setup 
Help me write a basic GLSL fragment shader that creates a color gradient based on UV coordinates for use in Three.js.
Vertex Shader with Transform 
Generate a vertex shader that applies a wave deformation to a mesh using a time uniform and sin/cos functions.
Raymarching SDF Scene 
Create a raymarching fragment shader with multiple SDF shapes (sphere and box) combined using smooth union operations.
Post-Processing Effect 
Write a bloom post-processing shader that extracts bright pixels, applies Gaussian blur, and composites back over the original image.

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

  • Use mix() for interpolation and step()/smoothstep() for thresholds instead of if-else branching
  • Precompute constant values on CPU and pass as uniforms rather than calculating in shader
  • Pack related data into vec4 to minimize memory bandwidth and leverage GPU vector units

تجنب

  • Heavy conditional branching inside loops reduces GPU parallelism and causes thread divergence
  • Computing static values per-fragment instead of passing precomputed uniforms from CPU
  • Unnecessary precision (using highp when mediump suffices) wastes bandwidth and power on mobile

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

What is the difference between vertex and fragment shaders?
Vertex shaders transform 3D vertex positions to 2D screen coordinates. Fragment shaders determine the final color of each pixel. Vertex shaders run once per vertex; fragment shaders run once per pixel.
Why is my shader showing a black screen?
Check that gl_Position.w equals 1.0, verify uniforms are set from your host application, ensure UV coordinates are in the 0-1 range, and confirm your shader compiled without errors.
What does swizzling mean in GLSL?
Swizzling lets you reorder or select vector components using suffixes like .xyzw, .rgba, or .stpq. For example, color.zyx reverses the RGB channels of a vec3.
How do I pass data from vertex to fragment shader?
Use the varying keyword. Declare a varying in both shaders, assign it in the vertex shader, and read it in the fragment shader. Values are interpolated across the primitive.
What is raymarching and when should I use it?
Raymarching renders 3D scenes by stepping along rays using signed distance functions. Use it for procedural geometry, organic shapes, and effects difficult with traditional rasterization.
How can I improve shader performance on mobile devices?
Use mediump precision when possible, minimize texture lookups, reduce loop iterations, avoid dynamic branching, and precompute complex calculations on the CPU.

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

المؤلف

sickn33

الترخيص

MIT

المستودع

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

مرجع

main

بنية الملفات

📄 SKILL.md