To support the modification to the vertex shader, some extra code is added to the main() function in the JavaScript. However, the fragment shader is the same as in HelloTriangle.js in the previous section. Listing 3.4 shows TranslatedTriangle.js, in which the vertex shader is partially modified to carry out the translation operation. Let’s look at a sample program that does this.

You need to pass the translation distances Tx, Ty, and Tz to the vertex shader, apply Equation 3.1 using the distances, and then assign the result to gl_Position. Once you understand this explanation, implementation is easy. Conversely, they clearly aren’t a per-fragment operation, so you don’t need to worry about the fragment shader. You’ve probably realized already that because they are a per-vertex operation, you need to implement the operations in a vertex shader. dimensional manifolds, there will be certain parts such as rotation control interfaces that. These simple equations can be implemented in a WebGL program just by adding each constant value to each vertex coordinate. Slides: I(A): N-Dimensional Geometry for Computer Graphics. (See the coordinate system in Chapter 2.) Figure 3.18 shows TranslatedTriangle.įigure 3.19 Calculating translation distances The right direction means the positive direction of the x-axis, and the up direction means the positive direction of the y-axis. You can use the triangle you drew in the previous section.

Or, if you already know that transformations can be written using a matrix, you can skip this section as well.įirst, let’s write a sample program, TranslatedTriangle, that moves a triangle 0.5 units to the right and 0.5 units up. If you find reading this section and in particular the math too much on first read, it’s okay to skip it and return later. However, when you write your own programs, you don’t need the math instead, you can use one of several convenient libraries, explained in the next section, that handle the math for you.

This section introduces some math to explain each transformation and help you to understand how each operation can be realized. These operations are called transformations (affine transformations). Now that you understand the basics of drawing shapes like triangles and rectangles, let’s take another step and try to move (translate), rotate, and scale the triangle and display the results on the screen. Learn More Buy Moving, Rotating, and Scaling In linear algebra, a rotation matrix is a transformation matrix that is used to perform a rotation in Euclidean space.WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL

Triangle rotation in computer graphics