[Computer Graphics] Texture Mapping

 

 

Texture Mapping

- Applying an image to a 3D shape

- Map from Texture Coordinate to 3D Point

- f: (s, t) → (x, y, z, w) (ex. (0, 0) → (-1, -1, 1, 1)

- s ∈ [0, 1], t ∈ [0, 1]

- Texture Element = Texel

- Some vertex has different texture coordinates → handled by duplicating the vertex

 

Texture Mapping Cube in WebGL

- Just as we have vertex buffers to store the vertex data,

- color buffers to store the final colors,

- and depth buffers to store the depth values of fragments,

- we also have texture buffers to store texture images

// create a text buffer and bind it to the TEXTURE_2D
textureImage = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, textureImage);

// beforer sending to the GPU, flip it in the y direction
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

// send the data to the GPU
// (target, highest mipmap resolution, format of data on GPU, format of data read in, type, name of image)
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, myImage);

 

gl.texParameter(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameter(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

 

Magnification

- NEAREST(point sampling) causes several pixels to take the value of a single point in the texture(texel)

- result can look choppy

Minification

- NEAREST(point sampling) causes each pixel to take the value of a single texel, with several texels left out

- result loses high frequency detail, and can change identity from original texture

 

gl.texParameter(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameter(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

 

Magnification

- texture is interpolated out to the pixels on the screen

Minification

- texture is blurred out before applying to pixels

 

Point Sampling vs Linear Filtering

- filtering at local level may not address drastic distortion further out, so Moire patterns still remain a bit

- fix this using mipmapping

 

Mipmapping

- WebGL uses multiple resized texture images

- ex) original texture image: 128x128 → WebGL creates 64x64, 32x32, 16x16, 8x8, 4x4, 2x2, 1x1

- uses similar mipmap images for parts of the scene further away from the camera

- images are blurred at each mipmap level

 

- NEAREST_MIPMAP_ (NEAREST_MIPMAP_NEAREST, NEAREST_MIPMAP_LINEAR): we can see jump across levels

- LINEAR_MIPMAP_ (LINEAR_MIPMAP_NEAREST, LINEAR_MIPMAP_LINEAR): color values are interpolated across levels

 

Quality & Speed

- Quality:

NEAREST < LINEAR < NEAREST_MIPMAP_NEAREST < NEAREST_MIPMAP_LINEAR < LINEAR_MIPMAP_NEAREST < LINEAR_MIPMAP_LINEAR

- Speed:

NEAREST < LINEAR < NEAREST_MIPMAP_NEAREST < NEAREST_MIPMAP_LINEAR < LINEAR_MIPMAP_NEAREST < LINEAR_MIPMAP_LINEAR

 

// create a text buffer and bind it to the TEXTURE_2D
textureImage = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, textureImage);

// beforer sending to the GPU, flip it in the y direction
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

// send the data to the GPU
// (target, highest mipmap resolution, format of data on GPU, format of data read in, type, name of image)
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, myImage);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);

gl.generateMipmap(gl.TEXTURE_2D);