Tag Archives: lookup

Nov 12 2014

Lookup TOP tutorial.

The Lookup TOP. TouchDesigner 088. 2014.
The Lookup TOP is a versatile Texture Operator. This tutorial shows a few examples of how this Operator can help you tweak and analyze 2D images.

1
00:00:00,567 –> 00:00:04,833
Let’s take a look at the lookup
TOP.

2
00:00:04,833 –> 00:00:10,900
Here’s an example project with 3
networks that feature the lookup
TOP.

3
00:00:10,900 –> 00:00:20,567
The lookup TOP is not a very
intuitive operator, but it can
create some amazing and very
useful effects.

4
00:00:20,567 –> 00:00:28,800
The lookup TOP replaces color
values in the first input, with
colors from the second input.

5
00:00:28,800 –> 00:00:39,233
This network is designed to help
you visualize the way the lookup
TOP parameters define those
replacement values.

6
00:00:39,233 –> 00:00:44,767
We start with dark UV and light
UV parameters.

7
00:00:44,767 –> 00:00:51,333
These values represent a UV
position on the second input
TOP.

8
00:00:51,333 –> 00:01:04,567
The component named “VISUALIZER”
contains a simple TOP network
that uses the dark and light UV
values to render some visual
aids.

9
00:01:04,567 –> 00:01:13,133
The white circle represents the
light UV position, and the black
circle represents the dark UV
position.

10
00:01:13,133 –> 00:01:22,200
The grey line between represents
the color range the lookup TOP
will sample from.

11
00:01:22,200 –> 00:01:36,467
As I adjust the dark and light
UV values, you’ll see the
circles update their positions,
and you’ll see the effect of the
lookup TOP change as well.

12
00:01:36,467 –> 00:01:48,533
As I move the dark and light
range into a red solid field,
you’ll see the lookup TOP has
replaced all incoming pixels
with red.

13
00:01:48,533 –> 00:01:51,000

14
00:01:51,000 –> 00:01:57,433
We can use a CHOP instead of a
TOP as our second input.

15
00:01:57,433 –> 00:02:05,600
This technique can be a little
harder to visualize, so I set up
a straightforward example.

16
00:02:05,600 –> 00:02:09,533
We start with a ramp, from black
to white.

17
00:02:09,533 –> 00:02:17,467
I merge 3 wave CHOPS in to a
single CHOP with 3 channels-
“r”, “g”, and “b”.

18
00:02:17,467 –> 00:02:29,900
The initial CHOP values are a
ramp from 1 to 0, which replaces
the original black to white ramp
with a white to black ramp.

19
00:02:29,900 –> 00:02:37,200
Now, I’ll adjust some parameters
of the wave CHOPs. I’ll bring
the red value up.

20
00:02:37,200 –> 00:02:47,100
The red channel no longer ends
on 0, so we are boosting the
amount of red at the end of the
range of values.

21
00:02:47,100 –> 00:02:50,333
I’ll do the same with the green
and blue.

22
00:02:50,333 –> 00:03:01,600
Now, by adding more cycles of
light to dark and back again,
I’m starting to create
overlapping color bands.

23
00:03:01,600 –> 00:03:03,167

24
00:03:03,167 –> 00:03:11,400
The sample range of the CHOP is
normalized to the UV space of
the input TOP.

25
00:03:11,400 –> 00:03:17,567
A good way to visualize the
effect is to follow the vertical
lines in the CHOP.

26
00:03:17,567 –> 00:03:30,800
The point where the R, G, & B
channels intersect that vertical
line, will create a discrete RGB
value for that vertical line in
the lookup TOP.

27
00:03:30,800 –> 00:03:31,800

28
00:03:31,800 –> 00:03:45,133
This example shows a very
powerful method you can use to
extract specific depth ranges
from rendered images, or sensor
inputs like the Kinect.

29
00:03:45,133 –> 00:03:51,767
I’ve created a simple scene in
the container named
“DEPTH_VISUALIZER”.

30
00:03:51,767 –> 00:03:58,733
We start with a geometry
component which is comprised of
a deformed grid.

31
00:03:58,733 –> 00:04:07,133
Remember, you can press the “H”
key to re-center all your
geometry in the viewport.

32
00:04:07,133 –> 00:04:17,567
We have a camera that is wired
to a slider in the network above
this, and we render the geometry
using a render TOP.

33
00:04:17,567 –> 00:04:30,733
We use a depth TOP to show us a
grayscale image of the render
TOP, where white represents far
geometry and black represents
close geometry.

34
00:04:30,733 –> 00:04:35,633
This is how the depth input from
the Kinect is also rendered.

35
00:04:35,633 –> 00:04:39,200
I press the “U” key to go up a
level.

36
00:04:39,200 –> 00:04:42,267
This slider drives the camera
position.

37
00:04:42,267 –> 00:04:58,033
As in the first example, we’ll
use a TOP as our second input,
but this time we’ll sample the
entire left to right UV range,
and fine tune the color band on
the ramp itself.

38
00:04:58,033 –> 00:05:09,967
We want to colorize a range of
near 3D values, a range of
middle 3D values, and a range of
far 3D values.

39
00:05:09,967 –> 00:05:21,767
We can adjust the tab positions
on the ramp TOP, to expand or
contract the range of the
corresponding color field.

40
00:05:21,767 –> 00:05:31,867
In this set up- the green zone
represents near, cyan is middle,
and red is far.

41
00:05:31,867 –> 00:05:42,933
If I contract the red zone, we
move the beginning of the 3D end
range farther away from the
camera.

42
00:05:42,933 –> 00:05:55,767
Using this method, it is
possible to isolate and modify
specific ranges of rendered 3D
values by using only 2D
operators.

43
00:05:55,767 –> 00:05:57,767

Posted In
Tagged