Game Development Reference
In-Depth Information
Implementing mipmapping
We provide optimized collections of images that accompany a main texture to
increase the rendering speed and reduce aliasing artifacts. These optimized images are
collectively called a mipmap set. If the texture has a basic size of 1024 × 1024 pixels,
then the associated mipmap set may contain a series of nine images, and each takes
up one-fourth of the total area of the previous image: 512 × 512 pixels, 128 × 128, 64 ×
64, 32 × 32, 16 × 16, 8 × 8, 4 × 4, 2 × 2, and 1 × 1. These images are generally computed
by the rendering engine. The renderer will switch to a suitable mipmap image when
the texture is viewed from a distance or is of a small size. Artifacts like blurring,
shimmering, and blocking are minimized considerably when images of different sizes
are used. Also the rendering speed is considerably enhanced as the engine uses smaller
texture sizes for objects at far-off distances.
The function used to automatically generate a mipmap set in the WebGL API is
gl.generateMipmap(gl.TEXTURE_2D)
.
It will generate mipmap for the current texture buffer object. WebGL can generate
the mipmap images automatically, but in this case, we manually upload a series of
images in order to have more control. In the function,
gl.texImage2D
, the second
parameter is
level
. This
level
parameter refers to the level of detail. So, we can
upload multiple images for multiple mipmap levels and assign them to the same
texture buffer object, as shown in the following code snippet:
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
gl.UNSIGNED_BYTE, img);
gl.texImage2D(gl.TEXTURE_2D, 1, gl.RGBA, gl.RGBA,
gl.UNSIGNED_BYTE, img256);
gl.texImage2D(gl.TEXTURE_2D, 2, gl.RGBA, gl.RGBA,
gl.UNSIGNED_BYTE, img128);
gl.texImage2D(gl.TEXTURE_2D, 3, gl.RGBA, gl.RGBA,
gl.UNSIGNED_BYTE, img64);
gl.texImage2D(gl.TEXTURE_2D, 4, gl.RGBA, gl.RGBA,
gl.UNSIGNED_BYTE, img32);
In the preceding code, the current buffer object is
texture
. We upload multiple
mipmap images (
img
, ...,
img32
) for the same buffer object with different
level of
detail
(
LOD
) values.
