Performance issues with thousands of lines in three.js

Question

it's my first question here so I hope it conforms to the guidelines. Also please excuse my bad English.

I'm currently working on a WebGL application based on three.js that displays thousands of cubes and lines between those cubes. I have several performance issues so I decided to merge all the cubes to one geometry. That helped a little but actually the performance is slowed down by those thousands of lines (all having their own geometry (based on the NURBSCurve example of three.js) and shader materials (shader blends two colors from the start to the end of the line and controls opacity). My biggest data includes over 9000 lines and over 5000 cubes. Without the lines the FPS rate is between 45 - 50 (DirectX) or 20 FPS (OpenGL) but with the lines the performance drops to 5 FPS. I only have an Intel HD Graphics (5th Gen) graphic card so the maximum FPS seems to be restricted to 60 FPS but that is totally enough in my case. As I said before the lines are NURBS curves and they range from short curves to long, complex curves. Another requirement (which gives me a little headache ;-)) is that each line differs in width, so I actually have to use OpenGL, which is slower in my case and also causes some other problems.

Anyway I have tried several approaches but none of them really helped me to solve the problem.

1) Create pipes for each line and merge the geometries. -> This slowed down the creation of the scene from 1 second to several minutes. Besides FPS rate couldn't be improved. This is actually expected due to the mass amount of vertices and faces produced by this approach.

2) Reduce points of curve. -> Reduced from 200 to 50 points which helped to improve FPS a little. A reduction to 25 points didn't bring any more improvements. I was thinking to write a method to reduce unneeded points (like in straight curves, 2 instead of 50 points are enough) but I don't know how to achieve this so I thought about other ways first. Maybe I will come back to this.

3) Use BufferGeometry. -> It seems like BufferGeometry cannot be used together with shader material. At least in my case I didn't get it to work so that none of my tries displayed anything. By the way I used THREE.BufferGeometryUtils to create the buffer geometries from my NURBS curves. I tried to set THREE.VertexColors as a parameter to the function and colorsNeedUpdate in the geometry but still no display. Actually, I also tried buffergeometry with the curbes geometry and didn't get any improvements in performance.

4) Use splines instead of NURBS curves. ->The paths of the curves were not like I would like them to be and there wasn't any improvements.

5) Merge lines to one line with THREE.LinePieces. -> Well, although I had to double the number of vertices, this actually helped a lot. In case of DirectX, performance improved from 5 FPS to 25 FPS (OpenGL still at 4 FPS) but this solution is not appropriate in my case. The reason is that the lines cannot differ in width, which is in case of DirectX restricted to 1 anyway. I was wondering how other people solved the issue of line width restriction and found out that some are creating thicker lines via Geometry Shader. So my new hope was this Geometry Shader. But then I found out that Geometry shaders are not supported by WebGL.

Sorry for the really long explanation of my approaches so far. After trying out all that I cannot come up with any new ideas. Now I would like to know from the experts if I should just live with the FPS drop or if there is still another way which I could try out?

Answer 1

I came up with the idea to bundle lines by width and then merge these bundles using THREE.LinePieces. In the best case I could reduce about 860 lines to just 2. Of course the effectiveness of this solution depends on the data. Besides, I still have the problem that DirectX is much faster than OpenGL (e.g. 50 FPS instead of 8 FPS) but I need the latter one in order to support thicker lines. So if anyone comes up with a solution for my problem supporting DirectX I would highly appreciate it :-).