javascript - 视网膜 Macbook Pro 的 WebGL 性能问题

标签 javascript webgl

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

现在,当我将应用程序设置为以设备像素比 1(意味着没有视网膜缩放)运行时,应用程序的性能很稳定,永远不会低于 60 fps,但图像质量 Not Acceptable 。当我切换到视网膜设备像素比为 2 时,图像质量显着提高,但我的帧速率骤降至 20-30 fps 左右。

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

如有任何帮助,我们将不胜感激。谢谢。

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

因此,即使您在 Macbook Pro 上渲染缩小的帧缓冲区,它仍然会将其放大,这可能是导致图像质量较差的原因(它使用双线性过滤对其进行放大,使其比实际情况更加模糊)如果原始图像显示不受影响)。

最佳答案

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

关于javascript - 视网膜 Macbook Pro 的 WebGL 性能问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30261999/

相关文章:

JavaScript - Date()、new Date() 和 ISODate 之间的区别

c++ - 隧道着色器(从 WebGL 转换为 OpenGL)- 纹理坐标不匹配?

javascript - webgl 着色器 - 划分 channel rgba

javascript - 当购物车中已存在 id 时,Vue.js 购物车数量增加

javascript - 为什么我用php生成的图像只生成一次,由jquery调用

javascript - WebGL GLSL 片段着色器不适用于 iOS

html - 如何将像素着色器应用于 Canvas 元素?

graphics - 绘制像素化的纹理

javascript - jQuery 单击选择器不工作

javascript - 3 态 CSS 拨动开关