Fragment Shaders and Visual Effects
The fragment shader is the most creatively powerful stage of the rendering pipeline. While the vertex shader positions geometry on screen, the fragment shader decides what that geometry looks like. Every material surface, every lighting nuance, every per-pixel effect passes through fragment shader code. Because fragments outnumber vertices by orders of magnitude, fragment shader code also has the greatest impact on rendering performance.
Sample Textures and Combine Color Data
Texture sampling is the most fundamental fragment shader operation. The texture() function takes a sampler uniform (which references a texture bound to a texture unit) and a vec2 of UV coordinates, returning the color stored at that location in the image. The GPU handles bilinear filtering (blending between neighboring texels for smooth results) and mipmapping (using lower-resolution versions of the texture for distant surfaces) automatically based on the texture's configuration.
A basic textured surface simply samples one texture and outputs the result as the fragment color. Real game materials layer multiple textures together. A terrain shader might blend between grass, dirt, and rock textures based on a blend map, where each color channel of the blend map controls the weight of a different surface material. The fragment shader samples all four textures (three material textures plus the blend map) and uses the mix() function to combine them based on the blend weights.
Detail textures add fine-grained visual information at close viewing distances. The fragment shader samples a detail texture using scaled UV coordinates (multiplied by a large factor like 10 or 20) and multiplies or blends it with the base color. This technique adds grain, scratches, or fabric weave that would require an impossibly large base texture to achieve otherwise. The detail texture tiles seamlessly, and its contribution fades with distance to avoid visible repetition patterns.
Alpha channels carry transparency or non-color data. A texture's alpha channel might store opacity for transparent surfaces, a roughness value for PBR materials, or a height value for parallax mapping. Reading individual channels from a texture is efficient because the GPU fetches all four channels in a single sample. Packing multiple data types into one texture (color in RGB, roughness in A) reduces texture binds and improves performance.
Implement Diffuse and Specular Lighting
Per-pixel lighting in the fragment shader produces smoother, more accurate results than per-vertex lighting calculated in the vertex shader. The basic Lambertian diffuse model calculates the dot product between the surface normal and the light direction vector. When the surface faces the light directly, the dot product is 1.0 (fully lit). When the surface faces away, the dot product is negative (in shadow). Clamping the result to a minimum of 0.0 prevents negative lighting, and multiplying by the light color and surface color produces the final diffuse contribution.
The surface normal used for this calculation must be normalized in the fragment shader, even though it was already normalized in the vertex shader. Interpolation across the triangle surface can change the length of the normal vector, and using a non-unit-length normal produces incorrect lighting intensity. The normalize() call in the fragment shader corrects this.
Specular highlights simulate the reflection of a light source on a shiny surface. The Blinn-Phong model calculates a halfway vector between the light direction and the view direction, then computes the dot product of this halfway vector with the surface normal. Raising this dot product to a power (the shininess exponent) concentrates the highlight into a smaller, brighter spot. Higher exponents create tight, focused highlights (like polished metal), while lower exponents create broad, soft highlights (like rough plastic).
Combining ambient, diffuse, and specular terms produces a complete lighting result. The ambient term provides a base level of illumination so that shadowed surfaces are not completely black. The diffuse term adds light-direction-dependent brightness. The specular term adds viewpoint-dependent highlights. Multiplying each term by appropriate color values and summing them gives the final lit surface color. This three-component model is computationally simple and visually effective, which is why it remains common in web games where performance budgets are tight.
Add Normal Mapping for Surface Detail
Normal mapping creates the illusion of surface detail without adding geometry. A normal map is a texture where each pixel stores a surface direction (encoded as RGB values) rather than a color. The red channel maps to the X direction, green to Y, and blue to Z. When the fragment shader reads a normal map and uses the decoded direction for lighting calculations instead of the smooth interpolated vertex normal, the surface appears to have bumps, grooves, ridges, and fine detail.
Normal maps store normals in tangent space, a coordinate system aligned with the surface at each point. To use these normals for world-space lighting, the fragment shader constructs a TBN matrix (tangent, bitangent, normal) from the vertex shader's interpolated tangent and normal vectors. Multiplying the tangent-space normal from the map by this TBN matrix transforms it into world space, where it can be used with world-space light directions.
The visual impact of normal mapping is substantial. A flat wall polygon with a brick normal map catches light on each raised brick edge and casts subtle shadows in the mortar grooves, all without any additional geometry. Character skin shows pore-level detail. Metal panels display rivets and seams. The technique is especially valuable in web games, where polygon budgets are constrained by mobile GPU limitations, and normal maps provide surface complexity that geometry cannot afford.
Normal map values are typically stored in the 0 to 1 range and need to be remapped to the -1 to 1 range for use as direction vectors. The conversion is: normal = texture(normalMap, uv).rgb * 2.0 - 1.0. Some normal maps use DirectX conventions where the green channel is inverted compared to OpenGL conventions. When a normal map looks like its lighting is inverted (bumps appear as dents), flipping the green channel usually corrects it.
Build Color and Tone Effects
Fragment shaders can transform the color of any surface to achieve stylistic or cinematic effects. These operations modify the final color after lighting and texture sampling, acting as per-material or per-pixel filters.
Desaturation converts a color image to grayscale. The standard luminance formula weights red, green, and blue according to human perception: float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114)). Mixing between the original color and this grayscale value using a uniform parameter creates a controllable desaturation effect, useful for indicating damage, death states, or flashback sequences.
Sepia toning applies a warm brownish cast over the image. After computing the grayscale value, multiply it by a sepia color like vec3(1.2, 1.0, 0.8) to shift the tone. Color tinting in general (applying a uniform color multiply to the output) is a zero-cost way to make surfaces respond to environmental conditions, like reddish lighting in a lava cave or blue-green tinting underwater.
Contrast and brightness adjustments use simple math. Brightness adds or subtracts from the color: color.rgb += brightnessValue. Contrast scales the color around a midpoint: color.rgb = (color.rgb - 0.5) * contrastFactor + 0.5. Gamma correction applies a power curve: color.rgb = pow(color.rgb, vec3(gamma)). These operations are typically applied as the final step before output, and they can be driven by uniforms that change at runtime for fade-in/fade-out transitions or dynamic environmental response.
Palette mapping restricts colors to a limited palette, creating a retro or stylized look. The fragment shader maps the continuous color range to discrete palette entries using step functions, floor operations, or a 1D palette texture lookup. This technique pairs well with cel shading for a complete cartoon aesthetic, and the palette can be swapped at runtime for different moods or environments.
Create Animated Fragment Effects
Time-based uniforms drive fragment shader animations. By passing a continuously increasing time value from JavaScript to the shader as a uniform, you can create effects that evolve every frame. Sine and cosine functions of time produce smooth oscillations for pulsing, breathing, and wave effects. Multiplying time by different frequencies and combining the results creates complex organic motion.
Dissolve effects are a popular game technique. A noise texture (Perlin noise, Worley noise, or any grayscale pattern) is sampled in the fragment shader, and its value is compared against a threshold uniform that increases over time. When the noise value falls below the threshold, the fragment is discarded using the discard keyword, making that pixel transparent. Adding an emissive glow at the dissolve edge (where the noise value is close to the threshold) creates a burning or energy-field appearance.
UV distortion creates ripple, heat haze, and underwater effects. Instead of sampling a texture at the raw UV coordinates, the fragment shader offsets the UVs by a small amount derived from a sine function of position and time. This makes the texture appear to warp and shimmer. Sampling a separate distortion texture for the offset values (instead of using pure math) creates more natural, organic distortion patterns.
Rim lighting highlights the edges of objects by checking how perpendicular the surface normal is to the view direction. A dot product near zero means the surface is nearly edge-on to the camera. Using 1.0 - dot(normal, viewDir) as a multiplier for an emissive color creates a glowing outline effect, often used for shields, magic auras, and selection highlights. Animating the intensity with a sine wave of time makes the rim pulse, adding visual energy to the effect.
Fragment shaders are where a game's visual personality is defined. Every surface material, lighting nuance, and per-pixel effect flows through fragment shader code, and combining texture sampling, lighting math, normal mapping, and time-based animation gives you the tools to create any visual style.