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

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

3 Objectives Introduce WebGL texture mapping ­two-dimensional texture maps ­assigning texture coordinates (manually) ­forming texture images Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

4 Basic Stragegy Three steps to applying a texture 1.specify the texture read or generate image assign to texture enable texturing 2.assign texture coordinates to vertices Proper mapping function is left to application 3.specify texture parameters wrapping, filtering Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

5 Texture Mapping s t x y z image geometry display Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

6 Texture Example The texture (below) is a 256 x 256 image that has been mapped to a rectangular polygon which is viewed in perspective Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

7 Texture Mapping and the WebGL Pipeline geometry pipeline vertices texel pipeline image fragment processor Images and geometry flow through separate pipelines that join during fragment processing ­“complex” textures do not affect geometric complexity Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

8 Define a texture image from an array of texels (texture elements) in CPU memory Use an image in a standard format such as JPEG ­Scanned image ­Generate by application code WebGL supports only 2 dimensional texture maps ­no need to enable as in desktop OpenGL ­desktop OpenGL supports 1-4 dimensional texture maps Specifying a Texture Image Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

9 Define Image as a Texture (general definition) gl.texImage2D( target, level, components, w, h, border, format, type, texels ); target: type of texture, e.g. GL_TEXTURE_2D level: used for mipmapping (discussed later) – usually set to 0 components: elements per texel w, h: width and height of texels in pixels border: used for smoothing (discussed later) – 0 or 1 format and type: describe texels texels: texel array Ex.: gl.texImage2D(GL_TEXTURE_2D, 0, 3, 512, 512, 0, GL_RGB, GL_UNSIGNED_BYTE, my_texels); Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 The image size is not included in the array

10 Define Image as a Texture (usual definition) gl.texImage2D(target, level, internalformat, format, type, imagedata); target: type of texture, e.g. GL_TEXTURE_2D level: used for mipmapping (discussed later) – usually set to 0 internal format: data format of the texture format: data format of the image type: describe texels imagedata: formated image Ex.: gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image); Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 The image size is included in the data structure

A Checkerboard Image (texel array) 11 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

Loading an image (gif, jpg or png images) 12 // specify image in JS file var image = new Image(); image.onload = function() { configureTexture( image ); } image.src = "SA2011_black.gif” // or specify image in HTML file with tag // like // and use the following var image = document.getElementById("texImage”) window.onload = configureTexture( image ); Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 The loading process is initiated by this statement. (a thread is launched…) This function is executed after the image has been loaded.

Important notes about texture images 13 1) Image dimensions (horizontally and vertically) must be a power of 2 (Ex.: 64, 128, 256, 512, …). You may need to change texture image dimensions using softwares such as “Microsoft Paint”. 2) For security reasons, images can only be loaded if they are located on the same server (domain) as the javascript code. Therefore, you need to install a local Web server to visualize an object using texture images (recent updates of popular Web browsers do not allow to load texture images when double-clicking an html file on your computer). Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

14 Based on parametric texture coordinates Specify as a 2D vertex attribute s t 1, 1 0, 1 0, 01, 0 (s, t) = (0.2, 0.8) (0.4, 0.2) (0.8, 0.4) A BC a b c Texture SpaceObject Space Now, how do we map a Texture Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

15 Cube Example 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

16 Interpolation WebGL uses interpolation to find proper texels from specified texture coordinates (There can be distortions) good selection of tex coordinates poor selection of tex coordinates texture stretched over trapezoid showing effects of bilinear interpolation Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015