CODEWITHSUNDEEP
javascript3dthree.js
Patrick DeVivo
Patrick DeVivo

Reputation: 795

Is it more performant to use a sprite or a BufferedGeometry in Three.js?

I'm rewriting a legacy visualization built several years ago with an older version of Three.js. The visualization is ~20k 2D circles (nodes from a graph) drawn on a screen with positions and coloring already determined.

There's no animation involved other than when interaction occurs (zooming, clicking, etc). The previous author used sprites for the circles (nodes) to show different states (node selected: glowing effect, node hidden: transparent, etc)

I've been able to successfully reproduce much of the visualization using CircleBufferGeometry instead of a sprite.

I know this is potentially too vague a question, given it might be too specific to my use case, but I'm wondering if anyone has any insight into whether it's more performant to render ~20k sprites or ~20k CircleBufferGeometry with Three.js / webgl.

Thanks!

Upvotes: 0

Views: 246

Answers (1)

pailhead
pailhead

Reputation: 5431

CircleBufferGeometry will have many more vertices per entity than a sprite would since sprites should be drawn with gl.POINTS ( one point == one vertex ). Your vertex shader would process more vertices with the circle than it would with a sprite.

Upvotes: 2

Related Questions