视网膜Macbook Pro的WebGL性能问题 [英] WebGL performance issues with retina Macbook Pro

问题描述

我正在开发一个WebGL应用程序，而且我遇到了Retina Display Macbook Pros的一些非常严重的性能问题。我正在测试带有Intel Iris Pro GPU的15英寸Macbook，以全分辨率渲染，这使我的画布分辨率为3810x2030，带有全屏Chrome窗口。我的应用程序每帧渲染大约10万个顶点。

I have a WebGL application that I am developing and I have run up against some pretty serious performance concerns with Retina Display Macbook Pros. I am testing on a 15 inch Macbook with Intel Iris Pro GPU, rendering at full resolution, which gives me a canvas resolution of 3810x2030 with a full screen Chrome window. My application renders about 100k vertices per frame.

现在，当我将应用程序设置为以1的设备像素比率运行（意味着没有视网膜缩放）时，应用程序的性能稳定，永远不会低于60 fps，但图像质量是不可接受的。当我切换到视网膜的设备像素比率为2时，图像质量显着提高，但我的帧速率急剧下降到20-30 fps左右。

Now, when I set the application to run with a device pixel ratio of 1 (meaning no retina scaling), the performance of the application is solid, never falls below 60 fps, but the image quality is unacceptable. When I switch to the retina's device pixel ratio which is 2, the image quality dramatically improves, but my framerate plummets to around 20-30 fps.

现在，我对GPU编程并不陌生，所以发生这种情况的原因对我来说是显而易见的。我想知道的是，有没有人找到任何变通方法或方法来优化WebGL绘图用于超高分辨率显示器与像视网膜Macbook Pro一样糟糕的GPU？是否有任何非显而易见的提示或技巧通过反复试验找到解决此问题或至少使其稍微好一些？

Now, I'm no stranger to GPU programming, so the reasons why this is happening are obvious to me. What I am wondering is, has anyone out there found any workarounds or ways to optimize WebGL drawing for ultra high resolution displays with bad GPUs like the retina Macbook Pro? Are there any non-obvious tips or tricks people have found through trial and error to resolve this issue or at least make it slightly better?

任何帮助将不胜感激。谢谢。

Any help would be appreciated. Thanks.

编辑：带有趣发现的小更新。我把我的浏览器窗口放到连接到Macbook的外部显示器上，当在DPR为1的情况下进行渲染时，外部显示器上的性能甚至高于Macbook上的性能，即使分辨率完全相同，图像也是如此质量要好得多。

Small update with an interesting discovery. I put my browser window into an external display hooked up to the Macbook, and when rendering at a DPR of 1, the performance is even higher on the external display than it is on the macbook, even with the exact same resolution, and the image quality is much better.

所以即使你在Macbook Pro上渲染一个缩小尺寸的帧缓冲区，它仍然可以扩展它，这可能是导致图像质量不佳的原因（它正在扩展它使用双线性过滤，使其比原始图像显示不受影响时更模糊。）

So even when you render a downscaled framebuffer on a Macbook Pro, it still scales it up, which is likely what is causing the poor image quality (it is scaling it up using bilinear filtering, making it more blurry than it would be if the original image were displayed unaffected).

推荐答案

只是想给对所有关注这篇文章的人的更新有些结束。通过简单地设置canvas选项antialias：false，我能够使我的应用程序运行超过45 FPS。这在高密度显示器上获得了巨大的性能提升，并且由于高密度显示器提供大量内置抗锯齿，因此不是必需的。希望这对未来的其他人有所帮助。

Just want to give an update to all those who followed this post some closure. I was able to get my application running above 45 FPS by simply setting the canvas option "antialias: false". This gave a huge performance gain on high density displays, and isn't necessary since high density displays provide a large amount of built-in antialiasing. Hope this helps someone else in the future.

这篇关于视网膜Macbook Pro的WebGL性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！