We have all seen the wonderful effects created by the wizard Roxik (creator of ecodazoo.com) on his website with his depth of field AS3 performance test and also the dof tests on Mr Doobs website. Well I have been itching to have a little go myself and see if this is something that I could achieve. Using papervision and the viewportLayers built into the library you are able to apply a simple blur filter to an object during the render loop cycle, depending on its distance from the camera.
-
var layer:ViewportLayer = viewport.getChildLayer(marbs[i], true);
-
blur = new BlurFilter(b, b, 3);
-
layer.filters = [blur];
The important piece of code which works out the level of filter is as follows:
-
var dx:Number = camera.z - marbs[i].z;
-
var dy:Number = camera.y - marbs[i].y;
-
var b:Number = (Math.sqrt(dx*dx + dy*dy) / 100) - 5;
This gives you a basic number mostly ranging from 1-10, sometimes over and applies this number to the blur filter each frame. The -5 has been added to give the variable a minus number when it gets too close to the camera this is flipped to a positive number:
-
if(b <0){
-
b = Math.abs(b);
-
}
This gives the object a blur if it becomes too close to the camera producing a realistic effect.
Although my tests are not a touch on the examples mentioned earlier in this post they are at least effective and show how easy it is to produce realistic depth of field with very little effort.
Get the source.
![[Valid RSS]](http://www.ultravisual.co.uk/blog/images/valid-rss.png "Validate my RSS feed")
Really nice job!
Long looked on this topic, thanks, it was interesting.
We look forward to new articles.