Texture Maps

1. Texture Maps Jeff Parker Oct 2013

2. Objectives Introduce Mapping Methods Texture Mapping Environment Mapping Bump Mapping Billboards Consider basic strategies Forward vs backward mapping Point sampling vs area averaging

3. Limits of Geometric Modeling We can create well lit spheres and cones, but geometry lacks visual interest Needed to spice things up

4. Bricks

5. Iron Maiden Demo

6. Commands ' ' – Toggle animation p – Toggle performance t – Toggle texture mapping m – Toggle Texture Mode f – Toggle filter Mode b – Toggle Background 1-4 – Change Background c - Toggle Culling * - Toggle starfield r – Print pixels/frame Arrow keys left/right change number of spheres Arrow keys up/down change level of details < and > change # of textures Nate Robins - 1997

7. Basic Stragegy Three steps to applying a texture Specify the texture Read or generate image Assign to texture Enable texturing Assign texture coordinates to vertices "Tack it up" Proper mapping function is left to application Specify texture parameters Wrapping, filtering, sampling

8. Images and geometry flow through separate pipelines Join at the rasterizer “Complex” textures do not affect geometric complexity geometry pipeline vertices rasterizer image pixel pipeline Texture Mapping and the OpenGL Pipeline

9. Specifying a Texture Image Define a texture image from an array of texels (texture elements) in CPU memory Define as any other pixel map Scanned image Generate by application code Enable texture mapping OpenGL supports 1-4 dimensional texture maps WebGL is limited to 1-2 dimensional texture maps

10. Mapping a Texture "Tacking it up" Based on parametric texture coordinates

11. Mapping a Texture vartexCoord = [ vec2(0, 0), vec2(0, 1), vec2(1, 1), vec2(1, 0) ]; pointsArray.push(vertices[a]); colorsArray.push(vertexColors[a]); texCoordsArray.push(texCoord[0]);

12. Nate Robin's Tutor

13. Applying Textures II • specify textures in texture objects • set texture filter (minification/magnification) • set texture function • set texture wrap mode • set optional perspective correction hint • bind texture object • enable texturing • supply texture coordinates for vertex coordinates can also be generated

14. In practice Let's walk through a simple example We create two textures As we image the object (a cube) we tie a texture coordinate to each vertex We enable texture mapping

15. textureCubev2.js // Create a checkerboard pattern var image1 = new Array() for (var i =0; i<texSize; i++) image1[i] = new Array(); for (var i =0; i<texSize; i++) for ( var j = 0; j < texSize; j++) image1[i][j] = new Float32Array(4); for (var i =0; i<texSize; i++) for (var j=0; j<texSize; j++) { var c = (((i & 0x8) == 0) ^ ((j & 0x8) == 0)); image1[i][j] = [c, c, c, 1]; }

16. textureCubev2.js // Create a checkerboard pattern using floats ... // Convert floats to ubytes for texture var image2 = new Uint8Array(4*texSize*texSize); for ( var i = 0; i < texSize; i++ ) for ( var j = 0; j < texSize; j++ ) for(var k =0; k<4; k++) image2[4*texSize*i+4*j+k] = 255*image1[i][j][k];

17. Texture Objects function configureTexture(image) { texture = gl.createTexture(); gl.activeTexture( gl.TEXTURE0 ); gl.bindTexture( gl.TEXTURE_2D, texture ); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, texSize, texSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, image); gl.generateMipmap( gl.TEXTURE_2D ); gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_LINEAR); gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST ); }

18. Define Image as a Texture void texImage2D(GLenum target, GLint level, GLenum internalformat, GLenum format, GLenum type, ImageData? pixels); gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image ); target: type of texture, e.g. GL_TEXTURE_2D level: used for mipmapping (discussed later) internalformat, format, type: describe texels pixels: pointer to texel array

19. Converting A Texture Image OpenGL requires texture dimensions to be powers of 2 Even more limited in WebGL If dimensions of image are not powers of 2 gluScaleImage( format, w_in, h_in, type_in, *data_in, w_out, h_out, type_out, *data_out ); data_inis source image data_outis for destination image Image interpolated and filtered during scaling Check your system: GL_ARB_texture_non_power_of_two

20. In practice var cBuffer = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer); gl.bufferData( gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW ); var vColor = gl.getAttribLocation( program, "vColor" ); gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(vColor); var vBuffer = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer); gl.bufferData( gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW); var vPosition = gl.getAttribLocation( program, "vPosition" ); gl.vertexAttribPointer( vPosition, 4, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(vPosition); var tBuffer = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, tBuffer); gl.bufferData( gl.ARRAY_BUFFER, flatten(texCoordsArray), gl.STATIC_DRAW ); var vTexCoord = gl.getAttribLocation( program, "vTexCoord"); gl.vertexAttribPointer(vTexCoord, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(vTexCoord); configureTexture(image2); Passing in three attributes per vertex

21. Pin Textures function quad(a, b, c, d) { pointsArray.push(vertices[a]); colorsArray.push(vertexColors[a]); texCoordsArray.push(texCoord[0]); pointsArray.push(vertices[b]); colorsArray.push(vertexColors[a]); texCoordsArray.push(texCoord[1]); ...

22. t s GL_REPEAT wrapping GL_CLAMP wrapping texture Parameters: Wrapping Mode s, t: parameter space Clamping: if s, t > 1 use 1, if s, t < 0 use 0 Wrapping: use s, t modulo 1 texParameteri( target, type, mode ) texParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP ) texParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT )

23. Texture Polygon Texture Polygon Magnification Minification Magnification and Minification More than one texel can cover a pixel (minification) or more than one pixel can cover a texel (magnification) Can use point sampling (nearest texel) or linear filtering ( 2 x 2 filter) to obtain texture values

24. Filter Modes Modes defined by calls to texParameteri( target, type, mode ) texParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); texParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); Linear filtering requires a border of an extra texel for filtering at edges (border = 1)

25. Mipmapped Textures Mipmapping define prefiltered texture maps of decreasing resolutions Lessens interpolation errors for smaller objects Declare mipmap level of image when defining texture texImage2D( GL_TEXTURE_2D, 0,… ) Mipmap generate will build all the textures from image generateMipmap( gl.TEXTURE_2D ); Can also load your own…

26. MipMapping

27. Reading in a Texture OpenGL does not have any way to read images It is equally bad at JPG, TIFF, etc In the past I have spent time showing how to read .ppm files, a very simple graphics format.

28. PPM Files Portable Pixel Map (PPM) files are a simple, uncompressed format Can be read by xv and gimp (GNU Image Manipulation Program). I use GraphicConverter from Lemksoft Header holds Version String # One or more comments width height maxval Example P6 # Created by Paint Shop Pro 5 128 128 # Could have more comments between values 255 &@#$5%%... OpenGL does not support reading or writing graphical images (JPG, PNG, etc) The .ppm format is simple enough for us to create utility to read a file

29. ReadPPMFile Header /* Read a P6 PPM File */ int readPPMFile(GLubyte image[MAX][MAX][3], char *filename) { FILE* fp; int i, w, h, m; char head[70]; /* max line <= 70 in PPM (per spec). */ fp = fopen(filename, "rb"); if (!fp) { perror(filename); exit(1); } /* Check for the PPM Magic number, P6 */ fgets(head, 70, fp); if (strncmp(head, "P6", 2)) { fprintf(stderr, "%s: Not a raw PPM file\n", filename); exit(1); }

30. ReadPPMFile Header /* grab the three elements in the header (width, height, maxval). */ i = 0; while (i < 3) { fgets(head, 70, fp); if (head[0] == '#') /* skip comments. */ continue; if (i == 0) i += sscanf(head, "%d %d %d", &w, &h, &m); else if (i == 1) i += sscanf(head, "%d %d", &h, &m); else if (i == 2) i += sscanf(head, "%d", &m); } if ((w != MAX) || (h != MAX) || (m > 255))

31. The work in ReadPPMFile /* Read a P6 PPM File */ int readPPMFile(GLubyte img[MAX][MAX][3], char *fname) { ... fread(image, sizeof(unsigned char), w*h*3, fp); fclose(fp); return 1; } int main(int argc, char **argv) { ... if ((argc > 1) && (argv[1][0] != '-')) readPPMFile(image, argv[1]); ...

32. Where can I get Textures? Paul Bourke has a large collection of images at http://paulbourke.net/ http://paulbourke.net/texture_colour/leaf/

33. Paul Bourke

34. Texture Parameters OpenGL has a variety of parameters that determine how texture is applied We have seen wrapping parameters which determine what happens if s and t are outside the (0,1) range Filter modes allow us to use area averaging instead of point samples Mipmapping allows us to use textures at multiple resolutions Environment parameters determine how texture mapping interacts with shading

35. Texture Functions Controls how texture is applied glTexEnv{fi}[v](GL_TEXTURE_ENV, prop, param ) GL_TEXTURE_ENV_MODEmodes GL_MODULATE: modulates with computed shade GL_BLEND: blends with an environmental color GL_REPLACE: use only texture color GL(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE); Set blend color withGL_TEXTURE_ENV_COLOR

36. Interpolation OpenGL uses interpolation to find proper texels from specified texture coordinates Can be distortions texture stretched over trapezoid showing effects of bilinear interpolation good selection of tex coordinates poor selection of tex coordinates

37. Aliasing Point sampling of the texture can lead to aliasing errors point samples in u,v (or x,y,z) space miss blue stripes point samples in texture space

38. Aliasing Point sampling of the texture can lead to aliasing errors The Nyquist limit point samples in u,v (or x,y,z) space miss blue stripes point samples in texture space

39. Nyquist Limit To reconstruct a signal, must sample at over twice the frequency

40. Aliasing

41. Undersampling - holes

42. Area Averaging A better but slower option is to use area averaging Acts as a low pass filter pixel preimage Note that preimage of pixel is curved

43. Prefiltering

44. Compare

45. Supersampling

46. Some Algorithms We could look for the nearest textel – GL_NEAREST We could average 4 – GL_LINEAR We could MipMap and take best fit – GL_NEAREST_MIPMAP_X Then apply NEAREST of LINEAR We could MipMap and take bracketing maps GL_LINEAR_MIPMAP_X Then apply NEAREST of LINEAR

47. With change in Z

48. Nearest Neighbor

49. Checkerboard

50. What is the problem?