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

Questions
1

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));
geometry.computeBoundingSphere();

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

I have an animation loop…

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

	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?

2

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
3

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.

4

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

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