Pixelate

This is part of the WebGL image processing series and it relies on information in previous articles. See all articles here.

It is designed to be used on desktop.

What is pixelation?

Pixelation is normally a side-effect of displaying an image at a higher resolution than it has data for. While this is generally seen as an issue, we can also mimic this effect for aesthetic reasons.

In GLSL, we can achieve this effect by rounding our x/y values when fetching our texel data. Rounding by a specific ratio will control the size of the pixelation.

In layman's terms, this means collecting the data from a pre-determined selection of pixels, rather than every single one. For exammple, every other pixel, every 5 pixels, or every 10 pixels. The bigger the distance between pixels, the more pixellated the image will become.

vec4 pixelate(float size, vec2 uv) {
  float dx = size / u_resolution.x;
  float dy = size / u_resolution.y;
  float x = dx * (floor(uv.x / dx) + 0.5);
  float y = dy * (floor(uv.y / dy) + 0.5);
  return texture(
    u_image,
    vec2(x, y)
  );
}

void main() {
  // map uv between 0 -> 1
  vec2 uv = gl_FragCoord.xy/u_resolution;
  vec4 texel = texture(u_image, uv);
  outColor = texel;

  outColor = pixelate(60.0, uv);
}

In the next article, we'll take a look into thresholding our color data.