Projection mapping is a common area of interest for many new TouchDesigner developers. The program offers a number of tools for projection mapping, with Stoner, Kantan Mapper, and CamSchnappr being the most prominent. Each tool offers a unique set of features and strengths, which make each tool better suited for particular applications. In this post, we cover the basics of using Kantan Mapper for projection mapping in TouchDesigner, by working through an example project where we create content and project it onto a virtual building.
Note: in order to keep this blog post from reaching book length, we are skipping over a lot of steps that would happen in the process of creating a projection mapping in the real world. All discussions of projector selection, projector positioning, hardware selection, etc. are not going to be covered in this post. Instead, we’ll focus on the parts of the process that involve working in TouchDesigner, albeit in a much simplified form.
Which Mapping Tool Should I Use?
TouchDesigner has a number of tools for projection mapping. If you’re not yet familiar with the tools already, check out our previous post Tips for Working with Projectors and TouchDesigner where we cover the various options you have available.
When starting a projection mapping project with TouchDesigner, one of the first important considerations to make is what tool you’ll use for projection mapping. As mentioned in the intro, each tool has a unique set of features which typically help to decide what tool will be most useful for a particular situation.
If the projection mapping required for the project is very simple, requiring only simple keystoning and maybe a bit of grid/mesh warping, Stoner might be a good option.
Let’s say the projection mapping is a little more complex than that, requiring projection onto a complex surface. For this, Kantan Mapper or CamSchnappr are good options.
CamSchnappr is great because it allows for simple alignment of the projection with just a handful of points. But, it requires an accurate 3D model of the projection surface, so your ability to access/create a 3D model of the surface can help decide which tool you use.
Today’s Focus: Kantan Mapper
For this example, we’re going to focus on working with Kantan Mapper. Kantan Mapper is a projection mapping and masking tool where you define 2D polygons and bezier outlines in the field of view of a projector. Check out the documentation page for more info.
Example Scenario: Mapping Onto A Facade
For this example, let’s say that we are tasked with projection mapping onto the side of the building seen in the image above (original 3D model source).
You’re probably saying “Wait, don’t we have a 3D model of the projection surface?” In this particular situation, yes we do technically have a 3D model of the building (because it only exists as a 3D model) but for the sake of this example let’s pretend it’s a.) a real building and b.) that we don’t have a 3D model handy. Because of this limitation, we’ll be using Kantan Mapper.
Our goal is to project onto the side of the building, and thankfully for us, our client has sent us the above photo of the building’s facade that we’ll be projection mapping onto.
As mentioned earlier, we’re going to skip over the steps of selecting a projector for the project, working on plans for positioning and mounting the projector etc. that you might start with in a real project and jump straight into the process of creating content for the projection.
Creating Content for Projection Mapping
Since we do have access to such a nice image of the surface we want to project onto, we can use it as part of the content creation process. We can use TouchDesigner or any other video/image editing tool to create motion graphics, using the image as reference for the size/shape of the components.
For example, let’s say you wanted to create outlines that highlight some of the building’s geometry for part of the projection mapping content. You can open the image in an image editing program, draw a couple of simple shapes onto the image, and export each layer to be used as a frame in an animation.
Note that this content will be exported on a smaller canvas, shown below in the area in yellow with a black outline. This is done to make the mapping process in Kantan Mapper easier, as the canvas size/aspect ratio of the content will match the rectangle geometry that is mapped and aligned to the physical projection surface (building).
With static frames exported, it’s easy to turn the frames into an animation with a single Movie File In TOP. We’re taking advantage of its ability to create an image sequence when provided a folder of images as its source.
With a simple cache effect added, here’s the final result! Now, let’s look at mapping this texture onto the building.
Mapping Onto The Projection Surface
Before we’re able to output to the projector, we’d need to set up a Window COMP in TouchDesigner, specify which display to use, and provide a texture to display. For our example, we’d use a Null TOP connected to the first output of the Kantan Mapper COMP as our Window Operator (the texture to be sent out of the projector).
Because the projection content is exported on a canvas that matches the aspect ratio of the area of the building we intend to project onto, the process of mapping is very straightforward. Using the Create Quad tool (the box icon in the Tools panel) while looking at the output of the projector, we rough in a quad that covers the area of the facade that we want to project onto. The image below shows what this process looks like in the Kantan window.
In the next image, you can see what the (simulated) projector’s output would look like when using the Create Quad tool. Instead of the typical mouse cursor, a crosshair is displayed to aid in aligning the shape.
Once the quad is roughed in, left clicking on any one of the points that makes up the rectangle allows you to use the arrow keys to move the point in small increments. This is typically the best approach for fine-tuning the mapping of the shape to the surface. If this were a real building, it might take a bit of finessing to get right, and probably would require moving your vantage point to see the projection from multiple angles.
Applying a Texture
Once the quad is positioned correctly, applying the texture is as simple as dragging the TOP you want to use onto the Texture parameter in the Kantan window, and then clicking the small X icon on the right. Again, because our texture and our quad were designed to have the same aspect ratio, it makes things very easy — very little further adjustments are required!
Here’s the same thing, but from the viewpoint of the projector. You’ll see that the alignment looks pretty good right away.
Although this example looks great once mapped, it doesn’t offer much in terms of flexibility. Any additional effects or post processing would have to be done to the entire canvas, rather than to individual components. And, if any of the subsections of the projection needed further mapping adjustments, we’d have some tools to work with, but it could be more difficult to adjust. Most of the time, when using Kantan Mapper, you’ll be working with multiple shapes to create the final mapped output rather than a single rectangle.
Mapping with Multiple Shapes
As mentioned in the last section, it’s much more common to use multiple shapes to map content to a surface (especially when mapping onto multiple sides of an object, or onto an object with more complex geometry). Even this simple example with a mostly flat surface can be divided up into multiple shapes, which allows for more fine-tuning of the mapping of each area, as well as the ability to specify visual content individually.
In the image below, we’ve replaced the single rectangle with four smaller rectangles that are sized to each of the sub sections that were outlined in the motion graphic from the last example.
The image below shows what this looks like on the building. Just like before, we have the ability to click on any point that makes up a shape and use the arrow keys to adjust positioning.
To showcase one of the advantages of working with multiple shapes, we’ve upped the complexity of the content a bit. In this case, rather than exporting each outline from the image editor on a large canvas, we exported each image at the size of the rectangle itself, meaning there is no extra blank canvas around the rectangle.
Then, we loaded each image into TouchDesigner and applied feedback effects, with each image receiving a slightly different treatment. The goal here is to showcase that this method allows for more experimentation as effects don’t have to be applied globally.
The image below shows the final result. Although we’re processing the textures in TouchDesigner to generate the effects, the textures here also start with the same content seen in the image editor. You can do a lot with simple outlines! And like before, because the content that used as the basis for each section is derived from an image of the building, the process of mapping the content to the building is fairly straightforward.
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.
Masking in Kantan Mapper
Sometimes, rather than needing to map visual content to the projection surface, what you need is the ability to mask off some of the content instead. This could be handled in a number of ways in TouchDesigner, but helpfully it’s actually possible to create new layers right within Kantan Mapper that will mask the content underneath.
Let’s say we want to mask out the small windows in the center area of the building. All that we need to do is use the Create Quad tool once to create a new quad shape the same size as the window, and then we can copy the shape by switching to the Select Shape tool (arrow icon on the far left of the Tools panel), holding the Alt key and clicking + dragging the shape. Do this a total of three times and you can achieve the results below.
If these rectangle layers are positioned correctly in the Shapes panel (which functions like the Layers panel in Photoshop), their content will cover up any of the layers underneath. By setting the Color parameter to black, you have yourself a mask! This technique can also be very useful when used in conjunction with the Freeform shape tool to mask out more complex shapes.
Below are the results of this masking process. It’d probably be better to adjust the content for that section to take into account those masks as they look a little out of place, but this at least should give you an idea of how they work!
Wrap-Up
As usual, we’re just scraping the surface of projection mapping with this example. But that said, we hope that this example has given you a sense of how you can start to utilize Kantan Mapper for your own projects, and has gotten you excited for experimenting with projection mapping yourself!
