6. Texture mapping Tatsuya Yatagawa

What is “texture mapping”？ n In short, a technique to show image on surfaces n It is currently used for a broader purpose. Computer Graphics Course @Waseda University w/o texture map w/ texture map

What texture mapping can do? n Put image texture on object surfaces Computer Graphics Course @Waseda University

What texture mapping can do? n Modify shading using normal mapping (need shader program) Computer Graphics Course @Waseda University w/o normal map w/ normal map

What texture mapping can do? n Add background image via cube mapping Computer Graphics Course @Waseda University Source code https://github.com/tatsy/OpenGLCourseJP/tree/master/advanced/cube_mapping

How texture mapping works? n Associate texture coordinates to vertices n Each vertex is associated with 2D texture coordinates (a.k.a. UV coordinates) n Then, pick up colors using the coordinates n UV for internal region is given by barycentric coordinates Computer Graphics Course @Waseda University

How texture mapping works? n Image coordinates vs Texture coordinates Computer Graphics Course @Waseda University (0, 0) (W, H) Image coordinates Origin is upper left. Size is in pixels. Texture coordinates Origin is bottom left. Domain is [0, 1] x [0, 1] (0, 0) (1, 1)

Workflow to use texture mapping in GLFW n Preparation → initializeGL n Enable texture mapping n Load texture image n Generate texture and bind it to GPU unit n Transfer image data to texture memory on GPU n Specify how texture is drawn n Drawing → paintGL n Activate textures to be used n Specify UV coordinates to each vertex Computer Graphics Course @Waseda University

Enable texture mapping n Enable texture mapping function itself n glEnable(GL_TEXTURE_XX) n GL_TEXTURE_1D n GL_TEXTURE_2D n GL_TEXTURE_3D n GL_TEXTURE_CUBE_MAP etc. n Code Computer Graphics Course @Waseda University Prepare

Load texture image n stb_image n C++ standard library does not have function to load images n Use stb_image, which is a header file in STB project. n https://github.com/nothings/stb/blob/master/stb_image.h (Click ”Raw” button in top right, then save the source code) Computer Graphics Course @Waseda University Prepare

Load texture image n stb_image: usage n Include header with macro n Define a macro “STB_IMAGE_IMPLEMENTATION” n Load image (by “stbi_load”) n It returns byte array for image colors (RGBA format, [0, 255]) n Width, height, and #channels are given by pointer arguments. Computer Graphics Course @Waseda University 準備

How to modify “common.h.in”? n Sample program includes “common.h.in” n This is used in automatic path configuration in CMake (CMake is a common build manager for C++ and some other languages) n But you can update it also by yourself n How to setup “common.h” from “common.h.in” ? n Rename “common.h.in” to “common.h” n Specify absolute paths to following items: n SOURCE_DIRECTORY: Directory which stores “main.cpp” n DATA_DIRECTORY: Directory which stores image and other data Computer Graphics Course @Waseda University

Show file extension n Windows n Open “Explorer” n Select “View” tab n Tick “File name extension” almost at the center n Mac n Finder → Above menu (Finder) → Preference → Tick “Show all filename extensions” Computer Graphics Course @Waseda University Showing extensions reduces simple mistakes to misunderstand complete filename with extension J

Generate and bind texture n Generate texture n glGenTextures n 1st parameter: Number of textures (strictly, texture names) n 2nd parameter: Pointer to store texture names (GLuint*) n Specify texture object type (called “bind”) n glBindTexture n 1st parameter: Type of texture object n 2nd parameter: Texture name n Code snippet Computer Graphics Course @Waseda University Prepare

Transfer texture data to GPU n glTexImage2D (for 2D textures) n Parameters n 1st: Type of texture (GL_TEXTURE_2D) n 2nd: MIP level for which data is transferred (elaborate later) n 3rd: Data format on GPU (it can differ from that on RAM) n 4th: Image width in pixel n 5th: Image height in pixel n 6th: Currently, it makes no sense (always 0) n 7th: Color format after transfer (RED, RG, RGB, RGBA etc.) n 8th: Scalar type format (INT, UNSIGNED_BYTE, FLOAT etc.) n 9th: Byte array to be transferred to GPU n Code Computer Graphics Course @Waseda University Prepare

Specify how to use texture n For example, you can specify following n Use or not use MIP map n How to wrap textures at their borders Computer Graphics Course @Waseda University Prepare

MIP map n What is MIP map? (“MIP” stands for “multum in parvo” in Latin = “much in little”) n Control texture fineness depending on how large it is drawn n Finer texture is used, when camera gets close to the surface Computer Graphics Course @Waseda University w/o MIP map w/ MIP map

MIP map n What is MIP map? (“MIP” stands for “multum in parvo” in Latin = “much in little”) n Control texture fineness depending on how large it is drawn n Finer texture is used, when camera gets close to the surface Computer Graphics Course @Waseda University w/o MIP map w/ MIP map Far Close Coarse Fine Aliasing is largely reduced!

Sampling theorem n When a signal is band-limited where its maximum frequency is B, n It can be recovered by a set of samples taken with the interval less than (1/2B) = Nyquist frequency n Recovered signal is represented by: 𝑓 𝑡 = ∑! 𝑓! ⋅ sinc "#"! $ n If it does not suffice, then aliasing (= wrong frequency signal) is observed. Computer Graphics Course @Waseda University

Why aliasing occurs? n Aliasing occurs at regions with high texture density n Colored square corresponds to 1 pixel on display Computer Graphics Course @Waseda University 1 pixel include many texture pixels → High density L (= under-sampling) 1pixel include few texture pixels → Low density J (= over-sampling)

Why aliasing occurs? n Aliasing occurs at regions with high texture density n Colored square corresponds to 1 pixel on display Computer Graphics Course @Waseda University By taking central color, color order changes! (WBWB pattern changes to WW) Here, WW order does not change J At high density part, original texture pattern is not recovered

How MIP map works? n Use multi-resolution images to prevent aliasing Computer Graphics Course @Waseda University MIP level 0 MIP level 1 MIP level 2 MIP level 3 one-half, one-fourth, ... sized images are stored in fine to coarse order. → in this way, pattern in the image will be kept to a certain extent!

How MIP map works? n Then, access to pixels at appropriate detail level Computer Graphics Course @Waseda University MIP level 0 MIP level 1 1 image pixel convers fewer texture pixels at higher MIP level Search MIP level in which ratio of image pixel size to texture pixel size is similar. MIP level k ・・・ ・・・ Image pattern is recovered, while its resolution is low

Generate MIP map Computer Graphics Course @Waseda University Not use automatic MIP map generation Automatic MIP map generation n You can use gluBuild2DMipmaps (OpenGL 2.1 or lower) n In modern OpenGL, you can use glGenerateMipmap (3.0 or higher). Prepare n In this case, you need to specify images for different MIP levels manually. n Change 2nd argument and specify pixel data to last argument.

Texture filtering Computer Graphics Course @Waseda University Filter each MIP level, but NOT interpolate levels in between Filter each MIP level, and interpolate levels in between • GL_LINEAR_MIPMAP_NEAREST filters each MIP level by bilinear interpolation during image minification and magnification but refer to only nearest MIP level to get a pixel color. • GL_LINEAR_MIPMAP_LINEAR filters each MIP level as well, and the pixel colors at two neighboring MIP levels are interpolated to get a pixel color. Prepare

Texture wrap n Texture wrap: behavior for UV coordinates less than 0 or more than 1 n OpenGL 1.2 and older: n GL_REPEAT: simply repeat texture n GL_CLAMP: average color of outmost color and user-specified border color (that’s extremely useless...?) n OpenGL 1.3 or newer (need GLAD, GLEW etc.) n GL_CLAMP_TO_EDGE: use outmost color at the border n GL_CLAMP_TO_BORDER: use user-specified border color n GL_MIRRORED_REPEAT: repeat texture after mirroring it Computer Graphics Course @Waseda University 準備

Texture wrap n Example n To specify border color, you can use “glTexParameterfv” n For texture wrap, WRAP_S is for U coordinate (horizontal), WRAP_T is for V coordinate (vertical). n Result Computer Graphics Course @Waseda University

Texture wrap n Comparison of behaviors Computer Graphics Course @Waseda University GL_CLAMP GL_CLAMP_TO_EDGE GL_CLAMP_TO_BORDER GL_REPEAT GL_MIRRORED_REPEAT

Specify UV coordinates n It’s simple. You can use “glTexCoord2f” Computer Graphics Course @Waseda University Draw

Result Computer Graphics Course @Waseda University

Practice n Practice 6-1 n Map the following dice faces to the cube using texture mapping. Computer Graphics Course @Waseda University

Practice n Practice 6-2 n Check how MIP levels are switched by specifying different color image to different MIP levels. n Hint: Change 2nd parameter of glTexImage2D to specify different image to different MIP level. n Hint: You don’t need to use gluBuild2DMipmaps. All you need to do is specify 4 images packed in ZIP n Hint: You need to specify empty (= black) image to MIP levels higher than 4. (OpenGL show nothing if you do not specify images to all MIP levels properly!) Computer Graphics Course @Waseda University