When learning Touchdesigner, most spend a good amount of time on learning the platform and its operator families. Each operator family comes with its own functionalities, parameters, and ways of integrating with other operator families. The SOP family, which stands for Surface Operators “are operators that can generate, import, modify and combine 3D surfaces (also called geometry)”. I’d like to cover these specifically because they specifically handle 3D surfaces. Since Touchdesigner renders in 2D this can trip someone up when trying to display a 3D output.
Disclaimer. This article doesn’t go too in-depth into Operator Families or how to use Touchdesigner. This is for those with some knowledge of Touchdesigner and how to move around on the platform. If you’d like to learn the basics and more hqpro.interactiveimmersive.io is a great platform to get started.
Things to know when displaying a SOP
When working on a Touchdesigner project using SOPs there are a few things to remember:
SOPs handle 3D surfaces
Touchdesigner works in a 2D space. When you use a SOP operator, it allows you to view your work in 3D but only within that node viewer.
SOPs don’t display in 3D
In order to display an SOP in Touchdesigner, you need to first render to 2D. This calls for a bit more work.
Displaying a SOP
Here is the flow I use for displaying a SOP or Surface Operator.
- Create a Sphere using the SOP operator family
- Add a Null SOP as a breakpoint in your program. This is a structuring convention if you need to change anything before the render flow occurs.
- Next, add a Geometry COMP. The geometry COMP is a different operator family and initially can’t sync with a SOP without some additional work. Within the Geometry COMP, you’ll need to create an in and out SOP. Each operator family has there own in and out nodes. These essentially allow you to pass in parameters from other operators.
( use i key as a shortcut to go into the Geometry comp to see this view. To go out of the Geometry comp use u key for up.)
4. Once you add the in and out COMPs to your Geometry you're able to add a Render TOP. The Render TOP takes specific parameters ( Geometry, Camera, and Light ). If you're familiar with the Three.js or other 3D graphics libraries this may sound familiar.
5. Add a Camera COMP and a Light COMP to your scene and you will then see your Sphere displayed in the Render viewer (Node Viewer).
Once your Sphere is shown in the Render TOP you’ll notice a checkered background in the Render TOP node viewer. This shows that the once 3D Sphere has now been rendered into 2D. Select the little blue button on the bottom right of the Render TOP node viewer to display your Sphere.
When I first started learning Touchdesigner this was pretty confusing. Hopefully, this quick tutorial helps clear up some confusion for others. I also had a lot of help from looking into the references below.
Happy Coding.
Digital Anthro — Experience Design Studio
References
hqpro.interactiveimmersive.io
