# TEXTURE MAPPING JEFF CHASTINE 1. TEXTURE MAPPING Applying an image (or a texture ) to geometry 2D images (rectangular) 3D images (volumetric – such as.

## Presentation on theme: "TEXTURE MAPPING JEFF CHASTINE 1. TEXTURE MAPPING Applying an image (or a texture ) to geometry 2D images (rectangular) 3D images (volumetric – such as."— Presentation transcript:

TEXTURE MAPPING JEFF CHASTINE 1

TEXTURE MAPPING Applying an image (or a texture ) to geometry 2D images (rectangular) 3D images (volumetric – such as a CAT scan) Adds realism to the scene A vertex can have: A 3D 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, 0)(1, 0) (1, 1)(0, 1) (1, 1)(0, 1) (0, 0)(1, 0) Polygon to be textured JEFF CHASTINE 4

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

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

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

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

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

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

?

NON-PLANAR GEOMETRY (0, 0)(1, 0) (1, 1)(0, 1) 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 texBufferID;// OpenGL variable GLuint texCoordID, texID; // 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_2D glEnable (GL_TEXTURE_2D); Note: you can also call glDeleteTextures (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 glGenTextures(1, &texBufferID); glBindTexture (GL_TEXTURE_2D, texBufferID); glTexImage2D (GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, bitmap_data); The type of texture **GL_TEXTURE_1D, GL_TEXTURE_3D, GL_TEXTURE_CUBE_MAP JEFF CHASTINE 16

You’ll need to bind the texture (make this the active buffer for future operations) Then, load the pixel data into the buffer glGenTextures(1, &texBufferID); glBindTexture (GL_TEXTURE_2D, texBufferID); glTexImage2D (GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, bitmap_data); BINDING AND LOADING The level of this texture for “mipmapping” - later JEFF CHASTINE 17

You’ll need to bind the texture (make this the active buffer for future operations) Then, load the pixel data into the buffer glGenTextures(1, &texBufferID); glBindTexture (GL_TEXTURE_2D, texBufferID); glTexImage2D (GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, bitmap_data); BINDING AND LOADING How OpenGL should store this data internally **GL_RED, GL_GREEN, GL_BLUE, GL_ALPHA, GL_RGB, GL_BGR, GL_RGBA… JEFF CHASTINE 18

You’ll need to bind the texture (make this the active buffer for future operations) Then, load the pixel data into the buffer glGenTextures(1, &texBufferID); glBindTexture (GL_TEXTURE_2D, texBufferID); glTexImage2D (GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, bitmap_data); BINDING AND LOADING Obviously the width and height, but why not size of the buffer? JEFF CHASTINE 19

You’ll need to bind the texture (make this the active buffer for future operations) Then, load the pixel data into the buffer glGenTextures(1, &texBufferID); glBindTexture (GL_TEXTURE_2D, texBufferID); glTexImage2D (GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, bitmap_data); BINDING AND LOADING The width of a border (if you want one) JEFF CHASTINE 20

You’ll need to bind the texture (make this the active buffer for future operations) Then, load the pixel data into the buffer glGenTextures(1, &texBufferID); glBindTexture (GL_TEXTURE_2D, texBufferID); glTexImage2D (GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, bitmap_data); BINDING AND LOADING The format of the pixel data we’re giving it **GL_UNSIGNED_SHORT_5_6_5, GL_UNSIGNED_SHORT_4_4_4_4, GL_UNSIGNED_INT_8_8_8_8,... JEFF CHASTINE 21

You’ll need to bind the texture (make this the active buffer for future operations) Then, load the pixel data into the buffer glGenTextures(1, &texBufferID); glBindTexture (GL_TEXTURE_2D, texBufferID); glTexImage2D (GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, bitmap_data); BINDING AND LOADING 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 glActiveTexture (GL_TEXTURE0); For multiple layers/effects, could activate GL_TEXTURE1, GL_TEXTURE2, … For now, just stick with GL_TEXTURE0 ! 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 glTexParameterf() GL_CLAMP GL_REPEAT GL_CLAMP_TO_BORDER GL_MIRRORED_REPEAT Others as well glTexParameterf (GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); JEFF CHASTINE 24

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

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

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

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

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

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

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 OpenGL picks the most approach one (or interpolates) glGenerateMipmap (GLenum target); http://en.wikipedia.org/wiki/Mipmap JEFF CHASTINE 34

SAMPLERS In your shaders, textures are accessed using a sampler : sampler1D sampler2D ** sampler3D samplerCube Samplers are uniform (which makes sense) Set that sampler in OpenGL using: texID = glGetUniformLocation(progID, “texture”); glUniform1i (texID, 0); // This is GL_TEXTURE0 JEFF CHASTINE 35

JEFF CHASTINE 36 glEnable(GL_TEXTURE_2D); glGenTextures (1, &texBufferID); glBindTexture (GL_TEXTURE_2D, texBufferID); glTexImage2D (GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, bitmap_data); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_MIRRORED_REPEAT); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_MIRRORED_REPEAT ); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); texCoordID = glGetAttribLocation(progID, “s_vTexCoord"); glEnableVertexAttribArray(texCoordID); glVertexAttribPointer(texCoordID, 2, GL_FLOAT, GL_FALSE, 0, BUFFER_OFFSET(offsetToUVsInBytes); texID = glGetUniformLocation(shaderProgramID, “texture”); glActiveTexture(GL_TEXTURE0); glUniform1i(texID, 0);

YOUR VERTEX SHADER (TEXTURING ONLY) #version 150 in vec4 s_vPosition;// From our OpenGL program!! in vec4 s_vNormal;// The normal of the vertex in vec2 s_vTexCoord;// In from OpenGL out vec2 texCoord;// Going out to the shader // Remember, uniforms are the same for a vertices. uniform mat4 p;// This is perspective matrix uniform mat4 mv;// This is the model-view matrix // Other stuff cut… void main () { gl_Position = p*mv*vPosition; texCoord = s_vTexCoord;// Interpolate for frag shader } JEFF CHASTINE 37

FRAGMENT SHADER #version 150 out vec4 fColor;// Final output in vec2 texCoord;// From the vertex shader uniform sampler2D texture;// How to access the texture void main () { fColor = texture2D (texture, texCoord); } JEFF CHASTINE 38

JEFF CHASTINE 39

Download ppt "TEXTURE MAPPING JEFF CHASTINE 1. TEXTURE MAPPING Applying an image (or a texture ) to geometry 2D images (rectangular) 3D images (volumetric – such as."

Similar presentations