WebBook在MacBook Pro上具有> 65k顶点网格的性能问题

Question

以下型号在几台低端机器上表现良好：

http://examples.x3dom.org/example/x3dom_sofaGirl.html

然而，在配备Nvidia GT 650m的MacBook Pro上，帧率非常低。我认为这是因为MacBook没有OES_element_index_uint扩展名，但如果我这样做，扩展程序会出现：

document.createElement("canvas").getContext("experimental-webgl").getSupportedExtensions();

重构65K以下的网格解决了这个问题。没有重组，有没有办法取得好成绩呢？

我安装了一个应用程序（gfxCardStatus），该应用程序禁用了GT 650m并仅强制使用集成显卡。现在，一切正常。这是驱动程序错误吗？

我发现另一个3D场景在专用GPU上比在集成GPU上运行得更快：

http://examples.x3dom.org/binaryGeo/oilrig_demo/index.html

我认为这是因为它包含许多小网格。此外，当我运行这个场景时，我可以听到GPU风扇旋转。它没有沙发女孩的场景。

Answer 1

首先，WebGL不限于每次绘制调用65k个顶点。 gl.drawElements有64k的限制，但有一个扩展可以删除该限制。 gl.drawArrays没有这样的限制。

我不知道为什么它很慢但看WebGL Inspector X3DOM中的一个框架正在使用gl.drawArrays

我又挖了一点。我尝试使用Web Tracing Framework以及Chrome浏览器的分析器。它显示了gl.readPixels花费了大量时间。

要查看是否存在问题，我打开了JavaScript控制台并将gl.readPixels替换为像这样的无操作

在JavaScript控制台中：

// find the canvas
c = document.getElementsByTagName("canvas")[0]

// get the webgl context for that canvas
gl = c.getContext("webgl")

// replace readPixels with a no-op
gl.readPixels = function(x, y, w, h, f, t, b) { 
  var s = w * h * 4; 
  for (var ii = 0; ii < s; ++ii) {
    b[ii] = 0;
  }
};

删除了readPixels在个人资料中显示

但是样本没有更快地运行。

接下来，我试图通过黑客攻击drawArrays来减少吸引力。

在JavaScript控制台中：

// save off the original drawArrays so we can call it
window.origDrawArrays = gl.drawArrays.bind(gl)

// patch in our own that draws less
gl.drawArrays = function(t, o, c) { window.origDrawArrays(t, o, 50000); }

你知道什么，现在它运行得非常快。嗯。也许这是一个驱动程序错误。它被要求绘制1070706个顶点，但对于NVidia GT 650m来说这似乎不是很大的数字

---

所以，我不知道为什么，但我想调查这个问题。我写了一个本机应用程序来显示相同​​的数据。它容易以60fps运行。我在OPGL中检查了集成图形，就像OP所说的那样。也容易60fps。 NVidia 650GT的速度约为1fps。

我还检查了Safari和Firefox。他们也很慢。常见的是ANGLE。他们都使用ANGLE来重写着色器。也许那里存在一个问题，因为同样的着色器在我的原生测试中运行良好。当然，Native测试并没有像WebGL那样完成同样的事情，但它仍然不仅仅是它绘制了1M多边形。

所以我提交了一个错误： https://code.google.com/p/chromium/issues/detail?id=437150