I'm facing an optimization issue in my code.
Here's a snippet of what I have:
/////////// PARTICLE (var system[] about 5500 Particles with x, y, x inside) //////
var particle_system_geometry = new THREE.Geometry();
for (var i=0; i < system.length; i++) {
var x = system[i][0];
var y = system[i][1];
var z = system[i][2];
var sec = system[i][3] * 1;
if (sec.toFixed(2) <= 0) {
sec = 0;
}
particle_system_geometry.vertices.push(new THREE.Vector3(x, y, z));
colors[ i ] = new THREE.Color( 0xffffff );
colors[ i ].setHSL( ( sec * 0.5 ), 1, 0.5 );
}
particle_system_geometry.colors = colors;
var particle_system_material = new THREE.ParticleSystemMaterial( { size: 5, map: sprite, vertexColors: true, transparent: true } );
particle_system_material.color.setHSL( 1.0, 0.2, 0.7 );
var particleSystem = new THREE.ParticleSystem(
particle_system_geometry,
particle_system_material
);
particleSystem.sortParticles = true;
scene.add(particleSystem);
This section runs smoothly at 30 fps without any issues.
The problem arises when I introduce the following code to connect particles:
/////////// LINE (var jump[] About 7500 Line with x1, y1, z1 and x2, y2, z2 inside) //////
var testline;
lines = new THREE.Object3D();
for (var i=0; i < jump.length; i++) {
testline = new THREE.Geometry();
var x1 = jump[i][0];
var y1 = jump[i][1];
var z1 = jump[i][2];
var x2 = jump[i][3];
var y2 = jump[i][4];
var z2 = jump[i][5];
testline.vertices = [new THREE.Vector3(x1, y1, z1),new THREE.Vector3(x2, y2, z2)];
colorsjump[ i ] = new THREE.Color( 0xffffff );
colorsjump[ i ].setHSL( ( jump[i][6] * 1 ), 1, 0.5 );
var line = new THREE.Line(testline, new THREE.LineBasicMaterial({
transparent: true, opacity: 0.3, color: colorsjump[ i ] }));
lines.add(line);
}
scene.add(lines);
Unfortunately, this piece of code significantly reduces my FPS to 7-8...
Does anyone know how I can optimize the "line" code to improve performance and FPS?
Thank you!