Hello, Fragment Shader

by GameDev.net · GLSL ES 3.00 (WebGL2) · 25 Aug 2026

Run the shader to adjust these controls.

What it demonstrates

This first shader shows the complete path from a fragment invocation to an opaque pixel. It introduces ShaderLab's Shadertoy-style mainImage entry point, the output fragColor, pixel coordinates, viewport resolution, and a user-controlled color. The slight vertical variation keeps the result simple while proving that each pixel can compute a different value.

Shader inputs

void mainImage(out vec4 fragColor, in vec2 fragCoord)

Called once per pixel. Write the colour to fragColor.

iResolution vec3: Viewport size in pixels (z is the pixel aspect ratio).
iTime float: Seconds since the shader started.
iTimeDelta float: Seconds since the previous frame.
iFrameRate float: Frames per second, smoothed.
iFrame int: Frames rendered since the start.
iMouse vec4: Mouse position: xy while held, zw of the last click.
iDate vec4: Year, month, day, and seconds within the day.
iChannel0 sampler2D: Texture bound to channel 0.
iChannel1 sampler2D: Texture bound to channel 1.
iChannel2 sampler2D: Texture bound to channel 2.
iChannel3 sampler2D: Texture bound to channel 3.
iChannelResolution vec3[4]: Pixel size of each bound channel texture.
iChannelTime float[4]: Playback time of each channel, in seconds.
iSampleRate float: Audio sample rate, always 44100.

Main Image4

1 uniform vec3 uColor; // @param 0.0..1.0 = 0.16, 0.55, 0.92 color "Output color"

3 void mainImage(out vec4 fragColor, in vec2 fragCoord) {

4 vec2 uv = fragCoord / iResolution.xy;

5 vec3 background = uColor * (0.85 + 0.15 * uv.y);

6 fragColor = vec4(background, 1.0);

7 }

Learn from this shader

How it works

fragCoord contains the current pixel position. Dividing it by iResolution.xy converts pixels into normalized UV coordinates from zero to one. The shader uses the vertical component to vary the selected color by a small amount, then constructs a four-component output. RGB carries the visible color and alpha is fixed to one for full opacity. Nothing is sampled from an image, and there is no geometry stage to edit: the image pass runs across the viewport.

Try changing

Choose a new Output color and observe that the vertical structure remains. In a fork, replace uv.y with uv.x to turn the variation sideways. Set the multiplier to a constant to produce a perfectly flat fill, or use 1.0 - uv.y to reverse the direction.

Using it in a game

A constant or gently varying fragment color is the foundation of untextured materials, debug views, UI backgrounds, and procedural sky layers. Engine shader entry points and uniform declarations differ, but the same output-color concept applies in raw WebGL, Godot, Unity, and Unreal.

Explore the techniques

Continue with curated explanations and progressively related examples.

2D & patternShapes, tiling, symmetry and colour worked out in the plane.

LicenseMIT

Views0

Forks0

Discussion

Loading comments...