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.

Orton Effect Filter Recipe (Lumia Imaging SDK)

From Wiki
Jump to: navigation, search
Featured Article
18 Sep

This article explains how to recreate the Orton Effect Michael Orton created using multiple analog photographies using Filters from the Nokia Imaging SDK.

WP Metro Icon WP8.png
Article Metadata
Tested with
SDK: Windows Phone 8.1 SDK, Nokia Imaging SDK 1.2
Devices(s): Nokia Lumia 1520, Nokia Lumia 720
Windows Phone 8
Created: SB Dev (30 Jun 2014)
Last edited: CareTaker (14 Oct 2014)



The basic idea of recreating the Orton Effect is to blend together blurred version(s) of the image with the original image in order to create a dream like appearance while still retaining a certain amount of detail. To achieve a result with similar colors as the original we first have to create an intermediate result using Screen as our blend function.

The intermediate result is then blurred. The blurred and original version are then combined using Multiply as the blend function to achieve an effect as shown in this image:

Orton Effect

The article includes the recipe source code, instructions on how it can be used and tested, performance measurements and a gallery.

Source code

In contrast to many other filter recipes the creation of an intermediate result means we can't merely apply various effects in a row and add all of them to an IFilter-Array. Therefore we need to create three different FilterEffects and create a rendering pipeline from them. The FilterEffect bgFilters is used as the source for both the fgFilters and finalFilters FilterEffect. The finalFilters FilterEffect is used as the source for the renderer.

The below code assumes that we have the original image stored inside a BitmapImage called bitmapSource and want to render the result to a BitmapImage called bitmapResult.

using(BitmapImageSource bis = new BitmapImageSource(bitmapSource))
//create the intermediate result
using(FilterEffect bgFilters = new FilterEffect(bis)
Filters = new IFilter[]
new BlendFilter(m_StreamImageSource, BlendFunction.Screen, 1.0)
//apply the blur
int blurFact = 45;
using(FilterEffect fgFilters = new FilterEffect(bgFilters)
Filters = new IFilter[]
new BlurFilter(blurFact)
//combine blurred fgFilter result with unblurred bgFilter result
using (FilterEffect finalFilters = new FilterEffect(bgFilters)
Filters = new IFilter[]
new BlendFilter(fgFilters, BlendFunction.Multiply, 1.0)
//created renderer and render result
using (BitmapRenderer renderer = new BitmapRenderer(finalFilters, bitmapResult))
await renderer.RenderAsync();

How to use the filter

The code above already shows a full usage scenario. To use it with other sources/render targets you merely have to exchange the ImageSource and the renderer that are being used (this is explained in more detail in Nokia Developer SDK - Core concepts).

Testing the filter

The easiest way to test the recipe is to download the real time viewer from GitHub. It is based on the Test Apps for Viewing Custom Filters (Nokia Imaging SDK) (itself a fork of the Real Time Filter Demo) but was adapted in order to allow for a fully custom pipeline.


The code has been released with the standard MIT License.


This section lists the approximate frame rate range (in frames-per-second) obtained by using the recipe in the Test framework.

Device FPS (Frames Per Second)
Lumia 1520 3 - 5 FPS
Lumia 1020 2 - 4 FPS
Lumia 720 1 - 3 FPS


Include the original image and what the image looks like with the filter applied. The more examples, the better.

This page was last modified on 14 October 2014, at 10:45.
213 page views in the last 30 days.