{"enrichment":{"faq":[{"a":"shader-fundamentals covers how vertex and fragment shaders form the core of the graphics pipeline. Vertex shaders process each vertex individually, handling transformations and per-vertex calculations. Fragment shaders then determine the final color of each pixel. Together, they control rendering by passing data through the pipeline\u2014vertex shaders output varyings that fragment shaders receive as interpolated values, enabling effects like smooth lighting and texture mapping across surfaces.","q":"What are vertex and fragment shaders and how do they work together?"},{"a":"shader-fundamentals teaches GLSL shader fundamentals by starting with the basic structure of vertex and fragment programs. You'll learn to declare attributes (per-vertex inputs), uniforms (constant across all vertices), and varyings (data passed between stages). The guide covers essential operations like matrix transformations, vector math, and built-in functions. You'll progress from simple color output to implementing lighting models and coordinate transformations needed for real graphics applications.","q":"How do I write custom shaders in GLSL?"},{"a":"shader-fundamentals explains these three fundamental qualifier types. Attributes are per-vertex data (position, normal, texture coordinates). Uniforms remain constant for all vertices in a draw call (projection matrices, time values, light positions). Varyings pass interpolated data from vertex to fragment shaders\u2014the GPU automatically interpolates their values across triangle surfaces. Understanding these qualifiers is essential for controlling data flow through the graphics pipeline and implementing effects like per-pixel lighting.","q":"What are GLSL uniforms, varyings, and attributes?"},{"a":"shader-fundamentals references GLSL data types including scalars (float, int, bool), vectors (vec2, vec3, vec4), and matrices (mat2, mat3, mat4). Built-in variables include gl_Position (vertex output), gl_FragColor (fragment output), gl_VertexID, and gl_FragCoord. The guide covers vector swizzling operations (accessing components like .xyz or .rgb) and matrix operations essential for transformations. These form the vocabulary for writing any shader program.","q":"What are the main GLSL data types and built-in variables?"},{"a":"shader-fundamentals explains shader coordinate systems including object space, world space, view space, and clip space. Transform matrices move vertices between these spaces\u2014model matrices handle object-to-world, view matrices handle world-to-camera, and projection matrices handle camera-to-clip. The guide covers normal matrix transformations for lighting calculations and demonstrates how to apply these transformations in vertex shaders to position geometry correctly on screen.","q":"How do coordinate systems and transform matrices work in shaders?"},{"a":"shader-fundamentals covers shader debugging techniques including visualizing intermediate values by outputting them as colors, checking for common errors in matrix math and coordinate space conversions, and validating that data flows correctly through the pipeline. The guide addresses precision issues, performance considerations, and common shader patterns that solve typical problems. Understanding error messages and using visual debugging helps identify whether issues stem from vertex processing, fragment calculations, or data flow between stages.","q":"What techniques help debug shader code and troubleshoot rendering issues?"}],"shadow_tags":["gpu-programming","graphics-pipeline","shader-writing","glsl-reference","vertex-processing","fragment-processing","coordinate-transformation","texture-sampling","shader-debugging"],"summary_rewrite":"Dive into the core concepts of shader programming with this comprehensive guide to GLSL. Learn how vertex and fragment shaders work together to control rendering pipelines, explore essential techniques for lighting and color manipulation, and build the foundation needed to create custom visual effects in graphics applications."},"files":[{"bytes":8757,"path":"skills/shader-fundamentals/SKILL.md","sha256":"62fbc489dd9439e12fb7f5fbbfe2b5e939c126a2cc0bb458bf52b76783858983","url":"https://skillfed.io/files/Bbeierle12/Skill-MCP-Claude/shader-fundamentals/9b96b361/SKILL.md"}],"id":"Bbeierle12/Skill-MCP-Claude/shader-fundamentals","links":{"html":"https://skillfed.io/Bbeierle12/Skill-MCP-Claude/shader-fundamentals","md":"https://skillfed.io/Bbeierle12/Skill-MCP-Claude/shader-fundamentals.md","repo":"https://github.com/Bbeierle12/Skill-MCP-Claude"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":3,"language":"JavaScript","last_updated":"2026-07-27","license":"MIT","name":"shader-fundamentals","publisher":"Bbeierle12","stars":8},"relations":{"similar":[{"id":"calesthio/OpenMontage/threejs-shaders"},{"id":"CloudAI-X/threejs-skills/threejs-shaders"},{"id":"EnzeD/r3f-skills/r3f-shaders"},{"id":"Bbeierle12/Skill-MCP-Claude/r3f-materials"},{"id":"calesthio/OpenMontage/threejs-materials"},{"id":"CloudAI-X/threejs-skills/threejs-materials"},{"id":"secondsky/claude-skills/threejs"},{"id":"martinholovsky/claude-skills-generator/glsl"},{"id":"organvm/a-i--skills/react-three-fiber-patterns"},{"id":"calesthio/OpenMontage/threejs-postprocessing"}]},"slug":{"owner":"Bbeierle12","repo":"Skill-MCP-Claude","skill":"shader-fundamentals"},"version":"9b96b361"}