Hello everyone, I’m quite new to three.js, but I have some questions I couldn’t find answers to. So I decided to ask them.
I’m looking for a way how to improve performance here
I have an application where the user can add and drag a box
, and there are also relationships between boxes are indicated by lines. It uses three.js but in reality, it’s a mostly 2D scene. I’m using OrthographicCamera here.
It works fine with a small amount of boxes
, but displaying hundreds or even thousands of them is killing my laptop.
I read few articles on how to improve performance in three.js app and so far what I already did:
- all boxes share the same geometry
- everything reuses the predefined set of meshBasicMaterial
- all line arrows are rendered with the same geometry
So now the current render cycle is next:
- render all boxes.
- calculate the position for start and end and if required middle points for lines
- based on points create geometry for every line
- render lines with line arrows
questions I’m looking for answers to:
-
I’m using the Line class to render lines, is it somehow possible to merge line’s Geometry and line arrow’s Geometry together? (I tried to make it, but failed, I was using mergeBufferGeometries function from BufferGeometryUtils class)
-
In the app some lines are straight, some are not. Does it make sense to create a single Geometry for a line, share between straight lines, and scale when it is required? (as I can understand, it will require additional calculating for the position where to put the line in the scene)
-
does the use of Vector2 will give any benefit over using Vector3 in my case?
-
I was thinking about putting all lines in a single geometry, let’s call it AllLinesGeometry for reference (I read somewhere it will provide a single render call then), but during the drag’n’drop of the box, together with the box I also move the connected lines for this box. So during drag and drop it will require me to delete few lines from AllLinesGeometry, create the new one and render it again - AllLinesGeometry + few lines which user is dragging in this moment - does this one makes sense?
I can imagine this will work the same way with boxes. -
And the last one but still important - Is there anything else I can do to improve performance there? Above is just something I found in the internet, but maybe here are also some unknown tips?