Hello,
I am trying to update a LineSystem fast, i.e. on every mouseMove. My approach is to create an updatable LineSystem first and then, within my mouseMove handler, update the line system. This results in some problems: Flickering and console errors. In order to fix the console error first, I created a playground that updates a LineSystem with adjustable frequency:
The playground works fine as long as I do this compareable slow, e.g. every 500 ms. When increasing the update frequency, for example on my machine, change the interval to 100 ms, I get console errors of "Cannot set properties of null (setting ‘0’). I assume that I have to wait for one operation but don’t know how.
Note: Even though there is a console error, the demo works fine and so far, I did not see the flickering in the playground that I see in my real application.
Does anyone know where the console error comes from and how to fix it?
Why I think it is better for performance maybe it’s with having it face the camera which avoid drawing unseen parts of the line for nothing. ¯\_༼ •́ ͜ʖ •̀ ༽_/¯
You are creating a TON of two-element JavaScript arrays containing new Vector3 objects that need need garbage collecting every time you updateLineSystem().
You are calculating sin() over and over on the same values.
Is there a reason you’re using LineSystem instead of Line? Your LineSystem is repeating each Vector3 twice for the end of one line and the beginning of the next line. A Line object would be one continuous array with connected segments.
Here are a few steps that might improve the speed:
Use a single line segment with Lines not LineSystem.
Initialize lines[ ] to size resolution+1
Retain the lines[ ] object across calls of update.
On each update, run through the array and copy the y value from previous calculations: lines[i].y = lines[i+1].y This will avoid creating new Vector3 objects.
Then calculate the last value: lines[resolution].y = Math.sin(…)
If you must retain LineSystem, optimize similar to the steps above.
There might be other options using layerMask, but I haven’t worked with masking a mesh.