Javascript 视网膜Macbook Pro的WebGL性能问题

我有一个正在开发的WebGL应用程序，我遇到了一些关于视网膜显示Macbook Pros的严重性能问题。我正在一台配备Intel Iris Pro GPU的15英寸Macbook上进行测试，以全分辨率进行渲染，这使我的画布分辨率达到3810x2030，并带有全屏Chrome窗口。我的应用程序每帧渲染大约100k个顶点

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

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

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

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

---

因此，即使在Macbook Pro上渲染缩小的帧缓冲区，它仍会放大，这可能是导致图像质量差的原因（它使用双线性过滤放大，使其比原始图像未受影响时更模糊）.

有些东西在MacOSX上的Chrome中不是硬件加速的

请查看此URL：

chrome://gpu/

如果您发现某项功能被禁用，则可以使用以下方法对其进行调整：

chrome://flags/

缺点是，如果您发现一些有效的东西，它就不能完全部署。它可能会让你洞察到你的瓶颈在哪里

---

（以下是让你在chrome中找到隐藏和特殊位置的URL的完整列表：

chrome://chrome-urls/

）

我只想给所有关注这篇文章的人一个最新消息。我可以通过简单地设置canvas选项“antialas:false”使我的应用程序以45 FPS以上的速度运行。这在高密度显示器上带来了巨大的性能提升，但这并不是必需的，因为高密度显示器提供了大量内置抗锯齿功能。希望这对以后的其他人有帮助。

我也有同样的问题。有帮助的渲染器选项是

renderer.setPixelRatio（1）Fps从40增加到60。三个js R86
如果你有能力选择DPI，你是否尝试过将其保持在
1
，但使用两倍大的纹理，并将其缩小？问题是，如果最终帧缓冲区未设置为视网膜显示的最大分辨率，它看起来仍然像垃圾。视网膜显示非常有趣：当你以预期的分辨率进行渲染时，它看起来很神奇，但如果你以低于该分辨率的任何分辨率进行渲染，它看起来就像是完全的垃圾。这可能是因为你遇到了（人为的）驱动分辨率限制。一个疯狂的尝试是在2x2表格中运行4个webgl上下文，并使用调整后的相机渲染每个上下文。这将使您的api开销增加4倍，但可能会跳过一些愚蠢的限制？下面是一篇关于如何处理此类问题的好文章：这听起来可能不直观，而且确实有点信息不足，但您描述的问题让我想起了我在Java 2d api中遇到的一个问题。我通过将渲染过采样到2倍像素，然后缩放到目标分辨率，克服了这一问题。我得到了我想要的性能、图像质量和分辨率，但帧速率对我来说不是一个考虑因素，我也没有渲染顶点。你的“放大”图像质量问题让我想起了这一点。这是一个有用的想法，但实际上没有帮助。我已经知道我的应用程序中的瓶颈是片段着色器。减少对片段着色器调用的唯一方法是减少顶点计数，这对我来说不是一个很好的选择。感谢你的努力！我遇到了同样的问题，我得到了与你相同的解决方案。如果我早点读你的答案，我就不会花那么多时间找到正确的答案了。