Fast perspective lines

At the moment I’m using LineBasicMaterial to draw lines. However, these have always the same width, no matter how far they are away from the camera. Since I visualize a graph that’s nodes are represented with a geometrical mesh and are getting smaller the further they are away from the camera, this looks odd. I then switched to cylinder geometrie and MeshBasicMaterial rendering them in one color. Since my graph is very large it seems to eat up more performance using this approach.

Is there a “line” implementation that has not always the same width? Or is some mesh needed by definition if I want to achieve what I described? What is the high performance way?

Please have a look at this demo: https://threejs.org/examples/#webgl_lines_fat

It does not render with line primitives but with triangulated lines. However, perspective size attenuation is not supported for good reasons. Please read the initial comment for more information:

Thank you, that makes sense.

So what would be your preferred way of representing edges with size attenuation in a graph, when they don’t have to have shading?

What kind of graph are we talking about? A node-link diagram? Can you show a picture or a demo of your app?

1 Like

http://alivingledger.com/
I am migrating this to a 3d-network graph.

TBH, I would not use fat lines for such a graph. Maybe something like this:

The representation of node-link diagrams in 3D is in general questionable. In the area of information visualization, the usage of 3D is often criticized. User studies showed that important metrics like task-completion time often decrease. That’s because many 3D graphs introduce clutter which makes it more complicated for the user to overview the data and orientate oneself in the data space.

I’m already using the library from the very link you sent me. I adapted the sources, since I have some major modifications playing in.

Currently, I’m using CylinderGeometry with a MeshBasicMaterial without shading. That enables size attenuation, at the cost of performance but gives a very natural, “flat” link look.

Apart from that, thank you for you input regarding the layouts and the 2d & 3d discussion. The general challenge here is visualizing highly interconnected networks. These graphs turn into hairballs very fast, even with force-directed scheduling. Using 3d has (1) one more dimension to place nodes (2) better interactive possibilities to explore the graph.

At the moment I am experimenting and it seems to turn out quite satisfactorily. I get better defined clusters in 3d space. This is ofc based on snapshots, the data is highly dynamic and varies a lot.

I’m very interested in the topic since graph layout seems a hard problem. Do you have links to the studies you mentioned?

I’ve heard this in a lecture about information visualization some time ago :blush:.

The following paper might be interesting for you: Graph Visualization and Navigation in Information Visualization: a Survey. Especially chapter 2.4 3D Layout:

The paper has many references. I guess it’s a good starting point.

1 Like