Low FPS with live generation of 10000 vertices


I try to draw a 3D mesh in live (value x, y, z generated), you can see the source code here => https://codepen.io/Ygles/pen/MXeGEP?editors=1111

The maximum number of vertices is 10000, with this code I have a very bad FPS (60FPS at the beginning and 3 or4 FPS near the middle of the loop).

If I take a THREEJS example https://threejs.org/examples/webgl_modifier_subdivision.html with Suzanne, I have very good performance with 185856 vertices.

Can you help me please to improve the FPS ?



Geometry is internally converted to BufferGeometry. This is normally done once but since you are setting elementsNeedUpdate to true in your render loop, the conversion is performed every frame.

Also see: Potential memory leak in my animation engine

Try to avoid Geometry and generate your geometry data with BufferGeometry instead. You will have a much better performance.

Ok thanks I’ll try and give a feedback

Thanks for your help, now I have 50FPS vs 3 - 4 FPS before using BufferGeometry

Just another question, I lost shadow when I switch from Geometry to BufferGeometry !!! Here a part of my source code:

geom = new THREE.BufferGeometry();
geom.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array(vertices), 3 ) );
var mesh = new THREE.Mesh(geom, material);

mesh.castShadow = true;
mesh.receiveShadow = true;


function render() {
    vertices = vertices.concat(new_vertices);
    geom.attributes.position = new THREE.BufferAttribute( new Float32Array(vertices), 3 );
    geom.attributes.position.needsUpdate = true;
    renderer.render(scene, camera);

I think I missed out on something but I don’t know what…

Help please !!!



You should not do this. Instead, modify the existing buffer attribute.

I’m not sure that is the source of your problem. But it’s definitely not the intended usage of BufferGeometry.

Thanks I’ll tried this week-end