optimization - WebGL 绘图调用真的非常慢吗？

Question

我有一段时间没有使用桌面 OpenGL，但 WebGL 似乎真的很慢。
只需几百个相对简单的绘图调用，FPS 就会失败。

我认为，我的代码已经尽可能地优化了。
它渲染模型，其中每个模型由网格+ Material 的批处理组成，并且每个批处理都使用实例渲染进行渲染，以便渲染模型的所有实例，每个实例都有自己的每个实例数据，如转换等。

有什么我想念的吗？

附带说明一下，正如预期的那样，实例渲染的正常渲染速度较慢，但​​数百次调用仍会破坏帧速率。

Answer 1

比什么慢？ Unity 和 Unreal 都导出到 WebGL 并获得了合理的速度。我以 60fps on this demo 收到 6000 多个绘图调用在我 2015 年初在 Chrome 中以集成显卡模式运行的 MBP 上(ATM 懒得切换到更快的独立显卡)。我将其设置为 4000 条鱼，然后将其粘贴到 JavaScript 控制台 g_fishTable[0].num[8] = 6000 .即使将它带到 16000 个绘图调用，我仍然获得 43fps。

你有可能产生垃圾吗？举个例子

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

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

同样，您是每帧制作新矩阵还是重复使用旧矩阵以确保不会产生垃圾。

类型数组也应该比标准的 JavaScript 数组更快

换句话说

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

对比

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

创建它们可能会也可能不会更快，但这无关紧要，因为您应该在初始化时而不是渲染时创建它们。尽管在几乎所有情况下，使用 typedarrays AFAIK 都会更快。

也许你应该检查 JavaScript profiler .