The Interactive & Immersive HQ

The Designer Twins: TouchDesigner + Substance Designer – Part 2!

SPOILERS; .sbsar files, SubstanceTOP, Substance Select, Geo COMP, PBR Mat

[Editor’s note: Hi all! Elburz here! We’re excited to bring you part 2 of this series that Tavia Morra has put together about getting your feet wet in Substance Designer and bring that work into TouchDesigner. Both tools work so well together so we’re thankful that Tavia could share her experience with us! If you haven’t read part 1 yet, check it out here.]

Howdy and welcome to part two of The Designer Twins: TouchDesigner and Substance Designer post. In part 1 we got our feet wet with Substance Designer and getting our beautiful materials output. We covered how to export bitmaps of our PBR mps, publishing parameters, and publishing an .sbsar file. In today’s blog post we’ll cover the other side of the coin and get our gorgeous materials into TouchDesigner.

Getting Familiar with the Substance TOP

Let’s look at how to get the .sbsar file into Touch first. Lay down a Substance TOP and locate your .sbsar file from the file selection menu in TouchDesigner or click and drag your .sbsar file in from your OS file/explorer window. You should see something like this, if you set up your .sbsar file right. You’ll notice that the exported parameters from Substance are now available in the Substance TOP Parameter window! Now you can now drive parameters within your Substance TOP with data inside of TouchDesigner. Cool! 😮

If your Substance TOP throws an error, it’s likely a missing or mismatched setting in Substance Designer that needs fixing. I found that if I didn’t label my outputs correctly and also set my Usage to the correct name for my material TouchDesigner would throw an error. For a refresher check out Part 1 on exporting. 

Now let’s explore the different ways you can get the data from your Substance project into TouchDesigner.

Import Method #1 – Substance TOP to PBR MAT

You slot your Substance TOP into the Substance TOP parameter of the PBR MAT and call it a day. The PBR MAT has a handy parameter that accepts a Substance TOP and sorts out what maps apply to what parameters on the PBR MAT. Note that it doesn’t auto-fill the parameter fields you’d expect but it’s still working behind the scenes.

Import Method #2 – Substance TOP (Graph parameter) to PBR MAT

On your Substance TOP parameter window navigate to the Graph parameter and select the map that’s relevant to you. You could lay down as many Substance TOPs as you have maps and change the Graph parameter to reflect each possible map. From there you can slot in your maps into their relevant fields in the PBR MAT. While this method functionally works, it’s not as optimized an approach as the next method.

Import Method #3 – Substance Select TOP to PBR MAT

You could lay down your Substance TOP and then lay down as many Substance Select TOPs as you have maps and specify the Substance TOP in the Substance TOP Parameter of the Substance Select TOP. From here you could slot in each Substance Select TOP into it’s relevant field within the PBR MAT. This technique is useful if you anticipate a need to change individual maps upstream of the PBR MAT. For example, maybe you want to shift the hues within the Color Map of your substance using a HSV Adjust TOP. This approach allows you to isolate your map, make adjustments, and then attach it to your PBR MAT.

Import Method #4 – Movie File In TOP to PBR MAT

You could import your bitmap images via the Moviefilein TOP and reference them from the PBR MAT. From there you can slot in your maps into their proper parameter location within the PBR MAT.

Really the world is your oyster at this point. Pause to consider what approach works best for your project.

…it looks nothing like what I made, Tavia

Lol, and additionally lmao. Not to worry! The #1 most common problem I run into when using PBR is this little error on the Render TOP.

More often than not I test on the geometry native to TouchDesigner, the primitive shapes of which don’t come with tangents, which is an important piece of the puzzle if you want to get your sweet summer material slappin’ in Touch. So let’s lay down an Attribute Create SOP and give the Compute Tangents parameter a little togglytoggle. 

Run that bad boy into a Geo COMP and slap a PBR MAT on it by way of clicking and dragging onto the Geo COMP. Let’s set up an Environment Light. See Elburz’s blog on PBR Rendering if you’d like to learn more about the Environment Light. This step is very important if you hope to render anything at all within TouchDesigner.

Notes on output sizes

When using the Substance TOP you can dynamically resize and up-res the data within without loss of quality, as all the calculations are done under the hood for you. In the example project for this blog post you can hop inside of TouchDesigner and resize your Substance TOPs and Substance Select TOPs to your heart’s delight using the Common tab on both operator’s parameter window. Fair warning: higher res means more computational time.

If you want to go the bitmap route but have them at a higher res, you’ll need to hop into Substance Designer and “Export outputs as bitmaps” after resizing the parent graph to your desired output.

Get Our 7 Core TouchDesigner Templates, FREE

We’re making our 7 core project file templates available – for free.

These templates shed light into the most useful and sometimes obtuse features of TouchDesigner.

They’re designed to be immediately applicable for the complete TouchDesigner beginner, while also providing inspiration for the advanced user.

Notes on Height Map

You may notice that as you plug in your operators into the PBR MAT the Height Map parameter is greyed out and unavailable for your use. In order to engage this parameter and have your mesh displace you’ll need to first make sure you have an input in your Normal Map (Bump) parameter on your PBR MAT

Note that if you use the first method you will still need to find a way to extract the Height Map information from the Substance TOP, likely using a Substance Select TOP, and then apply it to the PBR MAT after engaging “Enable Height Map” and then sliding in your height map into the “Height Map” parameter.

Once you have this engaged you’ll notice the Enable Height Map parameter becomes available, which you should toggle On. After that the Height Map parameter becomes available and you can slot in whatever operator that holds your height map information in. If you toggle on Displace vertices and play with the Displace Scale parameter you’ll find a lot of interesting looks will emerge from your experimentation!

A frequent go-to for displacing geometry is to chain a Noise SOP downstream of your input geometry SOP. The good news is that this technique that uses a Height Map and Displace Vertices is a more efficient way to distort the mesh without use of a Noise SOP.

Wrap Up

Substance Designer is a media production tool that has an interactive exportable file for use in other programs such as TouchDesigner. TouchDesigner has native operators Substance TOP, Substance Select TOP to access and manipulate the contents within. Depending on what you’re trying to achieve it’s a fantastic tool to have in your back pocket and opens the doors into other kinds of work and experiences.

[Editor’s note: Hi all! Elburz here! I wanted to thank Tavia again for taking the time to put this great series together to help and encourage folks who want to get started with building their own materials or are just starting on their Substance Designer journeys.