Optimization WebGL draw调用真的很慢吗？

我已经有一段时间没有使用桌面OpenGL了，但是WebGL看起来非常慢。 只需要几百个相对简单的draw调用，FPS就可以进入垃圾堆

我认为我的代码已经尽可能地优化了。 它渲染模型，其中每个模型由网格+材质的批次组成，每个批次使用实例渲染进行渲染，以便渲染模型的所有实例，每个实例使用其自身的每个实例数据（如变换等）

我有什么遗漏吗

---

顺便说一句，正常渲染比实例化渲染慢，正如预期的那样，但是几百次调用仍然会破坏帧速率。

比什么慢？Unity和Unreal都可以导出到WebGL，并且速度也相当快。我在Chrome上以集成图形模式（ATM太懒，无法切换到速度更快的离散模式）运行，在2015年初的MBP上，我以60fps的速度收到6000多个draw呼叫。我将其设置为4000 fish，然后将其粘贴到JavaScript控制台

g_fishTable[0].num[8]=6000

。即使是16000次抽签，我仍然能得到43帧

有可能是你在制造垃圾吗？例如

 gl.uniform4fv(someLocation, [1, 2, 3, 4]);  // Generates garbage

该行每次都可能创建一个新数组

类似地，您每帧都要创建新矩阵，或者重复使用旧矩阵以确保不会生成垃圾

此外，类型数组应该比标准JavaScript数组快

换句话说

var vector = [0, 0, 0, 0];   // slow

vs

创建它们可能会更快，也可能不会更快，但这并不重要，因为您应该在初始时间而不是渲染时间创建它们。尽管typedarrays在几乎所有情况下的使用速度都会更快

---

也许您应该检查一下。

WebGL draw调用的开销要比桌面OpenGL调用的开销大得多，但是您应该能够以60fps的速度完成几千次（考虑到微不足道的情况）。就目前而言，你的问题相当笼统。如果性能分析不能为您提供更多帮助，您可能应该隔离特定的测试用例并寻求帮助。您确定您的浏览器正在使用硬件加速吗？这个问题很一般，因为没有任何特定的内容。我的着色器非常简单（基本上通过顶点着色器上的世界到NDC转换），模型在静态缓冲区中可能有几百个三角形，几乎没有任何用于绘制调用的GL设置…我真的不明白它为什么这么慢。这是一个太普通的问题。请提供示例代码：-）@user2503048您可以将此标记为已回答，或通过发布您的发现自行回答吗？谢谢。我在GTX860M笔记本电脑GPU上获得了几乎相同的性能：6200fish下的稳定60fps。这很奇怪。我在Chrome上的速度达到了40FPs，有250条鱼，高清7950。关于我的代码-不，没有生成垃圾（堆分配小于100字节，可能是局部变量？），所有东西都使用类型化数组，等等。我刚刚测试了渲染一个金字塔（作为一个具有3个堆栈/切片的球体），在3000次绘制时，在没有其他代码执行的情况下，它会下降到40FPS。然而，我在探查器中看到了一些奇怪的东西，我已经有一段时间没有检查过了——我没有说我正在调用WebGLRenderingContext.DrumElements，或者其他什么，它属于某个“glp”对象。哎呀，我打开了WebGL Insight，这就是glp。除此之外，在Insight关闭的情况下，性能也大致相同。唯一的区别是CPU端（也称为profiler）现在几乎没有任何使用率，约为5-7%，但FPS仍在40-45左右。@user2503048“我在Chrome上使用250条鱼，使用HD7950，可以达到40FPs”你确定你是GPU加速的吗，检查

about://gpu

在英特尔HD 4000上，我有一个稳定的每秒30帧的4000条鱼……更新了我的驱动程序。现在1000条鱼的速度是60帧/秒，但2000条鱼的速度下降到35帧/秒。我的GPU怎么可能比集成GPU慢？是的，WebGL是硬件加速的。我不明白。

var vector = new Float32Array(4);  // fast