Search code examples
javascriptcsshtmlchromecastgoogle-cast

HTML5 / CSS GPU Performance optimization

I created a card game using HTML/CSS/JS. It moves animates cards around the screen and animates a scoreboard / messageboard.

The performance on my chromecast is terrible though. Sometimes degrading to 4fps :(. When I debug the app it is using 20mb/512mb of the GPU. I'm wondering if there is any way to enable GPU rasterization or any other advanced GPU features, or if anyone has any tips on how to improve performance of the game.

So far I've been removing textures, transparencies, and simplifying animations. I would love to get some advice on how to get more performance out of the chromecast though. I realize that WebGL would probably allow me more use of the GPU but that would be a rewrite of my animation classes.

Solution

  • The trick was to force my javascript animation library to animate my 2d animations as 3d thus making use of the GPU.