Easy Filters - Intro to GPU Pixel Shaders

Image Manipulation (Contrast, Brightness, Blur, Pixellation)

In today’s article, we are going to explore the basics of low-level GPU computations used for rendering graphics. In order to do so, we are going to dive into the world of GPU Shaders and perform some image manipulations like contrast, brightness, blur, and pixellation. By the end of this article, you will be able to perform basic pixel operations using top graphics libraries like OpenGL and Metal (iOS, macOS).

Easy Filters (source: https://apps.apple.com/us/app/id1476720401)

If you want to perform real-time image filtering like in the above app preview you can download the iOS app

‎Easy Filters

and continue reading to implement such effects by yourself!

Why GPU?

Before we start with implementing GPU shaders, let’s start by asking ourselves - why do we need GPUs in the first place?

Regardless of the fact whether we are dealing with raster or vector graphics,

Pixel vs Raster Graphics (source: https://vector-conversions.com/vectorizing/raster_vs_vector.html)

at the end of the day, our screens are just matrixes of pixels, where each pixel is defined by its RGB value.

Screen Pixels Closeup (source: https://s3.envato.com/files/20601835/Pixels.jpg)

For example, a FullHD screen contains 1920×1080=2073600 pixels.

So to have a smooth display, we need to find a way to efficiently compute over 2 millions of pixel values for every frame as fast as possible.

It’s possible to perform such computations on CPUs but it wouldn’t be optimal. CPUs are suited for heavy serial tasks but we need to compute many light tasks that can be…