Understanding Texture Mapping in OpenGL ES: Concepts, Coordinates, Wrapping, Filtering, and Units

Review of Previous Article

The previous tutorial on OpenGL ES buffer object optimization introduced basic buffering, and now we move on to a more visual topic: texture mapping , which allows us to apply rich images to rendered geometry.

Texture Objects

A texture in OpenGL is essentially an object that stores one or more images with the same format. It can be used as a source for shader texture accesses or as a render target.

A texture is an OpenGL Object that contains one or more images that all have the same image format. A texture can be used in two ways: as the source of a texture access from a Shader , or as a render target.

In plain terms, a texture is a container for one or multiple images (1D, 2D, or 3D) that share the same format.

Key texture properties include type, size, and image format. Common texture types are:

GL_TEXTURE_1D – one‑dimensional images (width only).

GL_TEXTURE_2D – two‑dimensional images (width and height).

GL_TEXTURE_3D – three‑dimensional images (width, height, depth).

GL_TEXTURE_RECTANGLE – a single 2D image without mipmapping; coordinates are not normalized.

GL_TEXTURE_BUFFER – a 1D image whose storage comes from a buffer object.

GL_TEXTURE_CUBE_MAP – six square 2D images forming the faces of a cube.

In this article we focus on GL_TEXTURE_2D , the most familiar 2‑D texture (a plain image).

Texture Mapping

Texture mapping (often called "贴图" or "mapping") is the process of copying color data from a texture’s texels onto the fragments of a rendered primitive.

During rasterization, primitives are broken into fragments. For each fragment we locate the corresponding texel in the texture and copy its color.

Texel (Texture Pixel)

A texel (or "纹素") is the smallest addressable element of a texture, analogous to a pixel but not necessarily one‑to‑one with screen pixels.

For example, an image of size 640 × 1138 contains 640 texels horizontally and 1138 texels vertically.

Texture Coordinates

We define a virtual coordinate system on the primitive (origin at the lower‑left). A fragment at (x, y) yields normalized percentages (m, n) of the width and height, which are then used to locate the texel at (640 × m, 1138 × n) in the texture.

Texture coordinates range from (0,0) at the lower‑left corner of the texture image to (1,1) at the upper‑right corner.

Texture Wrapping

When texture coordinates exceed the [0,1] range, OpenGL can apply one of four wrapping modes: repeat, mirrored repeat, clamp to edge, or border color.

Texture Filtering

Filtering determines how a fragment samples a texel when the texel size does not match the fragment size.

OpenGL provides two primary filtering methods:

Nearest Neighbor Filtering – selects the nearest texel’s color (default).

(Bi)linear Filtering – interpolates between the four nearest texels to produce a smoother result.

Nearest filtering can cause noticeable aliasing (jagged edges) when a large fragment maps to a single texel, while bilinear filtering smooths the result but may introduce blur. A common rule of thumb is to use bilinear filtering when the primitive is larger than the texture and nearest filtering when it is smaller.

Texture Units

OpenGL allows multiple textures to be bound simultaneously using texture units (often called "layers"). A shader can sample from several textures by activating different units.

The specification guarantees at least 80 combined texture image units, accessible via the constant GL_MAX_COMBINED_TEXTURE_IMAGE_UNITS .

Summary

This article covered the definition of textures, the theory behind texture mapping, texture coordinates, wrapping modes, filtering techniques, and the concept of texture units. Readers should now understand how textures are sampled and applied to geometry in OpenGL ES.

Code Repository

(Project code will be continuously updated) https://github.com/yishuinanfeng/opengl-es-study-demo

References

Texture – OpenGL Wiki and related Khronos documentation.

If you found this article helpful, please like and follow – it fuels my motivation to create more content.