Optimize 2d spiral real-time animation

Questions
, ,
1

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
(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 !

2

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

изображение
изображение825×860 67.4 KB

1 Like
3

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