Mipmapping

Mipmapping is a technique that improves performance and reduces aliasing artifacts by using images of different sizes for a texture. These images normally show the same graphic, but their sizes are different. When a texture displayed is small or faraway, a small image is used. When a texture displayed is large or near, a large image is used.

To perform mipmapping:

Step 1: Generate all the mipmaps.
After the level-0 base image has been specified with texImage2D(), you can automatically generate all mipmaps by calling generateMipmap(). This generates all mipmaps (with the same graphic as the base image), down to size 1*1. Note that the base image must have power-of-two dimensions.

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image256);
gl.generateMipmap(gl.TEXTURE_2D);

Alternatively, you can manually generate the mipmaps by calling texImage2D() repeatedly. In each successive call, 'level' should be increased by one, and 'image' should have the dimensions halved. All reduction mipmaps must be generated, which means the mipmap with the highest level should have a dimension of 1*1.

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image256); gl.texImage2D(gl.TEXTURE_2D, 1, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image128); gl.texImage2D(gl.TEXTURE_2D, 2, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image64); gl.texImage2D(gl.TEXTURE_2D, 3, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image32); gl.texImage2D(gl.TEXTURE_2D, 4, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image16); gl.texImage2D(gl.TEXTURE_2D, 5, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image8); gl.texImage2D(gl.TEXTURE_2D, 6, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image4); gl.texImage2D(gl.TEXTURE_2D, 7, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image2); gl.texImage2D(gl.TEXTURE_2D, 8, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image1);

Step 2: Specify the mipmapping parameter.
This is done by calling texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param), where 'param' can be 'NEAREST_MIPMAP_NEAREST', 'NEAREST_MIPMAP_LINEAR', 'LINEAR_MIPMAP_NEAREST', and 'LINEAR_MIPMAP_LINEAR'. The word 'NEAREST' after 'MIPMAP' means that the mipmap with a size nearest the display size will be used. If 'LINEAR' is specified after 'MIPMAP', a weighted average from the two closest mipmaps will be used. You may omit this step if the default 'NEAREST_MIPMAP_LINEAR' is used.

hint(gl.GENERATE_MIPMAP_HINT, mode) specifies implementation-specific hints. 'mode' can be FASTEST, NICEST, DON'T_CARE.