【问题标题】:Is it more performant to use a sprite or a BufferedGeometry in Three.js?在 Three.js 中使用精灵或 BufferedGeometry 性能更高吗?
【发布时间】:2017-06-01 07:19:19
【问题描述】:

我正在用旧版本的Three.js 重写几年前构建的旧版可视化。可视化是在屏幕上绘制的约 20k 2D 圆(图表中的节点),其位置和颜色已经确定。

除了发生交互(缩放、点击等)时,不涉及任何动画。前面的作者使用精灵为圆(节点)显示不同的状态(节点选择:发光效果,节点隐藏:透明等)

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

我知道这可能是一个太模糊的问题,因为它可能对我的用例来说太具体了,但我想知道是否有人对渲染 ~20k 精灵或 ~20k CircleBufferGeometry 是否更高效有任何见解使用 Three.js / webgl。

谢谢!

【问题讨论】:

  • 在您的特定用例中尝试每一个,对它们进行基准测试并进行比较。
  • @Adrian 让我们看看这个 stackoverflow 问题的进展情况,然后也许我会的!在我走这条路之前,我希望 Three.js 专家或具有先验知识的人可以帮助我...

标签: javascript 3d three.js


【解决方案1】:

CircleBufferGeometry 每个实体的顶点比精灵要多得多,因为精灵应该用gl.POINTS 绘制(一点 == 一个顶点)。与精灵相比,您的顶点着色器将使用圆处理更多的顶点。

【讨论】:

  • 除此之外,您可以将THREE.BufferGeometryTHREE.Points 一起使用,即1 点= 1 个顶点。使用THREE.PointsMaterial,您可以传入带有map 属性的精灵。
  • InstancedBufferGeometry 也可以使用。在单个绘制调用中渲染 20k 点的性能比在 20k 调用中渲染 20k 网格的性能要高几个数量级。我没有考虑这里的开销,而是考虑每个调用 20k。您认为应该更新答案以澄清这一点吗?
  • 如果属性在所有点上保持相同,那么实例化将是有益的,但是他确实提到能够改变透明度和改变状态,所以我认为他需要BufferGeometry 才能修改个别点。不管怎样,我认为有必要澄清CircleBufferGeometry 不是去这里的理想路线。
  • @XanderLuciano 您可以通过着色器属性处理所有这些事情,就像设置位置一样。 (A related yet cautionary tale regarding transparent InstancedBufferGeometry)
  • 我做了一个“盗版”测试,精灵与 CircleBufferGeometry 和精灵在我的实现中明显更快。谢谢@pailhead
猜你喜欢
  • 2012-07-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-07-25
  • 1970-01-01
  • 2012-12-13
  • 2014-12-10
  • 2012-05-22
相关资源
最近更新 更多