Week 01: Interactive 3D animation - SCM Swebsweb.cityu.edu.hk/sm4125/SM4125-01.pdf · SCM, City...

SM4125 Computer Animation for Interactive Content I

Prepared by Kam Wong SCM, City University of Hong Kong Jan 2009

1

Week 01: Interactive 3D animation

Interactive 3D animation

A work created by Jarrett Smith

Interactive 3D animation is one of the most difficult applications to be created. On one hand

you need to prepare 3D animation contents (models, movements and textures), either

off-line or in real-time. On the other hand you have to interact the contents in real-time (say,

using mouse, keyboard, joystick, webcam, etc); and the interaction may affect the models’

outlook and movements (think what happen inside a computer game). You should have an

easy-to-use tool to create it, and the tools should be fast enough to deliver the contents (with

high rendering quality) in real-time.

There are several issues for “interactive 3D animation” that we need to concern, and will be

covered in this course:

� Prepare digital contents:

� We can prepare pre-rendered sequences of action images, and map it to a polygon

which is always facing the camera (usually called sprites).

� We can prepare simplified polygonal models (with textures), and some of them

with pre-set movement data (such as the angles of all the joints). We can export

it into a 3D file format, and import into the interactive 3D program.

� We can create simple 3D model in real-time (such as deformed torus, particles,



2

etc), using the tools that we have chosen.

� Video (and still images) can also be combined with the 3D contents, used as

backdrop, texture mapped on 3D models, etc.

� Audio can be used as background music and event sounds; or we can even use

them to drive other video/3D components in real-time.

� Interactivity

� We can read the data from mouse, keyboard, joystick, or even from the network to

control various parameters in the other digital contents. For example, we can use

the mouse position to control a 3D model’s deformation, or use a keyboard button

to trigger the starting of a pre-defined movement of a fighting action.

� Enhanced real-time rendering

� Most of the 3D file format only store simple material information. In the

interactive “program” we create, we can enhance the real-time rendering quality

through the support of the tools or some programming efforts (e.g. real-time

generated texture, real-time shadow, etc).

Tools for creating interactive 3D animation

There are two major categories of tools for creating interactive 3D applications: computer

programming, and visual programming software.

� Computer programming

� PC game is an example of interactive 3D animation, and nearly all PC games are

written in C++. It is because there is no restriction in C++ language, and it is nearly

the most efficient language.

� Scripting language, such as Flash ActionScript or Processing is too slow for

complicated 3D graphics.

� Visual programming tools

� There exists some software called “visual programming tools” for creating

interactive application, so to minimize the programming effort for artists.

Examples include PureData, Max/MSP with Jitter, Isadora, etc. Nearly all these

software employ a “node-based” approach: nodes provide basic functionalities,

and users connect nodes together to achieve certain targets.



3

� However, most of the software listed above is mainly target for interactive

video/audio applications. They do not provide enough features for creating 3D

animation contents. For example, they cannot import complicated 3D file format,

or they cannot easily create 3D models in real-time, and having very limited

real-time rendering support, etc.

In this course we will use TouchDesigner, a visual programming tool which emphasize on

supporting real-time performance of 3D contents. It can import FBX (a common 3D file

format that can be exported from Maya). It also provide 3D primitives (sphere, torus, etc),

3D operations (deform, twist, etc), and real-time rendering support (so called real-time

shaders using GLSL). Therefore, you can create real-time, interactive application with rich

3D animation contents. Even though the software is new (it is still in beta version, and the

user group is small), however, the features it provides fit this course very well.

If you want to work at home, you can download the free version of TouchDesigner here (in

our lab we are using the version TouchDesigner FTE 077 build 1191):

http://www.touch077.com

or

http://www.touch077.com/Downloads/Archive.asp

A screen snapshot of TouchDesigner running



4

A first tour in TouchDesigner

Start the TouchDesigner by:

� Start > Programs > Derivative > TouchDesignerFTE.077

The default setting will not prompt you for saving on exit. So, it is better to turn on this

option in the preference:

� Edit > Preferences…

As usually a project may contain other external files, such as video, images, audio, 3D

geometry file, etc, I recommend you to create a “project” before we go ahead.

� File > New Project…

When you have created a project, whenever you save a file using File > Save Env, the

previous version will be automatically kept as a backup using filename. For example, in the

project shown in the above image, the most updated file will be saved as lesson1.toe, and

backup files will be named lesson1.1.toe, lesson1.2.toe, lesson1.3.toe, etc. You may delete

those files if you don’t need the backup files anymore.

The start-up screen is mainly divided into these parts (you can customize the screen layout

any time, but let’s keep this layout at the moment):



5

There are several mouse operations and hot-keys you have to know:

� LMB: pan the network view

� MMB: zoom the network view

� Press H to home the network view

� LMB-click to select a node in the network view. Press Shift-H to zoom in the

selected node.

� MMB-click on a node to see more information about the node.

� RMB-drag to select one or more nodes.

The major task in TouchDesigner (and in nearly every visual programming tool) is to create

nodes, connect nodes together, and fine-tune each node’s parameter. In

TouchDesigner, you can create node (they are called OP in TouchDesigner) by pressing TAB

when your mouse is in the network view:

Timeline: an interactive work should keep on running.

You can stop it when you are building the network, and

re-play it afterward.

Palette Browser: lots of

example and utilities

there. We will use it later.

Parameters: when you select a

node, the parameters of the node

are shown here. Press p to

hide/show this window.

Network View: build

your network here.



6

TouchDesigner use different color to represent different types of OPs:

� TOP (light-purple): OPs for video and image processing.

� CHOP (green): OPs for channel processing. Channel is a “2D graph of value”, usually

the horizontal axis is the time axis, and the vertical axis is the value. The value can

then be used to control any parameters in other OPs. Mouse position, keyboard status,

etc, are all handled by CHOP.

� SOP (sky-blue): OPs for 3D shape processing.

� MAT (light-brown): OPs for 3D materials.

� DAT (magenta): OPs for text processing.

� COMP (dark gray): OPs for components. Components are containers of OPs. You

may think that this is a high-level encapsulation of an “object” inside TouchDesigner (we

will explain more later).

Let’s try to create an EMBOSS TOP:

The red-cross means that we have error in this OP. You can middle-click on the OP to read

the error message. At this moment it is just because we haven’t connected any input to this

OP. OP input pins are shown on the left, and output pins are shown on the right.

Click and connect the network as the following:



7

This network can be read from left to right, meaning that we load a movie, process it using

the emboss filter, and pass it to the output node. Feel free to play with the parameters of

the OPs, especially the EMBOSS OP. To delete a connection, you can click on the end of the

connection, and then click on the empty space.

Let’s try to control the Strength of the EMBOSS OP by using the “current time”. Type $T in

the parameter Strength of the EMBOSS OP:

We can type expression in any parameter to control an OP. The $T means the “current time

(in second)”. Later on we will use other kinds of expressions to control various parameters

of OPs.

Let’s create a Container COMP. Note that in a network, each OP has a name. Middle-click

this Container COMP, you will find that the name of it is /project1/container1. A Container

can store network of OPs inside it. You may think that it is a folder to store your network.

You may also think that it is the highest level OP of your artwork. Usually we will put our

network into one Container COMP.

To go inside a COMP OP (if you are allowed to go inside), you can select it and then press i.

To go one level up, you can press u.

This name shows that you are inside the OP

/project1/container1



8

Now try to cut-and-paste the network we currently have (the 3 TOP OPs), moving them inside

the Container COMP, by using Ctrl-x and Ctrl-v:

1. Select all 3 TOP OPs, and press Ctrl-x.

2. Go inside the Container COMP.

3. Press Ctrl-v.

4. Go up one level by pressing u.

There is one important parameter of Container COMP that you may want to specify: the

Background TOP under the Panel tab:

Type ./out1 in the field, which means “the OP name out1 stored inside myself”. This will

become the final “outcome” we want to show in this Container.

Lastly, right-click on the Container COMP, and choose Viewer…. A window will pop up, and

usually this is the window we use to present our final artwork. Players will interactive with

this window. We will explain this in details later.

Example: create a simple mouse interactive 3D scene from scratch

Let’s try one more example from scratch. Save your work with another filename, go inside

the Container, and delete the 3 TOPs. In this example we will create a simple 3D scene with

mouse interaction.

Go inside the Container, and create a Render TOP. A Render TOP is necessary for rendering

a 3D scene. By default it takes one camera (called cam1), one geometry (called geo1), and

at least one light.



9

So, you have to create the following COMP as well:

� Camera COMP: you should create at least one camera for a 3D scene. As the default

name of it is cam1, it is automatically “linked” to the Render TOP already. The default

setting is a perspective camera at [0,0,5], looking to [0,0,0]. We can tune its

parameters later.

� Geometry COMP: you should create at least one geometry for a 3D scene. Similarly,

as the default name of it is geo1, it is automatically “linked” to the Render TOP already.

The default shape is a torus, but we can go inside a Geometry COMP to define its shape

(using network of OPs).

� Light COMP: you should create at least one light for a 3D scene. The default setting

is a point light at [0,0,20], but we can tune its parameters later.

Lastly, create an Out TOP and connect it to the output of the Render TOP. Rename it as

out1 if it is not in this name. The network looks like this:



10

We are ready to go inside the geo1, and modify its shape. Go inside the geo1, you can find

this:

The default shape of a geometry is a torus. Try to create a Sphere SOP, and tune on the

purple dot (means render) and blue dot (means display) at the bottom of the Sphere SOP.

You can delete the Torus SOP, or you can keep it at the moment. It does no harm to the

system. If you don’t want to delete it, just turn off its purple dot and blue dot:

Go up one level and you can find that the shape of geo1 becomes a sphere. How about

emitting particles from the sphere? Go inside geo1 again, and connect a Particle SOP after

the Sphere SOP. Make the radius of the sphere smaller, and turn on the Particle SOP’s purple

and blue dots:



11

To make the visual effect looks more interesting, let’s add some External Force and

Turbulence under the Forces tab of Particle SOP’s parameters:

We will try more on the Particle SOP (as well as other OPs) later, so I don’t want to go into too

many details of it right now. Lastly, let’s read the mouse position, and use it to control the

x and y position of the sphere. To read the mouse position, we use a Mouse CHOP:

The mouse x position is recorded as a channel called tx, or more precisely mouse1/tx (or a

full name /project1/container1/geo1/mouse1/tx), and y position is recorded as a channel

called ty. We can use them to override the Sphere SOP’s Center parameters, by writing

down the expression chop(“mouse1/tx”) and chop(“mouse1/ty”):

Now, go back to the /project1 level. Make sure the Background TOP of Container1 has been

set. Right-click on the Container1 and choose Viewer… to see the result.



12

Remarks 1: you can right-click on the Container1 and choose Borderless…. You may also

want to adjust the window size of Container1 by changing its Width and Height parameters:

Remark 2: the sphere looks like an oval shape because by default the Render Top renders an

image in 512x512. You may want to change the parameter Resolution and Aspect Ratio

of the Render TOP (i.e. our render1) as follow:

Remarks 3: the mouse position is returned in the range -1 to 1 along the horizontal direction,

and -0.75 to 0.75 along the vertical direction. If we use them to directly control the sphere’s

x and y position, the range may be too small. We can adjust it in the expression, say, using

chop(“mouse1/tx”)*2.

Class Exercise: adding sliders

Go inside /project1/container1. From the Palette Library shown on the left, locate a

component (under /Derivative/UI/Sliders) called “SliderComboV”. Click-and-drag onto the

network view:



13

Any UI component (button, slider, etc) inside a Container will be shown in the Viewer pop-up

window of that Container. Go up one level, open the Viewer (or Borderless) of the Container,

and you can see (and drag) the slider.

Now, create 3 more SliderComboV, and offset their X parameter (under the Layout tab) a

little bit:

The default output range of a SliderComboV is from

-10 to 100. To change the range, we can go inside

a SliderComboV, open the Viewer of an OP called

sliderdef, and change the Lower and Upper values

there. Note that you may want to change the

current value of the slider before you modify the

Click-and-drag a SliderComboV into

/project1/container1

X=0 X=38 X=76 X=114



14

range.

The values of the four SliderComboV are named:

/project1/container1/SliderComboV/out1/vertical

/project1/container1/SliderComboV1/out1/vertical



Try to use these 4 sliders to control various parameters of your 3D scene. You may try light

color, sphere radius, external force of particles, etc.

Later on we can go inside SliderComboV to customize it (e.g. replace its image, etc). We will

look at more UI elements later in this course.

** Week 01 END **

Week 01: Interactive 3D animation - SCM Swebsweb.cityu.edu.hk/sm4125/SM4125-01.pdf · SCM, City...

Documents

Transcript of Week 01: Interactive 3D animation - SCM Swebsweb.cityu.edu.hk/sm4125/SM4125-01.pdf · SCM, City...