Graphics and Game Engine Components

No matter which graphics or games development engine you examine, they are built using a very similar architecture, the reason being that they all have to work with the same graphics devices, central processing units (CPUs), and graphics processing units (GPUs) to produce stunning visuals with exceptional frame rates. If you consider the nature of graphical elements that are drawn on a screen, they are also constructed from numerous layers depending on their functionality, dimensions in pixels, coloring, animation, lighting, physics, and user interaction.

In this chapter, we will begin exploring some typical application architectures as we begin to build our own. To enable the drawing of three-dimensional (3D) objects in Python we will use the PyOpenGL package that implements OpenGL (a 3D graphics library). You will learn how each of the graphics components works together to create a scalable and flexible graphics engine.

Herein, we will cover...

Technical requirements

In this chapter, we will be using Python, PyCharm, and Pygame, as used in previous chapters.

Before you begin coding, create a new folder in the PyCharm project for the contents of this chapter, called Chapter_4.

You will also need PyOpenGL, the installation of which will be covered during the first exercise.

The solution files containing the code can be found on GitHub at https://github.com/PacktPublishing/Mathematics-for-Game-Programming-and-Computer-Graphics/tree/main/Chapter04.

Exploring the OpenGL Graphics Pipeline

In software, an engine is an application that takes all the hard work out of creating an application by providing an application programming interface (API) specific to the task. Unity3D, for example, is a game engine. It’s a tool for creating games and empowers the programmer by removing the need to write low-level code.

An engine consists of several modules dedicated to tasks, as shown in Figure 4.1:

Figure 4.1: Typical components of a game engine

A mainstream graphics application needs to possess all the fundamental abilities to display and move graphics elements (such as the ones we examined in Chapter 2, Let’s Start Drawing) in either 2D or 3D, with most 3D engines able to display 2D simply by removing the z axis. These elements work together to take a 2D or 3D model through the graphics pipeline where it is transformed from a set of vertices into an image that appears on the screen. The graphics...

Drawing Models with Meshes

A model is an object drawn by the graphics engine. It contains a list of vertices that define its structure in terms of polygons. The collection of these connected polygons is known as a mesh. Each polygon inhabits a plane—this means that it is flat. A basic model with elementary shading appears faceted, such as that shown in Figure 4.4. This flat nature is hidden using differing materials, as we will discuss shortly:

Figure 4.4: A basic polygon mesh showing the flatness of each polygon

A polygon mesh is stored internally as a list of vertices and triangles. Triangles are chosen to represent each polygon over that of a square, as triangles require less storage and are faster to manipulate as they have one less vertex.

A typical data structure to hold a mesh is illustrated in the following diagram:

Figure 4.5: A vertex and triangle array used to define the triangles of a square

The example given stores...

Viewing the Scene with Cameras

The camera is responsible for taking the coordinates of objects (specifically, all their vertices and other properties) and transforming them in the modelview of Figure 4.2. If you consider the vertices of the square mesh we looked at in the previous section, its coordinates are not going to retain those values as it will be moved around in the graphics/game world. The modelview takes the world location of the mesh and the location of the camera, as well as some additional properties, and determines the new coordinates of the mesh so that it can be rendered correctly. Note that I am being purposefully abstract in describing this process right now as there’s a lot of mathematics involved, and I don’t want to complicate the discussion at this point!

The camera is a virtual object through which the world is visualized. It is the eye of the viewer and can be moved around the environment to provide different points of view. As illustrated...

Projecting Pixels onto the Screen

As previously discussed, the function of a projection is to map coordinates in the eye space into a rectangular prism with the corner coordinates of (-1, -1, -1) and (1, 1, 1), as shown in Figure 4.10. This volume is called normalized device coordinates (NDCs). This cube is used to define coordinates in a screen-independent display coordinate system and defines the view volume as normalized points. This information can then be used to produce pixels on the screen with the z coordinates being used during the drawing to determine which pixels should appear in front of others. First, though, you need to define the confines of the camera’s view volume so that a mapping can be produced:

Figure 4.10: The process of projection

Since the object is projected onto the near plane of the camera, we can use the corner coordinates of that plane to determine the mapping. The coordinates of the left top corner are indicated by (left...

Understanding 3D Coordinate Systems in OpenGL

There are two alignments in which 3D coordinates can be defined: the left-handed system and the right-handed system. Each is used to define the direction in which rotations around the axes occur and can be visualized using the thumb and first two fingers on the respective hands (see Figure 4.11). For both systems, the thumb is used to represent the z axis; the direction in which the fingers wrap into a fist is the direction of a positive rotation:

Figure 4.11: The right-hand and left-hand rules of 3D axis orientation

For a detailed elucidation, you are encouraged to read the following web page:

https://en.wikipedia.org/wiki/Right-hand_rule

In OpenGL, eye coordinates are defined using the right-handed system, meaning that the positive z axis protrudes out of the screen (toward the eye) whereas traditionally in DirectX, the z axis is positive in the opposite direction. Other 3D software packages seem to have...

Summary

In this chapter, we’ve taken a bit of time to focus on how rendering is performed and examined the rendering pipeline and camera setups. A thorough understanding of how these affect the positions and projections of objects in the environment is critical to your understanding of the structure of a 3D environment and the relative locations of drawn artifacts. In addition, considerable time has been spent on elucidating the calculations involved in taking a world vertex position and projecting it onto the screen. The process is not as straightforward as it might first seem, but with a knowledge of basic trigonometry and mathematics, the formulae have been derived.

One common issue that I find when developing these types of applications is just knowing how to debug the code when it seems to be running without syntax errors but nothing appears on the screen. Most often, the issue is that the camera cannot see the object. Therefore, if you can visualize in your mind where...

Answers

Exercise A:

This is one set of vertices and triangles to draw a cube placed in a new class (note that you might have them in a different order from what is shown here):

from Mesh3D import *
class Cube(Mesh3D):
def __init__(self):
            self.vertices = [(0.5, -0.5, 0.5),
(-0.5, -0.5, 0.5), (0.5, 0.5, 0.5),
(-0.5, 0.5, 0.5),(0.5, 0.5, -0.5),
(-0.5, 0.5, -0.5), (0.5, -0.5, -0.5), (-0.5, -0.5, -0.5),
(0.5, 0.5, 0.5), (-0.5, 0.5, 0.5), (0.5, 0.5, -0.5),
(-0.5, 0.5, -0.5), (0.5, -0.5, -0.5), (0.5, -0.5, 0.5),
(-0.5, -0.5, 0.5), (-0.5, -0.5, -0.5), (-0.5, -0.5, 0.5),
(-0.5, 0.5, 0.5), (-0.5, 0.5, -0.5), (-0.5, -0.5, -0.5),
(0.5, -0.5, -0.5), (0.5, 0.5, -0.5), (0.5, 0.5, 0.5),
(0.5, -0.5, 0.5)
]
          self.triangles = [0, 2, 3, 0, 3, 1, 8, 4, 5, 8,
  5, 9, 10, 6,
  7, 10,
  7, 11, 12, 13, 14,
  12, 14, 15, 16, 17, 18,...