TEXTURE MAPPING JEFF CHASTINE 1 TEXTURE MAPPING Applying

TEXTURE MAPPING JEFF CHASTINE 1

TEXTURE MAPPING • Applying an image (or a texture) to geometry • 2 D images (rectangular) • 3 D images (volumetric – such as a CAT scan) • Adds realism to the scene • A vertex can have: • A 3 D position (x, y, z) – 3 floats • Normal (x, y, z) – 3 floats • Color? • A UV coordinate (s, t) – a. k. a. texture coordinates – 2 floats JEFF CHASTINE 2

THE PROBLEM ? Polygon to be textured JEFF CHASTINE 3

THE PROBLEM (0, 1) (1, 1) Polygon to be textured (0, 0) JEFF CHASTINE (1, 0) 4

THE PROBLEM (0, 1) (1, 1) Victory is mine! (0, 0) (1, 0) Linear interpolate each pixel! JEFF CHASTINE 5

WHAT IF IT’S STRETCHED? (0, 1) (1, 1) (0, 0) (1, 0) JEFF CHASTINE (0, 1) (0, 0) (1, 1) (1, 0) 6

WHAT IF IT’S STRETCHED? (0, 1) (1, 1) (0, 0) (1, 0) JEFF CHASTINE (0, 1) (0, 0) (1, 1) (1, 0) 7

WHAT HAPPENS NOW? (0, 1) (1, 1) (0, 2) (2, 2) Polygon to be textured (0, 0) JEFF CHASTINE (2, 0) (1, 0) 8

WHAT HAPPENS NOW? (0, 1) (1, 1) (0, 2) (0, 0) JEFF CHASTINE (2, 2) (2, 0) (1, 0) 9

WHAT HAPPENS NOW? (0, 1) (1, 1) (0, 2) (2, 2) (0, 0) (1, 0) (2, 0) (1, 0) (Note: there are other ways to handle UVs > 1. 0) JEFF CHASTINE 10

NON-PLANAR GEOMETRY (0, 1) (1, 1) (0, 0) (1, 0) JEFF CHASTINE 12

TEXTURE MAPPING • In the real world, models come with • Geometry • Normals • UV coordinates • A texture! • Now we must: • Load the positions, normals and UVs into the buffer • Somehow load a texture from file… Put it into a buffer • Somehow get that texture to the fragment shader! JEFF CHASTINE 13

IMAGE FILES • Bitmaps (BMP) • Common, and usually aren’t compressed • Contain header/meta info followed by pixel data • Are in BGR format, bottom row first! • Are easy to work with (just use my loader) • Won’t that be inefficient? • No – compression is on file side • Raw pixel data is sent to the buffer anyway! • What about JPEG, TGA, or raw image data? JEFF CHASTINE 14

INITIALIZING • • More IDs: • GLuint tex. Buffer. ID; // Open. GL variable • GLuint tex. Coord. ID, tex. ID; // Shader variables You’ll need a place to store the actual file data • GLubyte image[width][height][3]; • You’ll need a set of texture coordinates for the object: • GLfloat* uvs; • // Load these onto the buffer You also need to enable GL_TEXTURE_2 D • gl. Enable (GL_TEXTURE_2 D); Note: you can also call gl. Delete. Textures (GLsizei n, GLuint *textures); JEFF CHASTINE 15

BINDING AND LOADING • You’ll need to bind the texture (make this the active buffer for future operations) • Then, load the pixel data into the texture buffer gl. Gen. Textures(1, &tex. Buffer. ID); gl. Bind. Texture (GL_TEXTURE_2 D, tex. Buffer. ID); gl. Tex. Image 2 D (GL_TEXTURE_2 D, 0, GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, bitmap_data); The type of texture **GL_TEXTURE_1 D, GL_TEXTURE_3 D, GL_TEXTURE_CUBE_MAP JEFF CHASTINE 16

BINDING AND LOADING • You’ll need to bind the texture (make this the active buffer for future operations) • Then, load the pixel data into the buffer gl. Gen. Textures(1, &tex. Buffer. ID); gl. Bind. Texture (GL_TEXTURE_2 D, tex. Buffer. ID); gl. Tex. Image 2 D (GL_TEXTURE_2 D, 0, GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, bitmap_data); The level of this texture for “mipmapping” - later JEFF CHASTINE 17

BINDING AND LOADING • You’ll need to bind the texture (make this the active buffer for future operations) • Then, load the pixel data into the buffer gl. Gen. Textures(1, &tex. Buffer. ID); gl. Bind. Texture (GL_TEXTURE_2 D, tex. Buffer. ID); gl. Tex. Image 2 D (GL_TEXTURE_2 D, 0, GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, bitmap_data); How Open. GL should store this data internally **GL_RED, GL_GREEN, GL_BLUE, GL_ALPHA, GL_RGB, GL_BGR, GL_RGBA… JEFF CHASTINE 18

BINDING AND LOADING • You’ll need to bind the texture (make this the active buffer for future operations) • Then, load the pixel data into the buffer gl. Gen. Textures(1, &tex. Buffer. ID); gl. Bind. Texture (GL_TEXTURE_2 D, tex. Buffer. ID); gl. Tex. Image 2 D (GL_TEXTURE_2 D, 0, GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, bitmap_data); Obviously the width and height, but why not size of the buffer? JEFF CHASTINE 19

BINDING AND LOADING • You’ll need to bind the texture (make this the active buffer for future operations) • Then, load the pixel data into the buffer gl. Gen. Textures(1, &tex. Buffer. ID); gl. Bind. Texture (GL_TEXTURE_2 D, tex. Buffer. ID); gl. Tex. Image 2 D (GL_TEXTURE_2 D, 0, GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, bitmap_data); The width of a border (if you want one) JEFF CHASTINE 20

BINDING AND LOADING • You’ll need to bind the texture (make this the active buffer for future operations) • Then, load the pixel data into the buffer gl. Gen. Textures(1, &tex. Buffer. ID); gl. Bind. Texture (GL_TEXTURE_2 D, tex. Buffer. ID); gl. Tex. Image 2 D (GL_TEXTURE_2 D, 0, GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, bitmap_data); The format of the pixel data we’re giving it **GL_UNSIGNED_SHORT_5_6_5, GL_UNSIGNED_SHORT_4_4, GL_UNSIGNED_INT_8_8, . . . JEFF CHASTINE 21

BINDING AND LOADING • You’ll need to bind the texture (make this the active buffer for future operations) • Then, load the pixel data into the buffer gl. Gen. Textures(1, &tex. Buffer. ID); gl. Bind. Texture (GL_TEXTURE_2 D, tex. Buffer. ID); gl. Tex. Image 2 D (GL_TEXTURE_2 D, 0, GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, bitmap_data); The raw pixel data itself JEFF CHASTINE 22

TEXTURE UNITS • A piece of hardware that has access to a texture image • Select that unit with gl. Active. Texture (GL_TEXTURE 0); • For multiple layers/effects, could activate GL_TEXTURE 1, GL_TEXTURE 2, … • For now, just stick with GL_TEXTURE 0! JEFF CHASTINE 23

KNOWN PROBLEMS IN TEXTURE MAPPING • What should you do if a texture coordinate is out of range (e. g. > 1. 0)? • We can modify the behavior using gl. Tex. Parameterf() • GL_CLAMP • GL_REPEAT • GL_CLAMP_TO_BORDER • GL_MIRRORED_REPEAT • Others as well gl. Tex. Parameterf (GL_TEXTURE_2 D, GL_TEXTURE_WRAP_S, GL_REPEAT); JEFF CHASTINE 24

TEXTURE WRAPPING (ORIGINAL 1 -TO-1 MAPPING) 1, 1 0, 0 JEFF CHASTINE 25

TEXTURE WRAPPING (GL_REPEAT) 4, 4 0, 0 JEFF CHASTINE 26

TEXTURE WRAPPING (GL_CLAMP) – REALLY NOT USEFUL… 4, 4 0, 0 JEFF CHASTINE 27

TEXTURE WRAPPING (GL_CLAMP) AND (GL_REPEAT) 4, 4 0, 0 JEFF CHASTINE 28

TEXTURE WRAPPING (GL_CLAMP_TO_BORDER) 4, 4 0, 0 JEFF CHASTINE 29

TEXTURE WRAPPING WHY MIRRORED? (GL_MIRRORED_REPEAT) JEFF CHASTINE (GL_REPEAT) 30

MINIFICATION AND MAGNIFICATION • At some depth, one screen pixel == one texel (texture element) • Closer, many screen pixels for few texels (magnification) • Farther, many texels for few screen pixels (minification) • What should you do if a one screen pixel is in between multiple texels? • What happens if several parts of the image map to the same pixel? • Change the GL_TEXTURE_MAG_FILTER to: • GL_NEAREST • GL_LINEAR JEFF CHASTINE 31

GL_NEAREST JEFF CHASTINE 32

GL_LINEAR JEFF CHASTINE 33

ANOTHER APPROACH - MIPMAPPING • Have several images that are pre-rendered • Open. GL picks the most approach one (or interpolates) • gl. Generate. Mipmap (GLenum target); http: //en. wikipedia. org/wiki/Mipmap JEFF CHASTINE 34

SAMPLERS • In your shaders, textures are accessed using a sampler: • sampler 1 D • sampler 2 D ** • sampler 3 D • sampler. Cube • Samplers are uniform (which makes sense) • Set that sampler in Open. GL using: tex. ID = gl. Get. Uniform. Location(prog. ID, “texture”); gl. Uniform 1 i (tex. ID, 0); // This is GL_TEXTURE 0 JEFF CHASTINE 35

gl. Enable(GL_TEXTURE_2 D); gl. Gen. Textures (1, &tex. Buffer. ID); gl. Bind. Texture (GL_TEXTURE_2 D, tex. Buffer. ID); gl. Tex. Image 2 D (GL_TEXTURE_2 D, 0, GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, bitmap_data); gl. Tex. Parameterf(GL_TEXTURE_2 D, GL_TEXTURE_WRAP_S, GL_MIRRORED_REPEAT); gl. Tex. Parameterf(GL_TEXTURE_2 D, GL_TEXTURE_WRAP_T, GL_MIRRORED_REPEAT ); gl. Tex. Parameterf(GL_TEXTURE_2 D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); gl. Tex. Parameterf(GL_TEXTURE_2 D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); tex. Coord. ID = gl. Get. Attrib. Location(prog. ID, “s_v. Tex. Coord"); gl. Enable. Vertex. Attrib. Array(tex. Coord. ID); gl. Vertex. Attrib. Pointer(tex. Coord. ID, 2, GL_FLOAT, GL_FALSE, 0, BUFFER_OFFSET(offset. To. UVs. In. Bytes); tex. ID = gl. Get. Uniform. Location(shader. Program. ID, “texture”); gl. Active. Texture(GL_TEXTURE 0); gl. Uniform 1 i(tex. ID, 0); JEFF CHASTINE 36

YOUR VERTEX SHADER (TEXTURING ONLY) #version 150 in vec 4 s_v. Position; in vec 4 s_v. Normal; in vec 2 s_v. Tex. Coord; out vec 2 tex. Coord; // // From our Open. GL program!! The normal of the vertex In from Open. GL Going out to the shader // Remember, uniforms are the same for a vertices. uniform mat 4 p; // This is perspective matrix uniform mat 4 mv; // This is the model-view matrix // Other stuff cut… void main () { gl_Position = p*mv*v. Position; tex. Coord = s_v. Tex. Coord; } JEFF CHASTINE // Interpolate for frag shader 37

FRAGMENT SHADER #version 150 out vec 4 f. Color; // Final output in vec 2 tex. Coord; // From the vertex shader uniform sampler 2 D texture; // How to access the texture void main () { f. Color = texture 2 D (texture, tex. Coord); } JEFF CHASTINE 38

JEFF CHASTINE 39