How do you render a bunch of 2d lines efficiently?

I have a bunch of 2d lines defined by start x,y and end x,y; These values are in a table DAT.

What is the best way to draw a bunch of 2d lines using these points?

Hi there,

TouchDesigner doesn’t have an easy way to do this strictly in 2D I believe. The best way to do it using native objects is to have an orthographic camera projection and using the replicator COMP, this will be efficient and will have the behaviour you expect. Only thing to consider is that you are gonna be referring to vectors in space, not pixel positions, so in some software something like this for instance:

line(0, 0, 50, 0)

Refers to points in pixels (startX = pixel 0, startY = pixel 0, EndX = pixel 50, end Y = pixel 0) .

With this method in contrast you refer to space positions, so the leftmost position in X would be -1 and the rightMost +1, for the upmost position of Y, it will be the ratio between the resolutionHeight / resolutionWidth * -1 and the downmost will be the positive version of that. Hope this makes sense.

If your table is in pixels, then a simple re-scaling using these guidelines can help you convert to the right space :slight_smile:

Find attached an example.

Best,
Darien
lines.tox (1.99 KB)

If you dislike replicators you can also do this with a single DATto SOP.

Dariens tox modified for that technique attached.
lines_noreplicator.tox (1.26 KB)

I think an incredibly efficient way would be to the coordinates into a texture, and then read those coordinates into a shader that uses line SDFs to contstruct the final image. However, the best performance to work ratio will probably be getting your center + width + rotation data into a Table DAT, using a DAT to CHOP, and then instancing a line sop with a wireframe material. If you only have the XY coordinates of the start and end of each line, presumably you could use function CHOPs to compute the center / width / rotation before the instancing.

I made this approach as a take on your question here a few days ago which is quite similar to the instanced line approach jmt4zj suggested. Though it’s even simpler as instead of computing the centres and rotation we can just subtract one point position/vector from the other to get the vector between the two points and use that to non-uniformly scale a simple gl line from one point to reach the other point.

This approach doesn’t include a DAT to CHOP, I just used some noise CHOPs but you add that in fairly easily, or modify the approach to instance directly from a DAT. Though as jmt4zj mentioned if you want to animate them most efficiently you could store the positions in a texture / TOP and compute transformations there using GLSL TOPs and GLSL MAT executing on the GPU. But all you need is dozens or even hundreds of points (but not thousands,) that’s a bit overkill and you might as well stick with DATs or CHOPs executing on the CPU.
line_p2p_instancing.tox (2.9 KB)

Hi, someone really helped me in same problem on the Facebook Group called “TouchDesigner Help Group”. Just search for “truncador lines 20’000” post.

Moving from Techniques to General.