FogFilter – Papervision gets some more depth


fogfilter.png

Last night, I was talking with Benoit, and he mentioned that he really liked the Fog Filter that Away3D had made for their 2.0 release. I haven't looked at how Away handles things these days... I know they have strayed a bit from the pure code that is Papervision, BUT I decided I might as well implement one in Papervision since it did look pretty cool.

So, after about an hour I was able to say that Papervision now has a Fog filter too. I'm not sure how it compares with Aways - the general idea is the same from what I've heard of it - but I'm happy with the results.

You will notice that it includes a Z-Depth filter - so all faces that are past the maxDepth of your FogFilter will not be rendered. This will give you a good performance boost, since you can save the Flash Player from all that unneeded drawing. You can see in the demo - the number of triangles rendered (shown in the stats view on the left) will drop/increase as you move around.

The filter works by generating simple colored fill layers in the render pipeline. It adds these layers, at slightly increasing alpha, evenly from the minDepth to the maxDepth of your current view.

So, how to use it:

It's too easy really. One line of code and you are done (except in this case where I've stretched it out into a few others so you can see the variables that are passed):

Actionscript:
  1. var fogMaterial:FogMaterial = new FogMaterial(0x000000);
  2. var fogLayers:int = 20;
  3. var minDepth:Number = 1000;
  4. var maxDepth:Number = 1600;
  5.  
  6. renderer.filter = new FogFilter(fogMaterial, fogLayers, minDepth, maxDepth);

That's it. You need to create a FogMaterial object - which only takes 1 parameter: color. You then need to specify how many layers of fogging you want. More layers = more gradual shading. Lastly, you specify the minDepth and maxDepth of the filter. The minDepth tells the filter where to start adding Fog layers - the maxDepth tells it where to stop - as well as where to stop drawing faces in Papervision. Then you simply pass the filter through the filter property of your BasicRenderEngine (renderer) and your work is done!

I'm sure there will be some changes too it - it was done pretty quick. I worked on a FogBitmapMaterial but it looks terrible so you don't get to see that yet. Otherwise - enjoy!

View the Demo


16 Comments, Comment or Ping

  1. I love you! :D

    Now if only you implemented VectorVision (http://code.google.com/p/vectorvision/) with the Great White…!

    =)

    June 4th, 2008

  2. Great job Andy!

    June 6th, 2008

  3. fredrik

    so i’ve been playing around a bit with this for a project i’m currently working on. works really slick!

    though i’ve run into some problems. i would like to have a horizon (like a sprite/mc) behind my viewport. but since the fogfilter draws a solid “background” i cannot place anything underneath my viewport.

    so. i’ve been trying out different soultions for this extending the fogfilter classes.

    currently trying to write a bitmap containing my background (instead of the plain color) with beginbitmapfill. this works, but is ridicilously slow.

    anyone got any pointers here in finding a good solution? help me out!

    June 30th, 2008

  4. unfortunately fogging takes up the whole screen. There are a few potential work arounds:

    1) Place your “background” as an overlay which fades into the fog.
    2) Instead of using the fog filter, you can fade objects out into the distance using layers. By setting the colorTransform of the layer you can fade out your objects in the same way – but the fading is entirely object dependent.
    3) You could try using the depth filter I wrote about before – it will be a big performance hit, but might be a workable option for you.

    I tried making a bitmapFogFilter as well – but it really sucked so I deleted it. Looked terrible and ran worse. Hope one of those two options will work for you.

    hth

    -andy

    June 30th, 2008

  5. Peter

    Can you publish source that generates entire scene not just the relevant fog filter line. Its a cool demo but lame when people only publish part of their source code, or am I wrong? Cheers!

    February 18th, 2009

  6. Hey Andy,
    Have you had any other findings about per-object-fogging, since this post, instead of the entire viewport? Most situations where I’d apply fogging require some background image, and that always gets blocked this way.
    Cheers,
    EP.

    P.S. @Peter download PV, create a basicview, add 1000 objects to the scene with random xyz and apply the code. There’s not much more to it than that.

    April 23rd, 2009

  7. Bob

    Hey,
    I am getting following errors when trying to add it to my file.
    What do I have to import to make it work?
    Am I missing sth?
    I am using GreatWhite.

    1046: Type was not found or was not a compile-time constant: FogMaterial.
    1180: Call to a possibly undefined method FogMaterial.
    1120: Access of undefined property renderer.
    1180: Call to a possibly undefined method FogFilter.

    Thanke in advance!

    May 4th, 2009

  8. Hello, how did you put that debug infos in the top left ? It is very useful thanks for any help.

    May 11th, 2010

  1. the filter - June 3, 2008
  2. the filter - June 3, 2008
  3. Fog Filter - June 8, 2008

Reply to “FogFilter – Papervision gets some more depth”