edited: specifying the use of ArrowHelper I am looking to create a multitude of arrows on a 2D plane to visually represent a vector field. Typically, there are around 20,000 vectors that need to be displayed.
Although I am currently using THREE.ArrowHelper to achieve this, the process is quite slow. This leads me to believe that there might be a more efficient approach. Is there a way to update the field with a reduced number of vectors when zoomed out, and dynamically add only what the renderer requires?
added: I generate the vectors using the code snippet provided below. This loop creates a 2D vector field on the x,y coordinates of a parametric surface.
// set default color
var hex = 0x00ff00;
var u,v,xx,yy,ii,dir,mag,origin;
// loop through
Geometry[i].vertices.forEach(function(point,j)
{
xx = Math.floor((point.x-data[i].x0)/data[i].dx);
yy = Math.floor((point.y-data[i].y0)/data[i].dy);
ii = data[i].nx*yy+xx;
u = data[i].frame[data[i].xvec][ii];
v = data[i].frame[data[i].yvec][ii];
mag = Math.pow(u*u+v*v,.5);
dir = new THREE.Vector3( u, v, 1 );
origin = new THREE.Vector3( point.x+data[i].dx/2,
point.y+data[i].dy/2, 1 );
data[i].arrowHelper[j] = new THREE.ArrowHelper( dir.normalize(),
origin,
data[i].scale*mag,
hex);
scene.add( data[i].arrowHelper[j] );
});
Running the code on a more powerful machine showed some improvement, but the performance impact is still significant.
While I can smoothly display the parametric surface and even a texture underlying it with 1e06 elements without issues, the slowdown is primarily caused by the ArrowHelpers.