September 10, 2005
Flash 8: Depth Of Field Simulation

An attempt to simulate an out-of-focus depth of field effect based on a depth map, plus a demonstration for the possibility to create blurs with smoothly increasing radius in Flash.

A depth map is a greyscale image which shows the distance of each pixel to the camera - white pixels are close, black pixels are far away (at least in my experiment, in other applications it may be the other way round). The depth map for this one looks like this: Depth Map
Usually depth maps can be generated by 3D-Applications as an extra for a rendered scene, but as I used a normal photo I quickly drew the map manually with a few simple gradients. That's why it's not really exact, but it is good enough.

I'm not yet 100% satisfied with the outcome - as you will see there is a problem with the figure in front when she is out of focus - her body is blurred, but her outline stays sharp. The reason is that the depth map says that the area around her is actually behind her and is in focus - in reality her outline would be blurry and semi-transparent so you could see through the sharp background. To work around that I'd probably have to use a pixel-by-pixel solution which I fear might become too slow.

So here we go, just point the mouse to the area that should be in focus. I've added a few sliders so you can play with the depth of the focussed area and the length of the transition from sharp to blurry.

Download the source files here.

Posted at September 10, 2005 03:08 PM | Further reading

Nice work! Suggests many possibilities.

Regardingt the sharp-edges problem: could you handle this by performing a selective blur on the depth map? That is, when the woman is blurred, apply a woman-shaped to her outline on the depth map?

Posted by: xtomx on September 10, 2005 04:59 PM

...last sentence in my previous post should read "...apply a woman-shaped BLUR to..."

Posted by: xtomx on September 10, 2005 05:00 PM

The problem is that currently the depth map itself is stupid, it is just another bitmap - it doesn't know that there is an outline of a woman somewhere in the picture. Though I might be able to use the convolution filter to detect hard edges in the depth map - which resemble areas where there is a big depth difference. Maybe add a little glow to these edges to enlarge them and yes - then I could create a selective blur on the final image only in these areas...

Posted by: Mario Klingemann on September 10, 2005 05:23 PM

very cool, takes a big hit on the processOr tho :)


Posted by: MaTT on September 10, 2005 08:50 PM

Wuah! Great simulation. I'm looking forward to see more of this stuff at the Flashforum Tour!

Posted by: Jens Franke on September 10, 2005 11:17 PM

hola donde estas cariño

Posted by: ale on September 12, 2005 08:17 PM

I'm wondering how would work with eyetracking systems :D

Posted by: Christian Giordano on October 14, 2005 01:46 PM

porfavor quiero optener unos ejemplos de flash y de ActionScript gracias.

Posted by: Jhonatan on October 20, 2005 01:59 AM

Can you tell me why my flash 5 give me the message "unexpected file format" when I try to
load the flip-page files?

Cal Smith

Posted by: Calvin Smith on October 20, 2005 04:50 AM

Because it is Flash 8 maybe?

Posted by: Mario Klingemann on October 20, 2005 10:39 AM

Anything that is cool is going take a big hit on the CPU I think, until Flash gives us a way to directly access the GPU.

Posted by: Funkmasterta on January 18, 2006 09:00 PM

Another problem is that the depth map is static. Doesn't real life DOF create blur that is becomes increasingly more blurry at an equal distance before and after the point of focus?

Great work delving into this possibity tho. This article about a plenoptic camera under development at Stanford may interest you:

Posted by: Funkmasterta on January 18, 2006 09:08 PM
Post a comment

Email Address:



Remember info?

Thank you!

Most Visited Entries
Sketches, Works & Source Code
In Love with
Powered by
Movable Type 2.661

© Copyright Mario Klingemann

Syndicate this site:
RSS 1.0 - RSS 2.0

Quasimondo @ flickr
Quasimondo @ LinkedIn
Quasimondo @ Twitter
Quasimondo @ Facebook
Quasimondo @ MySpace
Quasimondo is a Bright
Citizen of the TRansnational Republic
My other blog in german

My family name is written Klingemann,
not Klingelmann, Klingeman, Klingaman, Kingemann,
Kindermann, Killingaman, Klingman, Klingmann, Klingonman
Klingemman, Cleangerman, Klingerman or Kleangerman

profile for Quasimondo at Stack Overflow, Q&A for professional and enthusiast programmers