Texture Mapping

Graphics scene tanpa texture -> cenderung polosan-> sepi.

Untuk membuat permukaan yang kompleks, jika hanya menggunakan bentuk geometri maka akan sangat terbatas

Gambar/citra bisa membantu memberikan efek ilusi pada permukaan

Images painted onto polygons is called texture mapping

Texture Maps

Images applied to polygons to enhance the visual effect of a scene

Texture Mapping Texture map is an image, two-dimensional array

of color values (texels/texture pixel) Texels are specified by texture’s (u,v) space At each screen pixel, texel can be used to

substitute a polygon’s surface property (color) We must map (u,v) space to polygon’s (s, t) space

U

V

S

T

Example Texture Map

Example Texture Map

Applied to tilted polygon

Example Texture Map

glVertex3d (s, s, s)glTexCoord2d(1,1);

glVertex3d (-s, -s, -s)glTexCoord2d(0, 0);

The Art of 3D Computer Animation and EffectsIsaac Kerlow

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)

Map textures to surfaces Establish mapping from texture to surfaces

(polygons): - Application program needs to specify texture

coordinates for each corner of the polygon

The polygon can bein an arbitrary size

(0,0) (1,0)

(1,0) (1,1)

Texture Value Lookup

For the given texture coordinates (u,v), we can find a unique image value from the texture map

(0,0)

(1,1)

(0.25,0) (0.5,0) (0.75,0) (1,0)

How about coordinates that are not exactly at the intersection (pixel) positions?

A) Nearest neighborB) Linear InterpolationC) Other filters

(0,0) (1,0)

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 vertices5) Draw your objects6) Disable GL texture mapping (if you don’t

need to perform texture mapping any more)

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

Fix texture size

If the dimensions of the texture map are not power of 2, you can

1) Pad zeros 2) use gluScaleImage()

100

60

128

64

Ask OpenGL to filter the data for you to the right size – you can specify the output resolutionthat you want

Remember to adjust the texture coordinatesfor your polygon corners – you don’t want to Include black texels in your final picture

Texture mapping parameters

What happen if the given texture coordinates (s,t) are outside [0,1] range?

glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP )

glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT )

(0,0)

(1,1)

texture GL_Repeat

(0,0)

(2,2)

(0,0)

(2,2)

GL_Clamp

If (s >1) s = 1 If (t >1) t = 1

Wrapping

Wrapping

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

texturepolygon projection

Magnification

texture polygon projection

Minification

2) Linear interpolate the neighbors (better quality, slower)

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR)

1) Nearest Neighbor (lower image quality)

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);

Texture mapping parameters(3)

OpenGL texture filtering:

Or GL_TEXTURE_MAX_FILTER

Texture color blending

Determine how to combine the texel color and the object color

GL_MODULATE – multiply texture and object color GL_BLEND – blends with an environmental color GL_REPLACE – use texture color to replace object color

Example: glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE);

Example: Texture is applied after lighting, so how do you adjust the texture’s brightness?

Make the polygon white and light it normally Use glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE,

GL_MODULATE) Then, texture color is multiplied by surface (fragment) color and

appears lighted

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

Specify texture coordinates

glVertex3d (s, s, s);glTexCoord2d(1,1);

glVertex3d (-s, -s, -s);glTexCoord2d(0, 0);

Give texture coordinates before defining each vertex

glBegin(GL_QUADS);

glTexCoord2D(0,0); glVertex3f(-0.5, 0, 0.5); … glEnd();

Specify texture coordinates

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

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 ….

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

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

Planar projector

courtesy of R. Wolfe

Planar Projector

Orthographic projection

onto XY plane:

u = x, v = y

...onto YZ plane ...onto XZ plane

courtesy of R. Wolfe

Cylindrical Projector Convert rectangular coordinates (x, y, z) to

cylindrical (r, µ, h), use only (h, µ) to index texture image

courtesy of R. Wolfe

Spherical Projector

Convert rectangular coordinates (x, y, z) to spherical (, )

courtesy of R. Wolfe

Parametric Surfaces A parameterized surface patch

x = f(u, v), y = g(u, v), z = h(u, v)

courtesy of R. Wolfe

Mipmaps

Membuat texture dalam berbagai ukuran untuk menghaluskan penampakan objek yang jauh

Ukuran dibedakan per level Level 0: original texture map Level 1: half size in width and height

Define mipmaps glTexImage2D(

GL_TEXTURE_2D, level, GL_RGB, …); Where level = 0, 1, 2, ..

Automatically generate mipmaps gluBuild2DMipmaps(GL_TEXTURE_2D,

GL_RGB, width, height, format, type, texels);

For near objects

For far objects

For middle objects

MIPmap pre-filteringPrefilter repeatedly to ½ resolution

Reduce resolution equally in all dimensions

Stop at a single texel

MIPMAPS

With versus without MIPMAP

Mipmap Filters Mipmap minification filters (Table 8.3)

GL_LINEAR_MIPMAP_NEAREST: use the nearest mipmap closest to the polygon resolution, and use linear filtering

GL_LINEAR_MIPMAP_LINEAR: use linear interpolation between the two mipmaps closest to the polygon resolution, and use GL_LINEAR filtering in each mipmap

Example Code: gluBuild2DMipmaps(GL_TEXTURE_2D, GL_RGB, 64, 64, GL_RGB, GL_UNSIGNED_BYTE, texImage);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_NEAREST);

Procedural Texture Mapping Instead of looking up an image, pass the

texture coordinates to a function that computes the texture value on the fly

Renderman, the Pixar rendering language, does this Available in a limited form with vertex shaders on

current generation hardware Advantages:

Near-infinite resolution with small storage cost Idea works for many other things

Has the disadvantage of being slow in many cases

Other Types of Mapping

Environment mapping looks up incoming illumination in a map

Simulates reflections from shiny surfaces

Bump-mapping memberi lighting pada texture sehingga permukaan seperti ada efek timbul

Bukan geometri permukaan yang diubah, tapi hanya efek cahaya

Displacement mapping mengubah geometri permukaan texture sehingga kesan timbul memang karena geometri permukaan yang diubah jadi timbul

All are available in software renderers like RenderMan compliant renderers

All these are becoming available in hardware

Bump Mapping

• Textures can be used to alter the surface normal of an object, but does not change the actual shape of the surface -- we are only shading it as if it were a different shape! This technique is called bump mapping.

• Since the actual shape of the object does not change, the silhouette edge of the object will not change. Bump Mapping also assumes that the Illumination model is applied at every pixel (as in Phong Shading).

Sphere w/Diffuse Texture

Swirly Bump Map

Sphere w/Diffuse Texture & Bump Map

Bump Map Examples

Cylinder w/Diffuse Texture Map

Bump Map

Cylinder w/Texture Map & Bump Map

Displacement Mapping

We use the texture map to actually move the surface point (geometri memang benar-benar diubah jadi timbul). This is called displacement mapping. How is this fundamentally different than bump mapping?

The geometry must be displaced before visibility is determined.

Environment Maps

We use the direction of the reflected ray to index a texture map.

We can simulate reflections. This approach is not completely accurate. It assumes that all reflected rays begin from the same point, and that all objects in the scene are the same distance from that point.

Environment Mapping

Environment Mapping The environment map may take one of several forms:

Cubic mapping: map resides on 6 faces of a cube Spherical mapping: map resides on a sphere

surrounding the object The map should contain a view of the world with the

point of interest on the object as the eye The mapping can be computed at each pixel, or only

at the vertices

Spherical Mapping

Implemented in hardware Single texture map Problems:

Highly non-uniform sampling Highly non-linear mapping

Cubic Mapping

The map resides on the surfaces of a cube around the object

Typically, align the faces of the cube with the coordinate axes

To generate the map: For each face of the cube, render the

world from the center of the object with the cube face as the image plane

Rendering can be arbitrarily complex (it’s off-line)

Or, take 6 photos of a real environment with a camera in the object’s position

Actually, take many more photos from different places the object might be

Warp them to approximate map for all intermediate points

Remember Terminator 2? http://developer.nvidia.com/object/cube_

map_ogl_tutorial.html

Cubic Map Example

OpenGL Spherical Map We can use automatically generated texture coordinates in

OpenGL. For example, to generate the texture coordinates of spherical mapping

// Build the environment as a texture object// Automatically generate the texture coordinatesglTexGenf(GL_S, GL_TEXTURE_GEN_MODE, GL_SPHERE_MAP);glTexGenf(GL_T, GL_TEXTURE_GEN_MODE, GL_SPHERE_MAP);glEnable(GL_TEXTURE_GEN_S);glEnable(GL_TEXTURE_GEN_T);// Bind the environment texture…// Draw object…

Example

OpenGL Cubemap Texture Enabling and disabling the cube map texture is done as

follows: glEnable(GL_TEXTURE_CUBE_MAP); glDisable(GL_TEXTURE_CUBE_MAP);

glGenTextures(1,&cubemap_id);glBindTexture(GL_TEXTURE_CUBE_MAP,cubemap_id);

Load images into a cube map. Each face in the example is a 64x64 RGB image.

GLubyte face[6][64][64][3]; for (i=0; i<6; i++) {

  glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i,     0,                  //level     GL_RGB8,            //internal format     64,                 //width     64,                 //height     0,                  //border     GL_RGB,             //format     GL_UNSIGNED_BYTE,   //type     &face[i][0][0][0]); // pixel data }

OpenGL Implementation (cont.) We can use automatically generated texture coordinates in

OpenGL glTexGenfv(GL_S, GL_TEXTURE_GEN_MODE,

GL_REFLECTION_MAP); glTexGenfv(GL_T, GL_TEXTURE_GEN_MODE, GL_REFLECTION_MAP); glTexGenfv(GL_R, GL_TEXTURE_GEN_MODE, GL_REFLECTION_MAP); glEnable(GL_TEXTURE_GEN_S); glEnable(GL_TEXTURE_GEN_T); glEnable(GL_TEXTURE_GEN_R); // Bind the environment texture…// Draw object…

For the cube map to operate correctly, correct per-vertex normals must be supplied