cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping
Beautification of Surfaces
Andries van Dam©
November 10, 2015
Right: https://en.wikipedia.org/wiki/UV_mapping#/media/
File:Cube_Representative_UV_Unwrapping.png
1/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping Overview (1/3)

Texture mapping:



Implemented in hardware on every GPU
Simplest surface detail hack, dating back to the ‘60s GE
flight simulator and its terrain generator
Technique:



“Paste” the texture, a photograph or pixmap (e.g., a
brick pattern, a wood grain pattern, a sky with clouds)
on a surface to add detail without adding more polygons
Map texture onto surface to get surface color or alter
object’s surface color
Think of texture map as stretchable contact paper
Andries van Dam©
November 10, 2015
2/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping Overview (2/3): Motivation

How do we add more detail to a model?

Add more detailed geometry; more, smaller triangles:



Map a texture to a model:



Pros: Responds realistically to lighting, other surface interaction
Cons: Difficult to generate, takes longer to render, takes more memory space
Pros: Can be stored once and reused, easily compressed to reduce size, rendered very
quickly, very intuitive to use, especially useful on far-away objects like terrain, sky,
“billboards” (texture mapped polygon) - all used extensively in videogames, etc.
Cons: Very crude approximation of real life. Texture mapped but otherwise unaltered
surfaces still look smooth. Need to perspectivize/filter for real effectiveness
What can you put in a texture map? (or any other kind of map?)




Diffuse, ambient, specular, or any kind of color
Specular exponents, transparency or reflectivity coefficients
Surface normal data (for normal mapping or bump mapping – stay tuned)
Projected reflections or shadows
Andries van Dam©
November 10, 2015
3/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping Overview (3/3: Mappings)

A function is a mapping


Mappings in “Intersect”: linear transformations with matrices





Takes any value in the domain as an input and outputs (“maps it to”) one unique
value in the co-domain.
Map screen space points (input) to camera space rays (output)
Map camera space rays into world space rays
Map world space rays into un-transformed object space for intersecting
Map intersection point normals to world space for lighting
Mapping a texture:


Take points on the surface of an object (domain)
Return an entry in the texture (co-domain)
Andries van Dam©
November 10, 2015
4/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping Technique (1/8)

Texture mapping is process of mapping a geometric point in space to a value (color, normal,
other…) in a texture map of arbitrary width and height


Our goal is to map any arbitrary geometry to a texture map
Done in two steps:


Map a point on geometry to a point on unit square (a proxy for texture map)
Map unit square point to point on texture
(1.0, 1.0)
𝑣
(0.0, 0.0)



𝑢
Van Gogh
Second mapping much easier, we’ll cover it first – both maps based on proportionality
Note 1: this 2D uv coordinate system is unrelated to the camera’s 3D uvw coordinate system!
Note 2: In this lecture, show unit square oriented with (0,0) in the bottom corner. However, most
images have (0,0) in upper left. In Ray, use the latter – simple adjustment
Andries van Dam©
November 10, 2015
5/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping Technique (2/8)

Mapping a point in unit u, v square to a texture of arbitrary width/height:

In general, for any point 𝑢, 𝑣 on unit square, corresponding point on texture of length
𝑙 pixels and height ℎ pixels is 𝑢 ∗ 𝑤, 𝑣 ∗ ℎ − preserve relative distances/proportions
(1.0, 1.0)
𝑣
(200, 100)
unit texture square
(0.0, 0.0)



(0, 0)
𝑢
texture map
Above: (0.0, 0.0) -> (0, 0); (1.0, 1.0) -> (200, 100); (.7, .45) -> (140, 45)
Once have coordinates for texture, just look up color of texture at these coordinates
Coordinates not always a discrete (int) point on texture as they are mapped from
points in continuous uv space. May need to average neighboring texture pixels (i.e.,
filter)
Andries van Dam©
November 10, 2015
6/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping Technique (3/8)

Texture mapping polygons



(𝑢, 𝑣) texture coordinates are
pre-calculated and specified
per vertex
Vertices may have different
texture coordinates for
different faces
Texture coordinates are
linearly interpolated across
polygon, as usual
Andries van Dam©
November 10, 2015
7/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping Technique (4/8):
Mapping from point on object to (u, v) square

Texture mapping in “Ray”: mapping solids







Using ray tracing, get an intersection point (x, y, z) in
object space
Need to map this point to a point on the (u, v) unit
square, so we can map that to a texture value
Three easy cases: planes, cylinders, and spheres
Easiest to compute the mapping from (x, y, z)
coordinates in object space to (u, v)
Can cause unwanted texture scaling
Texture filtering is an option in most graphics
libraries
OpenGL allows you to choose filtering method


GL_NEAREST: Picks the nearest pixel in the texture
GL_LINEAR: Weighted average of the 4 nearest pixels
Andries van Dam©
November 10, 2015
8/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping Technique (5/8)

Texture mapping large quads:



How to map a point on a very large quad to a point on the unit square?
Tiling: texture is repeated over and over across infinite plane
Given coordinates (𝑥, 𝑦) of a point on an arbitrarily large quad to tile with
quads of size (𝑤, ℎ), the 𝑢, 𝑣 coordinates on the unit square are:
y
v
(w, h)
(0, 0)
Infinite plane
Andries van Dam©
x
(0, 0)
November 10, 2015
(1.0, 1.0)
u
Unit plane
𝑢, 𝑣 =
𝑥 % 𝑤 (𝑦 % ℎ)
,
𝑤
ℎ
Note: C/C++ do not allow non-integer moduli.
In code, w and h must be integers.
9/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping Technique (6/8)

How to texture map cylinders and cones:

Given a point P on the surface:


If it’s on one of the caps, map as though the cap is a plane
If it’s on the curved surface:


z
𝑢
y
x
P
P
𝑢 = .85

𝑣
Use position of point around perimeter to determine 𝑢
Use height of point to determine 𝑣
z
x
𝑣 = .4
Mapping v is trivial: [-.5, .5] for unit cylinder gets mapped to [0.0, 1.0] just by adding .5
Andries van Dam©
November 10, 2015
http://www.syvum.com/iosundry/teasers/cylind1b.gif
10/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping Technique (7/8)

Computing 𝑢 coordinate for cones
and cylinders:




Must map all points on perimeter to
[0, 1], going CCW (see arrows)
Note where positive first quadrant is!
𝜃
Easiest way is to say 𝑢 = 2𝜋 , but
computing 𝜃 can be tricky
Standard atan function computes a
result for 𝜃 but it’s always between 0
and 𝜋 and it maps two positions on the
perimeter to the same 𝜃 value.


Example: atan(1, 1) = atan(-1, -1) =
𝜋
2
atan2(x, y) yields values between −𝜋
and 𝜋, but isn’t continuous -- see
diagram
Andries van Dam©
November 10, 2015
11/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping Technique (8/8)

Texture mapping for spheres:




Find (𝑢, 𝑣) coordinates for P
We compute 𝑢 the same we do for
cylinders and cones: distance
around perimeter of circle
At poles, 𝑣 = 0 or 𝑣 = 1, there is a
singularity. Set 𝑢 to some
predefined value. (.5 is good)
𝑣 is a function of the latitude of P
𝜙 = sin
Andries van Dam©
𝑃
−1 𝑦
𝑟
November 10, 2015
𝜋
𝜋
− ≤𝜙≤
2
2
𝜙 1
𝑣= +
𝜋 2
u
v
ϕ
𝑟 = radius
12/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping Style - Tiling

We want to create a brick wall with a brick pattern texture

A brick pattern is very repetitive, we can use a small texture and “tile” it
across the wall
Texture

Tiling allows you to scale
repetitive textures to make
texture elements just the right
size.
Andries van Dam©
November 10, 2015
Without Tiling
With Tiling
13/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping Style - Stretching

With non-repetitive textures, we have less flexibility



Have to fill an arbitrarily large object with a texture of finite size
Can’t tile (will be noticeable), have to stretch instead
Example, creating a sky backdrop:
Texture
Andries van Dam©
November 10, 2015
Applied with stretching
14/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping Complex Geometry (1/4)

Sometimes, reducing objects to primitives for texture mapping doesn’t achieve
the right result.

Consider a simple house shape as an example
If we texture map it using polygons, we get discontinuities at some edges.

Easy solution: Pretend object is a sphere and texture map using the sphere 𝑢, 𝑣 map

Andries van Dam©
November 10, 2015
15/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping Complex Geometry (2/4)

Intuitive approach: Place a bounding sphere around the complex object



Find ray’s object space intersection with bounding sphere
Convert to (𝑢, 𝑣) coordinates
Don’t actually need to construct a bounding sphere!

Once have intersection point with object, just treat it as though it were on a
sphere passing through point. Same results, but different radii.
Andries van Dam©
November 10, 2015
16/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping Complex Geometry (3/4)

When we treat the object intersection point as a point on a sphere passing
through the point, our “sphere” won’t always have the same radius
roof
intersection
point =
large radius
bottom
intersection
point =
small
radius

What radius to use?

Compute radius as distance from defined or computed center of complex object
to the nearest intersection point. Use that as the radius for the 𝑢, 𝑣 mapping.
Andries van Dam©
November 10, 2015
17/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Texture Mapping Complex Geometry (4/4)

Results of spherical 𝑢, 𝑣 mapping on house:


Hey, that looks pretty good. Will it always work?
For example, what if we want to put a texture
on this second object?
Andries van Dam©
November 10, 2015
18/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Complex Geometry in Real Applications (1/5)

When texture mapping in videogames or films, objects will almost always be
more complicated than primitives or even that house shape


You also want precise control over how the texture map looks on the object


Common objects include humans, monsters, and other organic shapes
Imagine texture mapping a human face with the eyes lined up wrong with the
model geometry – viewers would definitely notice!
Thus, most cases of texture mapping in the “real world” of these industries
are done using 3D modelling programs like Maya, Zbrush, Blender, etc.

Our examples are from Maya, but the technique would be similar in the other
programs
Andries van Dam©
November 10, 2015
19/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Complex Geometry in Real Applications (2/5)

Here’s a very compressed overview of the process:

Ultimately, the goal is to make every face on the object correspond to a
section of the (0,0) to (1,1) (u,v) space
Andries van Dam©
November 10, 2015
Images from Learning Maya 7: The Modeling and Animation Handbook
20/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Complex Geometry in Real Applications (3/5)


The main difficulty still lies in generating that mapping
In addition to the spherical mapping we covered previously (left), in Maya, you can
also do cylindrical (middle) or planar mapping (right) when texture mapping objects
Maya also offers an “Automatic”
mapping that uses multiple projection planes
 Each mapping has drawbacks
 Which should we use for that twisty tail from earlier?

Andries van Dam©
November 10, 2015
Pictures from Autodesk’s Maya User’s Guide pages on spherical,
cylindrical, planar, and automatic uv mapping.
21/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Complex Geometry in Real Applications (4/5)

Testing with a checkerboard pattern is useful when
looking for problems with 𝑢, 𝑣 mappings.


Spherical, cylindrical, and automatic have a lot of
distortion on this twisty object.


The goal is to minimize uneven distortion of the
pattern.
Cylindrical
Automatic
Red circles show uneven checkers on all these
mappings – bad!
Planar is okay when viewed from one axis, but the
𝑢, 𝑣 map overlaps itself and two axes are ignored.

Spherical
This leads to distortion when viewing from the
other axes.
Andries van Dam©
November 10, 2015
=
Planar
=
What the planar uv map looks like “unwrapped.”
Pink = overlapping squares
Images by Vivian Morgowicz
Rendered in Maya on the CS125 lighting stage
Uh-oh!
22/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Complex Geometry in Real Applications (5/5)

There is no good solution

To get the look they want, the modelers will often have to go in
and manually cut and sew edges in the 𝑢, 𝑣 maps



Take cs125 to learn how to do this!
However, computers are getting better– there are several complex
techniques for making texture maps that look seamless

=
Handmade
Example: Seamless Surface Mappings by Noam Aigerman, Roi Poranne, Yaron Lipman
Other programs try to generate maps that put the discontinuities
in places where the real objects would have seams.
Andries van Dam©
November 10, 2015
Top Images by Vivian Morgowicz
Left image from http://pixologic.com/zbrush/features/UV-Master/
23/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Barycentric Coordinates




Say we have a triangle mesh
And we’ve defined colors at vertices of triangles
How do we define colors of pixels that are on interior or edges of triangle?
Interpolating colors in triangle can be done using “scanline” interpolation of
scanline extrema, but is made easier by using Barycentric coordinates



Define a point on a triangle in terms of its 3 vertices
Then use this representation to choose appropriate color
Many applications


Can also be used to find interior (u,v)’s in the triangle given the
(u,v) mapping of the three vertices
Mesh Colors (painting textures on to arbitrary meshes):


?
Cem Yuksel, John Keyser, and Donald H. House
Mesh Colors
ACM Transactions on Graphics (TOG), Vol. 29, No. 2, 2010
Take CS224
Andries van Dam©
November 10, 2015
24/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Barycentric Coordinates


Recall the use of parametric representation in clipping, color mixing,
splines,…
Consider interpolating between two values along a line

Given two colors 𝐴1 and 𝐴2 , compute any value along “line” between the two
colors by evaluating: P 𝑡 = 1 − 𝑡 𝐴1 + 𝑡𝐴2 0 ≤ 𝑡 ≤ 1

This equation can be written as:
P 𝑡1 , 𝑡2 = 𝑡1 𝐴1 + 𝑡2 𝐴2



𝑡1 + 𝑡2 = 1
𝑡1 , 𝑡2 ≥ 0
𝑡1 and 𝑡2 are the Barycentric Coordinates of line segment from 𝐴1 to 𝐴2
This equation of the line is a convex linear combination (i.e., a weighted average)
of its endpoints – parameters can be viewed as weights
Barycentric coordinates can be generalized to triangles
𝑃 𝑡1 , 𝑡2 , 𝑡3 = 𝑡1 𝐴1 + 𝑡2 𝐴2 + 𝑡3 𝐴3
Andries van Dam©
November 10, 2015
𝑡1 + 𝑡2 + 𝑡3 = 1
𝑡1 , 𝑡2 , 𝑡3 ≥ 0
25/27
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Computing Barycentric Coordinates (1/2)

When intersecting a ray with a polyhedral object (not
needed for our intersect/ray projects):



Return vertex data of triangle intersected and Barycentric
coordinates 𝑡1 , 𝑡2 , 𝑡3 of intersection point
These coordinates can be used as weights to interpolate
between vertex colors, normals, texture coordinates, or
other data – convex linear combination of vertex values
But what are weights for an arbitrary point 𝑃?



Think of this as: What weights do we hang on each vertex such
that triangle would be perfectly balanced on a pin at point 𝑃?
Center of mass = the barycenter
Another way of thinking about this is by triangle area. The
weight at 𝐴1 should be proportional to the area of the
triangle opposite. (For 𝐴1 , this is triangle 𝑃, 𝐴2 , 𝐴3.)
Think of area of that triangle decreasing, as does the
influence of 𝐴1 , the further P is from 𝐴1
Andries van Dam©
November 10, 2015
http://mathworld.wolfram.com/ima
26/27
ges/eps-gif/Barycentric_901.gif
cs123
INTRODUCTION TO COMPUTER GRAPHICS
Computing Barycentric Coordinates (2/2)


Compute Q as intersection of line through 𝐴1 and 𝑃 and line
through 𝐴2 and 𝐴3
Write Q as weighted sum of 𝐴2 and 𝐴3 and P as weighted sum of
Q and 𝐴1





𝑑3
𝑑1
𝑑2
Substituting the first into the second and doing some algebra
gives us 𝑃 = 𝑟 ∗ 𝐴1 + 1 − 𝑟 1 − 𝑠 ∗ 𝐴2 + 1 − 𝑟 𝑠 ∗ 𝐴3



Q = (1 − 𝑠)𝐴2 + 𝑠𝐴3
s = 𝑑1 / (𝑑1 + 𝑑2 )
P = 1 − 𝑟 𝑄 + 𝑟𝐴1
r = 𝑑3 / (𝑑3 + 𝑑4 )
𝑑4
Which is in exactly the 𝑃 = 𝑡1 ∗ 𝐴1 + 𝑡2 ∗ 𝐴2 + 𝑡3 ∗ 𝐴3 form we
wanted!
𝑡1 = 𝑟, 𝑡2 = 1 − 𝑟 1 − 𝑠 , 𝑡3 = 1 − 𝑟 𝑠
Useful for ray tracing arbitrary meshes



Intersect ray with plane of triangle
Calculate coordinates for intersection point 𝑡1 , 𝑡2 , 𝑡3
If all are in range [0,1] then the point is in the triangle
Andries van Dam©
November 10, 2015
http://mathworld.wolfram.com/ima
27/27
ges/eps-gif/Barycentric_901.gif