Updating points of a LineSystem fast

Questions
1

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?

Best regards,
Axel

2

I red on the forum greasedLine have better performance. Planning on testing it but here’s the link to the documentation for you to try:

https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased_line

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. ¯⁠\⁠_⁠༼⁠ ⁠•́⁠ ͜⁠ʖ⁠ ⁠•̀⁠ ⁠༽⁠_⁠/⁠¯

3

What system are you running on? I have an android phone that runs fine with delay of 5 instead of 500.

You might have overlapping updates happening. See “Ensure that execution duration is shorter than interval frequency.”

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:

  1. Use a single line segment with Lines not LineSystem.
  2. Initialize lines[ ] to size resolution+1
  3. Retain the lines[ ] object across calls of update.
  4. 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.
  5. 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.