1 graphics csci 343, fall 2015 lecture 25 texture mapping
DESCRIPTION
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.TRANSCRIPT
![Page 1: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/1.jpg)
1
Graphics
CSCI 343, Fall 2015Lecture 25
Texture Mapping
![Page 2: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/2.jpg)
2
Texture Mapping in WebGLTexture 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.
![Page 3: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/3.jpg)
3
Specifying a TextureTexture 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
OR 2) Read it in from an image file.
![Page 4: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/4.jpg)
4
Reading from an image file1) 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: <img id = "texImage" src = "myImage.gif" hidden></img>
and access it in the JavaScript file: var image = document.getElementById("texImage");
![Page 5: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/5.jpg)
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);
![Page 6: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/6.jpg)
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);
![Page 7: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/7.jpg)
7
Set up Texture Coordinates
0
1 2
3(0, 0)
(0, 1) (1, 1)
(1, 0)s
t
var texCoord = [ vec2(0, 0), vec2(0, 1), vec2(1, 1), vec2(1, 0)];
![Page 8: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/8.jpg)
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]);}
![Page 9: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/9.jpg)
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 );
![Page 10: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/10.jpg)
10
Specifying Texture ParametersSpecify 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_Tor gl.CLAMP_TO_EDGE
![Page 11: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/11.jpg)
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
![Page 12: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/12.jpg)
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;}
![Page 13: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/13.jpg)
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);}
![Page 14: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/14.jpg)
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";
![Page 15: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/15.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);}
![Page 16: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/16.jpg)
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.
![Page 17: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/17.jpg)
17
Using MipmapsWebGL can automatically generate mipmaps from a texel array.(e.g. 1x1, 2x2, 4x4, 8x8, 16x16, 32x32, and 64x64 textures):
gl.generateMipMaps(gl.TEXTURE_2D);
![Page 18: 1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping](https://reader036.vdocument.in/reader036/viewer/2022082908/5a4d1aeb7f8b9ab05997a90b/html5/thumbnails/18.jpg)
18
Filtering with MipmapsSpecify 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);