视网膜 Macbook Pro 的 WebGL 性能问题答案

【问题标题】：WebGL performance issues with retina Macbook Pro视网膜 Macbook Pro 的 WebGL 性能问题
【发布时间】：2015-07-27 12:36:43
【问题描述】：

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

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

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

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

编辑：带有有趣发现的小更新。我将浏览器窗口放入连接到 Macbook 的外部显示器中，当以 1 的 DPR 进行渲染时，外部显示器上的性能甚至比 macbook 上的性能更高，即使分辨率完全相同，图像质量要好得多。

因此，即使您在 Macbook Pro 上渲染缩小的帧缓冲区，它仍然会放大，这可能是导致图像质量不佳的原因（它使用双线性过滤放大，使其比实际更模糊如果原始图像显示不受影响）。

【问题讨论】：

如果您有能力选择 DPI，您是否尝试过将其保持在 1 但使用两倍大的纹理，并缩小它们？
问题是如果最终的帧缓冲区没有设置为视网膜显示器的最大分辨率，它仍然看起来像垃圾。视网膜显示非常有趣：当您以预期的分辨率渲染时，它看起来很棒，但如果您以低于该分辨率的分辨率渲染，它看起来就像完全垃圾。
可能是您遇到了（人为的）驱动程序分辨率限制。一个疯狂的尝试是在 2x2 表中运行 4 个 webgl 上下文，并使用调整后的相机渲染给每个上下文。这会给你 4 倍的 api 开销，但可能会跳过一些愚蠢的限制？
这里有一篇好文章如何处理这样的问题：khronos.org/webgl/wiki/HandlingHighDPI
这听起来可能不直观，而且确实有点不了解，但你描述的问题让我想起了我在使用 Java 2d API 时遇到的问题。我通过将渲染过采样到 2 倍像素然后缩放到目标分辨率来克服这个问题。我得到了我想要的性能、图像质量和分辨率，但我没有考虑帧速率，也没有渲染顶点。您的“放大”图像质量问题让我想起了这一点。

标签： javascript webgl

【解决方案1】：

Mac OSx 上的 Chrome 中的某些功能没有硬件加速。

看看这个网址：

chrome://gpu/

如果您发现某些内容被禁用，您可以使用以下方法进行调整：

chrome://flags/

不利的一面是，如果您找到了可行的东西，它就不是完全可部署的。不过，它可能会让您深入了解瓶颈所在。

（这里是 url 的完整列表，可以让你在 chrome 中找到隐藏和特殊的地方：chrome://chrome-urls/）

【讨论】：

一个有用的想法，但它并没有真正的帮助。我已经知道我的应用程序的瓶颈是片段着色器。减少对片段着色器的调用的唯一方法是减少我的顶点数，这对我来说不是一个好选择。不过感谢您的努力！

【解决方案2】：

只是想给所有关注这篇文章的人一些更新。通过简单地设置画布选项“antialias：false”，我能够让我的应用程序运行在 45 FPS 以上。这在高密度显示器上带来了巨大的性能提升，并且不是必需的，因为高密度显示器提供了大量的内置抗锯齿功能。希望这对将来的其他人有所帮助。

【讨论】：

我遇到了同样的问题，我得到了和你一样的解决方案。如果我早点阅读您的答案，我不会花太多时间来找到正确的答案。

【解决方案3】：

我遇到了同样的问题。有帮助的渲染器选项是 renderer.setPixelRatio (1); Macbook Pro 上的 Fps 从 40 到 60。三个js R86

【讨论】：