【发布时间】:2014-11-12 20:13:52
【问题描述】:
几个月来我一直在使用 HTML5 画布开发游戏,最近我开始在 macbook 上进行一些开发工作。尽管平滑的帧速率约为 60fps,但几秒钟后,游戏将 macbook GPU 推高到 80 摄氏度以上。我还在我的台式机(具有 radeon 7870 显卡)上注意到,过了一会儿GPU 温度升高,风扇启动。
考虑到它是一款 2D 游戏,没有任何特别花哨的效果或过多的内容,以合理的分辨率运行,这似乎表明存在一个主要的性能问题,因为 GPU 的负担似乎很大。我已经实现了许多我见过的推荐的性能优化(在整数坐标处渲染,无阴影,离屏预渲染)。分析游戏显示到目前为止,drawImage 调用消耗的时间最多,但如果这是导致发热问题的原因,我预计会出现帧率下降和/或其他性能滞后的迹象 - 但帧率在macbook,没有任何延迟。
为了尝试解决这个问题,我最近将游戏拆分为多个图层并使用预渲染来避免不必要的图层重绘,但这实际上使帧速率明显变差,并且根本没有解决散热问题.在这一点上,我想知道我所做的任何其他优化是否会产生任何影响(例如,避免不必要的 fillStyle 更改),或者我是否会浪费我的时间?
如果有人能提供建议或阐明此问题的根源,我将不胜感激。一个相对基本的 2D 游戏不应该导致这种程度的 GPU 发热,我理想情况下需要它可以在笔记本电脑和低端设备上玩,最好不要着火:)
【问题讨论】:
-
哪个浏览器?我最近注意到 Chrome canary 的类似行为,但在 FF 中运行时没有。可能只是一个错误。
-
是的,它是 Chrome(最新),不过这个问题已经存在了很长一段时间。让我在 Firefox 中快速测试一下。
-
Firefox 也有同样的问题 :(
-
嗯,好的。在那种情况下有点复杂..您是否运行分析以查看代码的哪一部分最昂贵?如果您可以共享一些代码作为小提琴或内联代码,那就太好了。
-
这是我台式机上 Chrome 的快速配置文件,我也会在 macbook 上运行一个:imgur.com/os8UBie
标签: html canvas html5-canvas rendering game-engine