fbpx

New Superpowers: TouchDesigner’s Line MAT

Materials in TouchDesigner used to be such a simple decision. You had Phong MAT and Constant MAT. That was most of your decision. Sometimes you might have reached for the Point Sprite MAT in situations with particle systems. But that was it! Now we have a plethora more options and some of them are really valuable pieces of my toolkit now. Today I’m specifically speaking about the TouchDesigner Line MAT and showing you some interesting things you can do with it!

Deceiving name

While it might have a less-than-inspiring name, the Line MAT has a ton of functionality built into it. It isn’t just for “lines”. I’d argue that “lines” are only about 1/4 of what it actually does and can be used for. It does lines, line thicknesses based on camera depth, point visualizations, vector visualizations, and more with really fine-tuned controls that allow you to actually implement these different visualizations in a visually-pleasing and aesthetically-interesting way. I wish it had a cooler name, something like Previz MAT would probably draw more attention to it and get people to find it on there own, but lucky for you, I’ve found it and here’s some cool things you can do with it.

Lines…duh….

Obviously the Line MAT can do lines. There’s a lot more to be said about them though. The first thing is that they’re very high quality lines. I know that’s a weird thing to start off with, but if you’re trying to make nice visualizations and wireframe meshes, you really don’t get a lot of control over that in a Phong or Constant MAT. Only the Line MAT allows you to setup a wireframe look and then really dial in all the aspects of the actual lines drawing the wireframe. This is the most basic setup to talk about some of the line elements you can control:

It is just a polygon Grid SOP, connected to a Noise SOP, and then rendered using a Phong MAT with the Common Page parameter for Wireframe set to OpenGL mode. The only real controls you have in this case are just one slider for controlling line widths:

In the old days, that was about it…GGnext.

Now let’s take a look at what Line MAT can do in the same situation. By default we get this:

Looks the same, so far so good. Now what if we adjust the first set of options: Distance Near, Distance Far, Width Near, and Width Far.

We get this really interesting effect where because I set the Width Near to be greater than Width Far, the lines get thicker as they approach the camera. You should note this isn’t some trick that only works in some situations. Because the Line MAT is calculating all of this in real time, as the mesh moves all of the lines are constantly being re-calculated and it creates a really dynamic and smooth transition between thin and thicker lines. Now let’s look at the Line parameters, and we can see all kinds of options for colour based on distance from camera and many options for controlling the actual line geometry being created as well as end caps. Starting by simply changing the near and far colours:

Just updating those near and far colours, the Line MAT will automatically create really smooth gradients between those 2 colours based on the depth. You can see in the above image that lines in the far back are blue, lines in the foreground are red, and the in-between area becomes shades of purple based on depth. That’s only really scratching the tip of the iceberg. You can spend a lot of time honing in on the parameters and even playing with the end caps to draw full-on arrows pretty easily!

Points!

So we’ve spent a bit of time talking about lines, but what about all the other stuff I said it can do. Well how about with one click, we can switch over to the Points parameters and turn on Draw Points:

Done and done! If you’ve done this before, you’ll have remembered the process of instancing circles at all the points of a geometry, then you’d have to manually calculate each instances distance to the camera to increase or decrease the size….no more! All the fun stuff we played with for the lines, also exists in the parameters of the point visualizing. Whether that’s size based on distance from camera, geometry used to draw the points, or colors based on distance from camera, these are all built right into the parameters.

Now what I really love is that you don’t need to draw everything. For example, you could completely disable the drawing of the lines and only choose to draw the points. All we have to do is switch back to the Lines parameters and turn off the Draw Lines toggle:

Hot damn that looks great and I haven’t even done anything fancy!!! This is why I really enjoy using TouchDesigner and I’m sure you feel the same way. I’ve used this effect quite a bit for scenarios where I’m already rendering a mesh, and want to highlight the points of it (without the whole wireframe look). Continuing to experiment with this a little bit, I changed the Point Type to be Sphere and then I increased the Point Size Multiplier to get bigger spheres:

And similarly we can continue to do things like set near and far colours and watch the magic of the Line MAT create pretty fantastic gradients between them:

You could make full art pieces out of these kinds of effects, let alone the use they have in regular ol’ data visualizations.

JOIN THE ELBURZ.IO LEARN TOUCHDESIGNER HQ

Want to take your TouchDesigner career to the next level?

The HQ is the only comprehensive TouchDesigner training resource available.

If I’d had access to the tutorials, workshops, coaching and community found in the HQ when I first started with TouchDesigner, I would have hit my career goals years sooner

Vector?!?!

I’m sure you’ve all seen vector fields or those “fancy” openFrameworks things where there’s little arrows pointing in all directions and you wish you could figure it out. Well that kind of effect is also built into the Line MAT (see how I think it should be called something more exciting!!).

I’ll go ahead and turn off the drawing of the points and switch to the Vector page and turn on Vectors:

What this does is draw a line representing your normals (because I have attribute N selected). You could replace that attribute and get creative with what you want to draw, but let’s keep it simple to start. My mesh is pretty dense, so it is quite messy. I’ll start by turning down the scale so the lines are shorter:

Don’t forget to notice the beautiful effect because of the camera depth being applied here as well! Already looking much better. Now how about changing the end cap from Triangle to Arrow:

Wow that was easy and looks pretty cool. Now we have arrows pointing in the direction of the normals that are visually pleasing and easy to update/edit when compared against a manually created instancing setup. This next thing really highlights how well-built the Line MAT is: the ability to easily update the caps. After we’ve got our basic vectors drawing, I can switch to the Caps page of parameters and start changing the different attributes of the arrows being drawn and completely change their looks:

By changing the three parameters of Arrow Width, Arrow Height, and Arrow Tail Length, I can make these more standard looking arrows. Wow that would have been such a pain to do before and such a manual process.

Is that it?

Well that’s the basics. The really cool effects you can get by combining different geometries using different aspects of the Line MAT which can then be composited together are endless. I’ve already done a few data visualization projects that fully leaned into the TouchDesigner Line MAT to get the job done. The best part is that it is dynamic and flexible. For example, if we swap geometries, no need to change anything to get the same results:

There’s also a ton more functionality and the best place to read more is on the official wiki page.

Wrap up

I hope this post helps get you up and running with the TouchDesigner Line MAT. It is truly a new and invaluable tool in my toolkit and I think it will really be able to work wonders for not only your workflows but also the quality of the outputs. Enjoy!