Are you trying to use high quality materials in TouchDesigner? Are you finding your TouchDesigner render isn’t looking up to snuff? Have you tried jiggling all the cables to no avail?
You’re not alone. Many folks have trouble understanding the requirements of a high quality render. Let me assure you, it IS possible to have beautiful, almost photo-realistic, TouchDesigner renders, it just takes a few manual steps and some tools that you may or may not be familiar with. Let’s dive in!
What do you need for a beautiful TouchDesigner render?
PBR Material
There are a few requirements for having a beautifully rendered scene. The first are high quality PBR materials that we can use with the PBR MAT. You can source these in many ways, but getting started with Substance Share is more than enough. Substance Share is a website owned by the makers of Substance Designer, which is a tool for creating materials and doing UV painting. It was recently bought by Ad obe, so maybe it’ll get included in your Creative Cloud one of these days! Substance Share is where the community of Substance Designer share all their free assets and materials. You can quickly make an account (for free) and start downloading high quality materials to your delight. Even just the first page of materials is chock full of good stuff:
You’ll want to find one you like, and download it. You’ll receive an SBSAR file that we can load into TouchDesigner using a Substance TOP. We’ll then connect this to the Substance TOP Map parameter of the PBR MAT, like so:
In the example I included at the end of the post, I just used some of the built in SBSAR files that ship with TouchDesigner.
Geometry (+ TouchDesigner Render Setup)
Next thing you need is your geometry. In this case, there’s not much to do. I made a Geometry COMP and used 2 expressions to make the torus rotate dynamically:
And then inside of the Geometry COMP we want to add an Attribute Create SOP so that we can compute the tangents of our geometry (otherwise you’ll get a warning error later):
Don’t forget to turn on the Render and Display flags on the last SOP in the chain otherwise you might not see the effects of the Attribute Create SOP! Then we can go ahead and make our generic TouchDesigner render setup with a Camera COMP, Light COMP, and Render TOP:
You might be thinking to yourself, “Elburz, I already know all this stuff!” You’re right, and this is where the magic of environment lights kicks in.
What is an environment light?
An environment light is really just a light that uses an image as the basis for it’s lighting model and pattern. There’s lots of math behind why it does what it does and why you need to use HDR scenes for it, but we don’t need to dive in to that. For our purposes, the environment light will illuminate the object based on how the lighting would be in whatever environment we provide it. This is especially useful for reflections and providing a level of realism to your textured objects.
Where to get them?
They’re very common on the internet. HDR studios and environment images are used in video games so that means there’s lots of resources. For this example, I did a quick web search for “hdr studio free download” and found this site first which has a lot of great stuff on it (please check their licensing before using in a project!!!). There’s also a sample HDRI file that ships with TouchDesigner called “CloudyOcean_2Kx1K_8bit.tif” that is inside the Samples/Map/ folder. Now how do we use it?? Easy!
Setting up Environment Light
The first thing we want to do is load our HDR environment into a Movie File In TOP:
Then we need to make an Environment Light COMP that will use this image as the environment map:
To be honest…that’s most of the battle! You’ll see your render probably looks way more interesting now.
You can see in the image above, the reflections work great and if you load up the file, you’ll see they are even more interesting as the geometry is rotating through space and bending on the curves of the torus.
Extra note from fellow TouchDesigner developer Michele Di Pasquale: TouchDesigner uses a native gamma of 1.0 which will result in incorrect gamma’s on HDRI’s loaded in. You should use a Level TOP with the gamma set to 2.2 in most cases when using an HDRI to achieve full dynamic range and tone.
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.
How important is environment light?
If you haven’t seen how important the environment light is for making high quality TouchDesigner renders, check out what happens when all I do is swap out the HDR texture and how big of an impact it has:
I think you’re beginning to see the value of using environment lights. Using them really gives your rendered geometry the look as if they’re in an environment. If you then combine this by rendering a skybox using your environment HDR, or even just putting your geometry into a 3d scene, you’ll have much better results than you would have had previously.
File Download
Grab a copy of the setup above using built in TouchDesigner assets below. You can then go in and swap out the substance file or the HDRI used for ones of your own choosing!
Wrap up
Hopefully this quick post shows you the light….(pun intended)…..on one technique you can use to improve your TouchDesigner render quality fast. PBR MATs have been in TouchDesigner for a while along with Substance TOP, but it seems like a lot of people I encounter are missing the final piece of the puzzle, which is understanding how to add an environment light to your scene so that your rendered geometry can actually come to life. Enjoy!
