Game Development Reference
In-Depth Information
Understanding 2D textures and texture
mapping
A 2D texture is a two-dimensional array of image data, a regular JPG or PNG image.
The individual data elements of a texture are called texels. In 3D graphics, we use
the term texels instead of image pixels. Texels are represented in different formats
such as gl.RGB , gl.RGBA , gl.LUMINANCE , or gl.ALPHA along with their data types.
Rendering with 2D textures requires a texture coordinate, which is an index into the
image. Texture coordinates for 2D textures are given by a set of 2D coordinates,
(s, t). The values for s and t range from 0.0 to 1.0. We can define values for (s, t)
outside the range 0.0 to 1.0, but then the texture's behavior will be defined by the
wrapping mode. We will cover the wrapping mode later in the chapter. The 2D
coordinates, s and t , of a texture are shown in the following figure:
(0.0, 1.0)
(1.0, 1.0)
+t
Texture
(0.0, 0.0)
(1.0, 0.0)
+s
So, in a nutshell, each texel is indexed using a 2D index, called a texture coordinate,
and each vertex of the mesh has a texture coordinate associated with it. The texture
coordinates for each vertex in a polygon define what part of the image appears on
that polygon.
So, let's keep to the philosophy of the topic by learning the basics through code. The
following code focuses on our new initBuffers function from Chapter 1 , Getting
Started with WebGL Game Development , in which we color our square with a texture.
We earlier learned that we define a Vertex Buffer Object to store the vertex data in
the GPU memory. The vertex data we used earlier consisted of vertex coordinates,
colors per vertex, and normals per vertex. Here, we will create a new buffer for
texture coordinates per vertex:
function initBuffers() {
...
vertices = [
1.0, 1.0, 0.0, //V0
-1.0, 1.0, 0.0, //V1
1.0, -1.0, 0.0, //V2
 
Search WWH ::




Custom Search