Blitz3D Newbies: Texture Mapping!
by Krylar

Introduction:

While it's very cool to move stuff around and shine lights and all that, you're probably not going to want a bunch of flat-colored objects floating around in your world. What do you do then? You texture map them! Texture maps are what give walls that metallic or stone look, or give staircases a dark wooden appearence. Take these textures away and you would have a bunch of plain-grey (or some other flat color) primitives (squares, spheres, cones, etc.).

What is Texture Mapping?

Texture mapping literally means that you map a particular texture to an object. So, pixel by pixel the object is drawn to with a texture you've created/borrowed. Textures are typically just 2D graphic pieces, such as BMP's or PNG's.

Imagine that you have a particular type of fabric that has some cool design on it. You want to take this fabric and put it on your favorite chair. The problem is that you have a small square of this fabric, but a large chair. So you need to either stretch out this piece of fabric or you need to make enough duplicates of it that you can sew them all together to fully cover the chair.

If you took the first option of stretching the fabric, you'd have a really odd looking chair. If you had the image of a car, let's say, and it was just a small square. When you stretched it to fit over the chair it would be mostly unrecognizable. To counter this, you have a bunch of little cars covering the chair. Now this works well for a chair, but what about walls in a 3D game?

One of the goofiest looking things when running around in a level is seeing repeating patterns/textures. It takes away from the "realism" of the game a bit when you see obvious squares that are linked together and they all look the same. This is not a simple thing to solve, however, and is mostly handled by artist...of which I'm not. There is a tool that I've found, however, that really seems to help me make a texture that I can get to a non-repeating look.

Another option for mapping things is to use a picture. So take a photograph of yourself, for example, and map it to a sphere. Or maybe map one of those flat map pictures of the world around a sphere to make the Earth.

The last method I'm aware of is to use the Blitz3D commands to create the texture in the code. I see no reasonable use for this since I can use tools to see what my textures will look like, so I'm not going to delve into this method. But just be aware that you can do that too.

Texture Making Tool...Wally:

As I was searching for tools to make my life easier, I came across a tool called Wally. Now I don't know why this tool is called Wally...maybe cause it's for making "Walls"? :) Anyway, Wally is simply a little drawing tool that you can use to create textures with.

Now you could always use MS Paint or Photoshop or PSP if you wanted to, but Wally has a neat little feature that none of these currently have. And that feature alone makes Wally perfect for creating textures. It's called "Tile Image" and what it allows you to do is draw the image while seeing it connected to the images exactly like it above and to the side. To show this, the following image shows Wally's standard view:

This next image shows the Tile Image view. You'll notice that there are dots in each cell. Instead of one big image, there are actually 3 rows of the same image. Here's the look:

To give a better idea of this, I spray painted two white lines over the middle image. Notice that all of the images reflect this change:

...and THAT is where the power of this tool comes in! By using this method you can see right on the screen whether or not your pattern is repeating and you can adjust it accordingly. Pretty spiffy, eh?

Everytime I draw a layer, I then go to the Image menu and Blend it. There are many options though that you can play with there, so try a bunch of stuff out!

To get Wally, go to http://www.telefragged.com/wally/.

Assigning Textures to Primitives:

I've created a few textures creatively called "texture1.bmp", "texture2.bmp", and "texture3.bmp", respectively. I honestly didn't get too involved with the creation of these textures, but they'll get the idea across for the example :D.

The following source code will display three spheres that have been textured mapped. They're all rotating in different directions so you can see that they're fully mapped regardless of their orientation. You can also use the keyboard to move around and look at them from different angles and such (the keyboard commands are on the screen in the demo).


Here's a image of what this will look like when using the provided textures:

There are a few things to point out here in regards to the texture commands. First off, let's look at the LoadTexture command. The only thing to really note is the second argument passed. This is a very important value as it determines whether the image will be transparent, reflective, etc. Here is a table of the values that can be used as the argument (I snagged this directly from the command description, by the way):


Each of those can be added together as well. So, let's say that you wanted to have Color and Alpha information, you would add 1+2, getting 3 and calling LoadTexture with 3. Look at the above example and you'll see that I've used 1, 3, and 8. So if you move to the first sphere, you'll notice that you can see "through" it to the next sphere. It's not really transparent though, it's Alpha-blended. Thus it's blending both of the images together. This is how you can make objects underwater, for example, seem discolored and distored when compared to their on-shore counterparts. The water is "blended" with the ground underneath. Hopefully that makes sense!

Play around with the different values to get the idea in full. Also, I've included another file in the Zip called "krylar.jpg" (sorry...shameless plug for my mascot logo ;)). Change the above "texture1.bmp" or any/all of the others to "krylar.jpg" and see what happens.

So, pretending we're creating the Earth, and that we've already got a texture image built, and we want to Mipmap that texture onto a sphere, we'd code the texture loading like this:


Mipmapping will make the image look slightly blurred at a distance so it appears more smooth.

To assign a texture, simply use the EntityTexture command. It couldn't be easier. You've created a Sphere called "Earth" and loaded a texture to a variable called "EarthMap". Now you just do the following:


Finally, make sure you release the memory that's being eaten up by the texture. To do this, just use the FreeTexture command, as follows:


Conclusion

That's it for texture mapping. Hopefully you're getting more used to the Blitz3D world. I know I am!

  • To download the source code and textures used with this tutorial, Click Here.

Until next time...cya!

-Krylar


For a printable copy of this article, please click HERE.


This site is Copyright© 2000-2004, BlitzCoder. All rights reserved.