Graphics 在WebGL中设置大量线条的动画

我正在尝试以1280x720，60 fps，抗锯齿的速度为这个场景设置动画。有大约500K个三角形，每个树枝两个。我不能使用总帐行，因为

为了大致了解我预期的性能，我使用1M的随机三角形进行了此测试：

三角形
html，正文{
背景：#000；
身高：100%；
保证金：0；
}
帆布{
宽度：1280px；
高度：720px；
位置：绝对位置；
保证金：自动；
排名：0；
右：0；
左：0；
底部：0；
}
"严格使用",；
常数三角形计数=1e6；
const antialias=true；
const generateTriangs=（计数、宽度、高度）=>{
const coords=new Float32Array（9*count）；
对于（变量i=0；i{
请求动画帧（渲染）；
gl.uniform1f（uWobble，数学sin（0.002*时间戳））；
gl.DrawArray（gl.TRIANGLES，0，顶点.length/3）；
};
window.requestAnimationFrame（渲染）；

---

在Iris1536MB的Macbook上，我每秒有12帧。是否有我遗漏的任何优化，例如画线的替代方法、更快的抗锯齿、一些神奇的标志？或者这基本上是一个普通GPU的极限吗？

您可以尝试使用drawElements而不是DrawArray。如果你是顶点绑定的，应该会有相当大的帮助。我不确定我是否会将Intel Iris IGP称为平均GPU，但如果你向它扔1M三角形，这就是你所能期望的。@WacławJasper使用indexbuffer在带宽绑定时会有帮助，而不是顶点绑定。@LJᛃ 它可以加快顶点处理速度，因为没有重复。“每次调用绘制过多实际上对性能有害”证明？