The field of computer graphics is constantly advancing, finding new applications and growing in importance. Before diving into programming and code, you'll first need to learn about the core concepts and vocabulary in computer graphics.
CORE CONCEPTS AND VOCABULARY
Each shader language implements an application programming interface (API), which defines a set of commands, functions, and protocols that can be used to communicate with an external system—in this case, the GPU. The steps involved in this delivery process are described in detail in the sections that follow.
THE GRAPHICS PIPELINE
The primary purpose of the vertex shader is to determine the final position of. The effect of the placement of the virtual camera on the rendered image is illustrated in Figure 1.10.
SETTING UP A DEVELOPMENT ENVIRONMENT
If you see a message containing the text No module named 'numpy', then Numpy is not installed correctly. To install the application, visit the Sublime Text website (https://www. sublimetext.com/), shown in Figure 1.20, and click Download.
SUMMARY AND NEXT STEPS
In this chapter, you'll learn how to create windows with Pygame and how to draw graphics in those windows with OpenGL. Ten, you will draw multiple shapes with multiple colors, create a variety of animations involving motion and color transitions, and implement interactive applications with keyboard-controlled motion.
CREATING WINDOWS WITH PYGAME
Additional options (such as allowing a resizable window) are described at https://www.pygame.org/docs/ref/display.html. The pygame.display.set _ function sets the properties of the window and also makes the window appear on the screen.
DRAWING A POINT
Returns information about the compilation process (such as errors and warnings) from the shader referenced by the shaderRef parameter. Returns information about the chaining process (such as errors and warnings) from the program referenced by the programRef parameter.
DRAWING SHAPES
Specifies that the values in the vertex buffer bound to the shader variable referenced by the variableRef parameter will be accessed and used during the rendering process. This requires data (especially the color data) to be sent from the vertex shader to the fragment shader.
WORKING WITH UNIFORM DATA
Specify the value of the unit variable referenced by the variableRef parameter in the currently bound program. One of the tasks of each unit object will be to find a reference to. In the previous application, the movement of the triangle was determined by its current position (it was constantly moving to the right of the starting position).
This will be achieved by changing the value of the red component of the color variable.
ADDING INTERACTIVITY
If you want, you can even make the color of the triangle move along a larger color gamut by changing the green and blue components of the color variable as well. Keys marked as down or up should only remain so for one iteration of the main application loop, so the contents of these two lists should be cleared before checking the Pygame event list for new events during the next iteration. When you run this program, pressing any key on the keyboard should cause messages to be printed that show the contents of the non-empty key lists: the names of all the keys that are down, pressed, or up.
Also, perspective transformations need to be introduced so that translations in the z direction and rotations around the x and y axes of the scene will appear as expected.
INTRODUCTION TO VECTORS AND MATRICES
Two of the previously mentioned vector functions can be represented using matrix multiplication: the null function can be written as For example, calculating the matrix product from the previous example in the opposite order gives the result. The value (a·d− b·c) that appears in the denominator of each entry of the inverse matrix is called the determinant of the matrix A.
Ten, your extended thumb will point in the direction of the z-axis; this is shown in Figure 3.8.
GEOMETRIC TRANSFORMATIONS
For simplicity, only the formulas for rotation around each of the three axes will be derived in this section, as shown in Figure 3-15. The smaller rectangular end of the truncated cone is closest to the origin and the larger rectangular end is furthest from the origin. The projection window corresponds to the smaller rectangular side of the truncated cone, which is the side closest to the origin.
Draw a line from P to the origin, let Q =(Qy , Qz ) be the point of intersection between the line and the projection window, as illustrated in Figure 3.24.
A MATRIX CLASS
As you will see in later sections, being able to use local transformations will be useful when creating interactive three-dimensional scenes. For example, navigating a scene feels more intuitive and immersive if you are able to move the virtual camera with local transformations. The viewer may not always be aware of the direction of the z-axis, which can lead to unexpected movements when moving in global directions, but the viewer is always able to see what is in front of them, which makes it more forward. natural.
INCORPORATING WITH GRAPHICS PROGRAMS
Next, you will initialize attribute data for the vertices of an isosceles triangle, uniforms for the model and projection matrices, and variables to store the motion and rotation speed that will be applied to the triangle in the update function. Since the keys A/D move the object left/right, you will use the keys Q/E to rotate the object left/right, since they lie in the row directly above A/D. Run the flight and you should see an isosceles triangle in the middle of your screen.
Similarly, while the object is in its original orientation (its local right direction aligned with the positive x-axis), the local and global translations will look the same, but after rotation the difference in the translations becomes apparent.
SUMMARY AND NEXT STEPS
An abstract example of a tree is illustrated in Figure 4.1, where nodes are represented by ovals labeled with the letters A through G and arrows point from a node to its children. For convenience, the position, orientation, and scale of an object will be collectively referred to as the object's transformation. The model matrix stores the transformation of an object relative to its parent object in the scene graph.
For example, the motion of the moon relative to the sun, illustrated in Figure 4.2 (dashed gray line), can be expressed more simply in terms of the combination of two circular motions: the moon relative to the Earth and the Earth relative to the sun (dashed line with blue dots).
OVERVIEW OF CLASS STRUCTURE
In this context, a global transformation means a transformation performed relative to the coordinate axes of the parent object in the scene graph.). From the viewer's perspective, all objects in the scene appear to be moved two units to the right. These examples illustrate the general idea that each camera transformation affects the scene objects in the opposite direction.
Mathematically, this relationship is captured by defining the rendering matrix, which describes the placement of objects in the scene relative to the camera, as the inverse of the camera's transformation matrix.
GEOMETRY OBJECTS
For each face of the box, the vertices of the corresponding triangles are ordered in the same order as in the Rectangle class. Instead, each of the x, y, and z coordinates is expressed by a function of two independent variables u and v. As with the Rectangle class, the plane is centered at the origin and parameters are included in the constructor to determine the width and height of the plane to be specified.
At the top and bottom of the sphere (where y=1 and y= –1) the diameter is single points, which can be considered as R= 0.
MATERIAL OBJECTS
Since there will be many extensions of this class, all the material-related classes will be organized in a separate folder. The first variable, baseColor, will be a vec3 containing a color applied to all vertices, with the default value (1,1,1), which corresponds to white. The other rendering setting is the thickness or width of the lines, stored with the key "lineWidth".
Both sides of each triangle can be rendered by changing the value saved with the "doubleSide" key.
RENDERING SCENES WITH THE FRAMEWORK
In the next section, you will create a class that uses this information in the process of rendering mesh objects. Next, a list of all the Mesh objects in the scene is created by first extracting all elements in the scene using the get-DescendantList function and then filtering this list using the Python functions filter and isinstance. Most applications will require at least seven classes to be imported: Base, Renderer, Scene, Camera, Mesh, and at least one geometry and one material class to be used in the mesh.
Running this code should produce an output similar to that illustrated in Figure 4.21, where the dark background is due to the clear default color in the renderer being used.
CUSTOM GEOMETRY AND MATERIAL OBJECTS
To begin, create a copy of fle test-template.py, save it as test-4-2.py. To begin, create a copy of fle test-template.py and save it as test-4-3.py. As before, create a copy of fle test-template.py, this time saving it with the fle name test-4-4.py.
Make a copy of fle test-template.py and save it as fle test-4–5.py.
EXTRA COMPONENTS
Finally, to produce the animated effect, you need to increment and update the value of the time variable. Run the code and you should see an animated rippling effect on the sphere as the color shifts back and forth from the red end of the spectrum. To see how these classes are used in code, to produce an image like the right side of Figure 4.27, make a copy of the fle test-template.py, and save it as test-4–6.py.
Ten, in the initialization function, delete the code in the function that occurs after the camera object is initialized and replace it with the following code, which adds coordinate axes and a grid to the scene and demonstrates the use of some of the available customization parameters.
