如何选择性能最高的渲染器、Canvas 或 WebGL答案

【问题标题】：How to choose most performant renderer, Canvas or WebGL如何选择性能最高的渲染器、Canvas 或 WebGL
【发布时间】：2015-11-30 16:08:46
【问题描述】：

我正在使用PIXI.js 为桌面设备开发一款游戏。 PIXI 提供了 WebGL 和 Canvas 渲染器，我们将在设备支持的任何地方使用 WebGL。

我的问题是，一些低端设备在技术上支持 WebGL，虽然它运行得不是很好，因为 GPU 很慢。在某些情况下，Canvas 渲染的性能会更好。

如何在运行时决定使用哪个渲染器？

也许 WebGL 上下文包含一些有用的信息。

【问题讨论】：

【解决方案1】：

官方方法是在上下文创建时使用failIfMajorPerformanceCaveat 标志。这是规范的链接，解释了它应该如何工作： https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.2.1

它在 Chrome 上得到了一段时间的支持（我认为是从 2013 年开始），所以它可能会很好地排除一些“缓慢”的实现。

坏消息是，截至编写 PixiJS 时，似乎仍然无法将任意参数传递给 WebGL 上下文创建。我还没有重新检查，但是关于这个的问题还没有正式关闭： https://github.com/pixijs/pixi.js/issues/1738

因此，您将不得不劫持 PixiJS 代码或手动创建 Web 上下文。

当然，并不是每个浏览器都支持这个相对较新的标志。

如果稳定性比性能更重要，另一种选择是在正式引入 Chrome Web View 的 4.4 之前为原生 Android 浏览器完全禁用 WebGL。这将排除旧的自定义 WebGL 实现（例如 Sony xperia one）。

我个人不太愿意在应用一开始做压力测试来选择渲染实现。性能上的小故障/尖峰可能会导致在非常好的硬件上切换到画布。但是如果你想走这条路，这里有一个关于在 PIXI 中实现它的讨论： http://www.html5gamedevs.com/topic/1733-detect-performance-issues-to-display-a-message/

【讨论】：