# Optimize 2d spiral real-time animation

**URL:** <https://discourse.threejs.org/t/optimize-2d-spiral-real-time-animation/36268>\
**Category:** Questions\
**Tags:** vertices, vertex, geometry\
**Created:** [March 23, 2022, 8:30am UTC](https://discourse.threejs.org/t/optimize-2d-spiral-real-time-animation/36268 "2022-03-23T08:30:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nikakhachi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nikakhachi/32/25051_2.png) [@nikakhachi](https://discourse.threejs.org/u/nikakhachi)\
**Post date:** [March 23, 2022, 8:30am UTC](https://discourse.threejs.org/t/optimize-2d-spiral-real-time-animation/36268/1 "2022-03-23T08:30:39Z")

</div>

I have a spiral animation in three.js, where I have to create objects in the animation loop because I am getting object parameters real-time. The performance is not good, it becomes so laggy. How can I optimize the performance ?

jsfiddle : [Animating Spiral in THREE.js - JSFiddle - Code Playground](https://jsfiddle.net/nikakhachi/uwqstzeL/4/)  
(I am also using different colors but for the sake of the example, spiral will only be black and white)

two ways I am optimizing it:

1. I am reusing materials, not creating new one if not necessary
2. after drawing 300 lines, I am replacing it with one big geometry with vertex colors

I am new to three js and I know I am making a critical mistake somewhere, any help will be appreciated !

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 23, 2022, 9:23am UTC](https://discourse.threejs.org/t/optimize-2d-spiral-real-time-animation/36268/2 "2022-03-23T09:23:30Z")

</div>

I can’t take a look at your jsfiddle for some reasons.  
I’ve made a codepen with building a spiral animation, using `LineSegments` and `.setDrawRange()` method of `BufferGeometry`: [https://codepen.io/prisoner849/full/RwxopJd](https://codepen.io/prisoner849/full/RwxopJd)

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/9/8941a44294499825b73931305c5a79927d2c04c9.png)

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [March 23, 2022, 10:47am UTC](https://discourse.threejs.org/t/optimize-2d-spiral-real-time-animation/36268/3 "2022-03-23T10:47:41Z")

</div>

After february event, jsfiddle forbiden for some countrys. Need vpn, proxy.