Creating a LCD effect in a Shader


When dealing with colors in a computer, there are different ways to represent them but hardware (and software) will most likely expect it as RGB or RGBA (red, green, blue, alpha) with a 8bits depth.

This has a lot to do with how screens and LCD work: to achieve a given color, we mix different colors together. A LCD typically works this way by having subpixels which divide a pixel and give the intensity for a color channel. Basically, each pixel is composed of 3 small LEDs with the colors red, green and blue. Knowing this we’ll replicate this effect as a shader, which you’ll be able to use for your own custom postprocessing effects.

So how do we do this?

  • Create a circle mask to simulate a LED light. This means that distance from center must be lower than a given threshold.
  • Offset that circle from the center of the UVs. Create 2 more circles and offset them as well.
  • Create a grid of repeating UVs so that these circles are repeated for every pixel of your chosen resolution (use fract(uv * RESOLUTION) with RESOLUTION being a vec2 of your choosing)
  • Create “pixellated UVs” so that each subpixel of each cell of the previously generated grid sample the target texture at the same coordinates (this is the pixellated effect: round(uv * RESOLUTION) / RESOLUTION)
  • Sample texture and multiply texture color by our color masks

Now you can play around with mask sizes, distance from center, resolution…

Code and result are available in GLSL on ShaderToy!