# Texturing Basics

Texturing means putting an image on a surface. For example, let s say that you had a game in which a sphere was moving around the screen, attacking other targets. You could assign a blue color to the sphere, but that would be on the boring side. What if you took some pictures of a cockroach colony and scanned them into your computer (or easier still, used a digital camera)? You could then apply that image to the sphere for a much more interesting effect.

Images can be generated by photography, as just mentioned, or through the use of one of the many available drawing packages, such as Adobe Photoshop , Jasc Paint Shop Pro , or even Microsoft Paint . Jamagic also comes with a drawing/painting tool called the Jamagic picture editor. We will be generating an image using the Jamagic picture editor very soon.

We will now look at some texturing basics.

### Winding Order and Culling

Let s say that you wanted to have a triangle on your screen, with the vertices (plural of vertex, meaning the corners) as shown in Figure 2.6.

Figure 2.6: Triangle in 3D world.

You can see that you could specify the location and size of a three-dimensional triangle by listing the x, y, and z coordinates of its vertices.

So, by listing a (“3000, 0, 0), b (3000, 0, 0), and c (0, 1000, 0), we have totally described our triangle in our 3D world or have we? One thing we have not yet specified is which is the front face of the triangle, and which is the rear? In other words, is the front the face we are now looking at, or do we have to look from the other side of the paper to see the front?

We can specify the front face by the winding order , or the sequence in which we list the vertices. For example, by listing the vertices of the tri-angle as a, b, c we indicate that the front face is the side that is visible to us. Listing the vertices as a, c, b (or c, b, a or b, a, c) indicates that the front face is the one visible from the back side of the paper.

There s an easy way to remember this: just think of a screw. If a screw were to turn in the same direction as the winding order of the triangle, then the direction that the screw moves (in or out) is towards the front face.

Hmm .Better think about that one! Let s give an example: if we specify the winding order of the triangle in Figure 2.6 as c, b, a, a screw turning in that direction (clockwise) would screw away from you. That means that the back face of the triangle is facing toward you. If the winding order were specified as a, b, c (counter-clockwise) instead, then a screw turning in the same direction would move toward you, which would mean that the front face is facing you. Think about it a bit before going on!

The next question is: why should we care which is the front and which is the back? There are two reasons: one that s easy to understand, and one that s more difficult:

Easy explanation ”When we apply a texture, we have to tell the computer which side of the triangle to put it on, so we need some way to specify which is the front and which is the back.

Tougher explanation ”Remember that computers need to be specifically told everything. They must be told what to draw and how to draw it. As an example, say you are looking at a 3D cube head on so that you would see the image seen in Figure 2.7.

Figure 2.7: 3D cube seen from the front.

Because the cube is a 3D object, there are faces that are not visible to you; for example, the back face is hidden from your view, blocked by the front face. The computer needs to know that it should not draw the back face here, so by looking at the winding order of the back face and by determining that the back face is facing toward the back of this paper, the computer would then know that there is no need to draw that face. This process of hiding surfaces that are not facing frontward is known as culling . Culling can be turned on or off, but the default setting in Jamagic is for culling to be activated, that is, back faces will not be drawn unless you tell Jamagic to draw them. Therefore, you must specify what the front face is of a 3D surface, since its back face will not be drawn.

### U, V Coordinates

When you apply a texture to a surface, you have to tell the computer how to orient the texture. In other words, does the texture go on upside down or right-side up? It is even possible that the texture could be applied at an angle on the surface.

Through the use of u, v coordinates, we can specify which part of the texture goes on which part of the surface. Let s keep clear which is which: the texture is the picture you want to put on the surface.

To demonstrate this, let s say that you were to specify a triangle by specifying the same three points that were specified earlier: a (“3000, 0, 0), b (3000, 0, 0), and c (0, 1000, 0). This triangle is again shown in Figure 2.8.

Figure 2.8: Triangle in 3D world.

Now let s look at the texture we want to apply to the triangle. It s a picture drawn with the Jamagic picture editor ”just a square with some colors ”with some numbers called u, v coordinates marked on it (see Figure 2.9).

Figure 2.9: The image we wish to apply to triangle, with u,v coordinates marked.

We can give u, v coordinates (the same as x, y, just a different name ) to each corner of the texture: the lower corner is (0, 0), the upper-left corner is (0, 1), the upper-right corner is (1, 1), and the lower-right corner is (1, 0).

The following commands in Jamagic assign each corner of the triangle to one of the u, v coordinates. Don t worry too much about it now ”we will give a full explanation very soon. Just understand the following principle:

` a(3000,0,0,0,0) `

In this statement, The first three numbers are the x, y, and z coordinates of point a, and the last two numbers specify that point a on the triangle goes with point (0, 0) on the picture. Try point b next.

` b(3000,0,0,0,1) `

This is very similar to the previous point. The last two numbers specify that point b goes with the u, v point (0, 1) on the picture, while the first three points are the x, y, and z coordinates of the point.

The next one will be easy for you:

` c(0,1000,0,1,0) `

The last two numbers specify that point c goes with the u, v coordinate (1, 0).

Figure 2.10 shows the resulting image mapped onto our triangle as specified by this code.

Figure 2.10: Triangle with image mapped using u,v coordinates.

Elementary Game Programming & Simulations Using Jamagic (Charles River Media Game Development)
ISBN: 1584502614
EAN: 2147483647
Year: 2002
Pages: 105
Authors: Sergio Perez