1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping

2 Texture Mapping in WebGL Texture mapping in WebGL is done once the primitives are rasterized as each fragment is processed. Texture mapping acts as part of the shading process, as the fragment color is computed. Texture mapping uses the coordinate transformation between the texture (s, t) and surface (u, v) to compute the texel value to place at a given pixel position.

3 Specifying a Texture Texture is specified as an array of texels, of type Uint8: var myTexels = new Uint8Array(4 * 256 * 256] One byte for each of red, green, blue, and a. Width is power of 2 Height is power of 2 Create texture by either: 1) Write a program to generate the texture OR2) Read it in from an image file.

4 Reading from an image file 1)We can read in an image within the JavaScript file: var image = new Image(); image.src = "myPicture.gif"; 2) Read in the texture in the html file: and access it in the JavaScript file: var image = document.getElementById("texImage");

5 Configuring the Texture texture = gl.createTexture(); gl.bindTexture( gl.TEXTURE_2D, texture ); //Flip the Y values to match the WebGL coordinates gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); //Specify the image as a texture array: gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image ); //Link texture to a sampler in fragment shader gl.uniform1i(gl.getUniformLocation(program, "texture"), 0);

6 Specifying that an array holds a texture We specify that a given array contains texel values with the following WebGL function: gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, imageData); Generally: gl.texImage2D(target, level, iformat, width, height, border, format, type, texelArray);

7 Set up Texture Coordinates (0, 0) (0, 1)(1, 1) (1, 0) s t var texCoord = [ vec2(0, 0), vec2(0, 1), vec2(1, 1), vec2(1, 0) ];

8 Assigning a Texture to a Polygon function quad( a, b, c, d) { pointsArray.push(vertices[a]); texCoordsArray.push(texCoord[0]); pointsArray.push(vertices[b]); texCoordsArray.push(texCoord[1]); pointsArray.push(vertices[c]); texCoordsArray.push(texCoord[2]); pointsArray.push(vertices[a]); texCoordsArray.push(texCoord[0]); pointsArray.push(vertices[c]); texCoordsArray.push(texCoord[2]); pointsArray.push(vertices[d]); texCoordsArray.push(texCoord[3]); }

9 Passing Texture Coordinates to the Vertex Shader 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 );

10 Specifying Texture Parameters Specify Texture parameters with gl.texParameteri( ) a)Specifying Texture wrapping: What happens if the texture coordinates go out of bounds? Can specify wrapping (start at 0 again) Or, can clamp the value (with the value of the last texel). gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); or gl.TEXTURE_WRAP_T or gl.CLAMP_TO_EDGE

11 Dealing with Mismatched Scales Magnification is when each texel is larger than each pixel. Minification is when each texel is smaller than each pixel. In these cases, you can choose to use the nearest texel, or you can choose to use a weighted average of neighboring texels (linear filtering). gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); glTexParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); Or GL_NEAREST

12 The vertex shader attribute vec4 vPosition; attribute vec4 vColor; attribute vec2 vTexCoord;// Input texture coordinates varying vec4 fColor; varying vec2 fTexCoord; // output to fragment shader void main() { // Code for transformations, if any fColor = vColor; fTexCoord = vTexCoord; gl_Position = vPosition; }

13 The fragment shader precision mediump float; varying vec4 fColor; varying vec2 fTexCoord; uniform sampler2D texture; //Mechanism to sample texture void main() { //Blend texture and color gl_FragColor = fColor * texture2D( texture, fTexCoord ); //If want texture alone, use //gl_FragColor = texture2D(texture, fTexCoord); }

14 Working with multiple textures //Load in the image files into separate variables (or an array) var image = [ ]; image[0] = new Image(); image[0].onload = function() { configureTexture( image[0], 0 ); } image[0].src = "flowers.jpg"; image[1] = new Image(); image[1].onload = function() { configureTexture( image[1], 1 ); } image[1].src = "earth.jpg";

15 Configuring Multiple Textures To work with multiple textures, we create multiple texture objects, one for each texture. Each is identified by an integer value. To work with a given texture, we bind it (using the identifier). function configureTexture( image, id ) { texture[id] = gl.createTexture(); gl.bindTexture( gl.TEXTURE_2D, texture[id] ); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image ); gl.uniform1i(gl.getUniformLocation(program, "texture"), 0); }

16 Specifying Textures in Render( ) // We use binding to specify which texture to use during the display. gl.bindTexture( gl.TEXTURE_2D, texture[0] ); gl.drawArrays( gl.TRIANGLES, 0, numVertices/2 ); gl.bindTexture( gl.TEXTURE_2D, texture[1] ); gl.drawArrays( gl.TRIANGLES, numVertices/2, numVertices/2 ); //etc.

17 Using Mipmaps WebGL can automatically generate mipmaps from a texel array. (e.g. 1x1, 2x2, 4x4, 8x8, 16x16, 32x32, and 64x64 textures): gl.generateMipMaps(gl.TEXTURE_2D);

18 Filtering with Mipmaps Specify type of filtering with: gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_NEAREST); OR: gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); OR: gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, tl.NEAREST_MIPMAP_LINEAR); OR: gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);