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

标签 javascript canvas webgl pixi.js

我正在用 PIXI.js 开发游戏对于桌面设备。 PIXI 同时提供 WebGL 和 Canvas 渲染器,我们将在设备支持的任何地方使用 WebGL。

我的问题是一些低端设备在技术上支持 WebGL,尽管它运行不佳,因为 GPU 速度较慢。在某些情况下,Canvas 渲染会表现得更好。

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

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

最佳答案

官方方法是在上下文创建时使用 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 上下文。

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

如果稳定性比性能更重要,一个额外的选择是在 4.4 之前为原生 Android 浏览器完全禁用 WebGL,其中正式引入了 Chrome Web View。这将排除旧的自定义 WebGL 实现(例如 Sony xperia one)。

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

关于javascript - 如何选择性能最高的渲染器、Canvas 或 WebGL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32399082/

相关文章:

JavaScript:有没有更好的方法来做一个带有回调函数的for循环?

javascript - Python pretty-print 库

javascript - Canvas 鼠标点击、偏移和父节点

delphi - 如何绘制图像的一部分?

javascript - 在 iOS 10 上,GLTF-WebGL 应用程序崩溃,应用程序是使用 WKWebView 构建的

javascript - 是否没有内置的 msbuild 任务来连接和选择性地缩小多个 js 文件?

javascript - setstate - 动态键值 - 覆盖而不合并状态

javascript - 使用 JavaScript 调整图像大小以在 Canvas 中使用 createPattern

具有多个渲染目标的 WebGL readPixels

javascript - 着色器编译错误