如何在webgl中批量渲染不同比例的形状?

时间:2014-11-19 01:30:06

标签: javascript performance opengl-es webgl

我试图渲染一堆由两个立方体组成的不同大小的树(一个用于树叶,一个用于树干)。 如果我为每个树创建一个顶点缓冲区,绑定缓冲区,并为每个单独的树调用绘图,程序将会极大地减速。

我遇到了类似的地形问题并解决了如下问题: 在开头生成所有地形,将所有顶点放在一个巨大的位置缓冲区中,并立即发送整个缓冲区。这使得程序运行速度比我单独发送每个三角形地形时的运行速度更快。

然而,这个过程实际上并不适用于树木,因为树木的数量在不断变化(有些树木死亡,有些树木在每个转弯处出生。它们随着年龄的增长而变大,从树苗到一棵巨大的橡树)。 这意味着我必须重新制作每帧的巨大位置缓冲区,这是不切实际的。

有没有办法可以为每棵树使用相同的位置缓冲区,但只是以不同的方式缩放它?也许在着色器中(我对着色器中的代码感到非常困惑)? 如果这样的事情是可能的,它是否也可以用来翻译和旋转相同的形状多次?如果是这样,那么我可以将其应用于我的地形渲染方式,使地形成为可能(如果我现在尝试这样做那么我必须重新制作地形顶点位置缓冲区,每一帧地球正在发生,这是方式太慢了。)

一个限制是我不想使用three.js。我使用three.js重写了我的整个程序,它更慢,更慢,而且更加丑陋,因为我以前使用纹理的方式不能与three.js一起使用。我真的很感激只有基线webgl和javascript的答案,因为它让我对优化我的最终代码有了更多的控制权。

0 个答案:

没有答案