Playing with filters

Published

on January 23, 2008

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:

PLAIN TEXT

Actionscript:

package {
\t
\timport org.papervision3d.objects.DisplayObject3D;
\timport PaperBase;
\timport org.papervision3d.objects.parsers.Collada;
\timport org.papervision3d.materials.BitmapFileMaterial;
\timport flash.filters.*;
\t
\tpublic class Main extends PaperBase {
\t\t
\t\tpublic var cow:DisplayObject3D;
\t\tpublic var filter:GlowFilter = new GlowFilter (0x000000,1,5,5,50,1,false,false);
\t\t
\t\tpublic function Main() {
\t\t\tinit(300, 200);
\t\t\tviewport.filters = [filter];
\t\t}
\t\t
\t\toverride protected function init3d():void {
\t\t\tcow = new Collada("http://papervision2.com/wp-content/downloads/dae/cow.dae");
\t\t\tcow.moveDown(100);
\t\t\tcow.scale = 3;
\t\t\tcow.pitch( -30);
\t\t\tdefault_scene.addChild(cow);
\t\t}
\t\t
\t\toverride protected function processFrame():void {
\t\t\tcow.yaw(5);
\t\t}
\t\t
\t}
\t
}

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

18 Responses to “Playing with filters”

Feed for this Entry Trackback Address

1 Thorsten
January 30, 2008 at 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 Luke
January 31, 2008 at 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 Thorsten
January 31, 2008 at 6:30 pm

Thanks Luke.
Looking forward to it..
4 Rich
February 2, 2008 at 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 milosgacanovic
February 4, 2008 at 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 Luke
February 5, 2008 at 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 milosgacanovic
February 5, 2008 at 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 milosgacanovic
February 5, 2008 at 8:08 pm

Did you all noticed papervision low performance in Firefox? I get -20% FPS and some strange glitches…
9 Luke
February 5, 2008 at 9:25 pm

Hi,

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

-Luke
10 santhakumar
March 13, 2008 at 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 mixey
March 18, 2008 at 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 NIITer
June 10, 2008 at 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];
}
13 aldi
July 22, 2008 at 6:22 pm

hi

I did all your tutorials but I can only see the cow from above and shes spinning like crazy. CAn you please tell me where in de code I can change that?

Thanks!
14 lee probert
September 22, 2008 at 4:14 pm

Hey … great quick fix for scenes with one object. thanks.
15 glasses248
September 27, 2008 at 9:43 pm

To apply the filter on the 3d object, set the following:

Plane.useOwnContainer = true;
Plane.filters = [new BlurFilter(10, 10)];

Strangely enough, you’ll lose the ability to click on the 3d object, hence:
Plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, objectClickHandler)

Hope that helps.
16 nk
October 17, 2008 at 2:38 pm

with plane.useOwnContainer = true
and glow filter
and TweenLite for animating there are error and last few pixel down and rigth aren’t well rendered..

how can i do?
17 tips
November 27, 2008 at 8:54 am

Hi, just surfed in. I enjoyed looking around your web site. This site has been very useful to me so far and I have barely scrathed the surface of it.
18 tryhard
December 1, 2008 at 2:45 pm

Hi, sorry to hear that this web is closing down.
I’ve just started with AS3 and now CS4 and Papervision.
When I try this simple tutorial I get an error saying it can’t find the Collada material mat0.
A bit lost here.