Pixelation Shader with Square Cells

Live example

Edit the code and the preview updates as you type.

What to observe

Pixelation Shader with Square Cells.

Mechanism

Quantize screen pixels before normalizing. The cells stay square in both portrait and landscape canvases.

The controlling code

float size=2.+floor(u_parameter*30.);vec2 coord=(floor(gl_FragCoord.xy/size)+.5)*size/u_resolution;c=texture2D(u_texture,coord).rgb;

Experiment

Set u_parameter to 0 and then 1 so size=2.+floor(u_parameter*30.) changes from 2 to 32 screen pixels. The GLSL lettering breaks into progressively larger square blocks.

Debugging and cost

Only one texture sample is made for each fragment, using the center of its quantized cell. Replace the +.5 in the coord expression with +0. to sample cell corners instead and see block colors change without changing block size.

Understand the technique

• GLSL vs HLSL Texture Sampling
• How to Bind iChannel0 in Three.js
• Aspect Ratio Correction in GLSL
• texture2D vs texture vs texelFetch

Built-in functions used

Learn it step by step

• UV Coordinates Basics
  Understanding UV coordinate system in shaders and its applications. Learn how to map UV coordinates to colors to create gradient effects.
• Remap Function
  Implement a remap() helper to convert values between ranges.