1

Graphics

CSCI 343, Fall 2015Lecture 25

Texture Mapping

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.

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.

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");

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

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)];

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 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

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 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);

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);