1. Introduction and Basic OpenGL functionality
Texture Mapping
Introduction and Basic OpenGL functionality

2. Why Texture Map? How can we model this scene with polygons?
Lots of detail means lots of polygons to render
100’s, 1000’s, Millions of polygons!
Can be difficult to model fine features

3. Review: Why Texture Map? (2)
What if we render just one polygon with a picture of a brick wall mapped to it?
The graphics hardware is faster at texture mapping than processing many polygons

4. Textures Provide Realism
Spatially-varying modification of surface appearance at the pixel level
Characteristics
Color
Shininess
Transparency
Bumpiness
Etc.

5. Our Goal

6. Texture Mapping Overview
texture coordinates
Object
Space
World
Space
Model
Transform
Projection/
Clipping
Texture
Space
Screen
Space
Viewport
Transform
Window
Space
Rasterization
Texture mapping

7. Texture mapping: Steps
Creation: Where does the texture image come from, i.e. sources?
Parameterization: Mapping from 3-D shape locations (x, y, z) to 2-D texture image coordinates (s, t)
Rasterization (Sampling and Interpolation): What do we draw at each pixel?

8. Texturing: Creation Reproductions Directly-computed functions
Photographs
Handpainted
Download from the web
Directly-computed functions
e.g., lightmaps
Procedurally-built
Synthesize with randomness, pattern-generating rules, etc.
Remember our checkerboard procedure?
courtesy of H. Elias

9. Enable (Disable) Textures
Enable texture – glEnable(GL_TEXTURE_2D)
Disable texture – glDisable(GL_TEXTURE_2D)
Remember to disable texture mapping when you draw non-textured polygons

10. Texturing: Parameterization (Simple)
Assign texture coordinates to the polygon vertices (in object space)
We did this in Lab1.
Simple Case
Apply a 2D texture onto a quadrilateral
(0,0)
(1,0)
(1,1)
(0,1) s t
(0,0)
(1,1)

11. Texturing: Parameterization (Object Mesh)
How do we assign texture coordinates to objects?
Problem: Map from 3D to 2D
Idea: Map (x, y, z) to an intermediate space (u, v)
Projector function to obtain
object surface coordinates (u, v)
Corresponder function to find
texel coordinates (s, t)
Filter texel at (s, t)
Modify pixel (i, j)
Rasterization
courtesy of R. Wolfe
list adapted from Akenine-Moller & Haines

12. Projector Functions
How do we map the texture onto a arbitrary (complex) object?
Construct a mapping between the 3-D point to an intermediate surface
Why?
The intermediate surface is simple  we know its characteristics
Still a 3D surface, but easier to map to texture space (2D)
Easy to parameterize the intermediate surface in 2D, i.e. (u, v) space
Idea: Project each object point to the intermediate surface with a parallel or perspective projection
The focal point is usually placed inside the object
Plane
Cylinder
Sphere
Cube
Mesh: piece-wise planar
courtesy of R. Wolfe
Planar projector

13. Planar Projector u = x, v = y Orthographic projection onto XY plane:
courtesy of
R. Wolfe
...onto YZ plane
...onto XZ plane

14. Cylindrical Projector
Convert rectangular coordinates (x, y, z) to cylindrical (r, µ, h), use only (h, µ) to index texture image
courtesy of
R. Wolfe

15. Spherical Projector
Convert rectangular coordinates (x, y, z) to spherical (, φ)
courtesy of R. Wolfe

16. Surface Patches A polygon or mesh of polygons defining a surface
Map four corners of a quad to (u, v) values
courtesy of
R. Wolfe

17. Parametric Surfaces A parameterized surface patch
x = f(u, v), y = g(u, v), z = h(u, v)
You will get to these kinds of surfaces in CSE 784.
courtesy of R. Wolfe

18. Examples: Courtesy of Jason Bryan
planar
spherical
cylindrical
surface
patch

19. Notice Distortions Due To Object Shape
Watt
planar
cylindrical
spherical

20. Specify texture coordinates
Give texture coordinates before defining each vertex
glBegin(GL_QUADS);
glTexCoord2D(0,0);
glVertex3f(-0.5, 0, 0.5); …
glEnd();

21. Transform texture coordinates
All the texture coordinates are multiplied by Gl_TEXTURE matrix before in use
To transform texture coordinates, you do:
glMatrixMode(Gl_TEXTURE);
Apply regular transformation functions
Then you can draw the textured objects

22. Texture Representation
Bitmap (pixel map) textures (supported by OpenGL)
Procedural textures (used in advanced rendering programs)
Bitmap texture:
A 2D image - represented by 2D array
texture[height][width]
Each pixel (or called texel ) by a unique
pair texture coordinate (s, t)
The s and t are usually normalized to
a [0,1] range
For any given (s,t) in the normalized range,
there is a unique image value (i.e.,
a unique [red, green, blue] set ) s t
(0,0)
(1,1)

23. Map textures to surfaces
Establish mapping from texture to surfaces (polygons):
- Application program needs to specify texture coordinates for each corner of the polygon
(0,0)
(1,0)
(1,1)
The polygon can be
in an arbitrary size

24. Map textures to surfaces
Texture mapping is performed in rasterization (backward mapping)
(1,1)
(0,1)
For each pixel that is to be painted, its texture coordinates (s, t) are determined (interpolated) based on the corners’ texture coordinates (why not just interpolate the color?)
The interpolated texture coordinates are then used to perform texture lookup
(0,0)
(1,0)

25. Texture Mapping 1. projection 3. patch texel 3D geometry
2. texture lookup
2D projection of 3D geometry S t
2D image

26. Inverse Mapping Screen space → … → object space → texture space
World Space
Clip Space S t
Screen Space
Object Space
Texture Space

27. Texture Value Lookup
For the given texture coordinates (s,t), we can find a unique image value from the texture map
(1,1)
How about coordinates that are not
exactly at the intersection (pixel) positions?
Nearest neighbor
Linear Interpolation
Other filters
(0,0)
(0.25,0)
(0.5,0)
(0.75,0)
(1,0)

28. OpenGL texture mapping
Steps in your program
1) Specify texture
read or generate image
Assign to texture
2) Specify texture mapping parameters
Wrapping, filtering, etc.
3) Enable GL texture mapping (GL_TEXTURE_2D)
4) Assign texture coordinates to vertices
5) Draw your objects
6) Disable GL texture mapping (if you don’t need to perform texture mapping any more)

29. Specify textures
Load the texture map from main memory to texture memory
glTexImage2D(Glenum target, Glint level, Glint
iformat, int width, int height, int border, Glenum format,
Glenum type, Glvoid* img)
Example:
glTeximage2D(GL_TEXTURE_2D, 0, GL_RGB, 64, 64, 0, GL_RGB, GL_UNSIGNED_BYTE, myImage);
(myImage is a 2D array: GLuByte myImage[64][64][3]; )
The dimensions of texture images must be powers of 2

30. Fix texture size
If the dimensions of the texture map are not power of 2, you can
Pad zeros ) use gluScaleImage() 60
Ask OpenGL to filter the data
for you to the right size –
you can specify the output resolution
that you want
100
128
Remember to adjust the texture coordinates
for your polygon corners – you don’t want to
Include black texels in your final picture 64

31. An Interactive Introduction to OpenGL Programming
Texture Objects
Like display lists for texture images
one image per texture object
may be shared by several graphics contexts
Generate texture names
glGenTextures( n, *texIds );
The first step in creating texture objects is to have OpenGL reserve some indices for your objects. glGenTextures() will request n texture ids and return those values back to you in texIds.
To begin defining a texture object, you call glBindTexture() with the id of the object you want to create. The target is one of GL_TEXTURE_{123}D(). All texturing calls become part of the object until the next glBindTexture() is called.
To have OpenGL use a particular texture object, call glBindTexture() with the target and id of the object you want to be active.
To delete texture objects, use glDeleteTextures( n, *texIds ), where texIds is an array of texture object identifiers to be deleted.

32. Texture Objects (cont.)
An Interactive Introduction to OpenGL Programming
Texture Objects (cont.)
Create texture objects with texture data and state
glBindTexture( target, id );
Bind textures before using

33. An Interactive Introduction to OpenGL Programming
Specify Texture Image
CPU DL
Poly.
Per
Vertex
Raster
Frag FB
Pixel
Texture
Define a texture image from an array of texels in CPU memory
glTexImage2D( target, level, components, w, h, border, format, type, *texels );
dimensions of image must be powers of 2
Texel colors are processed by pixel pipeline
pixel scales, biases and lookups can be done
Specifying the texels for a texture is done using the glTexImage{123}D() call. This will transfer the texels in CPU memory to OpenGL, where they will be processed and converted into an internal format.
The array of texels sent to OpenGL with glTexImage*() must be a power of two in both directions. An optional one texel wide border may be added around the image. This is useful for certain wrapping modes.
The level parameter is used for defining how OpenGL should use this image when mapping texels to pixels. Generally, you’ll set the level to 0, unless you’re using a texturing technique called mipmapping, which we’ll discuss in a few slides.

34. Converting A Texture Image
An Interactive Introduction to OpenGL Programming
Converting A Texture Image
If dimensions of image are not power of 2
gluScaleImage( format, w_in, h_in, type_in, *data_in, w_out, h_out, type_out, *data_out );
*_in is for source image
*_out is for destination image
Image interpolated and filtered during scaling
If your image does not meet the power of two requirement for a dimension, the gluScaleImage() call will resample an image to a particular size. It uses a simple box filter to interpolate the new images pixels from the source image.
Additionally, gluScaleImage() can be used to convert from one data type ( i.e. GL_FLOAT ) to another type, which may better match the internal format in which OpenGL stores your texture.
Note that use of gluScaleImage() can also save memory.

35. Wrapping Modes repeat: Start entire texture over
(0, 0)
(3, 0)
(3, 3)
(0, 3)
repeat: Start entire texture over
mirror: Flip copy of texture in each direction
Get continuity of pattern
Rather new OpenGL feature.
clamp to edge: Extend texture edge pixels
clamp to border: Surround with border color
courtesy of Microsoft

36. Texture mapping parameters
Example: glTexParameteri(GL_TEXTAURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP)
GL_Repeat
(0,0)
(2,2)
(0,0)
(2,2)
GL_Clamp
If (s >1) s = 1
If (t >1) t = 1
(0,0)
(1,1)
texture

37. Texture mapping parameters(2)
Since a polygon can get transformed to arbitrary screen size, texels in the texture map can get magnified or minified.
Filtering: interpolate a texel value from its neighbors or combine multiple texel values into a single one
texture
texture
polygon projection
polygon projection
Magnification
Minification

38. Texture mapping parameters(3)
OpenGL texture filtering:
2) Linear interpolate the neighbors
(better quality, slower)
glTexParameteri(GL_TEXTURE_2D,
GL_TEXTURE_MIN_FILTER,
GL_LINEAR)
Nearest Neighbor (lower
image quality)
glTexParameteri(GL_TEXTURE_2D,
GL_TEXTURE_MIN_FILTER, GL_NEAREST);
Or GL_TEXTURE_MAX_FILTER

39. Texture color blending
Determine how to combine the texel color and the object color
GL_MODULATE – multiply texture and object color
GL_BLEND – linear combination of texture and object color
GL_REPLACE – use texture color to replace object color
Example: glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE);

40. Texture Application Modes
decal: Overwrite object’s color or material with texel
modulate: Combine object pixel with texel via multiplication
courtesy of Microsoft

41. Put it all together …
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE);
glEnable(GL_TEXTURE_2D);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 64, 64, 0, GL_RGB, GL_UNSIGNED_BYTE, mytexture);
Draw_picture1(); // define texture coordinates and vertices in the function ….

42. Advanced: Multitexture + Modulation
New cards can modulate multiple textures
CSE 781 will examine many uses of texture mapping.
courtesy of K. Miller X =
Light Map

43. Multi-texturing: Multiplication*

44. Multi-texturing: Addition+ =

45. [Images courtesy of www.gamasutra.com]
Light maps
Also can avoid the expensive lighting calculations.
Right: Light Map applied
Left: No Light Map applied
[Images courtesy of

46. Light Maps: Quake

47. Simple Applications: Billboards
from Akenine-Moller & Haines

48. Texture Rasterization
Texture coordinates are interpolated from polygon vertices just like … remember …
Color : Gouraud shading
Depth: Z-buffer
First along polygon edges between vertices
Then along scanlines between left and right sides
from Hill

49. Linear Texture Coordinate Interpolation
This doesn’t work in perspective projection!
The textures look warped along the diagonal
Noticeable during an animation
courtesy of H. Pfister

50. Why?
Equal spacing in screen (pixel) space is not the same as in texture space in perspective projection
Perspective foreshortening
from Hill
courtesy of
H. Pfister

51. Perspective-Correct Texture Coordinate Interpolation
Interpolate (tex_coord/w) over the polygon, then do perspective divide after interpolation
Compute at each vertex after perspective transformation
“Numerators” s/w, t/w
“Denominator” 1/w
Linearly interpolate 1/w, s/w, and t/w across the polygon
At each pixel
Perform perspective division of interpolated texture coordinates (s/w, t/w) by interpolated 1/w (i.e., numerator over denominator) to get (s, t)

52. Perspective-Correct Interpolation
That fixed it!

53. Perspective-Correct Interpolation: Notes
But we didn’t do this for Gouraud shading…
Actually, we should have, but the error is not as obvious
Alternative: Use regular linear interpolation with small enough polygons that effect is not noticeable
Linear interpolation for Z-buffering is correct

54. Perspective Correction Hint
Texture coordinate and color interpolation:
Linearly in screen space (wrong) OR
Persective correct interpolation (slower)
glHint (GL_PERSPECTIVE_CORRECTION_HINT, hint), where hint is one of:
GL_NICEST: Perspective
GL_FASTEST: Linear
GL_DONT_CARE: Linear

55. An Interactive Introduction to OpenGL Programming
Texture Objects
Like display lists for texture images
one image per texture object
may be shared by several graphics contexts
Generate texture names
glGenTextures( n, *texIds );
The first step in creating texture objects is to have OpenGL reserve some indices for your objects. glGenTextures() will request n texture ids and return those values back to you in texIds.
To begin defining a texture object, you call glBindTexture() with the id of the object you want to create. The target is one of GL_TEXTURE_{123}D(). All texturing calls become part of the object until the next glBindTexture() is called.
To have OpenGL use a particular texture object, call glBindTexture() with the target and id of the object you want to be active.
To delete texture objects, use glDeleteTextures( n, *texIds ), where texIds is an array of texture object identifiers to be deleted.

56. Texture Objects (cont.)
An Interactive Introduction to OpenGL Programming
Texture Objects (cont.)
Create texture objects with texture data and state
glBindTexture( target, id );
Bind textures before using

57. Texture Animation
Just change the texture coordinates

58. Texture Animation
Sprite Animations

59. Sprites and Billboards
Sprites – usually refer to 2D animated characters that move across the screen.
Like Pacman
Three types (or styles) of billboards
Screen-aligned (parallel to top of screen)
World aligned (allows for head-tilt)
Axial-aligned (not parallel to the screen)

60. Creating Billboards in OpenGL
Annotated polygons do not exist with OpenGL 1.3 directly.
If you specify the billboards for one viewing direction, they will not work when rotated.

61. Example

62. Example 2 The alpha test is required to remove the background.
More on this example when we look at depth textures.

63. Re-orienting Billboards need to be re-oriented as the camera moves.
This requires immediate mode (or a vertex shader program).
Can either:
Recalculate all of the geometry.
Change the transformation matrices.

64. Re-calculating the Geometry
Need a projected point (say the lower-left), the projected up-direction, and the projected scale of the billboard.
Difficulties arise if we are looking directly at the ground plane.

65. Undo the Camera Rotations
Extract the projection and model view matrices.
Determine the pure rotation component of the combined matrix.
Take the inverse.
Multiply it by the current model-view matrix to undo the rotations.

66. Screen-aligned Billboards
Alternatively, we can think of this as two rotations.
First rotate around the up-vector to get the normal of the billboard to point towards the eye.
Then rotate about a vector perpendicular to the new normal orientation and the new up-vector to align the top of the sprite with the edge of the screen.
This gives a more spherical orientation.
Useful for placing text on the screen.

67. World Aligned Billboards
Allow for a final rotation about the eye-space z-axis to orient the billboard towards some world direction.
Allows for a head tilt.

68. Example
Lastra

69. Example
Lastra

70. Axial-Aligned Billboards
The up-vector is constrained in world-space.
Rotation about the up vector to point normal towards the eye as much as possible.
Assuming a ground plane, and always perpendicular to that.
Typically used for trees.

71. Fin Billboard Use two polygons at right angles.
Typically right angles.

72. OpenGL Architecture CPU Display List Polynomial Evaluator Per Vertex
Operations &
Primitive
Assembly
Rasterization
Per Fragment
Operations
Frame
Buffer
Texture
Memory
CPU
Pixel

73. Per-Fragment Operations
Per Vertex
Operations &
Primitive
Assembly
Polynomial
Evaluator
Display List
Per Fragment
Operations
Frame
Buffer
CPU
Rasterization
Texture
Memory
Pixel
Operations

74. Getting to the Framebuffer
Blending
Depth
Test
Dithering
Logical Operations
Scissor
Stencil
Alpha
Fragment
Framebuffer
In order for a fragment to make it to the frame buffer, it has a number of testing stages and pixel combination modes to go through.
The tests that a fragment must pass are:
scissor test - an additional clipping test
alpha test - a filtering test based on the alpha color component
stencil test - a pixel mask test
depth test - fragment occlusion test
Each of these tests is controlled by a glEnable() capability.
If a fragment passes all enabled tests, it is then blended, dithered and/or logically combined with pixels in the framebuffer. Each of these operations can be enabled and disabled.

75. Alpha Test Reject pixels based on their alpha value
glAlphaFunc( func, value )
glEnable( GL_ALPHA_TEST )
Use alpha as a mask in textures
Alpha values can also be used for fragment testing. glAlphaFunc() sets a value which, if glEnable(GL_ALPHA_TEST) has been called, will test every fragment’s alpha against the value set, and if the test fails, the fragment is discarded.
The functions which glAlphaFunc() can use are:
GL_NEVER GL_LESS
GL_EQUAL GL_LEQUAL
GL_GREATER GL_NOTEQUAL
GL_GEUQAL GL_ALWAYS
The default is GL_ALWAYS, which always passes fragments.
Alpha testing is particularly useful when combined with texture mapping with textures which have an alpha component. This allows your texture map to act as a localized pixel mask. This technique is commonly used for objects like trees or fences, where modeling the objects (and all of its holes) becomes prohibitive.

76. Billboard Clouds
Add several planes for different parts of the model (images from Univ. of Utah).

77. Demo - SpeedTree

78. Shaders allow better animation
Teaser for CSE 781
Pretty water: