视网膜 Macbook Pro 的 WebGL 性能问题
WebGL performance issues with retina Macbook Pro
我有一个正在开发的 WebGL 应用程序，我 运行 遇到了 Retina Display Macbook Pro 的一些非常严重的性能问题。我正在一台配备 Intel Iris Pro GPU 的 15 英寸 Macbook 上进行测试，以全分辨率渲染，这为我提供了 canvas 3810x2030 的全屏分辨率 Chrome window。我的应用程序每帧渲染大约 100k 个顶点。
现在，当我将应用程序设置为 运行 且设备像素比为 1（意味着无视网膜缩放）时，应用程序的性能稳定，从不低于 60 fps，但图像质量是不可接受的。当我切换到视网膜的设备像素比为 2 时，图像质量显着提高，但我的帧率骤降至 20-30 fps 左右。
现在，我对 GPU 编程并不陌生，所以发生这种情况的原因对我来说是显而易见的。我想知道的是，有没有人找到任何解决方法或方法来优化 WebGL 绘图，以用于具有不良 GPU（如视网膜 Macbook Pro）的超高分辨率显示器？人们是否通过反复试验发现了任何不明显的提示或技巧来解决此问题或至少使它稍微好一点？
如有任何帮助，我们将不胜感激。谢谢。
编辑：小更新有一个有趣的发现。我将我的浏览器 window 放入连接到 Macbook 的外部显示器中，当以 DPR 为 1 渲染时，即使分辨率完全相同，外部显示器上的性能甚至比在 Macbook 上更高, 并且图像质量要好得多。
因此，即使您在 Macbook Pro 上渲染缩小的帧缓冲区，它仍然会按比例放大，这很可能是导致图像质量差的原因（它使用双线性过滤按比例放大，使其比原来更模糊）如果原始图像显示不受影响）。
在 Mac OSx 上的 Chrome 中有些东西没有硬件加速。
看看这个URL:
chrome://gpu/
如果您发现某些内容被禁用，您可以使用以下方式对其进行调整：
chrome://flags/
不利的一面是，即使您找到了有用的东西，它也不是完全可以部署的。它可能会让您深入了解瓶颈所在。
（这里是完整的 URL 列表，可以让您到达 chrome 中的隐藏和特殊位置：chrome://chrome-urls/）
只想向所有关注此 post 的人提供更新。通过简单地设置 canvas 选项 "antialias: false"，我能够使我的应用程序 运行 超过 45 FPS。这在高密度显示器上带来了巨大的性能提升，并且没有必要，因为高密度显示器提供了大量的内置抗锯齿。希望这对以后的其他人有所帮助。
我遇到了同样的问题。有帮助的渲染器选项是 renderer.setPixelRatio (1); Fps 在 Macbook Pro 上从 40 变为 60。三个 js R86
我有一个正在开发的 WebGL 应用程序，我 运行 遇到了 Retina Display Macbook Pro 的一些非常严重的性能问题。我正在一台配备 Intel Iris Pro GPU 的 15 英寸 Macbook 上进行测试，以全分辨率渲染，这为我提供了 canvas 3810x2030 的全屏分辨率 Chrome window。我的应用程序每帧渲染大约 100k 个顶点。
现在，当我将应用程序设置为 运行 且设备像素比为 1（意味着无视网膜缩放）时，应用程序的性能稳定，从不低于 60 fps，但图像质量是不可接受的。当我切换到视网膜的设备像素比为 2 时，图像质量显着提高，但我的帧率骤降至 20-30 fps 左右。
现在，我对 GPU 编程并不陌生，所以发生这种情况的原因对我来说是显而易见的。我想知道的是，有没有人找到任何解决方法或方法来优化 WebGL 绘图，以用于具有不良 GPU（如视网膜 Macbook Pro）的超高分辨率显示器？人们是否通过反复试验发现了任何不明显的提示或技巧来解决此问题或至少使它稍微好一点？
如有任何帮助，我们将不胜感激。谢谢。
编辑：小更新有一个有趣的发现。我将我的浏览器 window 放入连接到 Macbook 的外部显示器中，当以 DPR 为 1 渲染时，即使分辨率完全相同，外部显示器上的性能甚至比在 Macbook 上更高, 并且图像质量要好得多。
因此，即使您在 Macbook Pro 上渲染缩小的帧缓冲区，它仍然会按比例放大，这很可能是导致图像质量差的原因（它使用双线性过滤按比例放大，使其比原来更模糊）如果原始图像显示不受影响）。
在 Mac OSx 上的 Chrome 中有些东西没有硬件加速。
看看这个URL:
chrome://gpu/
如果您发现某些内容被禁用，您可以使用以下方式对其进行调整：
chrome://flags/
不利的一面是，即使您找到了有用的东西，它也不是完全可以部署的。它可能会让您深入了解瓶颈所在。
（这里是完整的 URL 列表，可以让您到达 chrome 中的隐藏和特殊位置：chrome://chrome-urls/）
只想向所有关注此 post 的人提供更新。通过简单地设置 canvas 选项 "antialias: false"，我能够使我的应用程序 运行 超过 45 FPS。这在高密度显示器上带来了巨大的性能提升，并且没有必要，因为高密度显示器提供了大量的内置抗锯齿。希望这对以后的其他人有所帮助。
我遇到了同样的问题。有帮助的渲染器选项是 renderer.setPixelRatio (1); Fps 在 Macbook Pro 上从 40 变为 60。三个 js R86