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).
If you want to perform real-time image filtering like in the above app preview you can download the iOS app
Enhance your image with just one tap! Simple social media sharing (instagram, facebook, snapchat). Easily edit, trim…
and continue reading to implement such effects by yourself!
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,
at the end of the day, our screens are just matrixes of pixels, where each pixel is defined by its RGB value.
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…