Game Programming

Game Production
 Changing Your Mind

• The real process involves a lot of iteration

and changing your mind
Prototype

Idea Prototype Game

Prototype

Prototype

 And you finish with a much better design than your

initial game idea! Game

2
Basic elements

Aesthetics

Mechanics Story

Technology
•Mechanics
– the procedures and rules
•Story
– the sequence of events that unfolds
in game
•Aesthetics
– how game looks, sounds, tastes, and
feels.
•Technology
– any materials and interactions that
make game possible
 2D Animation
• Animation  produces the illusion of
movement
• Display a series of frames with small
differences between them
• Done in rapid succession, eye blends to
get motion
• Unit is Frames Per Second (fps)
– 24-30 fps: full-motion (Game Maker does
30)
– 15 fps: full-motion approximation
– 7 fps: choppy
– 3 fps: very choppy
– Less than 3 fps: slide show
 Motion Line

•Invisible line created by object as

moves
– Locate in center of gravity
•Straight if flying
– Ex: bullet
•Up and down if bounces
– Ex: rubber ball
•Depends upon speed and desire
for exaggeration
– Ex: Human sprinting versus walking
Walt Disney’s 12 Principles of Animation
• During the late 1920’s through
the 1930’s, Walt Disney worked
to improve the techniques of his
studio animators.
• Disney set up drawing classes
for his animators at the
Chouinard Art Institute in Los
This work is in the public domain because it was
published in the United States between 1923 and Angeles under Instructor Don
Graham.
1963 and although there may or may not have been
a copyright notice, the copyright was not renewed.

• Through these lessons and

interaction between Disney and
his staff, a set of 12 principles
was developed.
• These principles were used in
Disney animated productions
including Snow White,
Pinocchio, Fantasia, Dumbo, and 7
Bambi.
 12 Fundamental Principles
Timing + Spacing

• Timing is how long does it takes to get from one key pose
to another
• Spacing is the way to get from one key pose to another,
whether its fast or slow e.g. eye blinking
 2. Arcs
• Almost all natural motion is in some form of an
arc.
• In 3D animation, a motion arc is usually
created using a spline curve.
• Pivot points often define the arc. The pivot
point for the thigh is the hip, and the pivot
point for the calf is the knee.
• Most human motion follows an arc. If a boxer
throws a punch, the motion of his glove
follows an arc.

9
 3. Anticipation

Preparation for an action

Example:
Goofy prepares to hit a baseball.
 12 Fundamental Principles
Anticipation
 4. Exaggeration
• Exaggeration is used to
increase the readability of
emotions and actions.
• Animation is not a subtle
medium.
• Individual exaggerated
poses may look silly as
stills but add dramatic
impact when viewed for a
split second.
• Animators should be
careful to use
exaggeration to increase
understanding of feeling.
Be careful not to over-
exaggerate everything.
 5. Squash and Stretch

• Teaches basic
mechanics of
animation.

• Defines rigidity of
material.

• Important in facial
animation.
6. Secondary Actions
• Secondary actions are
minor actions that occur
due to a major action. Most
people blink their eyes
when they turn their head.
• Facial expressions are
secondary actions.
• Secondary actions are also
actions caused by the
impact of another object.
The movement of a ball
that has been kicked is a
secondary action.

14
6. Secondary Actions

15
 7. Follow Through and
Overlapping Action

1. Follow Through
Termination part of an action.

Example: after throwing a ball

2. Overlapping Action
Starting a second action before the first has completed.
 12 Fundamental Principles
Follow Through + Overlapping
 8. Straight Ahead Versus
Pose To Pose
• Straight Ahead animation means drawing the frames
in sequence. This leads to spontaneous motion. It
works well with abstract animation and fluids.

Image 03. Used with permission.

 Pose To Pose is the more often used animation

technique. It requires the animator to create strong
poses (keyframes) first and then add the in-between
frames.

Image 04. Used with permission.

Copyright © Texas Education Agency, 2012. All rights reserved. 18
Images and other multimedia content used with permission.
19
 9. Staging
• Staging is the clear presentation of an idea.
• The animator can use the camera viewpoint,
the framing of the shot, and the position of
the characters to create a feeling or
strengthen understanding.

20
 10. Solid Drawing

•Proper drawing and

modeling are
needed to give the
character proper
depth and balance.
•When creating
animated
characters, it is a
good idea to not
add too much
Image 15. Used with permission.

detail. 21
22
11. Appeal
• Animated characters need
to have a unique
personality and have a
wide range of emotions
(happy, excited, fearful,
embarrassed, angry,
scared, etc.).
• Character flaws are
actually a good thing.
Audiences can be
sympathetic to characters
that have a flaw or two.
• Complex personalities and
moral ethical dilemmas
add to character appeal.
24
 12. Slow in and Out

Spacing of 1. 3d keyframe comp. Systems

inbetween frames uses spline interpolation to
control the path of an object.
to achieve
subtlety of timing 2. Has tendency to overshoot at
and movement. extremes (small # of frames).
26
 Basic Animation Techniques

• Keyframe animation
– Animator specifies important positions
throughout the animation – the keyframes
– Someone or something fills in the intermediate
frames – inbetweening, or just ’tweening
• Motion capture
– System captures motion data from a real
enactment of the animation
– The data then drives a virtual character
• Procedural animation
– A set of equations or rules are evaluated to 05/09/
determine how the animation behaves 02

(c) 2002 University of Wisconsin

 Creating Animation

Stages of Implementation

Mattes
Ruff (Portions of EFX
frame)
 Keyframe animation

• Keyframe is a drawing of a key

moment in an animated sequence,
where the motion is at its extreme.
• Inbetweens fill the gaps between
keyframes.
• Every motion is created by animators.
Animation
 Animation

Simple Animation Using Key

Framing & Tweening
 Key Frames
• Images at extremes in movement
– Most noticeable to observer
– Ex: for flight wings up and wings down
– Ex: for walking, right leg forward, leg
together
• The more the better?
– Smoother, yes
– But more time to develop (tradeoffs)
– And more prone to errors, “bugs” that
interfere with the animation
 In-Between Frames

• Generated to get smooth motion

between key-frames
– Can be tedious and time consuming to
make
– Most software allows duplication
 Interpolation
• Interpolating splines are smooth curves that
interpolate their control points
• Perfect for keyframe animation
• Typically, time is directly associated with the
parameter value, controlling speed

2
3

Keyframes Animation
 Interpolating Positions
• Given positions:
(x , y ,t ), i
i i i 0, , n
 x (t )  xi 
• find curve
C (t )    such
C (t i )that
 
 y (t )   yi 

(x 2 , y 2 ,t 2 )
(x 0 , y 0 ,t 0 )
C (t )
u0

( x1 , y 1 , t 1 )
 Linear Interpolation
(x 2 , y 2 ,t 2 )
(x 0 , y 0 ,t 0 )

( x1 , y 1 , t 1 )

t 0=0 and t1=1 x (t )  x 0 1  t   x1t

• Simple problem:
t  t
linear interpolation between first
tt
two points assuming
1
t  t x 0  0
x1 , t  : t 0 ,t1
t1  complete
t0


• x (t )  
The x-coordinate
1 0 for the curve in the
figure:  t2  t t  t1
x1  x 2 , t   t1 ,t 2 
t 2  t1 t 2  t1
 Polynomial Interpolation
(x 2 , y 2 ,t 2 )
(x 0 , y 0 ,t 0 )

parabola
( x1 , y 1 , t 1 )

• An n-degree polynomial can interpolate any n+1

points. The Lagrange formula gives the n+1
coefficients of an n-degree polynomial that
interpolates n+1 points. The resulting
interpolating polynomials are called Lagrange
polynomials.
 Spline Interpolation
• A cubic polynomial between each
2
pair of points:
3
x (t ) c 0  c1t  c 2t  c 3t

6.837 Fall 2003

• Four parameters (degrees of freedom) for each spline
segment.
• Number of parameters:
• n+1 points  n cubic polynomials  4n degrees of
freedom
• Number of constraints:
– interpolation constraints
n+1 points  2 + 2 (n-1) = 2n interpolation
constraints
“endpoints” + “each side of an internal point” Lecture
10
– rest by requiring smooth velocity, acceleration, etc.
Slide 48
 More Interpolation
•Anything can be keyframed and
interpolated
– Position, Orientation, Scale,
Deformation, Patch Control Points (facial
animation), Color, Surface normals…
•Special interpolation schemes for
things like rotations
– Use quaternions to represent rotation
and interpolate between quaternions
•Control of parameterization controls
speed of animation
Frame Animation Guidelines
 Steps in Creating Animation
Sequences (1 of 3)
• Conceptualize – have vision (in
mind or on paper) of what
animation will look like
• Decide on object behavior
1.Animated once (no looping)
2.Animated continuously (using
cycles)
• Choose a grid size – will contain and
constrain object
 Steps in Creating Animation
Sequences (2 of 3)
•Estimate the in-betweens –
think of how many you will
need to complete the
sequence smoothly
– Be conservative. Easier to
add additional transition
frames than remove them
 Steps in Creating Animation
Sequences (3 of 3)
•Test each movement
– Can be done with ‘copy’ and ‘undo’ in
tool
– Others have animation rendering (ex-
Game Maker)
– Look for flaws (movement, discolored
pixels …)
•Repeat - Repeat for all animations
Sprite Animation
 What is a ‘sprite’?

• It’s a small graphics pixmap image

• It’s normally stored in off-screen VRAM
• It’s ready to be copied to on-screen VRAM
• The copying operation is called a ‘BitBlt’
• Several sprites can support an animation
• Let’s see how to create a sprite array, then
synchronize BitBlts with Vertical Retrace
 Sprite

• A sprite is a single graphic image that is

incorporated into a larger scene so that it appears to
be part of the scene.
• Sprites are a popular way to create large, complex
scenes as you can manipulate each sprite separately
from the rest of the scene. This allows for greater
control over how the scene is rendered, as well as
over how the players can interact with the scene.
•
•
 Spritesheets

• When you put many sprites into a single

image, you get a spritesheet.
• Spritesheets are used to speed up the
process of displaying images to the screen;
It is much faster to fetch one image and
display only a part of that image than it is
to fetch many images and display them.
•
The ‘Pac Man’ sprite

1. Fill a circle with the foreground color

2. Fill a triangle in the background color
 The ‘Pac Man’ sprite-array

Create an array of sprites, arranged in a sequence that

matches the order in which they will be drawn to VRAM
Multiple sprite-arrays

RIGHT

DOWN

UP
2D Sprite System
• Bit-Mapped Images
• Sprites
– A set of image sequences to describe a 2D object
– Playback the image (animation) to simulate the
motion of the 2D object
• Clips
– A look of a sprite at some time

Clip

Sprite

63
Hot Spot of A Sprite
• Hot Spots Affect the Rendering Order
Hot-spot

A sprite
Hot spot coordinate
z

x
screen Rendering order

weight: z > y > x

y

64
Hierarchy of Sprites
• Describe the Geometry Relationship of
Sprites

(0,0) Parent Sprite

(+2,+2) (+40,+15)
(+10,+2)

65
 Order Dependency

•Is this image correct?

– Probably not
– Polygons are
rendered
in the order they
pass
down the pipeline
•Blending functions
are order dependent
 Typical animation loop

sprite pacman[ 8 ]; // the array of sprite-

images
int i = 0;
while ( !done )
{
draw( pacman[ i ], vramptr );
vsync(); // await next vertical
retrace
hide( sprite[ i ], vramptr );
i = ( ++i ) % 8;// cycle through sprite array
}
Motion capture animation
 Mocap animation
•Motion capture animation is
different from keyframe animation
in terms of how motion is created.
•Same principles of animations
apply to mocap animation &
keyframe animation!
•Combination of motion capture
animation, keyframe animation and
procedural animatoin is often used.
 What is Mocap?

•Motion capture (mocap) is

sampling and recording motion of
humans, animals, and inanimate
objects as 3D data.
•The data can be used to study
motion or to give an illusion of life
to 3D computer models.
 Motion capture animation
•To produce a motion capture
animation, the motion of a
capture subject is recorded as 3D
data and applied to a 3D model.
•The animation is produced from
the capture subject’s movement.
 Motion capture animation
•Although no 3D data is involved in
rotoscoping, motion capture
technology is sometimes referred as
“devil’s rotoscoping.”
•Examples: Avatar (2009), How to
Train Your Dragon 2 (2014)
Entertainment: Live Action
Films
Entertainment: 3D computer
animations
Entertainment: Video
Games
 Advantages of mocap
animation
•Faster to create (only if an established
production pipeline exists.)
•Secondary motions and all the subtle
motions are captured.
-> more realism
•Physical interactions between
performers and props can be captured.
-> more realism
 Disadvantages of mocap
animation
•Cost.
•Manipulating mocap data is often
difficult -> Re-capturing or key
framing a shot with bad data is
often easier.
•Mapping mocap data of a
performer to a 3D character with a
different proportion may cause
issues.
 Capture
Infra Red LEDs

Optical Magnetic Mechanical

Magnetic Transmitter

Potentiometers

Costa-Sousa, M., 2004

 Magnetic systems

•Utilize sensors placed on the

body to measure the
magnetic field generated by a
transmitter source.
 Ex: Ascension technology
http://www.ascension-tech.com/
Magnetic
 Ex: Metamotion
Electro-Mechanical http://www.metamoti
on.com
 Multiple Markers

• Mechanical Optical Hybrids

http://www.animazoo.com/services/gypsyHybrid.htm
 Fitting to the Skeleton

• Utopian approach
– 10 – 20% length
changes
• Markers on both
sides
• Joint
Displacement
• Use Rotation
Angles Only
 Mechanical systems

 Measure joint angles (no

marker ID problems).
 Sensors are never occluded.
•X Breakable!
•X Configuration of sensors is
fixed.
•X Constrains on joints.
 Optical systems
• The cameras are equipped with infrared
LED's and filters.
• The cameras see reflector markers.
Motion capture lab
 Optical systems

 Higher sampling rate.

 Larger capture space.
•X Markers are sometimes occluded
-> marker ID problems.
•X Provide only positional data ->
joint angles need to be computed.
Passive Optical
 Newer MoCap Technologies

• Inertial systems (similar to Wii technology)

• Make-up (fluorescent powder)
• Semi-passive imperceptible markers (emit light and
observe changes ; Kinect uses infrared)

• Markerless systems (video tracking)

 Organic Motion
Markerless www.organicmotion.com/

Image Metrics (facial)

www.image-metrics.com/
 Kinect – skeleton tracking, depth,
audio

• Using the Kinect in Unity

• http://channel9.msdn.com/coding4fun/kine
ct/Unity-and-the-Kinect-SDK
 Calibration

Image World
Space Space
(X,Y) (X,Y,Z)
(X,Y) (X,Y,Z)
(X,Y) (X,Y,Z)
 3D Position Reconstruction
(Utopia)

C  k I C C  k I  C 

C1 k 1I 1 C1P     
1x 1 1x 1x 2x 2 2x 2x

C
C 1 kk 1 I I 1 CC 1 C C k2 kI 2 C
1y
 2 I 2  C 2  P
1 1y 1y 2y 2 2y I 2 C2
2y

C 2  k
C k I  C C  k I  C 
1z 1 1z 1z 2z 2 2z 2z
 Multiple Markers
C1
• For small number of markers: Size
• Occlusions are a problem
• Multiple Hypothesis
C2 Tracking
 Post Processing

• Motion Editing
– Cut, Copy, Paste
• Motion Warping
– Speed up or Slow Down
– Rotate, Scale or Translate
• Motion Signal Processing
– Smoother Motions
 System Calibration and Capturing and Processing Data

2D Image -> 2D Camera Data -> 3D Markers Positions -> Trajectories -> Recon Skeleton -> Solver Skeleton
2D Image -> 2D Camera Data -> 3D Markers Positions -> Trajectories -> Recon Skeleton -> Solver Skeleton
Circle fitting Triangulatio FBX
n Reconstruction
Skeleton with subject’s
size & proportion and
motion data
BLADE Subject Calibration
• VST
(subject
VSK Skeleton with subject’s MOTION
Capture Range of Motion size & proportion
template)
BUILDER
(ROM)
• Reconstruct trajectories
of ROM
• Label markers

The processes that you Mocap Pipeline Character Setup

go through for each
character Flow Chart • Correlate :
Character
&

FBX
Character Setup Character
(FBX)
• Create a skeleton
• Edit motion
• Bind skin to the skeleton Skeleton with 3D character’s
size & proportion (and skin) • Bake motion data to the
• Rig the character skeleton
MAYA
The processes that
Rendering
FBX
you repeat for each
shot
• Marge the rigged character (MB) and
the skeleton with motion data (FBX)

MB • Edit motion (IK/FK blend, Trax)

Skeleton with motion data & 3D
character’s size & proportion

Maya Scene File • Render

Camera calibration

Project known 3-space points to camera’s image

P MP

Six degrees of freedom - use that many known

point-pairs
Projecting from 2D image
out to 3-space
3D – image plane projection

Projecting marker onto image plane

Reconstructing a 3D marker
Character Animation
 Character Animation

• To make computer graphics

(or cartoon drawings)
come alive…
Animation

Goal: everyone can generate and control human

animation easily and quickly
Offline animation control

User input Output animation

 Playing Animations
• “Global time” is game-time
• Animation is stored in “local time”
– Animation starts at local time zero
• Speed is the ratio between the two
– Make sure animation system can change
speed without changing current local time
• Usually stored in seconds
– Or can be in “frames” - 12, 24, 30, 60 per
second
108
 Data-driven Character Animation

Given motion capture data, how to create desired

animation
Motion capture

Animation

Control
 Linear Motion Extraction

• Find position on last frame of animation

• Subtract position on first frame of animation
• Divide by duration
• Subtract this motion from animation frames
• During animation playback, add this delta
velocity to instance position
• Animation is preserved and instance moves
• Do same for orientation

110
Composite Motion Extraction

• Approximates motion with circular arc

• Pre-processing algorithm finds:
– Axis of rotation (vector)
– Speed of rotation (radians/sec)
– Linear speed along arc (metres/sec)
– Speed along axis of rotation
(metres/sec)
•e.g. walking up a spiral staircase

111
 Animation

• Almost every property of every object in the

scene can be animated (changed through
time)
– Models, cameras, …
– Transformations: ‘
•Move
•Rotate
•Scale
– Modifications/Deformation: edits, bends, twists,
manipulating a skeleton
– materials, colors, textures
 Preproduction Phases

• Screen-play
• Storyboards
• Character
development
Typical Character
 Character

• Concentrate on
– Character Design
•Model Sheet with poses
– Modeling (simple)
– Skeleton Rigging
– Binding
 Personality through Pose,
Expression, Motion, Timing
Chapter 9 - 117 Interactive Computer Graphics
 Primitives

• The basic sort

of primitive is
the polygon
• Number of
polygons:
tradeoff
between
render time
and model
accuracy
Chapter 9 - 119
Mesh
Mesh deformations
 Sweep

• Sweep a shape over a path to form a

generalized cylinder
 Revolution

• Revolve a shape around an axis to

create an object with rotational
symmetry
 Extrusion

• Extrude: grow a 2D shape

in the third dimension
• Shape is created with a (1D)
b-spline curves
• Hole was created by
subtracting a cylinder
Chapter 9 - 125 Interactive Computer Graphics
Chapter 9 - 126 Interactive Computer Graphics
Chapter 9 - 127 Interactive Computer Graphics
Chapter 9 - 128 Interactive Computer Graphics
 Skin and Bones

• Skeleton with joined “bones”

• Can add “skin” on top of bones
• Automatic or
hand-tuned
skinning
 Hierarchical models

• When animation is desired, objects may

have parts that move with respect to
each other
– Object represented as hierarchy
– Often there are joints with motion
constraints
– E.g. represent wheels of car as sub-
objects with rotational motion (car
moves 2 pi r per rotation)
Chapter 9 - 132 Interactive Computer Graphics
 DAG models

• Could use tree to

represent object
• Actually, a DAG
(directed acyclic
graph) is better:
can re-use objects
• Note that each arrow needs a
separate modeling transform
• In object-oriented graphics, also
need motion constraints with each
arrow
 Skeletal Hierarchy

• The Skeleton is a tree of bones

– Often flattened to an array in practice
• Top bone in tree is the “root bone”
– May have multiple trees, so multiple
roots
• Each bone has a transform
– Stored relative to its parent’s transform
• Transforms are animated over time
• Tree structure is often called a “rig”
134
 Example: Robot

• Traverse DAG using DFS (or BFS)

• Push and pop matrices along the way
(e.g. left-child right-sibling)
(joint position parameters?)
 Keyframe Workflow

1. Set Keys
– Usually extreme positions
– Less is more: Keys only the properties
being animated
2. Set Interpolation
– Specify how to get from one key to
another.
– Secondary, but a necessary step.
3. Scrub Time slider and refine motion
curve
 Setting Keys

• Start with extreme positions

• Add intermediate positions
– Secondary motion
• Less is more
– Don’t add keys for properties that you
are not animating
– Easier to manage/edit fewer keys
 Motion of characters

• Along with key frame animation we can

use kinematics
– Kinematics = study of motion without
regard to the forces that cause it

Specify fewer degrees of

freedom
 Inverse Kinematics

• Balance = keep center-of-mass over

support polygon
• Control
– Ex: position vaulter’s hands on line
between shoulder and vault
– Ex: Compute knee angles that will give
runner the right leg length
 Animation

• Suppose you want

the robot to
pick up a can of oil
to drink. How?
• You could set the
joint positions at
each moment in
the animation
(kinematics)
 Inverse Kinematics

• You can’t just invert the

joint transformations
• Joint settings aren’t even
necessarily unique for a
hand position!
• Inverse kinematics:
figure out from the hand
position where the joints
should be set.
 Using Inverse Kinematics

• Specify joint
constraints
and priorities
• Move end effector
(or object pose)
• Let the system figure
out joint positions
 Modeling Tools
• Certain tools and techniques used 80-90% of
the time
• Line Tool:
– Draw outline of object and extrude to get 3-d
shape
•Ex: profile of car. Use line tool. Then, extrude
outward to get shape. “Broad stroke”
• Extrude:
– Take component (often face), duplicating it, pulling
pushing or scaling to refine model
• Cut:
– Subdivides faces and adds new faces
• Adjust:
– The artistic part of modeling. Try to capture form,
profile and character by moving vertices
•“Vertex surgery”
 Box Modeling

• Decide on polygon limits

• Posed and turnaround sketches of a
character
– Can often be imported into 3d tool
 Box Modeling:
Start With A Box
• Begin with a box
• Cut it in half
• Approximate the torso shape
• Cut it in half (will do half well, then
mirror)
 Box Modeling :
Extrude The Torso And Neck
• Extrude the box several times
– 3 times for the top, 2x for the bottom
• Adjust to simulate a rough torso (with
bulge)
• Do the same for the neck
 Box Modeling :
Extrude The Head
• Extrude from the neck
– First to eye level, then to top of head
• Extrude the head
– Adds volume to the head
• Edit into a roughed out head
– Cuts above eye line for brow and under
for nose
 Box Modeling:
Create Rough Arms
• Here, only one of two arms
• Extrude the upper side of the torso for
the shoulder area
• Extrude several times for the arm
• Manipulate into rough arm shapes
– Bend at elbow
 Box Modeling:
Create Rough Hands
• Extrude a few times for basic hand
volume
– 3, in this example
• Cut and extrude the thumb volume
• Note: refer to own hands for proportions
 Box Modeling:
Time For Legs
• Again, create only one of the legs
• Extrude and edit
• Extrude feet forward from stump
 Box Modeling: Mirror
• Delete half of the model
• Mirror the other side
• Attach and weld the seam

Next up, refining the model!

 Box Modeling :
Begin Adding Detail
• Square legs and shoes are especially
prominent
– Will look blocky in game engine
• Add a few more segments to support
more curvature for the legs
 Box Modeling :
Cuffs
• Cut faces into feet to get curvature,
adjust as necessary
– Constantly compare to sketches
• A simple extrude to create the cuffs of
the pants
 Box Modeling:
Gimme A Hand (1 of 2)
• Often the most difficult
– Use own hand constantly for proportions
•Slightly curved, so natural, middle finger higher
• Cut where fingers begin
• Extrude outward for 4 fingers
• Fingers will need joints if animated
 Box Modeling :
Gimme A Hand (2 of 2)
• Same buildup, but from underneath
 Box Modeling:
The Torso
• Cut in to support relevant detail
• Additional polygons at shoulder to
support deformation
 Box Modeling :
The Face, Head And Hair
• Phases
– Major structures: brow, eye, cheekbone,
mouth nose hairline
– Extrude volume for hair
– Adjust bottom for extruding ponytails
– Cut in polygons around eyes, mouth, nose
– Once done, add some asymmetry (part off
center)
 Box Modeling:
Done
• The completed model in wireframe and
shaded

Images courtesy of WildTangent, modeled by David

Johnson.
 Rotation/Translation
from object to world
+y +y +y

Rotate(
+x +x +x )

Transla
te()

+y +y +y Rect()

+x +x +x Transla
te()

Rotate(
 The Modelview Duality

+y +y

+x +x

+z +z

View moving Model moving

 Texturing

•Distinction between texture

and shader
– Shader – define surface property
of object – how shiny, bumpy,
how light effects
– Texture – bitmap plugged into
shader that defines image we
want to appear on object
Textures
 Textures
– Single texture
– Texture coordinate animation
– Texture animation
– Multiple textures
– Alphamap
Lightmap

Base color texture

Material or vertex colors

171
 Detail in Texture

• Add depth, lines, etc. without polygons.

• Box is 12 polygons, bricks would take
many more

(Taken from http://www.mostert.org/3d/3dpdzscenem.html)

Shaders
 Programmable Shading Language
– Vertex shader
– Pixel shader
 Procedural way to implement some process of rendering
– Transformation
– Lighting
– Texturing
– BRDF
– Rasterization
– Pixel fill-in

173
Powered by Shader
• Per-pixel lighting  Procedural Morphing
• Motion blur  Water Simulation
• Volume / Height fog
• Volume lines
• Depth of field
• Fur fighting
• Reflection / Refraction
• NPR (non-photorealistic
rendering )
• Shadow
• Linear algebra operators
• Perlin noise
• Quaternion
• Sparse matrix solvers
• Skin bone deformation
• Normal map
• Displacement map
• Particle shader
174
 A Brief Word on Alpha
Channels
• Grayscale image embedded in extra 8 bits
of 32-bit image (24 bits gives true color)
• Use for:
– Transparency
– Reflection
– Bump maps
 Alpha Channel - Transparency

• Used to create transparency

• White means opaque, black means transparent, grey
are values of opacity (semi-transparency)

Images courtesy
of WildTangent.
 Alpha Channel - Reflection
• Define what areas reflect light most – human face
shiny where oil, water ripples
• Three common types of reflection
– Camera projected – always the same, but can be
unrealistic
– Cubemap – 6 sides, but predefined
– Dynamic – sides computed on the fly

Images courtesy
of WildTangent.
 Lighting
• Can conjure feelings, emotions, even
change what you are seeing
• Remember, when see things is really
reflection of light
• Sub-outline
– Color
– Mood
– Setup
– 3-D lights
Color Indicates Danger

RTX Red Rock

 Color

•Powerful in setting mood

– Green is ok, Red is danger
•Culture specific
– Red danger, but in China red happy
– White purity, but in China white death
•Balance –
•too many and chaotic, over-stimulation
•too little and drab and boring
•color theory classes can help
 Pleasing Colors

Star Wars: Knights of the Old Republic

 Mood by Lighting Example (1 of
3)

A calming outdoor scene using simple, yet effective,

lighting
Mood by Lighting Example (2 of
3)

Long shadows not only add to the atmosphere, but also

help break up repetition
Mood by Lighting Example (3 of
3)

Light beams and rays give clues as to the humidity, dust,

and air quality in a scene
 Working with 3D lights (1 of 4)

• 3-D lighting different than traditional

lighting
– Start with traditional and modify until
you get desired affect (broad strokes)
• Tools give different kinds of lights
• A few effective practices
 Working with 3D lights (2 of 4)

• Directional Lights – used for sunlight or

moonlight. Often as key light. Predictable.

By the time the sun's rays

reach the earth, they are
nearly parallel to one
another.
 Working with 3D lights (3 of 4)

•Ambient Lights – spread

everywhere, equally. Uniform
diffuse lights.
•Spot Lights – focus beam on
single location. Great control.
•Point Lights – single point in all
directions. Light bulbs,
candles, etc.
 Working with 3D lights (4 of 4)

• Global
Illumination -
attempt to
mimic real-
world lighting A room lit
by calculating without
bouncing, etc. radiosity. Botto
– Can be m The same
expensive room with a
to compute radiosity
– May be solution.
limiting
 Effective Lighting Practices (1 of
3)
Pools of light
– Don’t always
try to light evenly.
- Gives sense of
mystery

Pools of light in Indiana Jones:

The Emperor's Tomb
Effective Lighting Practices (2 of
3)

Using light to
guide the
player. Helps
highlight areas
that are
accessible and
important to the
objectives.
 Effective Lighting Practices (3 of
3)
• Be Creative
– Try not to stick to the standard solutions
– Tell a story with your lights
– Talk to level designer about scenes, even
– Ex: Maybe your level harder than last, convey
that tension
• Experiment
– Start simple, add detail.
– Experiment at early stages.
– Try crazy combinations of color, reverse the
intensities, or reposition lights in unorthodox
places.
 How ‘truecolor’ works
24 16 8 0
longword alpha red green blue

R G

pixel
The intensity of each color-component within a pixel is an 8-bit value
 Color-to-Grayscale

• Sometimes a color image needs to be

converted into a ‘grayscale’ format
• Example: print a newspaper photograph
(the printing press only uses ‘black’ ink)
• How can we ‘transform’ color photos into
black-and-white format (shades of gray)?
• ‘gray’ colors use a mix of
red+green+blue, these components
have EQUAL intensity
 Color-conversion Algorithm
struct { unsigned char r, g, b; } color;
int avg = ( 30*r + 49*g + 11*b )/100;
color.r = avg; color.g = avg; color.b = avg;
long pixel = 0;
pixel |= ( avg << 16 ); // r-component
pixel |= ( avg << 8 ); // g-component
pixel |= ( avg << 0); // b-component
vram[ address ] = pixel; // write to screen