What's the fastest way to grab/manage Point vertices in a scene?

OK so let’s say I create a Points object with 10,000 points:

this.positions = new Float32Array(this.total * 3);
this.colors =  new Float32Array(this.total * 4);

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(this.positions, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(this.colors, 4));

this.points = new THREE.Points(geometry, material);

I have an animation loop…

animate: function() {
	if(!this.points && !this.points.geometry)

	for(let i = 0; i < Particles.total; i++) {
		//do work here
	this.points.geometry.getAttribute('position').needsUpdate = true; 
	this.points.geometry.getAttribute('color').needsUpdate = true; 

In general, what is the fastest and most performant way to constantly get each point’s position data? I’ve seen three different ways:

I could use fromBufferAttribute…

const vertex = new THREE.Vector3();
vertex.fromBufferAttribute(Particles.points.geometry.attributes.position, i);

I could refer back to my Float32Array which I’m already storing…

i *= 3;
const x = this.positions[i];
const y = this.positions[i + 1];
const z = this.positions[i + 2];
return new THREE.Vector3(x,y,z);

I could also do this…

var vertex = Particles.points.geometry.vertices[i];

All three seem so similar. But are they exactly the same? Is one faster than the other? Considering I’ll be doing this on ~10,000 points every animation frame, what’s the most performant way?

Using vertices property might be the slowest approach and it is outdated, as it is not supported in recent Three.js releases.

My suggestion is to simply benchmark different approaches – writing the code should not be difficult for you. Keep in mind these things:

  • Managing 10000 points should be fast, you might need to use more points of to measure more animation loops
  • Different GPU may give different results, and the same GPU with different settings may also give different results
  • It might happen that the slowest part is the recalculation of values via JS

just do not re-create the vec3, hoist and re-use it instead, the first two are the same otherwise. the third, never saw it before.

Hmm, what do you mean by hoisting and reusing a vec3? How does that work?

const v = new THREE.Vector3()
function animate() {
  foo(v.set(x, y, z))