# Low FPS with live generation of 10000 vertices

**URL:** <https://discourse.threejs.org/t/low-fps-with-live-generation-of-10000-vertices/3038>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [June 6, 2018, 12:14pm UTC](https://discourse.threejs.org/t/low-fps-with-live-generation-of-10000-vertices/3038 "2018-06-06T12:14:48Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ygles](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ygles/32/6006_2.png) [@Ygles](https://discourse.threejs.org/u/Ygles)\
**Post date:** [June 6, 2018, 12:14pm UTC](https://discourse.threejs.org/t/low-fps-with-live-generation-of-10000-vertices/3038/1 "2018-06-06T12:14:48Z")

</div>

Hello,

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](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](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 ?

Thanks

Ygles

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 6, 2018, 1:03pm UTC](https://discourse.threejs.org/t/low-fps-with-live-generation-of-10000-vertices/3038/2 "2018-06-06T13:03:48Z")

</div>

`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](https://discourse.threejs.org/t/potential-memory-leak-in-my-animation-engine/1584/12?u=mugen87)

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

---

<div class="post-metadata">

**Author:** ![Ygles](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ygles/32/6006_2.png) [@Ygles](https://discourse.threejs.org/u/Ygles)\
**Post date:** [June 6, 2018, 2:52pm UTC](https://discourse.threejs.org/t/low-fps-with-live-generation-of-10000-vertices/3038/3 "2018-06-06T14:52:45Z")

</div>

Ok thanks I’ll try and give a feedback

---

<div class="post-metadata">

**Author:** ![Ygles](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ygles/32/6006_2.png) [@Ygles](https://discourse.threejs.org/u/Ygles)\
**Post date:** [June 7, 2018, 11:44am UTC](https://discourse.threejs.org/t/low-fps-with-live-generation-of-10000-vertices/3038/4 "2018-06-07T11:44:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Ygles](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ygles/32/6006_2.png) [@Ygles](https://discourse.threejs.org/u/Ygles)\
**Post date:** [June 7, 2018, 11:59am UTC](https://discourse.threejs.org/t/low-fps-with-live-generation-of-10000-vertices/3038/5 "2018-06-07T11:59:48Z")

</div>

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

```auto
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;

scene.add(mesh);
render()

function render() {
    requestAnimationFrame(render);
    geom.dispose();
    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 !!!

Thanks

Ygles

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 7, 2018, 12:43pm UTC](https://discourse.threejs.org/t/low-fps-with-live-generation-of-10000-vertices/3038/6 "2018-06-07T12:43:47Z")

</div>

> [@Ygles](#):
>
> geom.attributes.position = new THREE.BufferAttribute( new Float32Array(vertices), 3 );

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`.

---

<div class="post-metadata">

**Author:** ![Ygles](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ygles/32/6006_2.png) [@Ygles](https://discourse.threejs.org/u/Ygles)\
**Post date:** [June 8, 2018, 7:49am UTC](https://discourse.threejs.org/t/low-fps-with-live-generation-of-10000-vertices/3038/7 "2018-06-08T07:49:23Z")

</div>

Thanks I’ll tried this week-end