Javascript 或 webgl 性能限制

Question

关闭。这个问题是 opinion-based 。目前不接受答案。

---

想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 .

已关闭 9 年前。

Improve this question

我正在探索一个问题，即考虑到需要在 Javascript 中为每一帧重建整个场景(由于缩放，我们需要丢弃太大的形状，并添加形状)，WebGL 可以对多少(纹理)2D 形状进行动画处理只是放大)。因此，最初的想法是保持相机固定，并仅通过操纵形状来实现缩放、平移、移动。

我们希望达到 1.000 个(更好 10.000 个)中等复杂的形状:2D，无斜 Angular ，但带有圆 Angular 、圆形、框架和文本。 (我们计划通过每个字母两个纹理三 Angular 形来制作文本 - tetxure atlas，我听说它被称为。)更糟糕的是，生成的动画也应该可以在平板电脑上使用(不能在手机上使用)。

正如许多示例所示，WebGL 完全能够对生成的三 Angular 形数量进行动画处理。然而，我的印象是 JavaScript 无法以 30 fps 构建包含 10.000 个三 Angular 形的场景。 (估计:1000 个形状中每个形状有 10 个三 Angular 形，这是形状复杂性和形状数量的最低限度。)

我已经看到了关于可以为多少个三 Angular 形设置动画而不会出现卡顿的旁注(e.g., here)，但我想听听您的意见:

能否在桌面 WebGL 实现上平滑地制作 10.000 到 100.000 个三 Angular 形的动画？

添加(回应评论中的问题)

是的，使用 requestAnimationFrame。

计算帧中的缓冲区数组(即渲染期间)。

目前使用drawArrays，每帧一次，据我所知这对性能很重要。

Answer 1

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

JS 没有真正的限制。但是 WebGL (OpenGL ES) 有一个重要的限制:索引数组是 Uint16Array，因此每次绘制不能索引超过 65536 个顶点。但你可以每帧进行多次绘制来解决这个问题。