Here is a Fancy Benchmark I put together in a day or so. I wanted to test the recent improvements in jerkiness on both C2 and on the browsers. It's a bit heavy with many sprites.
Try it out here: http://www.eli0s.com/Tests/ForestScroller/
Hold the mouse button to move the Ship (or use a touch device) .
On my desktop I get constant 60 fps/ 0.016 dt most of the time (using Chrome). Sometimes there are some strange fps/dt irregularities for no obvious reasons. I tried this on a Samsung S2 and it's too heavy, I get ~15 fps.
EDIT- For anyone interested, here is the capx file !!!the code is a mighty mess!!! You'll need R0J0's Canvas Plugin & Sombody's Drop Shadow webGL shader in order to open the capx.
Nice job on the parallax forest!
I have constant 60 fps no stutter on Chrome. ~18% cpu usage.
Wow, those trees are awesome...great job!
3570k, HD4000 (iGPU)
I get about 30% cpu, and about 40fps fullscreen at 1080p. 60fps if I shrink the window about a third.
16 fps on a iphone 6 latest Safari
I think this is a good benchmark. I would expect current hardware (and not so current too) to fly through it!!!
about 4 to 9 fps on my galaxy tab 3 on chrome, not a big worry though as it is a benchmark after all.
Thanks guys! I think the most crucial aspect is not having dt fluctuations. When I was making the capx, I was previewing on a second monitor (this has been mentioned to cause problems) and for no apparent reasons I was experiencing recurring dt fluctuations that caused massive fps drops. From 60 to 30 and so on. However, other than minor spikes here and there, now everything seems to run smoothly on my machine. Perhaps a restart was needed in my case.
I guess this kind of visual approach is out of the question for mobile devices then. I wonder if a full 3d implementation with Q3D will prove to be more sufficient. I've bought it but I haven't had the courage to dive into it yet, it looks too complicated to me and not having a proper manual and workflow tutorials is not helping at all.
Anyway, thanks for posting!
Nice demo! Very cool parallax effect. It's rock solid 60 FPS on Chrome Canary here. Did you export with the latest r198 btw? We made some renderer scheduling improvements.
It can manage about 30 FPS on a Nexus 9 here as well. I'm not sure if there's something heavy going on to slow it down on mobile? Maybe some large WebGL shader? Or it might just be the fillrate on those trees...
Superb trees, Eli0s. How many layers did You use on them?
On the latest chrome canary the benchmark was jerky, then I downsized the window achieving full smoothness, after that I scaled it up for the full window and... it sustained it smoothness.
rozpustelnik , thank you! There are 7 layers for the trees and 4 layers for the clouds. For some reason, full-screen in browser improves performance and stability, this has been mentioned on other topics.
The whole effect is made with layer scaling (I've seen the method here) which looks like the best way to put together objects that should look like they are on the same place but on a different z-depth. I'm not sure about efficiency though. Is offseting layers by scaling more, less or equally efficient as parallaxing them with the parallax settings...?
Perhaps Ashley can tell us about this.
Ashley , thank you! Yes, the export is done with r198, exactly for testing the rendering improvements! Scheduling the rendering calculations at the beginning of the tick rather than at the end (to put it in layman terms, as I understand it) seems to make a difference! I'm posting the capx for you and anyone interested to have a closer look, please mind that my code couldn't be messier and it might have deficiencies. Also, the Canvas Plugin is needed (I am using it to render the graph).
Forest.capx (C2 version 198 or higher & R0J0's Canvas plugin & Somebody's Drop Shadow webGL Shader are needed!!!)
Was 25-30 fps on my desktop, and 5 on my Ipad3.
Removed Canvas, Ipad went up to 10, desktop remained about the same.
I should say I didn't have Somebody's shaders installed.
great overhead perspective tree work!
I got about 47-52fps on my desktop running Chrome. Felt a little jerky.
It ran a lot better on Canary and I got about 58-60fps pretty steadily and it looked smoother.
On my iPhone 5 (iOS8) Safari it got about 7fps and stuttered and jerks the whole time.. it runs very slow, not very playable.
newt , you are right, I forgot about Somebody's the Drop Shadow shader, thanks for pointing this out! I've added the links for the Canvas Plugin and the Drop Shadow shader on my post above, next to the capx's link.
jobel , thanks! It's Interesting that Canary manages that much of performance gain over regular Chrome, that means that there is still room for improvement in HTML5 performance.
Develop games in your browser. Powerful, performant & highly capable.
This is awesome eli0s.
Steady 60 fps on desktop, cpu at about 30.
Hohoho, a practical use of the Drop Shadow shader, neat™
Awesome job on the parallax, gave me some ideas. Are you making a game like this or was this all just for the test? Either way, awesome job. Perhaps I should make my little test thing into a benchmark as well, but with a different focus on object count.
I get 40+ fps in Chrome windowed and steady 50 fps full-screen. It feels quite smooth on this old little workhorse:
GeForce 9800M GTS
Intel Core2 Duo CPU P8400 —
4.00 GB RAM
Edit: Sony Xperia Z ultra gets ~11fps in portrait and smooth ~28fps in landscape - which, I guess, is a very good indicator that fillrate affects the fps in this case.
GenkiGenga , thank you!
Somebody , hehe it's neat indeed! I hope I'm free to use the trademarked word
I'm not making anything, I just wanted to try to push the parallax-3d illusion a bit and see what performance I can get. I have yet to experiment with Q3D, I'm quite curious to see a comparison.
I would be very interested to see your little test thing, benchmark or not, I'm sure it will be an eye candy and an inspiration!
Somebody, at first I tried to use your Shift effect to make the Tilled Background scroll downwards, but while it looked ok on the editor, at run time it's producing a strange smearing result and in fact it scrolls on the opposite direction... The racetrackV however works the other way around: it looks funky on the editor but works fine at run-time. Am I missing something obvious here?
Here is a capx demonstrating the above: