TouchDesigner can be used to output content to all kinds of different display devices, including traditional LED/OLED flat panel displays, projectors, lasers, and DMX-controlled lighting. LED walls are another popular display option for TouchDesigner projects which offer a number of benefits over other technologies. That said, the workflow for preparing content for LED walls in TouchDesigner is a little bit different than for traditional displays. In this post, we’ll cover some LED wall basics and work through two examples that showcase how to set content up in TouchDesigner for display on LED walls.
What is an LED Wall?
An LED wall is a popular type of large scale display that is made up of smaller modular LED panels that together make a seamless display surface. Because they are constructed from modular LED panels, LED walls can be customized in shape and size depending on the needs of the project.
There are a large number of panel options to choose from, with varying panel sizes, pixel pitches, weather resistance for outdoor use, and more. Aside from the ability to customize the display shape and size, LED panels are also a great option because they offer a high level of brightness (even outdoors!), efficiency and lifespan compared to other options.
Not only that, but in the situation that a pixel does go bad, it’s usually as simple as swapping a single panel from the display, rather than having to replace the entire display itself.
What is a Pixel Map?
Pixel maps, sometimes called raster maps or LED maps, are images that show you how the output from your computer’s graphics card will be mapped to the physical LED structure. They’re typically provided by the LED vendors or installation team, and give you all the information you need to create and layout content in TouchDesigner for the final display.
Unlike smaller installations with a handful of traditional displays, where displays might be connected directly to the GPU’s output, LED walls typically have an intermediary device called an LED processor (also sometimes called an LED controller). The LED processor takes the signal output from the computer (typically 1920×1080 or 4K), crops the signal into sections based on the size of each panel, assigns each section to a panel and sends the video signals to the panels.
Ex. #1: Setting Up for a Simple 3×2 LED Wall in TouchDesigner
Let’s take a look at a very simple example. In our example setup, we would have six total of these panels, arranged in a 3×2 configuration. For our example, we’ll use a panel resolution of 128×128 pixels (meaning 128 rows by 128 columns of LEDs). This means that our total image width would be 384 pixels, and the height would be 256 pixels.
The pixel map for this example might look something like the image above.
Note that a real texture map provided by a vendor or installation team will likely be nicer than this! We’ve created these examples for illustrating how pixel maps work.
A typical pixel map will have a black, white or checker background, with shapes drawn on top to denote where the LED processor will crop the content from. You’ll also find pixel coordinates for the corner of each shape to aid in correctly positioning the content. If you have multiple displays or additional fixtures, additional shapes will be added to the map as well.
Based on the pixel map, the output from TouchDesigner should look like the image shown above. Since this example is pretty simple, all that needs to be done is the following:
- The content needs to be scaled to the correct size (384×256).
- The scaled content then needs to be composited with a 1920×1080 canvas. The final output size from the computer will be 1920×1080.
- On the final canvas, the scaled content needs to be positioned 10 pixels from the top and 10 pixels from the left.
This can be achieved with a Fit TOP for scaling the texture, Constant TOP for creating the 1920×1080 canvas, and a Composite TOP for compositing the textures together and positioning the content.
In newer versions of TouchDesigner, the Layer Mix TOP could be used instead to further simplify the network.
Now that the content is in the correct location, you should be able to connect the computer’s GPU to the LED processor and set TouchDesigner up to output the texture! The LED processor will take care of the rest.
Ex. #2: Setting Up for a 18×2 LED Wall in TouchDesigner
Let’s take a look at another layout, where we have a somewhat more realistic setup. In this case, we have an 18×2 grid of panels, giving us a total resolution of 2304×256 pixels. If 500x500mm panels are used, the final arrangement would be roughly 30ft long and 3.25ft high.
In this case, because the total width of the wall exceeds the resolution of the texture we’re outputting from the computer, the pixel map looks a little bit different. To allow the texture to fit within the 1920×1080 resolution, the display is broken into three quadrants. The arrows mark edges that would be touching in real life. Just like our previous example, the coordinates show us where to place our content within the output texture.
As before, note that a real texture map provided by a vendor or installation team will likely be nicer than this! We’ve created these examples for illustrating how pixel maps work.
Here’s what the output from TouchDesigner would look like for this setup.
This might look somewhat complex to set up in TouchDesigner, but with the help of the new Layer Mix TOP, it’s a breeze! After generating a texture that spans the entire 2304×256 resolution, I split it into three sections using Crop TOPs, and then used the layer mix to position all three textures based on the pixel map coordinates.
Just like before, once the content has been cropped and positioned in the correct location, all that’s left to do is to output the content and the LED processor will take care of the rest! The Layer Mix TOP, with its ability to position each layer independently, means that this process is easier than ever, even if you have a more complex setup with additional displays or lighting.
If you’re interested in more tips for working with LED displays and TouchDesigner, check out Elburz’s post LED Basics for TouchDesigner Pros.
Wrap-Up
LED walls can be a great display choice for a wide variety of projects, from permanent installations to DJ sets. Although the setup process can seem a bit daunting at first, TouchDesigner has a number of tools that make it easier to customize your output for your particular project. We hope that this post has given you a bit of insight into the process of working with LED walls and TouchDesigner!
