Image processing — real filters
A filter is a function run on every pixel of an image — grayscale, invert, threshold.
An image filter is nothing more than a function you run on every pixel: read the color, transform it, write it back. Because the shader already runs once per pixel, filters are its native language. Grayscale, invert, brightness, contrast, threshold, sepia — every one is a few lines on the sampled color.
Grayscale is the classic first filter. You collapse the three color channels into one brightness value. The eye is more sensitive to green than red or blue, so the standard weighting is dot(color, vec3(0.299, 0.587, 0.114)) — a weighted sum that matches how bright a color looks. Put that single value in all three channels and the image goes black-and-white.
That demo inverts the image (1.0 minus each channel — a photo negative). Your turn: write the grayscale filter. Sample the image, collapse its color to one brightness with the weighted dot product, and output that grey.
Turn the image black-and-white (grayscale).
Sample c = texture2D(u_texture, st), compute g = dot(c.rgb, vec3(0.299, 0.587, 0.114)), and output vec4(vec3(g), 1.0).
An image filter like grayscale or invert is: