Is WebGL slow on some machines ?

Hi

I'm asking this question because the HTML5 WebGL performances on my machine is terrible. My recent MacBook Air Intel i7 (Intel(r) HD 3000) is given me slow rendering performances in WebGL.

While I can decently play heavy things like Crysis, Borderlands 2, etc. trying under an up-to-date Chrome / Firefox the 2 examples available at this scirra link: https://www.scirra.com/blog/77/internet-explorer-10-fast-and-native-has-gone-to-other-browsers

only gives me 2700 in Canvas 2D and around 5400 in WebGL... This is 3 times less than what I can see on the reported graphics !?

So I tried on the MSI cr600 of my girlfriend featuring an NVIDIA GeForce 8200M G, while she's having some difficulties to play the same games as me on my MacBook Air, the result were a little bit better (4000 in Canvas 2D and around 8200 in WebGL) but still quite under my expectation.

So I run this benchmark on my low-end test machine (Aspire One Atom) and get around 350 in Canvas 2D and 570 in WebGL.

Another test on an old Desktop machine (AMD Athlon 64x2 Dual Core 3800+ 2.01Ghz

2Go RAM - NVIDIA GeForce 7600 GS) answers are 1800 in Canvas 2D and 5200 in WebGL.

All those values are so different but mostly low that I'm still wondering if HTML5 & WebGL is fast enough for mid-range machines.

I did a few try by running the particles examples at different screen resolution, with or without scale, low/medium/high number of particles (and again, no more than 1000 for the high which is not so high...) and overall on my MacBook Air everything stuttering heavily while working great on my girlfriend machine :(

The Problem here is not Construct 2, it's a WebGL performance issue, cause I saw the same things on many others WebGL test.

Sometimes 2D Canvas work even better than WebGL !?

My graphic drivers are updated, I have nothing running in background and this happen whatever the OS (Mac OS X Lion or Windows 7 under bootcamp). I know I won't reach compiled rendering performances, but at least a solid & smooth 30FPS (or better 60FPS) at 1024x768 would be great and unless I'm simplifying most things in my games, I probably won't reach that.

Any clues ?

Basically, Intel graphics suck. If you care about gaming you need an AMD or Nvidia graphic card.

WebGL renders using the GPU, which means graphics rendering happens equally as fast as a native app. The difference is the CPU.

2D game performance is much more CPU-bound than 3D games. Basically, those performance tests measure how quickly the CPU can issue a draw call to the GPU, which has a lot to do with how fast the javascript engine is as well. The test machine in the blog post you linked to is very powerful: it's a custom-build quad-core Core i5 3.3 GHz, with an AMD Radeon HD 6570 graphics card. Laptops tend to have weaker hardware to save on battery, space and cost, even if the marketing makes it look as powerful as a desktop, so don't expect them to be like desktop performance. Finally, make sure your laptop is plugged in and not in power saving mode or it will be slower!

Also, bear in mind even 5400 is an excellent result. How many games ever have more than 5400 sprites on-screen at once? I'd even guess none at all, and your computer can still get 30 FPS even in that case. Even your worst result, 570 - how many games have over 500 sprites on-screen at once? Probably a minority. So your results are still pretty good! You're just not reaching the same standard as my extremely expensive, high-power development machine :)

Ashley

Now comes the fun: I still have my low end pc, a AMD Athlon II X2 250 (2 cores)@3Ghz, 2GB RAM, WinXP SP3, NVidia 460 GTX Hawk, FF 16.0.1

In the Canvas 2D test it starts at 15 fps slowly raising while the object number increases (I already know why, you explained it well in another thread), but it reaches 30 fps very rarely. The result however was 375. <img src="smileys/smiley19.gif" border="0" align="middle" />

But doing the WebGL test was like having a totally different pc. The result was 47882 (!!), which is more than 3x of your result. And my cpu is much less capable than a Core i5 3.3GHz (for example, there is no level 3 cache on the AMD cpu), but my gpu is a lot more capable than the 6570

My conclusion is that the gpu has a bigger impact on the performance than the cpu (contrary to your description?), at least in this test configuration. Or do I miss something?

tulamide - I'm not sure, performance is surprisingly complex. Generally I've found making sprites really big and rotated has no impact at all on performance (in the WebGL renderer), which implies drawing always finishes quicker than the draw call can be made. So I still think that's the case. However, your WebGL performance result is one of the highest I've heard of! It may be that WebGL checks all buffers for security, which can slow it down - but very new graphics cards can do this in hardware, meaning the browser doesn't need to do the security check. I'd be interested to see how your result compares to the Construct Classic performance test here: https://www.scirra.com/labs/renderperf.exe

If your result is closer than usual, it would be evidence this is the case. Also, have you tried both Firefox Nightly and Chrome Canary?

Ashley

Here are the results of the CC performance test:

picture 1

picture 2

picture 3

About 58000 objects, pretty stable. But without a reference I don't know if this is close enough to the WebGL test to make it an evidence?

I didn't try FF Nightly or Chrome Canary. I would want to avoid having too many browsers installed, that's why I didn't use Chrome yet. Do you think it would be helpful? I could try to overcome my resistance then <img src="smileys/smiley9.gif" border="0" align="middle">

I also retried the WebGL test two times. Results were 45666 and 43576. The differences between these tests and the CC test were that the latter was more stable with a result after less than a minute, while the WebGL test had peaks up to 49k and coming to a result took until a few thousand ticks (approx. 3-5 minutes)

Even your worst result, 570 - how many games have over 500 sprites on-screen at once? Probably a minority. So your results are still pretty good! You're just not reaching the same standard as my extremely expensive, high-power development machine :)

My last game was rendering 3 layers of animated rotable 32x32 tilemap, textured polygons with ribbon of bordering grass, a few parallax and groups of objects, GUI overlay, many particles effects and since you were able to play up to 4 players in split-screen mode, up to 5 regions could be rendered each frame. That's quite a lot.

The problem is not so much being able to reach 30FPS but rather what's left on the CPU side to update the whole logic of the game with Javascript. I really need to crush my CPU usage which is quite new for me. I'm already avoiding using Box2D in that direction and think about design to reduce the number of drawing call.

I'm also experiencing some stuttering on some examples like the particles fountain while they are correctly interpolated. Since garbage collection should be neutralized, maybe it's coming from the WebGL in a browser going from GPU-CPU-GPU for rendering all the context ? It's pretty fluid and faster if I get rid of the browser thanks to Awesomium.

About 58000 objects, pretty stable.

Which is even more strange cause I reach 54000 objects with MacBook Air dual-core 2.0GHz Intel Core i7, Intel(r) HD 3000.

Which is nothing compare to the Scirra Monster 85290 score, but like you said I'm on a laptop not on a desktop.

...About 58000 objects, pretty stable. But without a reference I don't know if this is close enough to the WebGL test to make it an evidence?

This is VERY interesting! Compare my results: ~14k with WebGL, and ~85k with Construct Classic. That makes WebGL only about 16% as fast as native. It may be that the browser security check on WebGL buffers causes that much performance difference. However... according to your results, you get ~45k in WebGL and ~58k objects in Classic. That means on your computer WebGL is about 77% as fast as native - almost as fast as native!

Can I confirm you're using Chrome here, or Firefox?

Dang, I'm gonna have to buy a new graphics card to check that out more.

Armitage1982 - according to tulamide's evidence, it's possible for HTML5 to come close to native rendering speeds. I think sometimes a slow computer is just slow... or maybe it's falling back to software rendering for some reason? Have you tried updating your drivers?

Ashley

It is still Firefox I'm using.

Mozilla Firefox release 16.0.1

But I doubt that it is so easy. WebGL isn't always that fast on my computer. Would you mind doing a test?

There's a WebGL Aquarium, quite similar to Fish Tank for IE. Follow the link, click on 'options' and make sure, that every option is turned on (highlighted in red). Set the number of fishes to 50. With your desktop set to FullHD (1920x1080) go to fullscreen mode (F11 in Firefox, don't know the keys for the other browsers)

I now have a framerate of only ~16 fps

Now turn off all the options (7 in total).

I now have a framerate of ~16 fps

Turn all the options back on and set the number of fishes to 500.

I now have a framerate of ~16 fps

And last but not least go the full distance. Set the number of fishes to 1000.

I now have a framerate of ~15 fps

This doesn't make any sense to me. If the cpu would be the limiting factor I should experience an immense drop when going from 50 to 1000 fishes. And if the gpu would be the limiting factor, it should drop the framerate when activating all options (like normalmaps or reflections).

I would love to know, if you experience a higher framerate AND if the framerates differ noticeable more than in my test?

http://webglsamples.googlecode.com/hg/aquarium/aquarium.html

Sorry for being so cautious, but better checked twice than being as pleased as Punch although the real world framerates might not keep the promises of the draw call test.

For the Aquirium, my computer stays at 60 FPS at every option, so it might not be a good test for people with okay computers? Although I have always thought that graphics card had a bigger impact than Ashley says.

i5 2400, AMD Radeon 6850, Chrome 23

Basically, Intel graphics suck. If you care about gaming you need an AMD or Nvidia graphic card.

I totally agree

Armitage1982 - according to tulamide's evidence, it's possible for HTML5 to come close to native rendering speeds. I think sometimes a slow computer is just slow... or maybe it's falling back to software rendering for some reason? Have you tried updating your drivers?

That's what I first thought and why I try several things like turning off the GPU Blacklist for software rendering thanks to about:flags inside Chrome. Or doing something similar with Firefox, but it's not working.

I also tried to run the same test over Mac OS X Lion just to see if my Bootcamp windows do something nasty, but got the same results.

I got the latest drivers and even tried without any plugins of background software but again same deal.

Great if it's just a compatibility problems that lock down near native performances, but bad if they can't or don't fix that for the next iteration of WebGL Support <img src="smileys/smiley5.gif" border="0" align="middle" />

On the other hand, When enabling WebGL and accelerated hardware in Opera, the WebGL Test return a pretty 18200 objects BUT nothing can be seen !?

The rendering area stay white.

Same things with any Scirra games, I can hear sound, things are "working" but nothing is rendered. I guess it's because of the experimental nature of Opera...