Creating a LCD effect in a Shader
Published
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…