The Interactive & Immersive HQ

The TouchDesigner SOP and MAT

TouchDesigner Tutorial 14: The TouchDesigner SOP and MAT

Join The HQ PRO 7-Day Free Trial!

Join The Interactive & Immersive HQ PRO and get over 200 hours of TouchDesigner training, 100+ custom-built tools and project files, and access to a private community where Matthew Ragan and Elburz Sorkhabi answer your questions daily.
TouchDesigner SOPs Tutorial Table of Contents
    Add a header to begin generating the table of contents

    The final thing we’re going to make in our TouchDesigner Beginner Course is going to use a lot of SOPs, which are the 3D surface operators. 

    Our SOPs Example

    We’re going to do something cool where you’ll have your microphone being analyzed and driving the amplitude of some noise, so the louder you talk, the more noise there is, and the quieter you talk, the less noise there is.

    Then, we’re going to add a few effects to that, and we’ll talk about how to create a rendering setup, as well as how to material a 3D object.

    It’s important to remember that with SOPs are procedural, so everything happens in small steps. 

    Sphere SOP & Noise SOP

    The first thing we’re going to do is make a Sphere SOP.

    Then we’re going to do a classic TouchDesigner trick which is to put a Noise SOP after the Sphere, which gives you a crazy looking blob.

    If you middle click on the Sphere, you’ll see it has 722 points. What the Noise SOP does is it takes a noise value for every point, and every frame applies them to that point. You’ll notice that the parameters of the Noise SOP are very similar to the parameters of the Noise CHOP.

    We can compound this with another similar trick too. Create a second Noise SOP, and change the attribute parameter to “Point Diffuse Colour”, which essentially gives random colours to all the point attributes. 

    Screenshot of a TouchDesigner visual programming interface with two nodes connected in a sequence. The node on the left displays a white blob, while the node on the right shows a colorful blob.

    Audio Device In CHOP

    Now, add a trusty Null at the end of your chain, then go to your OP Create Dialogue and add an Audio Device In CHOP. This’ll give you the incoming audio from your microphone. 

    What we’re going to do with this CHOP is analyze the audio and then do what we’ve always been doing which is referencing it onto a parameter.

    Trail CHOP

    In my experience, the best way to approach things like this especially when using signals from the outside world is to use something called a Trail CHOP. Trail is very helpful because it allows you to plug in other operators and it shows you their change in signal over time. Add in a Trail CHOP to your network.

    Analyze CHOP

    Next, add in an Analyze CHOP, which takes the audio signal from the Audio Device In that has a fast sample rate and tons of little samples inside of it and gives us one channel at the sample rate.

    Connect your Audio In to your Analyze and your Analyze to your Trail.

    You should be able to see that if you keep talking, the value stays high, but if you go quiet for a minute, it relaxes.

    In your Analyze CHOP, change the function parameter to “Maximum”, so it gets the peaks of you talking instead, which I think is a better driver for the effect that we’re going to use. 

    A computer screen displaying a TouchDesigner interface with two main boxes connected by a green line, featuring a graph with red peaks on the upper right and a grid layout on the lower left.


    Make another Null CHOP and connect it to your Analyze CHOP.

    Then go back to your first Noise SOP, click it so you can see it’s parameters, then take the Null you just made and drag and drop it onto the amplitude parameter to reference it. 

    Now as you speak, the sphere gets a little bit of noise. However, in my opinion, it doesn’t feel like it’s doing enough.

    Adding a Math CHOP

    So, we’ll do what we always do, which is range it. Add in a Math CHOP between the Analyze and the Null.

    Change the “from range” to zero to 0.2, and the “to range” to zero to one.

    Plug the Math CHOP into the Trail CHOP and you’ll you’re getting much higher values from your signal. And if you go back down to the Noise SOP again, you should see that every time you speak, you’re getting a lot more amplitude out of the Noise SOP.

    Making it Smoother

    Right now, the Noise looks like it’s really energetic and frenetic, so maybe you want to smooth it out more.

    After your Math CHOP, add a Lag CHOP. Change the upwards lag parameter to zero and the downwards lag parameter to 0.3.

    Plug the Lag into your Trail CHOP and you’ll still have the sharp attacks but the ramp downs are a lot smoother. As you’re speaking, there’s still a few peaks, but in general it spikes up and then has a nice ramp down.

    Your Noise SOP as well should seem a bit more natural and matches what’s going on with your voice better, it’s not as hectic and chaotic now.

    Screenshot of a TouchDesigner node-based visual programming interface showing interconnected nodes with a yellow-highlighted region on the right.

    Creating a Rendering Setup

    Currently, there is no content in our SOPs that we can drag and drop onto my screen, we actually have to render it down to 2D.

    We have to render it into a TOP format because screens have pixels on them and the pixels have values and we need to give that screen pixel data a 2D texture to display.

    We have to take this 3D thing that we have going on and turn it into a 2D texture that we can then plug into a screen.

    Render TOP

    First thing we need to do is grab a Render TOP here. For this setup, we need a camera and lights (lights aren’t mandatory but for this case, we’ll use them because it looks nicer).

    Adding a Camera

    Go to the 3D objects section of the COMPs page of the OP Create Dialogue and add a camera. When you drop it in, you’ll see it automatically gets referenced by the render because the render by default is looking for a camera named cam1 (and coincidentally, by default if we make a new camera, it’s going to be called cam1).

    A TouchDesigner interface displaying multiple connected nodes and charts in a grid layout, with a yellow highlighted area in the top right corner.

    Geometry COMP

    Now we need to tell the Render TOP what geometry we want to render. For this, we need to use another one of our COMP helpers, called a Geometry COMP.

    The Geometry COMP is basically the transition from SOPs being on the CPU, to moving that data to the GPU.

    The way you should think about it is that SOPs are where you actually work on your 3D geometry, and then when it’s time to come to render them, you want to put the final SOP that you have inside of a Geometry COMP and mark it to be rendered.

    So, we have our Null that we want to be rendered, and we’ve made our Geometry COMP. What you have to do next is go inside of the Geometry COMP (remember the “i” keyboard shortcut), and delete the default torus shape that’s in there.

    In SOP

    Then (still inside the Geometry COMP), create an In SOP.

    Go up a level, and plug your Null into the Geometry, then go inside of it again, and you’ll see your the geometry from that Null is in there.

    Display Flag

    Turn on the display flag (on the bottom right of the In SOP), then go back up a level and you’ll see that now it’s being displayed in the viewers of the camera and the geometry (and once we make a light, it’ll be displayed there too).

    That display flag tells the other COMPs that they can now visibly display this geometry, and that’s usually a go-to, you should always turn it on.

    Screenshot of TouchDesigner software showcasing a node-based interface with various nodes and connections, including a highlighted node with an image of a 3D object and a yellow circle accentuating one of the nodes.
    Render Flag

    On the In SOP, you also have a flag for rendering (the button beside the display flag). This flag tells the Geometry COMP that this one SOP is going to be what is rendered.

    You can have multiple things inside of a Geometry with their render flags on, but usually it’s best to just keep it one per Geometry, so that your network’s cleaner and more organized.

    So what’s happening is our SOP work is passing into the Geometry COMP, it’s getting marked for display and render which then feed it behind the scenes from the SOP level into the Geometry, which then takes it into the GPU side. From there, the Render is able to look at it and rasterize it, and turn it into a 2D texture.

    Adding a Light

    The only thing we’re missing for this is a light. So go to the COMPs page of the OP Create Dialogue again and create a light. 

    All of the default settings for camera, geometry, light and render will usually put your object in the middle of the screen, but you can get creative and play around with the parameters to change it up how you like.

    Your Basic Rendering Setup

    We now have a basic rendering setup where you work on your SOPs, you send it into a Geometry, then inside of the Geometry, you have to mark the SOP you want to be rendered and displayed by activating the two flags. You make your rendering setup of a camera, geometry, light, and render, and then you can output this (and we’ll talk about outputting content in the next lesson).

    A screenshot of a TouchDesigner visual programming interface with interconnected nodes displaying various render frames, parameters, and control panels. The interface features a timeline and a yellow highlighted ring.


    The final thing we want to look at is an important part of 3D workflows and working with SOPs, and that’s texturing. This is where the operator family of MATs come in. SOPs do our 3D work, and MATs are in charge of adding materials to our 3D.

    The ones that you’re probably going to be using most often will be Constant MAT (which is an easy way to give things constant colour), or a Phong MAT (like a constant but it has light and shadows and those kinds of things). 

    Phong MAT

    For this example, we’re going to add a Phong MAT. The material gets applied to the Geometry COMP and it’s at that point where it gets textured. 

    Phong has so many parameters, but you don’t really need to worry about a lot of them for simple use cases.

    To apply this Phong to the Geometry, go to the render page of the Geometry, and you’ll see a parameter called material. Take the Phong and drag and drop it right onto that material parameter. 

    Adding a Movie File In

    Let’s say we wanted to take a movie file and apply it to the Geometry. Make a Movie File In TOP. Change the content to something that’s a little easier to see (I chose the cloudyocean.tif from the TouchDesigner sample folder). As always, put a Null afterwards.

    Then go back to the Phong and find the colour map parameter. This is basically how you take any 2D texture whether it’s a movie, an image, or something you’re generating (any TOP texture) and apply it to the Geometry as a colour.

    Take the Null you just created and drag and drop it onto colour map parameter. Now your sphere shape has that cloudy texture mapped onto it.

    Screenshot of a TouchDesigner interface showcasing a network of connected nodes. Nodes display visual previews of graphics elements, with a highlighted yellow circle around one node.

    One Final Trick

    There’s one final trick that I’m going to teach you here: there is a slightly easier way to do one of the steps involved with the Geometry COMP.

    When we did it in our example, we created one, we went inside, we made our In SOP, and turned on the flags.

    But there’s actually a really handy way you can do this in just a couple of clicks. If you have your final Null SOP of your operations, you can hover your mouse over the output of that Null, right click on that output, go to the COMP page, click Geometry and drop it in.

    This will automate a bunch of the steps that we previously did. It’ll create a Geometry COMP, puts the In-SOP in there, (it also makes an Out SOP which is not very important, but it makes one), and it sets the correct display and render flags for you so that it will appear inside of a Render.

    Then you can go ahead and apply your material and you’d end up in the same place.

    Wrap Up

    We’ve now covered all of the operator families and worked with them on small projects.

    In our last tutorial, we’re going to look at how to output content so that whatever you’re making, you can display it on screens or projectors.

    About The Author
    Picture of Elburz Sorkhabi

    Elburz Sorkhabi

    I possess a deep knowledge in many professional fields from creative arts, technology development, to business strategy, having created solutions for Google, IBM, Armani, and more. I'm the co-founder of The Interactive & Immersive HQ. Yo!