Ive spent a little more time this weekend looking at some more HTML5 with HaXe. Following on from my previous experiments with WebGL I decided to give HTML5's Canvas a a look as it was supposed to be designed specifically for the purpose of doing 2D.
I had heard from the HaXe mailing list that the Jeash project was a common way of interacting with the canvas in HaXe. Jeash is a remapping of the Flash API into JS so in effect I should beable to take any of my usual flash code, Sprite's, BitmapData's, etc and it should run on the canvas no problems. Nice!
So I coded up a quick blitting example to see what sort of performance I would get:
http://mikecann.co.uk/projects/HTML5SpeedTests/HaXeJeash/bin/
The results were okay (I get about 11FPS with 5,000 crawlers) however I was interested to know what sort of cost HaXe adds. So I decided to code up a second example, this time using pure JS:
http://mikecann.co.uk/projects/HTML5SpeedTests/JSCanvas/
The results this time were better (14FPS with 5,000 crawlers) so I now wondered what happens if I do without Jeash and just code up the example using pure HaXe. I was expecting to see the same sort of performance hit as Jeash:
http://mikecann.co.uk/projects/HTML5SpeedTests/HaXeCanvas/bin/
Surprisingly it actually runs faster (17FPS with 5,000 crawlers) ! This is quite a surprise and totally contradicts my notion that going from HaXe -> JS would incur a cost. I was expecting some cost, but a performance increase?! I can only speculate that behind the scenes the JS engine in the browser is able to JIT compile the HaXe JS much better than the hand-crafted JS and hence more speed.
If you are interested in the source then I have uploaded it here: http://mikecann.co.uk/projects/HTML5SpeedTests/HTML5SpeedTests_1.zip
P.S. All the test were run on Windows 7 x64 in Chrome 14 (dev)
Wow! This is amazing... haXe [+Jeash] provides a perfect abstraction between Flash Player and browser JS platforms.
ReplyDeletehttp://www.jadbox.com
I see you have requestAnimationFrame in the source but dont see it used? In some of my tests I've done I've seen around a 10fps gain using it - mainly using this setInterval shim https://gist.github.com/1002116, alittle more at http://blog.joelambert.co.uk/2011/06/01/a-better-settimeoutsetinterval/
ReplyDeleteI thought requestAnimationFrame was just a browsers way of preventing
ReplyDeleterendering when the canvas isnt visible any more, how would it increase
FPS? Despite that ill have a go soon and see what sort of difference I get
:)
This link can explain it better than I can - http://paulirish.com/2011/requestanimationframe-for-smart-animating/
ReplyDeleteAhh, cool. Will definitely have another go using that soon. Cheers!
ReplyDelete[...] on from my previous experiments into the world of haXe and HTML5 I have been playing around again with trying to get as many 2D sprites on screen as I [...]
ReplyDeleteDid anything change since you posted this?
ReplyDeleteI am getting 2FPS with the HAXE/Jeash and 5000 crawlers whereas in the other tests i am getting over 30FPS easily.
Ye you are right! Im not sure what happened.. New version of chrome changed something?
ReplyDeleteDoesn't seem like just a chrome change I am getting same results across different browsers.
ReplyDeleteAgreed. Just checked it in FF too.. Very odd, I wonder what changed?
ReplyDeleteOn the plus side the HaXe + Canvas version runs significantly faster now!
ReplyDeleteYea but Jeash now seems unusable at all i am getting 40FPS with only 100 crawlers and the movement still lags a lot. I would really like to know what happened, i am new to Jeash and was looking into it just to try and port some flash stuff into html5 as easy as possible.
ReplyDeleteI even looked a little under the hood of Jeash and there is no explanation why simple clearing of the canvas using copyPixels without any crawlers drawing brings the performance to its knees :/
No i don't understand it either. Perhaps post it on the haxe mailing list?
ReplyDelete[...] I want to point out this interesting article as well, where the author found out that while the overhead introduced by the current version of [...]
ReplyDelete[...] I want to point out this interesting article as well, where the author found out that while the overhead introduced by the current version of [...]
ReplyDeleteI will try this model for our website testing phases that includes crawl and loading tests.
ReplyDeleteInteresting. Testing in FF23/OSX I get 10FPS @ 5000 crawlers for both "HaXe + Jeash" and "pure HaXe", but 20FPS for "JS Canvas".
ReplyDeleteIn Chrome29/OSX I get 46FPS for "HaXe + Jeash", 40FPS for "JS Canvas", and 60FPS for "pure HaXe".
Its been a while since I have tried it..
ReplyDeleteI’m going to read this. I’ll be sure to come back. thanks for sharing. and also This article gives the light in which we can observe the reality. this is very nice one and gives indepth information. thanks for this nice article... Ptcl broadband speed test
ReplyDelete