John Iacoviello – Papervision3D Optimization Tips
Balind on 21 Apr 2008 | Guest Post
Hello all, my name’s John Iacoviello and I work with Balind as a Sr. Interactive Developer at Red Interactive and I also go by Self Titled kung fu panda divx download .
After finally getting a chance to build a site which heavily uses Papervision, I feel like sharing some of the things I found to be useful on getting the most performance without sacrificing visual quality.
UFC 84: Ill Will Created by Red Interactive Agency flight from ashiya divx movie online , 2008
The site I built was the UFC 84 microsite download dark knight movie Zombie Strippers! movie full download spider man 2 HD . I had to optimize the hell out of this thing due to the processing demand. One section in particular drove me nuts and still didn’t turn out as good as I had hoped. If you look at the fight card section in the above mentioned site you’ll know what I’m talking about.
So I’ll tell you every little thing I did to conserve on processing power and memory. Whether they are common practices or not, I have no idea because my communication with other developers that have used Papervision has been fairly limited up to this point. I’m sure there are many other things I could have done but by not being completely familiar with the API, I feel I did what I could. And feel free to add any additional techniques or tell me if I’m mistaken in any way in the comments below or through email .
Alright, lets get into it…
The main things that I focused on were the materials, I noticed the greatest difference in performance after altering properties on them, so that’s where the focus of this post will be.
Since most of my assets were MovieClips, I used the MovieMaterial object the majority of the time. So lets look at a basic code snippet.
var material:MovieMaterial = new MovieMaterial(displayObject, transparent, animated, precise);
The first parameter is your DisplayObject that you want to use. The only thing to look at here are the dimensions of your object. For example, if you have a MovieClip that’s 800×600 but you’re only going to be displaying it at roughly half the size, you’ll save on file size and performance by resizing that MovieClip to 400×300 before using it in a material. Of course, this all depends on what the MovieClip contains and how high res you need it to look. If you have a large background plane, which is far off in the distance and doesn’t have a huge amount of detail, then you can shrink it down at the source. Then when you create your plane you can scale it up to achieve the same dimensions with less bitmap information, as seen below. If you do this you’ll most likely want to set the smooth property on the material to true. This will apply smoothing to the bitmap and will look much nicer when scaled up.
material.smooth = true;
var plane:Plane = new Plane(material, material.movie.width * 2, material.movie.height * 2, segmentsW, segmentsH);
The second parameter is whether you need transparency or not. Setting this to false will help with performance. Most of the planes in the UFC 84 site required transparency because the materials were transparent png’s of the fighters. The background planes, however, are opaque since there’s never anything behind them.
The third parameter is whether the material will be animated or not. For example, if your MovieClip has a timeline animation you’d need to set this parameter to true. Setting animated to true will cause the MovieClip to be redrawn to the materials bitmap every frame. This could be very taxing if the MovieClip is large or if you have multiple materials being redrawn at the same time. For the most part I’d imagine you wouldn’t need the material to be constantly playing, usually only during a transition. So one thing you can do is to set animated to false initially, and when you need to play the animation, set the animated property on the material to true. Then, when your animation is complete set it back to false.
material.animated = true;
The fourth and what seems to be one of the more effective ways of gaining performance is whether the material uses precision when drawing the bitmap. This will draw the material more accurately and thus will need more processing to do so. I almost always set this to false as I noticed a huge performance drop when setting it to true. What you will notice (depending on the number of segments that you set on your object which I’ll touch on in a minute) is when having this property set to false your material might look a little distorted when it’s rotated on its Y or X. This is more apparent on materials using text but is visible in most cases. A good way I found to counter this is to bump up the number of segments your object uses for each side. For most planes I would typically use 3 for both segmentsW and segmentsH, but when I needed more accuracy I’d bump those up as high as needed, usually not above 9×9 segments.
The version of Papervision I used for this site had a slight bug in it which I believe has been addressed now. The destroy method (which disposes the bitmap objects they use) in the material classes wasn’t being called when the objects were destroyed, so I had to go into the classes, change the destroy methods to public and call them explicitly when I needed to clean up the materials for garbage collection. I’m pretty sure this shouldn’t be an issue any more though.
The last thing I’m going to talk about is the viewport dimensions. The smaller the viewport dimensions, the less has to be rendered. I couldn’t take advantage of this because this UFC site takes up the full browser area for some fullscreen goodness, just the way I like it. I’m also on a large widescreen monitor but when you scale down the size of the browser the site performs much faster is some areas. This is the only time I’ve seen an advantage to a smaller monitor.
I think that’s about it, again if I’m mistaken anywhere or if you have any additional techniques to help speed up Papervision for us developers please add them below.
YAPP on 21 Apr 2008 at 6:50 pm #
First off, I love the UFC 84 site brother. I visited it today before coming here. The implimentation of Papervision 3D to the site is awesome man. It really enhances the site doing basic 3D effects like this, pretty bad ass I must say…well done. I haven’t dove into Papervision 3D myself yet…then again I’m not a programmer/developer. But we do many sport/racing websites, so it could come in really handy for us. Well, I appreciate ya takin the time to run through some things, very interesting and helpful. As always, I look forward to more future RED projects.
Jason
Jayden on 21 Apr 2008 at 9:03 pm #
G’day John,
Thanks for the tutorial mate. Those UFC sites are awesome – even the little papervision loader is great!
YAPP on 30 Apr 2008 at 5:46 pm #
Hey buddy, do you know of any good books on Papervision3D? I know there are several online resources, but I was curious as to how you’re teachin yourself Papervision. I did a quick little google search today and didn’t really find any books on it. If you could spare some time and provide a quick list of resources that you’ve been using, I’d really appreciate it.
Thanks alot,
Jason
The Flash Blog » Papervision3D Tips from Red Interactive on 05 May 2008 at 2:01 pm #
[...] using Papervision3D. John Iacoviello made a guest post on Balind’s blog giving a bunch of great tips for optimization in Papervision3D. Check out John’s excellent portfolio site as [...]
Will on 05 May 2008 at 3:30 pm #
Good article. I like the tips about scaling down movieclips where necessary.
Alex Placito on 05 May 2008 at 3:58 pm #
Hey there John —
Thanks so much for sharing this! I’m using PV3D to build a 3D rotating carousel for navigation for a client; I really hadn’t played around much with these parameters but definitely will now. Thankfully your post comes at a time when the site using the carousel is approaching that shift from development into production and efficiency is starting to receive much more attention.
I’d like to add a couple of probably obvious notions that I myself have used. These really aren’t PV3D specific, and I haven’t done any true performance testing on them, but I think anyone reading this post and working with the library should remember them (indeed, all AS3 developers probably should):
– Don’t import more than you need. I was importing nearly all the classes in the version of the lib I’m using, but recently cut that down to just the necessities:
import org.papervision3d.scenes.MovieScene3D;
import org.papervision3d.objects.Plane;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.events.FileLoadEvent;
– The more materials you are creating, adding to the viewport/scene, the more the 3D camera has to render. Considering your audience, of course, think long and hard before you make something a 3D material. My carousel consists of Planes whose materials are bitmap screen shots of videos which, when clicked, load a player with that video. I had a second Plane in there next to it, at first, that was a MovieMaterial of text (title, description). It was rendering so it could float along with the BitmapMaterial (the screenshot) it was describing. Once I moved the text out of the plane and just stuck it in a Sprite on the Stage that wasn’t part of the 3D Scene, the SWFs performance definitely shot up.
I will definitely keep adding comments as I come across more, if any, performance enhancers. And I’m going to try out your suggestions tonight. Thanks again for sharing!
Nik Rowell on 05 May 2008 at 7:43 pm #
Thanks for the tips, John! Nice use of PC3D!!
The Flash Index » Blog Archive » Tips On Optimizing Papervision3D on 06 May 2008 at 1:52 am #
[...] time working with Papervision 3D, you know that it can take up an incredible amount of resources. Here is an article that offers some tips for optimizing PV3D [...]
Dayton on 06 May 2008 at 5:35 am #
Hey sweet post John, great look at the behind the scenes. Dig the site, you and Balind make a pretty sweet team.
Shane Fleming on 07 May 2008 at 9:44 am #
Fantastic work guys. Beautiful way to use PV3D; puts you in the environment in a subtle enough way that it doesn’t feel like it’s all about the technology.
John, glad to see, as always, you’re kickin some ass. Keep up the good work!
Daniel on 09 May 2008 at 1:33 am #
The UFC site is stunning!! That’s the way I like web3d
…. not just 3d, but an enhancement in design and user experience!
Hebi Flash Blog » Sites 3D en Flash : 2334ème tornade on 11 May 2008 at 10:12 am #
[...] Dieu comme je n’aime pas le catch, mais dieu comme je trouve sympathique ces interfaces en plusieurs couches qui suivent le mouvement de la souris, ultra-dynamiques…créé par Red Interactive Agency. Via theflashblog qui donne quelques liens complémentaires, par ici pour quelques conseils sur l’optimisation de scènes Papervision. [...]
Stephen Matthews on 20 May 2008 at 2:07 am #
Cheers for all the info. I am just starting my first Papervision site and also trying to get into AS3 for the first time commercially, so I need all the tips I can get >> regards >> gingerman
Seb Lee-Delisle on 20 May 2008 at 5:36 am #
Hi John!
Great post, and some very useful info there!
Just one more thing to add – if you set your bitmap sizes to exponents of two, ie, 64, 128, 256, 512 etc. that way the built-in mipmapping in the FlashPlayer will enable much faster and smoother bitmap scaling and manipulation.
So a bitmap sized 512 x 512 will work a lot better than one that is 500 x 500.
Hope this helps!
Seb
Interactive Hug » UFC 84: Papervision Creative Process on 20 May 2008 at 9:49 am #
[...] was an interesting project, We basically handed the Photoshop files off to John and watched him do his thing. Here’s a peak into the creative process behind Reds first UFC [...]
Adam on 17 Jun 2008 at 9:35 am #
hey i was wondering…how do you target your MovieMaterial from the library? i’m using a movieclip from the library as my material that has a timeline animation…if i have it stopped when it is first applied to the plane, how do i tell it to go to the “activate” label in the timeline…i guess what i’m asking is how do you target that movieclip?
john on 17 Jun 2008 at 9:49 am #
Hey Adam,
You can target the material’s movieclip like this:
myPlane.material.movie.gotoAndPlay(“activate”);
Make sure when you create the MovieMaterial (or right before you need it to animate) you set the ‘animated’ property to true, this will tell the material to redraw the movieclip every frame so you’ll see the change. To save on performance you could also set ‘animated’ to false once the animation in complete.
Hope that helps…
Adam on 17 Jun 2008 at 1:08 pm #
works like a gem..thanks a lot…i’ve been looking for days to remedy this…
sheshu on 19 Jun 2008 at 2:49 am #
Hi, if I want to animate the material’s movieclip in cube instead of a plane?
thx
trent on 21 Jun 2008 at 6:19 am #
Hi John, great post and really great sites for the past couple of ufc’s.
i was just wondering with the ‘hughes vs alves’ section, how you got the fighter profile labels so sharp (fonts, etc)? it looks like they sit outside the viewport all together? did this help with performance?
if they are seperate from the pv stuff, how did you map the labels xy coordinates to objects within the viewport?
cheers.
john on 24 Jun 2008 at 10:01 am #
to sheshu:
To animate a cube’s material’s movieclip you could do the following:
var movieMaterial:MovieMaterial =(myCube.getMaterialByName("front") as MovieMaterial);
movieMaterial.animated = true;
(movieMaterial.movie as MovieClip).gotoAndPlay(2);
*NOTE – if you used the same material for all cube faces, all sides of the cube would play instead of just the “front” face or whichever you chose.
to trent:
Yes, the profile labels aren’t being rendered in papervision, they’re just movieclips in 2D.
I was mapping the xy coords by using the screen.x and screen.y properties of the Planes and adding that to the center x and y of the stage.
example:
var cx:Number = stage.stageWidth / 2;var cy:Number = stage.stageHeight / 2;
var planeX:Number = cx + myPlane.screen.x;
var planeY:Number = cy + myPlane.screen.y;
This assumes your viewport is centered on the stage.
*NOTE – I’ve noticed with a later build of papervision that the screen properties are never set for some reason so I’ve had to go into the DisplayObject3D Class and change the calculateScreenCoords method from private to public, then call that method on my displayObject3d before trying to get the screen coords.
example:
myPlane.calculateScreenCoords(myCamera);var planeX:Number = myPlane.screen.x;
Craig Harwood on 04 Jul 2008 at 3:22 pm #
greetings john
– im encountering a serious memory leak when using pv3d (which i believe to be connected to a bad dispose implementation, as you described in your fifth point).
i was wondering if you might be able to post your mod or point out the method+class that needs be hit to destroy a material effectively
Cheers,
Craig Harwood on 07 Jul 2008 at 2:34 pm #
– nevermind. i’m using version 2, which doesn’t have destroy methods (apparently). In case it helps anyone else, if juggling a lot of interactive/animated clips, you may still need to dive in to materials and dispose of bitmaps manually
beherca on 17 Jul 2008 at 8:24 pm #
it is a great post, of course the great website, I was inspired by your web site, thanks a lot, it give me a great help, I am now working on my pv3d website currently, and will post to here when it is completed.
Ryan Wood on 20 Jul 2008 at 9:44 pm #
Wow John- I really enjoyed the site experience – I’ve forwarded the UFC site to just about everyone I know – with rave reviews. Great work!
I’m Running into an issue with my PV3D app. in which I’m adding a interactivMovieMaterial Plane to a sphere 3d object (sphere.addChild(Plane)). The movie Material that I’ve added has a dynamic text field with a scroll bar that takes the height of the dynamic text flied and uses it for the scroll amount. The problem comes when I try to scroll – its as if the scroll bar moves the entire Plane – so instead of the text moving the mask inside the movie clip and or the Plane itself moves.
There was also a point in which it also stretched the movieclip as I scrolled until I used the autoResize = false function. now it stays the same size but wont sit still.
Have you or anyone else run into the same dilemma, working with nested 3dobjects with interactiveMovieMaterials attached to them, and if so how was it remedied?
Blackmeoo on 25 Jul 2008 at 7:11 pm #
Dear john,i want to map material to a specified face of a DisplayObject3d,how..? can U show me the way ? Thanks a lot
Mario Figueiredo on 27 Jul 2008 at 5:13 am #
Hello John,
That’s a most excellent display of Papervision3D. And it’s all the more beautiful considering you shown how to use technology for the benefit of the user and not simply for the benefit of the programmer.
I would suggest however one thing. Instead of making those member functions public, I would perhaps think first in creating a new public method and call the private method from within. At the surface there may seem to not exist much of a difference, but you gain the ability to clearly label any user made changes to the class like for instance prepend “jiaco_” to the methods you create: This alone is, from where I stand, the biggest advantage. I like consistency and to have every monkey on it’s branch
But also you don’t break the class encapsulation rules (you do in fact, but not directly. The class retains the rules, you are just circumventing them in order to handle a bug) and you don’t risk potential problems with unintended polymorphism behavior that can at best originate a compile-time error (lack of the override keyword) and at worst silently bug the library.
Travis Nelson on 22 Aug 2008 at 11:54 pm #
@Ryan Wood
I ran into that same problem Use the material.rect property to define the area of your moviecip/Sprite that you want used as a texture. Then you can have a scrolling masked text.
felix on 09 Sep 2008 at 1:26 am #
Thanks for the tips!
Has anyone gotten the screen property to function well in 2.0? I just get zero coordinates on x, y, and z always.
Another optimization that is as obvious as it is effective is to set stage.quality=”LOW” . It dramatically increases performance.
John on 11 Sep 2008 at 6:50 pm #
Hey How do you toggle between the smoothing so nicely?
When there is movement the smoothing seems like it’s off then pops on.
Adam on 23 Sep 2008 at 1:10 pm #
back on this project after a few months off…john, a few posts above you told me how to target the movie clip that I’m using from the library as a plane material…however, the buttons don’t seem to have any function within that movie and i don’t get the hand cursor or anything indicating that it is even a button…any ideas?
screw-ed on 27 Oct 2008 at 6:01 am #
Hi John
I know this is totally of topic but can you please please please explain to me how you did the preloader, I’m looking to create a similar effect but I can’t find one decent tutorial or help on how to make one that really works as well as yours does.
I will be forever grateful.
john on 03 Nov 2008 at 9:15 pm #
Sorry for the extremely late replies, I haven’t been back here in a while. I’ll respond to a few of the more ‘recent’ ones. If anyone has any urgent questions feel free to email me at john@selftitled.ca. I’ll get those a lot faster.
@felix:
As I stated above I ran into this same issue and I resolved it by calling my3dObject.calculateScreenCoords(myCamera); before accessing the screen property which populates the values.
@Adam:
Regarding the hand cursor issue, I banged my head over this one for ages and never found a great solution or the cause of this. I did however implement a hack where on the InteractiveScene3DEvent.OBJECT_OVER & InteractiveScene3DEvent.OBJECT_OUT events handlers I would set the useHandCursor property of the viewport to true/false respectively. I haven’t worked with PV much since this project so I’m not sure if the issue has been resolved yet but this method should work if you need a last resort.
@screw-ed:
For the preloader I just had a MovieClip which had one graphic of the logo on the bottom layer, and a different colored one above which was masked. I mapped this to a plane and during the preload I accessed and set the mask’s height in the MovieClip which was mapped to the planes material.
Sinan on 16 Apr 2009 at 8:50 am #
Fantastic web site indeed. And apart from Papervision, I also wonder how does the intro movie stream so fast?? It seems a large movie with rapidly changing material. And at the halfway of the timeline, it was already downloaded. Is it related with codec or servers??
Cheers…
Jeev on 29 Apr 2009 at 5:16 am #
Hey John,
Awesome stuff
. Your tips helped a lot in optimization, but I still lack some computing power for a project that I’m currently working on. I have scene with about 50 Sphere objects all with GouradMaterial. On top of that I got 4 Viewports of 550×400 with 4 different camera’s. On top of thát I also have a motion detection to influence the light source for the GouradMaterial. So we’ve got a SWF of 1100×800 with 50 GouradMaterial Spheres, 4 Camera’s and Viewports and motion detecting (which relies on bitmap reading, which requires a lot of processing power, but I managed to reduce this as much as possible already). I think you can image the amount of processing power needed for this. Do you have any tips on how I could reduce the amount of processing power?
Also I had another pv3d project on which I tried to apply a scripted MovieClip to a MovieAssetMaterial and MovieMaterial. The script on the MovieClip was a simple onMouseOver and onMouseOut event. Weird thing is, the script worked correctly with MovieMaterial, but with the MovieAssetMaterial it didn’t quite. As soon as you mouse over the object, the material would respond to the mouse over. But as you mouse out it wouldn’t do anything. So I checked what happened using some traces and it seems as soon as you mouse out of the object with the MovieAssetMaterial it dóes fire the mouse out event, but it also immediatly fires the mouse over event again, even though your nót on the object, thus on the material, thus on the movieclip. Now you’ll probably be thinking “why not use the papervision events of object_over and object_out?”. The thing is I want to make the planet earth on a Sphere, where when you mouse over different countries different things happen (borders of country lit up ‘n stuff like that). This can not be done with the pv3d events as far as I know, but should rather be done with traditional InteractiveDisplayObject events I think. Do you have any idea what’s up with this? Or should I try a different approach? Is there maybe a way for this to work with pv3d?
Well I’ll stop here. I always try to get to the bottom of things, looking for answers, but sometimes it only leads to more questions
.
Looking forward to hear from you!
babeuf on 15 Jun 2009 at 8:46 am #
For your interactivity problem, i would suggest that you use internal papervision events and when you detect onMouseOver, you start to track pointers position on your texture ( you can find the way to do this in the pv3d sample where you paint on a 3D smiley ) and update your material thanks to this position.
About the problem of performances. i think what you are trying to do is definetly too much for pv3d ( for the moment )…
Josh Noble on 03 Sep 2009 at 7:55 am #
Thanks for posting this it has help me optimize my code a bunch and really improved the peformace of the project I was working on. Many Thanks.
Miomni Coverflow | VISUAL DIALECTS on 09 Nov 2009 at 5:14 pm #
[...] The first version of this coverflow was built using papervision, however due to a combination of visual distortion and performance issues it was never put live. We were caught in a catch 22 using papervision on this project because to maintain a good level of performance and visual fluididty I had to keep the amouth of segements on each Cube to a minimum which led to some pretty bad horizontal distortion on any materials displayed at an angle . I found 5 segments per Cube was the best compromise, any less and you would start to see intersection issuses, anymore and the performance began to drop off massively. The original idea was for the coverflow to run within a fairly small div limiting the view to about 5 covers, but it also had the ability to run in a fullscreen mode. At the small size the coverflow ran quite nicely but as soon as the it was run in fullscreen the extra geometry on screen led once again to a nose dive in performance. The design team were unhappy with both issuses and even after some attempts to optimise the project as much as possible the decision was taken to drop the project. (thanks to John Iacovieloo and his post on Papervision3D Optimization Tips) [...]
Joel Tong on 02 Dec 2009 at 4:18 am #
Hey,
Thanks for the tips! Really liked the way you integrated P3D with the site…
Erm got a tip for optimization. When rendering, set the useCulling property on camera to true:
camera.useCulling = true;
Will help to get rid of extra polygons and speed up processing.