Until this point, we have limited our coding to two dimensions. Now, it is time to expand to the third dimension. In many ways, this will not be as intimidating as it sounds. After all, instead of specifying a position using two coordinates (x and y), we will now simply add a third coordinate (z). However, there are some areas where the third dimension will add considerable complexity, and it is my job to help you master that complexity. In this chapter, we will start with the basic understanding of placing an object in a 3D world, including:
- 3D coordinate systems: You already mastered the Cartesian coordinate system (x and y coordinates). We will discuss how to expand this into a third axis.
- 3D cameras: The camera in a 2D game is pretty much fixed while the objects move past it. In 3D game programming, we often move the camera forward, backward, side-to-side, or even in circles around the objects in the game.
- 3D views: How exactly does a 2D computer screen represent 3D games? You will learn the basics of how 3D gets transformed by the graphics pipeline.
- 3D transformations: Moving around in 3D space is quite a bit more complicated than moving in 2D space. In fact, we use a whole new form of mathematics to do so. You will learn the basics of matrices, and how they can be used to move, rotate, and change the size of 3D objects.
You already live in a world with three dimensions. You can walk forward and backward, side to side, and jump up or duck. The reality of three dimensions becomes even more apparent if you are flying or even swimming.
Most 2D games operate by allowing the player to move left and right, or jump up or down. This is what we did when we created RoboRacer2D. In this type of 2D game, the missing dimension is depth. Our Robot could not move further away from us or closer to us. Considering that we were drawing him on a flat screen, it shouldn't be too surprising that he was limited to two dimensions.
Of course, artists found a way around this limitation hundreds of years ago by observing that as an object gets farther away from us, it gets smaller, and as it gets closer to us it gets larger. So, a simple way to represent 3D in a 2D world is to simply draw the more distant objects as smaller objects. 2D games learned this trick early on and used it to simulate 3D:
In the preceding image, the larger tank appears to be closer than the smaller tank.
Another important aspect of depth is perspective. Artists learned that parallel lines appear to converge toward the center as they move farther away. The point where they seem to converge is known as the vanishing point:
In the preceding image, the walls and floor panels are all parallel, but they appear to converge inward toward the center of the image.
A third aspect of 3D motion is that objects that are farther away appear to travel more slowly than objects that are closer. Thus, when you are driving, the telephone poles pass you by much faster than the distant mountains. Some 2D games take advantage of this phenomenon, called parallax, by creating a background layer in the game that moves much slower than the foreground. In fact, this is exactly what we did in RoboRacer2D because the Robot in the foreground moves more quickly than the objects in the background.
2D games have used all of these features—size, perspective, and parallax—to simulate 3D long before we ever had hardware and graphics cards to do them for us. One of the first games to do this in a convincing way was Pole Position. The game that really blew everyone away was Doom, which was probably the first game that allowed the player to freely move in a 3D world.
Modern 3D games take the idea of simulating 3D to the next level. In the simulating 3D section that we just discussed, it is the programmers' task to scale the image so that it appears smaller as it gets further away, take care of perspective, and handle parallax. This is now handled by the 3D graphics card.
The preceding image shows a 3D model of a tank. These models are created using special software, such as Maya or 3ds Max. This model is fundamentally different than the 2D tank image we showed you previously because it represents the tank in three dimensions.
We will discuss 3D modeling in more detail in a future chapter. For now, the important concept is that the data for a 3D tank is sent to the graphics card, and the graphics card takes care of size, perspective, and parallax as the tank is positioned in a 3D space. This takes a lot of the load off the programmer!
Now that you have a fundamental idea of how the illusion of 3D is created on a 2D screen, let's learn how adding another dimension affects our coordinate system.
In Chapter 2, Your Point of View I introduced you to the 2D coordinate system that is used by many game systems.
The preceding diagram shows a car placed at coordinate position (5, 5). Let's add the third dimension and see how it compares:
Notice that we added a third axis and labeled it as the Z-axis. Positive values on the Z-axis are closer to us, while negative values on the Z-axis are farther away. The car is now placed at coordinate (5, 5, -5) in 3D space. As the car is farther away, it also appears smaller than it did in the previous 2D image (you can think of 2D space as a space where all of the z coordinates are 0).
The preceding diagram shows the Z-axis at an angle, but it is important to understand that the Z-axis is actually perpendicular to the plane of the computer screen.
Think of the Z-axis as a line the pierces through the center of the monitor from the front and travels out the back!
Tip
There are actually many ways to represent the axes in a 3D world. One distinction between OpenGL and DirectX is the Z-axis. In OpenGL, positive z values are closer to the player. In DirectX, Microsoft's 3D rendering engine, negative z values are closer to the player. It's just a good thing to know because you will very likely work with both systems. OpenGL is known as a right-hand coordinate system, while DirectX is a left-hand coordinate system. It's a little hard to explain how they got these names, so perform an Internet search if you would like to learn more!