Playing with filters


I've been playing with applying flash filters to the viewport object and wanted to share a few examples of what can be done!

This is NOT the effects branch of papervision, this is simply applying filters onto the viewport object, really simple and fast, check it out:

Cel Shading!!

"Dazed" Effect:

Shadow:

How cool is that?! Fast too.

Cel-Shading Code:

Actionscript:
  1. package  {
  2.     
  3.     import org.papervision3d.objects.DisplayObject3D;
  4.     import PaperBase;
  5.     import org.papervision3d.objects.parsers.Collada;
  6.     import org.papervision3d.materials.BitmapFileMaterial;
  7.     import flash.filters.*;
  8.     
  9.     public class Main extends PaperBase {
  10.       
  11.        public var cow:DisplayObject3D;
  12.        public var filter:GlowFilter = new GlowFilter (0x000000,1,5,5,50,1,false,false);
  13.       
  14.        public function Main() {
  15.          init(300, 200);
  16.          viewport.filters = [filter];
  17.        }
  18.       
  19.        override protected function init3d():void {
  20.          cow = new Collada("http://papervision2.com/wp-content/downloads/dae/cow.dae");
  21.          cow.moveDown(100);
  22.          cow.scale = 3;
  23.          cow.pitch( -30);
  24.          default_scene.addChild(cow);
  25.        }
  26.       
  27.        override protected function processFrame():void {
  28.          cow.yaw(5);
  29.        }
  30.       
  31.     }
  32.     
  33. }

Try changing the line:
public var filter:GlowFilter = new GlowFilter (0x000000,1,5,5,50,1,false,false);

To one of the following:
public var filter:BlurFilter = new BlurFilter();
or

public var filter:BevelFilter = new BevelFilter();
or any other filters you can think of!

Have fun :)

12 Comments

  1. Comment by Thorsten on January 30, 2008 5:13 pm

    nice example.
    this applies the filter to the whole viewport.
    so if i had more objects in my scene, it would apply it to all objects.
    how would i set it up, if i only want it applied to one object?

  2. Comment by Luke on January 31, 2008 1:01 am

    Hi,

    You'd have to use the effects branch if you wanted to apply filters like these to every object. I'll be writing some tutorials for the effects branch shortly so stay tuned!

    Thanks,
    Luke.

  3. Comment by Thorsten on January 31, 2008 6:30 pm

    Thanks Luke.
    Looking forward to it..

  4. Comment by Rich on February 2, 2008 3:31 pm

    Good work, nice examples and clear coding.
    Ive just started an Efnet chan #PaperVision3D for fellow coders to chat/discuss papervision coding etc.

    Thanks for sharing.

  5. Comment by milosgacanovic on February 4, 2008 6:56 pm

    Hi, Luke...

    It's so nice that people have tutorials like this. When I started my project few months ago I didn't had almost any tutorial. :)
    I've almost finished that project, but now the person I'm working for said it's too slow.

    Since you are an expert on papervision2 it would be nice if you could see the website and say if it can run any faster? ...and then I could send you the .as ...and then you might help me? :)

    This is the address: http://www.rubenpapian.com/new/site4.html

    Thanx...

  6. Comment by Luke on February 5, 2008 10:38 am

    Hi Milosgacanovic,

    Thanks for the feedback.

    The site looks awesome! If theres anything slowing it down then I'd assume that it could be code bloat - either that or it's loading too much information into the memory when the program is first run.

    Some tips which mght increase FPS and loading times:
    1 - Dont embed all of your images, 3d models and textures into your swf:
    Use functions like var Collada:DisplayObject3D = new Collada("url_to_collada"); and
    var material:BitmapFileMaterial = new BitmapFileMaterial("url_to_texture"); to load models and textures into your program only when they're needed - You might need to add in some loading screens but it should increase the fps slightly.

    2 - Only load image thumbnails, load the larger sized images when a user clicks to enlarge.

    3 - Use Firebug! If you use Firefox, install the Firebug plugin: http://getfirebug.com
    When you've installed that, activate it and go onto the site. You'll see that on loading te site, the SWF sucks 3.2Mb of images up. This will all have to be stored in the website users memory which could make the site a bit laggy.

    If you still have no luck, send the as files over and I'll see what I can do.

    I hope this helps
    -Luke

  7. Comment by milosgacanovic on February 5, 2008 8:07 pm

    Hey, thanks for the nice reply...

    1 - main swf is 800kb (menus, background, texture for first model), and after i start to load .jpg's and collada models.
    2 - already tried
    3 - i have the fire bug...

    Things i also tried but with no FPS increase:
    -loading nothing but the models and textures
    -loding just few parts of site
    -combinations of all the above +more that i can't remember now :)

    For me the most processor demanding is scrolling text because the texture is animated, the transitions between scenes, and the first page.

    The thing is... based on your experience do you think this website could run any faster?

    The other thing is that this is my first papervision and also AS3 project I have ever done, so who knows what beginners mistakes i made. It would be nice that somebody see my code, but I must worn you, it has 220kb and there are almost no comments at all. Are you sure you want the .as? :) So, if you want, have the will and time i could send you, just tell me where and how...

    Thanks for the comment about the website. I too think it's awesome, but it has to run a little faster so all the people can think the same way. I get around 40FPS :) but there are some computers who get around 15 which is really to low.

  8. Comment by milosgacanovic on February 5, 2008 8:08 pm

    Did you all noticed papervision low performance in Firefox? I get -20% FPS and some strange glitches...

  9. Comment by Luke on February 5, 2008 9:25 pm

    Hi,

    I'll take a look at the as file - send it to 0luke0[at]gmail[dot]com.

    -Luke

  10. Comment by santhakumar on March 13, 2008 3:21 am

    Hi,
    I can able to apply filters for viewport. But Filter doesnt work for Plane.

    plane = new Plane( material, 500, 500 );
    var glow:GlowFilter = new GlowFilter();
    glow.color = 0xffffff;//009922;
    glow.alpha = 1;
    glow.blurX = 25;
    glow.blurY = 25;

    plane.filters=[glow];//DOESNT WORK

    //viewport.filters=[glow];//WORKS FINE

    How can i apply filter for an primiative object.

  11. Comment by mixey on March 18, 2008 8:53 pm

    @santhakumar: read comment carefully. This method applies on the whole Viewport if you are in need to apply filters to different planes or other primitives you should check Effect branch

  12. Comment by NIITer on June 10, 2008 5:57 am

    Dear All!
    I tested you codes and it works well, but when I try filter for plane, it don't work. Here my codes:

    private function createPlane(){
    var mc=new Movie()
    material=new MovieMaterial(mc,true);
    material.doubleSided = true;
    material.interactive=true;

    plane=new Plane(material,mc.width,mc.height);
    scene.addChild(plane,"plane");
    plane.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, interact);
    }

    private function interact(ev:InteractiveScene3DEvent):void{
    var p=ev.displayObject3D as DisplayObject3D;
    trace("InteractiveScene3DEvent "+typeof(p));
    var filter:GlowFilter = new GlowFilter (0xFFFF00,1,5,5,50,1,false,false);
    p.filters=[filter];
    // or: plane.filters=[filter];
    }

Comments RSS TrackBack Identifier URI

Leave a comment


Papervision 2 is proudly powered by WordPress and themed by Mukka-mu