Gaussian blur effect

Gaussian Filter source code

Fiveko Computer Vision library implements the Gaussian filter as separable WebGL shader. The GPU code uses two one-dimensional convolutions between the source image and calculated 1D kernel values.

How to calculate the filter kernel?

As a first step, we need to fill in the Gaussian kernel values using the sigma input parameter. The kernel size is calculated using the following code snippet as described into :

Next we calculate the kernel values by the following JavaScript code snippet.

Note that we normalize the kernel values to prevent image darkening/brightening at convolution stage.

How to do blur convolution?

At this stage the image is processed by the already calculated blurring kernel. For better performance we take advantage of Gaussian’s separable property. Therefore we perform the Gaussian convolution in two steps – once for rows and once for columns.

We process the rows in a similar manner as in the next code segment:

Gaussian Discrete Approximations

In many cases it is enough to use an approximation of Gaussian function. Below are listed several famous masks that are frequently used in computer vision. The pictures show the kernel values along with the corresponding scale factor as well as the corresponding one-dimensional separable vectors.

How to apply fast Gaussian function by FavkoGFX?

Now after we defined some of the Gaussian filter kernels it’s time to pick up one and create a blurry image. The example below uses one of the masks above to smooth the image quickly with a simple separable convolution. The code uses our web based graphics library FivekoGFX. Therefore you can combine it with your own HTML5 scripts and do processing directly into your web browser.

How does Gaussian smoothing works?

The Gaussian filter works by convolving the input image with a Gaussian kernel. This process performs a weighted average of the current pixel’s neighborhoods in a way that distant pixels receive lower weight than these at the center. The result of this is a blurry image with better edges than other uniform smoothing algorithms. The math equations below show how to calculate the proper weights of the Gaussian kernel.

Gaussian function 2D

The equation below (2) shows how to calculate two-dimensional Gaussian function:

Gaussian filter two-dimensional kernel equation (2)

Separable Gaussian blur filter

In practice it is better to take advantage of the Gaussian function separable properties. This property allows blur execution in two separate steps. At this way we apply a one dimensional kernel instead of the 2D Gaussian filter. As a result, we achieve a fast blur effect by dividing its execution horizontally and vertically.

To calculate a Gaussian filter parameters, we use the equations mentioned above . If processing uses a separable Gaussian blur then for the kernel math use the first equation. Note that when converting continuous values to discrete ones, the total Gaussian kernel sum will be different than one. This leads to brightening or darkening of the image, so in practice we normalize the kernel. We achieve this by dividing each of its elements by the sum of all of them.

Filter features

We can summarize some of the Gaussian’s filter features:

• It is a separable filter – can use it as a separable 1D kernel and process rows and columns separably
• The use of ‘weighted average’ masks makes it better for edge detection than some uniform blurring filters
• Multiple iterations with same gaussian filter to an image has the same effect as applying a single, larger gaussian blur
• Useful as a pre-processing step for image size reduction