CS 352: Computer Graphics
Hierarchical
Graphics,
Modeling,
And Animation
Chapter 9 - 2
Interactive Computer Graphics
Disney “Feast” Oscar-winner
Chapter 10 - 3
Interactive Computer Graphics
Overview



Modeling
Animation
Data structures
for interactive
graphics





CSG-tree
BSP-tree
Quadtrees and Octrees
Visibility precomputation
Many figures and examples in this set of lectures are
from The Art of 3D Computer Animation and
Imaging, by I. Kerlow
Chapter 10 - 4
Interactive Computer Graphics
Modeling


The modeling problem
Modeling primitives






Polygon
Sphere, ellipsoid, torus, superquadric
NURBS, surfaces of revolutions, smoothed polygons
Particles
Skin & bones
Approaches to modeling complex shapes



Tools such as extrude, revolve, loft, split, stitch, blend
Constructive solid geometry (CSG)
Hierarchy; kinematic joints
Chapter 9 - 5
Interactive Computer Graphics
“3D Graphics”


We’ve talked about the programming and
algorithmic aspects of 3D graphics
Whole other areas:









modeling, modeling programs
surfacing
animation
storytelling
design
compositing
staging
lighting
game engines
Chapter 9 - 6
Interactive Computer Graphics
Modeling





Primitives: polygons, subdivision surfaces,
NURBS, particles, fluids, bones, procedural
Tools: Construction, bending, twisting, shear,
sweeping, stitching, blending, etc.
Surfacing: bump mapping, UV mapping, cloth,
baked lighting, skin, hair, fur, muscle
Animation: inverse kinematics, pose blending,
motion capture, keyframe animation, editable
motion trails
Rendering: interactive and photo-realistic,
compositing, stereoscopic
Chapter 9 - 7
Interactive Computer Graphics
Modeling Software

Autodesk 3D Studio Max -- $3500 and up
Autodesk Maya -- $3500 and up
Cinema 4D -- $1600
Lightwave -- $1200
Blender -- $0

Comparison




Chapter 10 - 8
Primitives


Most common
primitive is the
polygon
Number of
polygons:
tradeoff between
render time and
model accuracy
Interactive Computer Graphics
Chapter 9 - 9
Interactive Computer Graphics
Chapter 10 - 10
Spline
Curves





Linear spline
Cardinal spline
B-spline
Bezier curve
NURBS (nonuniform rational
b-spline)
Interactive Computer Graphics
Chapter 10 - 11
Mesh
Interactive Computer Graphics
Chapter 10 - 12
Interactive Computer Graphics
Mesh deformations
Chapter 10 - 13
Interactive Computer Graphics
Sweep

Sweep a shape over a path to form a
generalized cylinder
Chapter 10 - 14
Interactive Computer Graphics
Revolution

Revolve a shape around an axis to create an
object with rotational symmetry
Chapter 10 - 15
Interactive Computer Graphics
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 - 16
Interactive Computer Graphics
Chapter 10 - 17
Interactive Computer Graphics
Joining Primitives

Stitching, blending
Chapter 9 - 18
Interactive Computer Graphics
Modifying Primitives
Chapter 10 - 19
Interactive Computer Graphics
Subdivision Surfaces

Can set level of polygon subdivision
Chapter 9 - 20
Interactive Computer Graphics
Chapter 9 - 21
Interactive Computer Graphics
Chapter 9 - 22

Tutorial
Interactive Computer Graphics
Chapter 10 - 23
Particles
Interactive Computer Graphics
Chapter 10 - 24
Algorithmic
Primitives
Algorithms for
trees, mountains,
grass, fur,
lightning, fire, …
Interactive Computer Graphics
Chapter 9 - 25
Interactive Computer Graphics
Chapter 10 - 26
Interactive Computer Graphics
Geometric model file formats

.obj: Alias Wavefront
.dxf: Autocad
collada

Dozens more




WebGL has no
standard
Converting
between
formats may
lose info…
Chapter 9 - 27
Interactive Computer Graphics
Collada






Collaborative Design Activity: interchange file
format for 3D applications
Managed by Khronos Group (same as WebGL)
XML-based
Supported by a wide variety of applications including
3ds Max, Maya, Blender, Lightwave, Unity, Unreal,
three.js
Version 1.4: skinning, morphing,
animation
Version 1.5: kinematics, asset
geolocation, level of detail
Chapter 9 - 28
Interactive Computer Graphics
Three.js formats

Three.js native formats (not used by other
programs:



JSON
Binary (save bandwidth! Load faster!)
JSON Scene format



Load multiple objects and
environment in one file
Simplify your program!
Scene loader example
(with first-person control)
Chapter 9 - 29
Interactive Computer Graphics
Exporting from Blender


Blender is a free, open-source modeler
Exporting:



Copy exporter plug-in from Three.js source tree
into Blender’s plug-in folder
Enable the plugin (File -> Preferences, Addons)
See github thread
Chapter 10 - 30
Interactive Computer Graphics
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)
Done with “parenting”
Chapter 9 - 31
Interactive Computer Graphics
Chapter 10 - 32
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
Chapter 10 - 33
Interactive Computer Graphics
Example: Robot


Traverse DAG using DFS (or BFS)
Push and pop matrices along the way
(e.g. left-child right-sibling)
(joint position parameters?)
Chapter 10 - 34
Interactive Computer Graphics
Chapter 10 - 35
Interactive Computer Graphics
Modeling Programs

Blender




Lightwave




NOT shareware
Very full-featured
Easier to use than others—but still a huge learning curve
Autodesk Maya


Open Source modeling, surfacing, animation, rendering,
compositing, game engine
UI not so intuitive?
Missing advanced features
Probably most often used by pros; costs thousands
3D Studio Max
Chapter 10 - 36
Animation

How do you get
your model to
move around
like an animate
object?
Interactive Computer Graphics
Chapter 9 - 37
Interactive Computer Graphics
Skin and Bones



Skeleton with joined “bones”
Can add “skin” on top of bones
Automatic or
hand-tuned
skinning
Chapter 10 - 38
Interactive Computer Graphics
Chapter 10 - 39
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)
Interactive Computer Graphics
Chapter 10 - 40
Interactive Computer Graphics
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.
Chapter 10 - 41
Interactive Computer Graphics
Using Inverse Kinematics




Specify joint
constraints
and priorities
Move end effector
(or object pose)
Let the system figure
out joint positions
Lightwave
IK tutorial
Chapter 9 - 42
Interactive Computer Graphics
Character Rigging
Chapter 10 - 43
Interactive Computer Graphics
Keyframe Animation





In traditional key frame animation the animator draws several
important frames, and helpers do the “inbetweening” or
“tweening”
Computer animation is also key-frame based
At key frames, animator positions objects and lights, sets
parameters, etc.
The system interpolates parameter
values linearly or along a curve
To get from one object pose to the
next, inverse kinematics determine
joint motions
Chapter 10 - 44
Motion Capture



More realistic
motion sequences
can be generated
by Motion Capture
Attach joint
position indicators
to real actors
Record live action
Interactive Computer Graphics
Chapter 9 - 45
Interactive Computer Graphics
Chapter 10 - 46
Interactive Computer Graphics
Chapter 9 - 47
Interactive Computer Graphics
Lightwave Motion Mixer

Chapter 10 - 48
Interactive Computer Graphics
Combined approaches
Chapter 10 - 49
Interactive Computer Graphics
Example: virtual puppetry

Suppose you want to display virtual puppet
shows


How could you animate puppet movements?
How could you control the animations externally?
Chapter 9 - 50
Interactive Computer Graphics
Chapter 9 - 51
Interactive Computer Graphics
Chapter 9 - 52
Interactive Computer Graphics
Chapter 9 - 53
Results
Interactive Computer Graphics
Chapter 10 - 54
Interactive Computer Graphics
Character Animation

To make computer graphics
(or cartoon drawings)
come alive…
Chapter 10 - 55
Interactive Computer Graphics
Personality through Pose,
Expression, Motion, Timing
Chapter 9 - 56
Interactive Computer Graphics
Chapter 9 - 57
Interactive Computer Graphics
Character animation example


Former Calvin student Chris
Bishop a Savannah College of
Art and Design
Rose Ibiama ‘05: third Academy Award
Chapter 10 - 58
Interactive Computer Graphics
Algorithms for Visibility


This part of chapter: how some example
applications be done efficiently (i.e. topics
without a better home…)
Algorithms for



Ray tracing
HSR
Visibility
Chapter 9 - 59
Ray Tracing
Interactive Computer Graphics
Chapter 9 - 60
Interactive Computer Graphics
Ray Tracing



How to find the objects that a ray intersects
– efficiently?
Is there some kind of data structure that
could help?
Is there some way to quickly find things
close to other things?
Chapter 10 - 61
Interactive Computer Graphics
Application: HSR



How to render in 3D with hidden surface
removal when you don’t have a hardware
depth-buffer?
Can you think of any other ways of removing
hidden surfaces quickly?
Principle: a polygon can’t be occluded by
another polygon that is behind it.
Chapter 10 - 62
Interactive Computer Graphics
Handling Large Spatial Data Sets

Example application: image-based rendering



Suppose you have many digital images of a
scene, with depth information for pixels
How to find efficiently the points that are in front?
Other applications:


Speeding up ray-tracing with many objects
Rendering contours of 3D
volumetric data such as MRI scans
Chapter 10 - 63
Interactive Computer Graphics
Quadtree



Quadtree: divide space into four quadrants.
Mark as Empty, Full, or Partially full.
Recursively subdivide partially full regions
Saves much time, space over 2D pixel data!
Chapter 10 - 64
Interactive Computer Graphics
Quadtree Structure
Chapter 10 - 65
Interactive Computer Graphics
Octrees


Generalize to cutting up a cube into 8 subcubes, each of which may be E, F, or P (and
subdivided)
Much more efficient
than a 3D array of
cells for 3D
volumetric data
Chapter 10 - 66
Interactive Computer Graphics
Quadtree Algorithms

How would you





render a quadtree shape?
find the intersection of a ray with a quadtree
shape?
Take the union of two quadtrees?
Intersection?
Find the neighbors of a cell?
Chapter 10 - 67
Interactive Computer Graphics
Applications of Octrees




Contour finding in MRI data
3D scanning and rendering
Efficient ray tracing
Intersection, collision testing
Chapter 9 - 68
Interactive Computer Graphics
Hidden Surface Removal
Chapter 9 - 69
Interactive Computer Graphics
Object-space algorithm

How to remove hidden surfaces accurately,
in object space?
Chapter 9 - 70
Interactive Computer Graphics
Object-space algorithm

How to remove hidden surfaces accurately,
in object space?


Cut all segments at intersection points
Scan-line algorithm
Chapter 10 - 71
Interactive Computer Graphics
Algorithms for Visibility


Question: How can you do hidden-surface
removal without a Z-buffer, or speed it up
with a Z-buffer?
Is there some data structure that could be
computed in advance that would help?
Chapter 10 - 72
Interactive Computer Graphics
BSP-tree



The painter’s algorithm for hidden surface
removal works by drawing all faces, from
back to front
How to get a listing of the faces in back-tofront order?
Put them into a binary tree and traverse the
tree (but in what order?)
Chapter 10 - 73
Interactive Computer Graphics
BSP Tree Figures



Right is “front” of polygon; left is “back”
In and Out nodes show regions of space
inside or outside the object
(Or, just store split pieces of polygons at
leaves)
Chapter 10 - 74
Interactive Computer Graphics
Traversing a BSP tree

Binary Space Partition tree: a binary tree
with a polygon at each node



Traversing a BSP-tree:





Children in left subtree are behind polygon
Children in right subtree are in front of polygon
If null pointer, do nothing
Else, draw far subtree, then polygon at current
node, then near subtree
Far and near are determined by location of viewer
Runtime of traversal?
Drawbacks?
Chapter 10 - 75
Interactive Computer Graphics
Building a BSP tree

Inserting a polygon:




If tree is empty make it the root
If polygon to be inserted intersects plane of
polygon of current node, split and insert half on
each side recursively.
Else insert on appropriate side recursively
Problem: the number of faces could grow
dramatically…but usually it doesn’t grow too badly…
Chapter 10 - 76
Interactive Computer Graphics
BSP-tree Summary





Returns polygons not necessarily in sorted
order, but in an order that is correct for
back-to-front rendering
Widely used when Z-buffer hardware may
not be available (e.g. game engines)
Guarantees back-to-front rendering for alpha
blending
Works well (linear-time traversals) in the
number of split polygons
[And we hope the number of polygons
doesn’t grow too much through splitting]
Chapter 10 - 77
Interactive Computer Graphics
Research in Visibility

Can we figure out in advance what will be
visible from each viewpoint?
Chapter 10 - 78
Interactive Computer Graphics
Viewer-centered representation

Viewer-centered object representations:
representation not of volume of space filled
but appearance from all viewpoints
Chapter 10 - 79
Interactive Computer Graphics
Occlusion in view space

Occlusion in view space is subtraction
Chapter 10 - 80
Interactive Computer Graphics
Events

Events: boundaries in viewpoint space
where faces appear or disappear (topology
changes)
Chapter 10 - 81
Interactive Computer Graphics
Aspect Graph

Aspect graph: a graph with a node for every
topologically distinct view of an object, with
edges connecting adjacent views
Chapter 10 - 82
Interactive Computer Graphics
Aspect graph varieties

Aspect graphs can be constructed for



3D: space
2D: multiple axis rotations or planar motions
1D: single-axis rotations
Chapter 10 - 83
Interactive Computer Graphics
1D Aspect Graph for Rotation
Chapter 10 - 84
Interactive Computer Graphics
1D Aspect Graph Results


Useful for rotations without Z-buffer
hardware!
Not so useful for more viewer freedom,
modern graphics hardware
Chapter 9 - 85
Interactive Computer Graphics
The Age of the Z-buffer

Is visibility pre-computation useful when
you’ve got a Z-buffer?
Chapter 10 - 86
Interactive Computer Graphics
Conservative Visibility Preprocessing




Q. Can we take advantage of Z-buffer?
Definition: weak visibility. A polygon is
weakly visible from a region if any part of the
polygon is visible from any viewpoint in the
region
Conservative visibility preprocessing:
computing in advance a (super-)set of the
polygons that are weakly visible from some
region
Rendering with Z-buffer yields correct image,
but it’s faster since fewer polygons are drawn
Chapter 10 - 87
Interactive Computer Graphics
Weak Visibility Subdivision


Given an object and a wall, find the region of
space from which the wall occludes the
object
Divide space into
regions, where each
edge represents
some object
appearing or
disappearing
Chapter 10 - 88
Interactive Computer Graphics
Conservative Visibility
Preprocessing on a Grid



Divide viewing
space into a grid
Compute a
conservative
display list for
each cell
Optionally store
data in quadtree
Chapter 10 - 89
Interactive Computer Graphics
Conservative visibility
algorithm


Initialize a display list for each grid cell
Algorithm: for each object, wall, and cell


If the object is not weakly visible from the cell,
remove from cell’s display list
You can churn away at this computation as
long as you like, increasing runtimes, but you
can stop at any time with usable results.
(Runtime performance improves with more
preprocessing time!)
Chapter 10 - 90
Interactive Computer Graphics
Perspective


What good did this visibility research do for
the world?
It wasn’t enough for me


I left graphics research and went into digital
libraries
Left University of Pittsburgh and went to Wheaton
College
Chapter 10 - 91
Interactive Computer Graphics
Summary






3D modeling uses advanced primitives and
ways of cutting, joining them
Inverse kinematics determines joint position
from end effector motions
Keyframe animation involves important poses
and inbetweening
3D morphing animates surface control points
3D spatial subdivision trees include CSGtrees, BSP-trees, Quadtrees, and Octrees
Visibility preprocessing speeds walkthrough
Chapter 8 - 92
Interactive Computer Graphics
Conclusion

Graphics communicates powerfully




Especially with the media generation
Take thought for what you feed into yourself
Some of you may go on to create the next
killer movie or video game
Have something worthwhile to say…
“Whatever is true, whatever is noble, whatever is
right, whatever is pure, whatever is lovely,
whatever is admirable—if anything is excellent or
praiseworthy—think about such things.”
– Philippians 4:8