Shaders: Vertex Shaders and Fragment Shaders (GLSL/HLSL)

Learning Objectives Explain that a shader is a small program that runs on the graphics card. Describe the specific job of a vertex shader: to position the corners (vertices) of a shape. Describe the specific job of a fragment shader: to decide the color of each individual pixel. Identify the correct order in which vertex and fragment shaders run in the graphics pipeline. Trace the inputs and outputs of a simple vertex shader that moves a shape. Predict the final color of a shape based on a simple fragment shader's code. Define the terms 'vertex', 'fragment', and 'shader' using a simple analogy. Ever wonder how a video game character moves so smoothly or how a sunset in a game looks so beautiful? 🧙✨ You're about to learn the secret...

TermDefinitionExample ShaderA small program or set of instructions that you send to the computer's Graphics Processing Unit (GPU) to tell it how to draw something. Think of it as a recipe for visuals.A shader could have instructions to make a character's armor look shiny and metallic, or to make water ripple. Vertex (plural: Vertices)A single point in 3D space. Vertices are the corners or dots that connect to form shapes, like the three corners of a triangle.A square shape is made of four vertices, one for each corner. Vertex ShaderThe first type of shader. Its main job is to take each vertex (corner) of a shape and decide its final position on the screen. It's the 'shape mover' and 'placer'.If you want a character to jump, a vertex shader would take all...

The Graphics Pipeline Order 1. Vertex Shader -> 2. Fragment Shader This is the most important rule. The computer ALWAYS runs the Vertex Shader first to figure out WHERE the shape's corners go. Only AFTER the shape is positioned does it run the Fragment Shader to figure out WHAT COLOR the pixels inside the shape should be. The 'One Job' Rule Vertex Shader = Position. Fragment Shader = Color. To keep things simple, remember that each shader has one main job. The Vertex Shader only cares about the position of points (vertices). The Fragment Shader only cares about the color of pixels (fragments). They don't do each other's jobs. The 'Run for Everything' Rule Shaders run in parallel for every vertex or fragment. A shader program isn&...