Display list vs. blitting - the results!
To get some actual evidence for my opinions on the joys of the Flash display list, I created two demos that I'm calling "BunnyMark", a test of rendering small bouncing bunny pngs with alpha transparency. Since first posting, lots of readers helped by testing on different browsers and operating systems, and I have updated this post with their results.
The results were quite interesting, and not quite what I expected. Blitting was really fast, although actually a little bit slower than I expected, but gave a consistent rendering speed across all platforms. Bitmaps were also pretty fast, although in Safari on Mac performed really badly. I emailed Tinic from the Flash player team about this issue, and he has said he will look into it. Ok so here are the results:
- The display list demo could render 4000 bunnies at 30 fps on my PC without slowing down. This was replicated by readers on all Mac and Windows browsers except for Mac Safari, where it was down to 10-20 fps. Based on this interesting blog post from Tinic Uro (suggested by Richard Leggett), this seems like it may be something to do with the recent adoption of the Core Animation APIs in Safari. The demos has a lot more layers stacked up than you would need for most games, so this performance drop is unlikely to affect a real game - although I will be following up with a new benchmark to test that hypothesis. Bitmaps faired very badly on Android - it couldn't even render 10 bunnies at 30fps.
- The blitting demo could render 6000 bunnies at 30 fps without slowing down on my PC, and people with faster machines have reported up to 11000 bunnies at 30 fps. Blitting was also much more effective on Android, where it got up to 600 bunnies at 30 fps, certainly enough performance for an arcade-style game. (Thanks to Philippe Elsass for the Android tests).
So in this example, blitting is about twice as fast. But as I hope you can see, realistically 3000 bunnies is still a lot more than you are going to need in most situations. You can download the source code and see if you can improve the performance of either demo. A couple of readers have recommended performance optimisations, for example suggesting I use a fixed-length vector and using lock() and unlock() on my bitmapData, but neither strategy noticeably improved performance on my machine.
"Just because the Flash Player is using the video card for rendering does not mean it will be faster. In the majority of cases your content will become slower." - Tinic Uro
Just a final note - I ran a similar test to this 2 years ago in Microsoft XNA and was able to get something like 50,000 bunnies going at HD resolution, and 60 fps. I think molehill is going to make this discussion somewhat irrelevant next year - GPU blitting will annihilate both of these approaches. The question will then be, can the display list also be speeded up by the GPU, or is it just too wacky and different to what graphics cards are designed to handle?
Comments
I'm still a bit confused as to how much Molehill will help with non-3d development though. Thibault said -
"Molehill is not a 2D GPU renderer, however, things like particles engine for instance can be developed through shaders on the Molehill engine and produce awesome results in terms of speed and amount of particles you wanna push on screen, particles on the GPU"
I've sometimes run into some weird tearing effects when using bitmaps within the display list though. Like, if a bunch of bitmaps are moving across the screen quickly sometimes it will cut off part of the bitmap for a frame - just enough to be noticeable. I assume it's something to do with the Flash Player getting its redraw regions slightly wrong. Not a big deal, really, just something I've occasionally noticed.
So is 'bunny count' going to be the standard unit for blit/sprite comparative benchmarking?
Cheers,
M
DisplayList - 30fps stable (55-60 Mem)
Blitting - 30fps stable (55-60 Mem)
So nothing weird here, results match your post.
Hope this helps.
Could be the debug player causing issues on the Mac?
DisplayList - 30fps stable (23MB Mem)
Blitting - 30fps stable (22MB Mem)
It's all about using the right tools & techniques for the job and what I found was that a hybrid blitting / Display Object approach would really allow me to push Flash to its limits without overly taxing a user's system. While it's a bit more programmer dependent and requires structure & forethought, every AS3 developer should learn blitting and keep that knowledge handy for when they need it.
DisplayList - 10fps (7Mb mem)
Blitting - 30fps (5.6Mb mem)
So that's it, seems like an issue for the safari plugin on Mac. Flash usually runs better on Safari then FF so these results are quite a surprise and VERY insightful.
In beginning of this year because of same reason I was doing similar tests. God some similar results then.
In you tests I get 30FPS in both Win7 CPU Intel Quad 2.83Ghz
And here are my experiments links
http://wonderwhy-er.deviantart.com/art/Flash-Rendering-Tests-149580102
http://wonderwhy-er.deviantart.com/art/Flash-Rendering-Tests-2-149679063
Then I got some mixed results so comment for first test is wrong and I did not fix it still :) With my tests now I get 9FPS with display list with 50k circles and 15 FPS with blitting with 50k circles.
You should add some way to set amount of bunnies to your example so that we could tune it to the power of our PCs.
BTW back then I noticed one strange thing. On my old AMD powered 2Ghz notebook it worked a lot worse then on Intel machines which made me get weird results at first where bitmaps in displaylist were on par with blitting...
BTW there is one more feature you get with displaylist you do not with blitting and it is player redraw rect being automatically and efficiently calculated by Flash player while it is not possible to do with one big backbuffer bliting approach.
It would imply that more occluding bunnies = lower performance
Displayobject is killed by the browser. It isn't responding fast enough.
Blitting : 7fps
On htc desire
I set up the file to 60 FPS to give the player the possibility to render faster than 30 FPS.
On my computer, it runs at 32 FPS with 6000 bunnies. Before I optimized it I had 29 FPS with 6000 bunnies.
Not a HUGE improvement, but still...
Source : http://www.popcodestudio.com/dropbox/BitmapTest.as
- you can draw 600 bunnies at 30fps,
- but you can only count on moving 150 bitmaps at 20fps: it doesn't seem possible to do 30fps even moving only 10 bunnies.
So definitely blitting for mobile but I'll go with the displaylist when I can.
Try the same thing with a sprite vector graphics, with scale and rotation vs blitting of same thing.
* make the vector a fixed vector
* use lock() and unlock() before and after blitting to the bitmapData
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#lock()
I could get 11000 at 30fps running in debug mode. Around 14000 in release
Well, blitting definitely will win on this bunny olympiad.
That's a different issue, if you're aiming for blitting you really need to think about the application you're using it for, there are many methods to maintain speed. However if scaling / rotating 3,000 objects is your target, you're most likely going to have problems, regardless of the method.
15-17 fps with the blitting demo.
Athlon64 3000+ (1.8Ghz)
1GB RAM
WinXP
Flash 10.1
I've reloaded both demos multiple times but the results remain the same.