Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 20:17, 28 June 2014 by Loukt (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Gaussian Blur Filter Effect

From Wiki
Jump to: navigation, search

This article explains how to implement a Gaussian Blur Filter Effect.

WP Metro Icon WP8.png
Article Metadata
Code Example
Source file: [1]
Tested with
SDK: Windows Phone 8.1
Devices(s): lumia 920, 820
Windows Phone 8
Created: summeli (26 Jun 2014)
Last edited: Loukt (28 Jun 2014)



Gaussian blur is a widely used effect in computer graphics. It can be used for reducing image noise and reducing image details. However this article only focuses on the blur effect, which can be used by itself too. For more information about Gaussian function see the Wikipedia page

Image without Gaussian blurring
Image with Gaussian blurring

Creating the effect

This article will cover implementing the 2D Gaussian Blur effect by multiplying two 1D gaussian functions in y- and x-directions.

Pre-calculating the kernel

In this article we'll be using an online tool to calculate the kernel for our gaussing blur effect. I used gausian filter calculator to calculate a kernel for me. I made a 1 x 5 matrix with sigma 20 to get nice big blur into the image.

protected double[] gausianKernel = { 0.1900801279413907, 0.2048843573061478, 0.21007102950492296, 0.2048843573061478, 0.1900801279413907, };

1D Convolution

public uint[] Filter1DSymmetric(uint[] source, int height, int width)
uint[] ret = new uint[height * width];
for (int y = 0; y < height; y++)
int index = y;
int ioffset = y * width;
for (int x = 0; x < width; x++)
double r = 0, g = 0, b = 0, a = 0;
int moffset = 2;
for (int col = -2; col <= 2; col++)
double f = gausianKernel[moffset + col];
int ix = x + col;
ix = clampEdges(width, ix);
uint rgb = source[ioffset + ix];
r += f * ((rgb >> 16) & 0xff);
g += f * ((rgb >> 8) & 0xff);
b += f * (rgb & 0xff);
//convoluted pixel values
uint ca = 0;
uint cr = clamp((int)(r + 0.5));
uint cg = clamp((int)(g + 0.5));
uint cb = clamp((int)(b + 0.5));
ret[index] = (ca << 24) | (cr << 16) | (cg << 8) | cb;
index += height;
return ret;

Calculating the Gaussian Blur

Now we have the 1D convolution function for the Gaussian blur, so we're going to run it twice once for Y-direction and second time for X-direction to have 2D Gaussian Blur.

protected override void OnProcess(PixelRegion sourcePixelRegion, PixelRegion targetPixelRegion)
int height = Convert.ToInt32(sourcePixelRegion.ImageSize.Height);
int width = Convert.ToInt32(sourcePixelRegion.ImageSize.Width);
uint[] src = sourcePixelRegion.ImagePixels;
//calculate the 1D symmetric conviolution twice for gausian blur
uint[] res1 = Filter1DSymmetric(src, height, width);
uint[] res2 = Filter1DSymmetric(res1, width, height);
//copy the result into targetPixelRegion
uint[] target = targetPixelRegion.ImagePixels;
Buffer.BlockCopy(res2, 0, target, 0, target.Length * sizeof(uint));

Performance Considerations

In this example we're making few copy operations to keep the code a bit easier to read. This is causing some hit in performance, so it's only rendering at about 2FPS with real time filter example. You could make it faster by reducing the copy operations, and writing directly into target buffer instead.

Using the Gausian Blur Effect

You can use the filter in many ways. But perhaps the easiest way to enable it is to take it as a part of the realtime-filter-demo project.

It's recommended to read the walk-through of the solution available here too).

Just add the following code into your NokiaImagingSDKEffects.cs, and you can launch the new effect from there.

case xx: //replace xx with a number according the effectCount in your list
EffectName = String.Format(nameFormat, (_effectIndex + 1), "Gaussian Blur");
_customEffect = new GausianBlurEffect(_cameraPreviewImageSource);

Using the Gaussian filtger as base

You can also make new effects by using the Gaussian filter as a base for your new Filter class. You can easily do the gaussian blur just by running the Filter1DSymmetric function twice, and do noise reduction by removing the blurred image from the original image. This sounds like magic, but it should work.

More information

This code was based on this blog post from Bibek Subedi and Java Imaging processing tutorial by Jh Labs
Gaussian Blur in Wikipedia .

This page was last modified on 28 June 2014, at 20:17.
126 page views in the last 30 days.