The Interactive & Immersive HQ

Useful Web Render TOP Workflows in TouchDesigner

The Web Render TOP was a hugely demanded feature when it first came out. Before its release, getting web pages rendering inside of TouchDesigner was needlessly difficult and involved other applications running in the background sending textures over Spout or other similar protocols. A strange thing that happened though was how little I was seeing the Web Render TOP get used in large TouchDesigner projects. In this post, I wanted to highlight a few interesting ways you can use the Web Render TOP in TouchDesigner to take your projects to the next level.

Use Web Render TOP in TouchDesigner without internet

One misconception is that you need an internet connection to use the Web Render TOP. Hearing the word “web” is a huge red flag for people working in areas where internet connections are suspect at best. How many times have you tried to ping an API and had it fail and ruin your installation? If that’s one of your fears, it doesn’t mean you can’t use the Web Render TOP. There are 2 ways you can approach using the Web Render TOP offline. The first is to read local files from the disk. This would be similar to having a folder structure with HTML, CSS, and JS files all local on the disk (make sure there aren’t references to libraries on the web from a CDN). This is good for simple sites that you might be using (examples coming up…), but for more complex sites that might require things like databases, then you’ll want to run the web server locally.

Although this sounds intimidating, it really isn’t that hard. I guarantee with a few hours of time and a few web tutorials, you’ll have your own local web server up and running. These web servers function exactly like they do on the web, except that you can only access them from within the same computer (by default). This usually isn’t extremely useful unless you’re a web developer testing your work, but for the Web Render TOP this can be an extremely useful way of using web applications from within TouchDesigner.

User interfaces + Interacting

One of the two most common use cases I’ve seen for the Web Render TOP are user interfaces. Many folks have trouble working with UIs in TouchDesigner and may already have members of their team who are adept at web development, where throwing together a UI is a quick and painless task. In the past, you may have gotten a web mock up of your UI that you needed to rebuild in TouchDesigner.

With Web Render TOP you can actually just point your URL to where the UI lives (whether local or in the cloud) and you can send interactions to the website from TouchDesigner using the Python methods available. You can interact with it in many of the same ways you would interact with a Container COMP. This means you’re not only just “rendering” the web, but you’re fully interacting with it and watching it respond. If you setup you project in a way where you’re rendering complex web UIs in TouchDesigner, your web app can then just use OSC, UDP, JSON, websockets, TCP/IP, or any other protocol/message format to send the data back to TouchDesigner.

If you want to see a good example of some of these things in action, there is a component in the palette named WebBrowser. It has a lot of the interactivity wrapped up and ready to go so you can see it in action. What you’ll quickly find is although I’m talking about UIs, you could wrap almost any interactive web content and present it in TouchDesigner. This is a huge ability. Imagine being able to take your company’s website and make a kinect interactive version of it. Imagine if a company that makes web games wanted to do a giant projection version that you can play with VR controllers. These things would actually be quite difficult without TouchDesigner in the mix.

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.

Complex Typography + Transparency

Typography is another sticking point for TouchDesigner developers. When someone hands you a pretty Illustrator or Photoshop mock up with all kinds of type all over the place with very specific markings on kerning and line spacing as well as random sprinklings of mid-sentence italics and bold text…my eyes glaze over and I imagine all the pain and misery I will be going through to set it up in a high performant way in TouchDesigner. Well, that’s not really the case with web. Web typography is pretty flexible and advanced. This is another area where you can use the strength of the web inside of TouchDesigner. You could setup a project where all of the interactive content is generated inside of TouchDesigner, but then all of the text is being generated in a local web server and you can get the texture with the Web Render TOP. Then a quick Composite TOP and you’re off to the races.

The real reason this works is that the Web Render TOP has a nifty parameter named Transparent Background that lets you keep all the foreground elements of the web page without a generic background colour. Similarly to the UI example, you can take this transparency and apply it to all kinds of things. Want to make the ultimate streamer platform in TD that can grab streams from different websites and composite them with alpha in an interesting way? Want to grab a weather forecast from a website and composite it over your content (although probably not legal…)? These things and more are possible if you start looking at web content with an eye for a possibly transparent background.

Wrap up: Web Render TOP in TouchDesigner

All of this post had one goal: open up your eyes to the flexibility of the Web Render TOP. It isn’t just a way to get full web pages into TouchDesigner. It is actually another very powerful toolkit in your bag. You can make local web servers that handle complex logic that wouldn’t be easy to deal with in TouchDesigner. You can use well-built and feature-rich web UI frameworks to build UIs and then interact with them from TouchDesigner. You can use similarly well-built web typography libraries to create complex text layouts and render them as a layer with transparency inside of the Web Render TOP. The possibilities are endless and I hope you’ll explore some new ones with the Web Render TOP!