在Three.js中使用精灵或BufferedGeometry更高效吗？

Question

我正在重写几年前使用旧版Three.js构建的旧版可视化。可视化是在屏幕上绘制的~20k 2D圆圈（来自图形的节点），其中已经确定了位置和着色。

除了发生交互（缩放，点击等）之外，不涉及任何动画。前一作者使用精灵为圆（节点）显示不同的状态（节点选择：发光效果，节点隐藏：透明等）

我已经能够使用CircleBufferGeometry而不是精灵成功地重现大部分可视化。

我知道这个问题可能过于含糊，因为它可能对我的用例过于具体，但我想知道是否有人能够了解渲染~20k精灵或~20k {{1与Three.js / webgl。

谢谢！

Answer 1

CircleBufferGeometry每个实体的顶点比精灵更多，因为精灵应该用gl.POINTS绘制（一个点==一个顶点）。您的顶点着色器将使用圆圈处理比使用精灵更多的顶点。