[Introduction to Touchdesigner] Bump mapping for bumpy surfaces without modeling

miwa_maroon
4 min readAug 15, 2021

--

Bump mapping

Many of you may be wondering what Bump mapping is, so I’ll show you what I’m going to make!

First, look at the sphere on the left!
It’s a sphere with a name engraved on it and a squishy surface.

It’s probably modeled and animated in blender or Houdini, right?
You think!
No, it’s not.
It’s just a Sphere, just a ball!

That’s why it doesn’t require a lot of polygons to be moved, so it’s very light.
This so-called “sphere” uses a special texture called the Normal Map to make the unevenness possible.

As I mentioned earlier, because of its lightness, it is also used in games where real-time performance is important.
You can see this by observing the buildings in Call of Duty lol.

bump mapping on

bump mapping off

quote: https://www.4gamer.net/specials/3de/051222_call_of_duty_2_optimization/call_of_duty_2_optimization.shtml

The donut on the right is a bump mapping of a convex-concave model. This is the ADVANCE version.
Of course I’ll do this too!

easy to use

From the previous explanations, I think you understand that it is quite a convenient way to express yourself.
Now, how do we do it!
It’s very easy!
I’ll tell you in conclusion.
Use Normal Map TOP!
It’s pretty much the same! I’ll show you how to do it in the video below.

Video tips

The basics are explained in the video, so I’ll focus on the important little tips that you need to know!

Strength of unevenness

When using Normal Map TOP, there are times when you want to change the intensity of the bumps, right?
In such a case, the following method is also effective!

*Increase the value of Sample Step of Normal Map TOP.
*Increase the value of Bump Scale in Matrial.
*Increase the brightness or contrast of the source texture

As for the third one, setting of the Normal Map parameter is default

Texture boundary area

When applying textures, such as bump mapping, it is common for the edges of the texture to come out and look unnatural.

The tile TOP is used here, and should be placed in front of the TOP of the texture you want to use.
Normally, Tile TOP is used to arrange input TOPs in a tiled pattern, but since we won’t be using it this time, set RepeatX and RepeatY to 1 and 1, respectively.

Then we use Overlap U/V!

By increasing the value of this, you can blend the border in a nice way.

This is pretty useful.

World Space Normal in Render select

Render TOP allows you to save several rendering results.
For example, World Space Position
This means that if

the polygon’s coordinates are at x, it will be red;

if it is at y, it will be green;

if it is at z, it will be blue, and so on.

Render select TOP to retrieve the saved result!
(Render TOP and MAT need to be set)
Let’s set World Space Normal to Buffer in MAT, and use Render select TOP to extract the result.
This is what you get

It’s the same as before,

if the point or polygon is facing x, it’s red,

if it’s facing y, it’s green,

and if it’s facing z, it’s blue.

You can also use this Normal information to determine if snow is falling.

In high school, in a vector class, I remember thinking,

“The vector that is orthogonal to this vector is called the normal,”

and I thought, “Where would I use that?
Here it is,

Please teach me that much, teacher. 、、、、

Select the Geometry you want to Render.

If I want to show only geo3 in render, I can go to Reder -> Geometory -> geo3 in Render TOP.

If you want to show something other than geo3
^geo3

It’s also written in a plain DOCUMENT lol.
https://docs.derivative.ca/Render_TOP

私の作例

Overlapping technique with Cube Map reflection
I think it can be used to express rust.

Another one.
Almost a derivative of this

What is the next?

We’ll be sending out lots of tutorials to increase the number of Touchdesigner users and examples in society!
I hope to work with you all to make this happen!
I’m not done yet, but if there’s anything you’d like me to do, please comment!

--

--

miwa_maroon
miwa_maroon

Written by miwa_maroon

I want to bring a smile to someone's life. Use Touchdesigner.