1

I've been developing a game using HTML5 canvas for several months, and I've recently begun doing some of my development work on a macbook. In spite of a smooth frame rate of ~60fps, after a few seconds the game is pushing the macbook GPU up past 80 degrees C. I've also noticed on my desktop machine (which has a radeon 7870 video card) that after a while the GPU temperature rises and the fans kick in.

Considering it's a 2D game without any particularly fancy effects or too much going on, running at a reasonable resolution, this seems to indicate a major performance issue as it seems the GPU is being taxed a great deal. I'm already implementing many of the performance optimisations I've seen recommended (rendering at integer coordinates, no shadows, offscreen prerendering). Profiling the game reveals by far the most time is being consumed by the drawImage calls, but I'd expect a frame rate drop and/or other indications of lagging performance if this was the cause of the heat issue - but the framerate is beautiful on the macbook, there is no lag whatsoever.

To try and address this I've recently split the game into multiple layers and used pre-rendering to avoid unnecessary redrawing of layers, but this has actually made the frame rate significantly worse, and has not solved the heat issue at all. At this point I'm wondering whether any other optimisations I make will have any effect (eg. avoiding unnecessary fillStyle changes), or if I will be wasting my time?

I'll be grateful if anyone can provide advice or shed light on the source of this problem. A relatively basic 2D game should not cause this degree of GPU heat, and I ideally need it to be playable on laptops and lower-end devices, preferably without setting fire to them :)

James Hill
  • 496
  • 5
  • 15
  • Which browser? I noticed similar behavior recently with Chrome canary but not when running in FF. Could simply be a bug. –  Nov 12 '14 at 20:29
  • Yes it's Chrome (latest), the issue has been present for quite a while though. Let me test quickly in Firefox. – James Hill Nov 12 '14 at 20:34
  • Firefox has the same issue :( – James Hill Nov 12 '14 at 20:39
  • Hm, ok. a bit more complicated in that case.. did you run profiling to see which part of the code is most expensive? If you could share some code as a fiddle or inline it would be great. –  Nov 12 '14 at 20:42
  • Here is a quick profile from Chrome on my desktop machine, I'll run one on the macbook too: http://imgur.com/os8UBie – James Hill Nov 12 '14 at 20:48
  • I wouldn't know where to begin with a code sample, I'm using requirejs to manage a huge number of revealing modules so there is a great deal of code, even in just the rendering modules – James Hill Nov 12 '14 at 20:49
  • Here's the profile from the macbook: http://imgur.com/OBEvkjY – James Hill Nov 12 '14 at 21:00
  • The drawImage will use hw-acceleration if available and supported. If you use it to scale the images a lot this can be significant. Did you try to cache different sizes to a sprite sheet and draw from that? Smoothing can also be disabled using the imageSmoothingEnabled = true on the contxt.. just 2 cents. –  Nov 12 '14 at 21:11
  • Thanks for the advice :) I'm drawing all images at their original scale, but I've not heard about imageSmoothingEnabled before. – James Hill Nov 12 '14 at 21:17
  • ops, should be set to false of course.. it helps on performance sacrificing some quality though (some browsers may need a prefix as well). Won't have much effect if there is no scaling taking place. I don't think it will matter much here :-/ –  Nov 12 '14 at 21:20

1 Answers1

1

Try a minimal project, like the project templates provided with most engines. Or just draw a sprite and nothing else. If this shows the same behavior, you can't do anything about it. It might also be an engine, driver or browser bug.

You have to consider that in Windows desktop the GPU typically is on idle and does minimal work to draw stuff. Even in a 2D game however all shader units etc run at full speed to provide the best possible performance. Only the latest models & drivers (hey, try a driver update!) allow the GPU to throttle in games when it determines that the game doesn't require the full performance to run at 60 fps. So even if it's a simple 2D game the GPU might still fire up because it enters "reroute all power to the shaders" mode.

Also note that 2D games are all essentially 3D games but with a fixed or orthographic projection. From the perspective of the GPU a 2D game is just another 3D game, it just so happens that the world is only translated along two axis at most.

CodeSmile
  • 64,284
  • 20
  • 132
  • 217
  • Thanks! I have just such a minimal project ready to go, it's a test I made for the module pattern I was planning to use for the main game. I'll test it, maybe some other canvas games online, to see if they produce the same result. – James Hill Nov 12 '14 at 21:43
  • I've tried out my test game, along with a couple of online canvas demo games, and they all show the same issue, pushing the GPU temperature up. It seems there isn't a reasonable way to avoid this for now. – James Hill Nov 12 '14 at 21:54
  • You could also try it with a different engine, say a desktop 2d engine (löve, xna, monogame). It'll probably do the same thing. – CodeSmile Nov 13 '14 at 01:29