1. 1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science Laboratory University of New Mexico Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

2. WebGL Texture Mapping II Ed Angel Professor Emeritus of Computer Science University of New Mexico 2 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

3. 3 Objectives Introduce the WebGL texture functions and options ­texture objects ­texture parameters ­example code Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

4. 4 Using Texture Objects 1.specify textures in texture objects 2.set texture filter 3.set texture function 4.set texture wrap mode 5.set optional perspective correction hint 6.bind texture object 7.enable texturing 8.supply texture coordinates for vertex ­coordinates can also be generated Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

5. 5 Texture Parameters WebGL has a variety of parameters that determine how texture is applied ­Wrapping parameters 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 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

6. 6 Wrapping Mode Clamping: if s,t > 1 use 1, if s,t <0 use 0 Wrapping: use s,t modulo 1 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP); gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); texture s t gl.CLAMP wrapping gl.REPEAT wrapping Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

7. 7 Magnification and Minification TexturePolygon MagnificationMinification PolygonTexture 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 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

8. 8 Filter Modes Modes determined by gl.texParameteri( target, type, mode ) Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 gl.texParameteri(gl.TEXTURE_2D, gl.TEXURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXURE_MAG_FILTER, gl.NEAREST);

9. 9 Mipmapped Textures Mipmapping allows for prefiltered texture maps of decreasing resolutions ­http://upload.wikimedia.org/wikipedia/commons/5/5c/MipMap_Example_ST S101.jpghttp://upload.wikimedia.org/wikipedia/commons/5/5c/MipMap_Example_ST S101.jpg Lessens interpolation errors for smaller textured objects Declare mipmap level during texture definition gl.texImage2D(gl.TEXTURE_*D, level, … ) gl.generateMipmap( gl.TEXTURE_2D ); Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 Note: Only level « 0 » is available with WebGL

10. 10 Example point sampling mipmapped point sampling mipmapped linear filtering linear filtering Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

11. 11 Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009 Example Example (Samuel Painchaud – 2005) See USB key : No-mip-flashing-walls.avi (original program) Mip-flashing-walls.avi (program corrected with mipmapping) Mip-no-flashing-walls (program corrected using adequate box width)

12. 12 Applying Textures Texture can be applied in many ways ­texture fully determines color ­modulated with a computed color ­blended with and environmental color Fixed function pipeline has a function glTexEnv to set mode ­deprecated ­can get all desired functionality via fragment shader Can also use multiple texture units Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

13. 13 Applying Textures Multiple texture units : gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texID3); gl.uniform1i(textureLoc, 0); … …(graphic code) … gl.activeTexture(gl.TEXTURE3); gl.bindTexture(gl.TEXTURE_CUBE_MAP, texIDmap2); gl.uniform1i(textureLoc, 3); … …(graphic code) … gl.uniform1i(textureLoc, 0); … …(graphic code) … Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 Use texture associated to texID3 Use texture associated to texIDmap2 Use texture associated to texID3 !!!!!!!!!!

14. 14 Other Texture Features Environment Maps (seen in next presentation) ­Start with image of environment through a wide angle lens Can be either a real scanned image or an image created in OpenGL ­Use this texture to generate a spherical map ­Alternative is to use a cube map Multitexturing ­Apply a sequence of textures through cascaded texture units Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

15. Applying textures: (practical example using the default texture unit 0: textureSquare.html + textureSquare.js)default texture unit 0 textureSquare.htmltextureSquare.js Textures are applied during fragments shading by a sampler Samplers return a texture color from a texture object 15 varying vec4 fcolor; //color from rasterizer varying vec2 ftexCoord; //texture coordinate from rasterizer uniform sampler2D texture; //texture object from application void main() { gl_FragColor = fcolor * texture2D( texture, texCoord ); } Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 The texture is modulated by the color

16. Vertex Shader ( textureSquare.html + textureSquare.js) textureSquare.htmltextureSquare.js Usually, vertex shader will output texture coordinates to be rasterized (interpolated) Must do all other standard tasks too !!! ­Compute vertex position ­Compute vertex color if needed (Phong model…) 16 attribute vec4 vPosition; //vertex position in object coordinates attribute vec4 vColor; //vertex color from application attribute vec2 vTexCoord; //texture coordinate from application varying vec4 fcolor; //output color to be interpolated varying vec2 ftexCoord; //output tex coordinate to be interpolated Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

17. A Checkerboard Image ( textureSquare.html + textureSquare.js) textureSquare.htmltextureSquare.js 17 var image1 = new Uint8Array(4*texSize*texSize); for ( var i = 0; i < texSize; i++ ) { for ( var j = 0; j <texSize; j++ ) { var patchx = Math.floor(i/(texSize/numChecks)); var patchy = Math.floor(j/(texSize/numChecks)); if(patchx%2 ^ patchy%2) c = 255; else c = 0; //c = 255*(((i & 0x8) == 0) ^ ((j & 0x8) == 0)) image1[4*i*texSize+4*j] = c; image1[4*i*texSize+4*j+1] = c; image1[4*i*texSize+4*j+2] = c; image1[4*i*texSize+4*j+3] = 255; } Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

18. 18 A textured square ( textureSquare.html + textureSquare.js) textureSquare.htmltextureSquare.js var texCoord = [ vec2(0, 0), vec2(0, 1), vec2(1, 1), vec2(1, 0) ]; 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]); // etc Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

19. Texture Object ( textureSquare.html + textureSquare.js) textureSquare.htmltextureSquare.js 19 function configureTexture( image ) { var 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.RGB, gl.RGB, 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 ); gl.uniform1i(gl.getUniformLocation(program, "texture"), 0); } Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 Needed because vertical coordinates are inverted on screen.

20. Linking with Shaders ( textureSquare.html + textureSquare.js) textureSquare.htmltextureSquare.js 20 var vTexCoord = gl.getAttribLocation( program, "vTexCoord" ); gl.enableVertexAttribArray( vTexCoord ); gl.vertexAttribPointer( vTexCoord, 2, gl.FLOAT, false, 0, 0); // Set the value of the fragment shader texture sampler variable // ("texture") to the the appropriate texture unit. In this case, // zero for GL_TEXTURE0 which was previously set by calling // gl.activeTexture(). gl.uniform1i( gl.GetUniformLocation(program, "texture"), 0 ); // Important note: if a uniform variable is not assigned, its // default value is 0) Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

21. 21 Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009 Example Try “texture.exe” in Tutor.zip file - Texture coord., vertex coord., texture parameters…

22. 22 Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009 Using images for textures You need to put HTML, javascript and images behind a Web server. Suggested Web servers: XAMPP (http://sourceforge.net/projects/xampp/)http://sourceforge.net/projects/xampp/ Winamp (http://www.wampserver.com/en/)http://www.wampserver.com/en/

23. Other examples using “real” images 23 Try the following examples (=> the files must be accessed through a Web Server… ): textureCube.html + textureCube.jstextureCube.htmltextureCube.js texture-3cubes.html + texture-3cubes.jstexture-3cubes.htmltexture-3cubes.js REFERENCE examples (to adapt for all your future programs!!!) : texture-model1.htmltexture-model1.html + texture-model1.jstexture-model1.js texture-model2.htmltexture-model2.html + texture-model2.jstexture-model2.js (they present various basic models on which you can map textures) For mipmapping, try hatImage1.html + hatImage1.jshatImage1.htmhatImage1.js Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

24. To obtain texture images on the Internet ­http://www.tutorialsforblender3d.com/Textures/Textures_index.htmlhttp://www.tutorialsforblender3d.com/Textures/Textures_index.html ­http://lostandtaken.com/galleryhttp://lostandtaken.com/gallery ­http://www.mayang.com/textures/http://www.mayang.com/textures/ ­http://freestocktextures.com/http://freestocktextures.com/ ­http://www.3dtexture.net/http://www.3dtexture.net/ ­http://freetextures.3dtotal.com/http://freetextures.3dtotal.com/ ­http://www.nasa.gov/multimedia/3d_resources/images.htmlhttp://www.nasa.gov/multimedia/3d_resources/images.html ­… For cubemaps : http://www.humus.name/index.php?page=Textureshttp://www.humus.name/index.php?page=Textures 24 Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009