Javascript或webgl性能界限

我正在探索WebGL可以制作多少（纹理化的）2D形状动画的问题，因为需要用Javascript为每一帧重建整个场景（由于缩放，我们需要放弃变得太大的形状，并添加刚刚放大的形状）。因此，最初的想法是保持相机固定，并仅通过操纵形状来实现缩放、平移和移动

我们希望增加到1.000（更好的10.000）中等复杂的形状：2D，没有斜面，但有圆角、圆、框架和文本。（我们计划每个字母用两个有纹理的三角形来制作文本——我听说叫tetxure atlas。）更糟糕的是，生成的动画应该也可以在平板电脑上使用（没有手机）

正如许多示例所示，WebGL完全能够为生成的三角形数量设置动画。然而，我的印象是Javascript不能以30fps的速度构建包含10000个三角形的场景。（估计：对于1000个形状，每个形状10个三角形，这是形状复杂度和形状数量的最低界限。）

我已经看到了关于有多少三角形可以不结巴地动画的旁白（），但我想听听你的意见：

在桌面WebGL实现中，10.000到10.000个三角形是否可以平滑地设置动画

补充（针对评论中的问题）

是，使用requestAnimationFrame

以帧为单位计算缓冲区阵列（即，在渲染期间）

---

目前使用DrawArray，每帧一次，正如我所读到的，这对性能很重要

性能完全取决于应用程序的制作方式

---

JS没有真正的限制。但是WebGL（OpenGL ES）有一个重要的限制：索引数组是一个UINT16数组，因此每次绘制的顶点索引不能超过65536个。但是，您可以在每帧中绘制多个图形来解决此问题。

嗯，有一个WebGL扩展（可在我的联想上使用FF和Chrome），它将此限制扩展到65000以上。请参阅webglacademy.com，示例6-Import from Blender，如果我计算正确，它的特点是一条有300000个顶点的龙。神奇之处在于'var EXT=GL.getExtension（“OES_元素_索引_单元”）| GL.getExtension（“MOZ_OES_元素_索引_单元”）| GL.getExtension（“WEBKIT_OES_元素_索引_单元”）|我不知道那件事。它对平板电脑有效吗？FPS将完全取决于您的代码。您正在使用requestAnimationFrame吗？在哪里计算缓冲区阵列（在帧中还是在工作区中？）？每帧调用drawElements/drawArrays的次数是多少？一些发现（在关闭之前：-）如果你对缓冲和Javascript性能很在行，那么一切都很好：（1）不要使用类型化数组。使用预先分配的本机数组：写入现有数组（数组[i]=..）比将项推送到数组快。（2） （很明显，我想）我对位置、颜色、纹理、纹理坐标使用不同的缓冲区，只有位置经常变化。仅将更改后的缓冲区传递给WebGL。有了这些，我可以为大约250000个彩色纹理顶点（笔记本电脑上的Chrome和FF）获得30fps的速度。这就足够了。谢谢你的耐心。