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

我试图渲染一组大小不同的树，它们由两个立方体组成，一个是叶子，一个是树干。 如果我为每棵树创建一个顶点缓冲区，绑定缓冲区，并为每棵树调用draw，程序将大大降低速度

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

然而，这一过程并不能真正应用于树木，因为树木的数量在不断变化，每一轮都有一些死亡，一些出生。它们也会随着年龄的增长而变大，从幼树到大橡树。 这意味着我将不得不在每一帧重新制作巨大的位置缓冲区，这是不切实际的

有没有一种方法可以对每棵树使用相同的位置缓冲区，但只是以不同的比例进行缩放？也许在着色器中，我被着色器中的代码搞糊涂了？ 如果这样的事情是可能的，它也可以用来翻译和旋转相同的形状多次？如果是这样，那么我可以将其应用到地形渲染中，使地形形成成为可能如果我现在尝试这样做，那么我必须在地形形成的每一帧重新生成地形顶点位置缓冲区，这太慢了

---

一个限制是我不想使用three.js。我用three.js重写了我的整个程序，速度慢了很多，而且更难看，因为我以前使用纹理的方式无法与three.js一起使用。我真的很希望能有一个只使用基线webgl和javascript的答案，因为它让我能够更好地控制优化最终代码

您需要编写一些内存管理代码。首先，创建一个大缓冲区来存储所有树数据，但对于每棵树，它需要知道自己数据的起始/索引位置以及自己数据的大小。然后，每当需要将更改反映到单个树时，请使用gl.bufferSubData对需要更改的树进行特定更改。第二种解决方案是对树使用一个网格，并通过均匀网格为每棵树发送不同的变换矩阵。