shader-fundamentals
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.
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—vertex shaders output varyings that fragment shaders receive as interpolated values, enabling effects like smooth lighting and texture mapping across surfaces.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-27
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—vertex shaders output varyings that fragment shaders receive as interpolated values, enabling effects like smooth lighting and texture mapping across surfaces.
Use it when
- shader-fundamentals teaches GLSL shader fundamentals by starting with the basic structure of vertex and fragment programs.
- shader-fundamentals explains these three fundamental qualifier types.
Verify before relying
Read SKILL.md below before installing (3 files). Open directory: indexed for reading, not audited.
Install
Bbeierle12/Skill-MCP-Claude/shader-fundamentals · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are vertex and fragment shaders and how do they work together?
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—vertex shaders output varyings that fragment shaders receive as interpolated values, enabling effects like smooth lighting and texture mapping across surfaces.
How do I write custom shaders in GLSL?
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.
What are GLSL uniforms, varyings, and attributes?
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—the 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.
What are the main GLSL data types and built-in variables?
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.
How do coordinate systems and transform matrices work in shaders?
shader-fundamentals explains shader coordinate systems including object space, world space, view space, and clip space. Transform matrices move vertices between these spaces—model 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.
What techniques help debug shader code and troubleshoot rendering issues?
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.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Shader Fundamentals
GLSL (OpenGL Shading Language) runs on the GPU. Vertex shaders transform geometry; fragment shaders color pixels.
Quick Start
// Vertex Shader
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
attribute vec3 position;
attribute vec2 uv;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
// Fragment Shader
uniform float uTime;
varying vec2 vUv;
void main() {
vec3 color = vec3(vUv, sin(uTime) * 0.5 + 0.5);
gl_FragColor = vec4(color, 1.0);
}
Graphics Pipeline
Vertex Data → [Vertex Shader] → Primitives → Rasterization → [Fragment Shader] → Pixels
↑ ↑ ↑
attributes transforms per-pixel color
| Stage | Runs Per | Purpose
(truncated - see the full file via the links below)
File tree — 3 files
skills/shader-fundamentals/SKILL.md
skills/shader-fundamentals/_meta.json
skills/shader-fundamentals/references/glsl-types.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Learn GLSL shader fundamentals for writing custom vertex and fragment shaders”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill teaches you how to craft and deploy custom GLSL shaders within the Three.js graphics library. You'll explore shader fundamentals, material integration, and practical techniques for building sophisticated visual effects that run efficiently in the browser.
Glsl empowers developers to craft and validate shader code for graphics applications. Whether you're building visual effects, game engines, or interactive renderings, this skill streamlines the shader development workflow with hands-on testing capabilities. Ideal for graphics programmers seeking a focused environment to experiment with GLSL syntax and rendering logic.
shader-effects provides ready-to-use shader implementations for common visual effects in graphics programming. Access code snippets for glow, bloom, chromatic aberration, and other post-processing techniques to enhance your rendering pipeline. Perfect for developers building interactive graphics or game engines.
R3f Shaders provides a curated collection of shader effects and materials designed specifically for React Three Fiber developers. Access pre-built GLSL code and material definitions to accelerate your 3D graphics pipeline without reinventing visual effects from scratch.
Shader-programming teaches the core concepts behind GPU-accelerated graphics that transfer across different game engines and platforms. You'll explore vertex and fragment shaders, lighting models, and visual effects while building a foundation that applies whether you're working in Unity, Unreal, or Godot. Gain hands-on experience writing portable shader code that maximizes your creative control over rendering.
shader-sdf enables you to construct procedural geometry using signed distance functions directly in GLSL shaders. This approach lets you define complex 2D and 3D shapes through mathematical functions rather than traditional mesh data, making it ideal for real-time graphics, raymarching, and generative visual effects.
More skills r3f-materials (MIT) · Threejs Materials (AGPL-3.0) · shader-basics (MIT) · Shadertoy (CC-BY-SA-4.0) · Threejs Postprocessing (AGPL-3.0) · pixijs-custom-rendering (MIT) · shader-router (MIT) · godot-shaders (Apache-2.0)