Performance 为什么WebGL全屏帧速率下降？

我正在渲染一个有点复杂的WebGL场景。当我在MacBook Pro的内置显示屏上全屏观看场景时，它以每秒60帧的速度平滑渲染。当我在外置显示器上全屏观看场景时，帧速率大幅下降，变得非常不稳定

我的显示器本机分辨率为4K，运行频率为60Hz。我的iGPU是Iris Plus 640。我使用DPI缩放，Chrome检测到分辨率为2560x1440，像素比为2。我将画布大小设置为1280x720，这是静态的，与它的表示大小无关。我使用CSS将其放大到全屏，纵横比为16:9，使用以下规则：

画布{
宽度：100vw；
身高：56.25vw；
最大宽度：177.78vh；
最大高度：100vh；
保证金：自动；
位置：绝对位置；
顶部：0；底部：0；
左：0；右：0；
-ms插值方式：最近邻；
图像渲染：清晰的边缘；
图像渲染：像素化；
}

我正在设置

图像渲染：像素化

，因为我注意到了性能和视觉上的一点改进。我的理解是渲染的最后一步是将帧缓冲区复制到可见画布。如果画布较大，则会在像素之间进行插值，这会产生成本。设置“像素化”有点像使用最近的过滤，因此速度更快

当我创建WebGL上下文时，我禁用了我不需要的东西：

canvas.getContext（'webgl'{
阿尔法：错，
深度：假，
模板：假，
反别名：假，
powerPreference:“高性能”，
});

我已经采纳了大部分建议。我正在使用纹理图集的实例，我尝试最小化状态变化。属性0已启用，等等

我不认为问题出在我的着色器中，因为我正在以1280x720的固定大小进行渲染。因此，如果我有太多的透支，例如，这不应该也影响性能在较小的画布大小（如在我的MacBookPro的显示器）

我真的不知道还能尝试什么。我浏览过网络，尝试过很多方法，比如使用CSS转换来缩放画布，而不是宽度/高度。我已尝试设置

zoom

属性。我还花了一段时间浏览了Chrome中的性能选项卡，并（尝试）浏览了

关于：跟踪
。我已经看到一些专门关于Chrome的bug报告，但我在Firefox和Safari中都看到了相同的问题。我是否已经达到了WebGL画布可以有多大的极限（对于我的GPU）

我肯定我看过其他的WebGL演示，都是高比例的全屏，所以我真的很困惑。发生了什么事？
您的外部显示器是如何连接的？USB-C直接插入显示器背面。这是LG 27UK850。devtools profiler是否报告更长的帧时间？是的：，（可以加载到Chrome中）如果你转到“Apple->关于这款Mac”，然后选择“系统报告”，然后在“图形/显示”下，外部监视器的“连接类型”是什么意思注意：我要走了。显示器通过USB-C电缆至少有5种工作方式。有些人比其他人快。“以固定大小渲染”又意味着什么？对于您的情况，最快的应该是
或同等（宽度：100vw）等。您的外部显示器是如何连接的？USB-C直接插入显示器的背面。这是LG 27UK850。devtools profiler是否报告更长的帧时间？是的：，（可以加载到Chrome中）如果你转到“Apple->关于这款Mac”，然后选择“系统报告”，然后在“图形/显示”下，外部监视器的“连接类型”是什么意思注意：我要走了。显示器通过USB-C电缆至少有5种工作方式。有些人比其他人快。“以固定大小渲染”又意味着什么？对于您的情况，最快的速度应该是
或同等（宽度：100vw）等。。。