WebGL的渲染时间限制 - Internet Explorer的11

Question

我有一个问题，即，有时（在50至100 1）Internet Explorer的会抛出这样的警告，这将导致WebGL的渲染失败，并抛出：

WEBGL11257： WebGL内容在GPU上渲染时间过长。 暂时切换到软件渲染。

我使用Three.js，发生这种情况时会发生什么，因为它假定它使用GPU，所以我的Webgl渲染器上下文将停止工作。然后它会抛出所有WebGL特定功能的错误数量。

这可以通过超过时间限制，这在默认为500ms，做在注册表编辑器，这一变化被固定在我的机器上：https://support.microsoft.com/en-us/help/3099259/update-to-add-a-setting-to-disable-500-msec-time-limit-for-webgl-frame-in-internet-explorer-11

这当然不是一个可持续的解决方案，因为客户端运行IE11或Edge应该不必这样做。我想知道有没有人偶然发现过这个问题，如果有什么关于客户端的？

Answer 1

解决方案是停止渲染，无论渲染耗时过多。在大多数WebGL实现中，每个调用draw函数的时间都是计时的。如果浏览器需要很长时间，则会丢失webgl上下文。

通常需要很长时间的事例。

• 绘制过多家大型三角形/分

  可以绘制几十万，甚至上百万个三角形的，如果他们是一般的小，但画得很大的三角形一样，覆盖整个屏幕，事情会变得太慢快

• 抽签像素具有复杂的片段着色器

  片段着色器在渲染过的每个像素运行。一个1920x1080的屏幕有200多万像素，所以一个运行200万次的慢速片段着色器最终会变得太慢

• 使用随机纹理读取。

  GPU已经过优化，可以直接读取纹理。它假设你是否在纹理中读取了一个纹理，你将读取附近的其他纹理并缓存附近的纹理元素。相反，如果您以半随机顺序读取texels，您将击败缓存并变得非常缓慢。

解决办法

• 如果需要抽签的大事情分散你的绘制调用。

  假设在一次调用中绘制100万个三角形太慢。10平局试图绘制100K调用

• 优化您的片段着色

• 排序和前画不透明的东西来支持

  这是因为GPU可以做的每个像素的深度测试，如果测试失败那么该像素的片段着色器不会运行。

但最终，如果你的抽签一个呼叫正在500毫秒（1/2秒），你不能优化那么你的页面可能真的是令人沮丧的用户。您可以在几个画面上绘制较小的部分，以保持较高的帧速率，以便UX保持响应。

另外一个可能触发相同错误的事情是需要太长时间才能编译的着色器。着色器一旦编译就可以运行得足够快，但编译着色器本身的复杂性（特别是在DirectX上）最终可能会花费超过500毫秒，浏览器将丢失WebGL上下文。例如this very bad shader在我的iPhone上运行，但在Windows上编译时间过长，浏览器丢失WebGL上下文。