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:
-
package
-
{
-
-
import org.papervision3d.objects.DisplayObject3D;
-
import PaperBase;
-
import org.papervision3d.objects.parsers.Collada;
-
import org.papervision3d.materials.BitmapFileMaterial;
-
import flash.filters.*;
-
-
public class Main extends PaperBase
-
{
-
-
public var cow:DisplayObject3D;
-
public var filter:GlowFilter = new GlowFilter (0x000000,1,5,5,50,1,false,false);
-
-
public function Main() {
-
init(300, 200);
-
viewport.filters = [filter];
-
}
-
-
override protected function init3d():void
-
{
-
cow = new Collada("http://papervision2.com/wp-content/downloads/dae/cow.dae");
-
cow.moveDown(100);
-
cow.scale = 3;
-
cow.pitch( -30);
-
default_scene.addChild(cow);
-
}
-
-
override protected function processFrame():void
-
{
-
cow.yaw(5);
-
}
-
}
-
}
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 :)
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?
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.
Thanks Luke.
Looking forward to it..
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.
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…
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
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.
Did you all noticed papervision low performance in Firefox? I get -20% FPS and some strange glitches…
Hi,
I’ll take a look at the as file – send it to 0luke0[at]gmail[dot]com.
-Luke
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.
@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
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];
}
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!
Hey … great quick fix for scenes with one object. thanks.
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.
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?
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.
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.