Samsung Galaxy Tab 2 10.1 P5100 Android tablet. Announced Feb 2012. Features 10.1″ display, TI OMAP 4430 chipset, 3.15 MP primary camera, 7000 mAh battery, 32 GB storage, 1000 MB RAM, Corning. Translate Tab PC 용. 카테고리: Utilities 최근 업데이트: 2018-12-06 현재 버전: 2.0.3 파일 크기: 7.28 MB 개발자: Oleksandr Izvekov 호환성: 필요 Windows XP, Windows Vista, Windows 7, Windows 8, Windows 8.1 and Windows 10. Translate Tab 2.0.8 MAS macOS 13 mb Translate Tab is an easy-to-use tool for quick translation. The idea behind Translate Tab is to have a tool handy when you need to do some basic. Google's free service instantly translates words, phrases, and web pages between English and over 100 other languages. The flap or latchet of a shoe fastened with a string or a buckle. A loop for pulling or lifting something. A border of lace or other material, worn on the inner front edge of ladies' bonnets. A loose pendent part of a lady's garment; esp., one of a series of pendent squares forming an edge or border.

1. Translate Tab 2 0 35
2. Translate Tab 2 0 3 0
3. Translate Tab 2 0 36
4. Translate Tab 2 0 3

Home > Articles > Programming

1. Moving, Rotating, and Scaling

Moving, Rotating, and Scaling

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. These operations are called transformations (affine transformations). This section introduces some math to explain each transformation and help you to understand how each operation can be realized. 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.

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. Or, if you already know that transformations can be written using a matrix, you can skip this section as well.

First, let’s write a sample program, TranslatedTriangle, that moves a triangle 0.5 units to the right and 0.5 units up. You can use the triangle you drew in the previous section. The right direction means the positive direction of the x-axis, and the up direction means the positive direction of the y-axis. (See the coordinate system in Chapter 2.) Figure 3.18 shows TranslatedTriangle.

Translation

Let us examine what kind of operations you need to apply to each vertex coordinate of a shape to translate (move) the shape. Essentially, you just need to add a translation distance for each direction (x and y) to each component of the coordinates. Looking at Figure 3.19, the goal is to translate the point p (x, y, z) to the point p’ (x’, y’, z’), so the translation distance for the x, y, and z direction is Tx, Ty, and Tz, respectively. In this figure, Tz is 0.

To determine the coordinates of p’, you simply add the T values, as shown in Equation 3.1.

Equation 3.1

x’ = x + Tx

y’ = y + Ty

z’ = z + Tz

Figure 3.19 Calculating translation distances

These simple equations can be implemented in a WebGL program just by adding each constant value to each vertex coordinate. You’ve probably realized already that because they are a per-vertex operation, you need to implement the operations in a vertex shader. Conversely, they clearly aren’t a per-fragment operation, so you don’t need to worry about the fragment shader.

Once you understand this explanation, implementation is easy. 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. Let’s look at a sample program that does this.

Sample Program (TranslatedTriangle.js)

Listing 3.4 shows TranslatedTriangle.js, in which the vertex shader is partially modified to carry out the translation operation. However, the fragment shader is the same as in HelloTriangle.js in the previous section. To support the modification to the vertex shader, some extra code is added to the main() function in the JavaScript.

Listing 3.4 TranslatedTriangle.js

First, let’s examine main() in JavaScript. Line 17 defines the variables for each translation distance of Equation 3.1:

Because Tx, Ty, and Tz are fixed (uniform) values for all vertices, you use the uniform variable u_Translation to pass them to a vertex shader. Line 44 retrieves the storage location of the uniform variable, and line 49 assigns the data to the variable:

Note that gl.uniform4f() requires a homogenous coordinate, so we supply a fourth argument (w) of 0.0. This will be explained in more detail later in this section.

Now, let’s take a look at the vertex shader that uses this translation data. As you can see, the uniform variable u_Translation in the shader, to which the translation distances are passed, is defined as type vec4 at line 5. This is because you want to add the components of u_Translation to the vertex coordinates passed to a_Position (as defined by Equation 3.1) and then assign the result to the variable gl_Position, which has type vec4. Remember, per Chapter 2, that the assignment operation in GLSL ES is only allowed between variables of the same types:

After these preparations have been completed, the rest of tasks are straightforward. To calculate Equation 3.1 within the vertex shader, you just add each translation distance (Tx, Ty, Tz) passed in u_Translation to each vertex coordinate (x, y, z) passed in a_Position.

Because both variables are of type vec4, you can use the + operator, which will actually add the four components simultaneously (see Figure 3.20). This easy addition of vectors is a feature of GLSL ES and will be explained in more detail in Chapter 6.

Now, we’ll return to the fourth element, (w), of the vector. As explained in Chapter 2, you need to specify the homogeneous coordinate to gl_Position, which is a four-dimensional coordinate. If the last component of the homogeneous coordinate is 1.0, the coordinate indicates the same position as the three-dimensional coordinate. In this case, because the last component is w1+w2 to ensure that w1+w2 is 1.0, you need to specify 0.0 to the value of w (the fourth parameter of gl.uniform4f()).

Finally, at line 58, gl.drawArrays(gl.TRIANGLES, 0, n) executes the vertex shader. For each execution, the following three steps are performed:

1. Each vertex coordinate set is passed to a_Position.
2. u_Translation is added to a_Position.
3. The result is assigned to gl_Position.

Once executed, you’ve achieved your goal because each vertex coordinate set is modified (translated), and then the translated shape (in this case, a triangle) is displayed on the screen. If you now load TranslatedTriangle.html into your browser, you will see the translated triangle.

Now that you’ve mastered translation (moving), the next step is to look at rotation. The basic approach to realize rotation is the same as translation, requiring you to manipulate the vertex coordinates in the vertex shader.

Rotation

Rotation is a little more complex than translation because you have to specify multiple items of information. The following three items are required:

• Rotation axis (the axis the shape will be rotated around)
• Rotation direction (the direction: clockwise or counterclockwise)
• Rotation angle (the number of degrees the shape will be rotated through)

In this section, to simplify the explanation, you can assume that the rotation is performed around the z-axis, in a counterclockwise direction, and for β degrees. You can use the same approach to implement other rotations around the x-axis or y-axis.

In the rotation, if β is positive, the rotation is performed in a counterclockwise direction around the rotation axis looking at the shape toward the negative direction of the z-axis (see Figure 3.21); this is called positive rotation. Just as for the coordinate system, your hand can define the direction of rotation. If you take your right hand and have your thumb follow the direction of the rotation axis, your fingers show the direction of rotation. This is called the right-hand-rule rotation. As we discussed in Chapter 2, it’s the default we are using for WebGL in this book.

Now let’s find the expression to calculate the rotation in the same way that you did for translation. As shown in Figure 3.22, we assume that the point p’ (x’, y’, z’) is the β degree rotated point of p (x, y, z) around the z-axis. Because the rotation is around the z-axis, the z coordinate does not change, and you can ignore it for now. The explanation is a little mathematical, so let’s take it a step at a time.

Figure 3.21Positive rotation around the z-axis

Figure 3.22 Calculating rotation around the z-axis

In Figure 3.22, r is the distance from the origin to the point p, and α is the rotation angle from the x-axis to the point. You can use these items of information to represent the coordinates of p, as shown in Equation 3.2.

Equation 3.2

x = r cos α

y = r sin α

Similarly, you can find the coordinate of p’ by using r, α, and β as follows:

x’ = r cos (α + β)

y’ = r sin (α + β)

Then you can use the addition theorem of trigonometric functions¹ to get the following:

x’ = r (cos α cos β – sin α sin β)

y’ = r (sin α cos β + cos α sin β)

Finally, you get the following expressions (Equation 3.3) by assigning Equation 3.2 to the previous expressions and removing r and α.

Equation 3.3

x’ = x cos β – y sin β

y’ = x sin β + y cos β

z’ = z

So by passing the values of sin β and cos β to the vertex shader and then calculating Equation 3.3 in the shader, you get the coordinates of the rotated point. To calculate sin β and cos β, you can use the methods of the JavaScript Math object.

Let’s look at a sample program, RotatedTriangle, which rotates a triangle around the z-axis, in a counterclockwise direction, by 90 degrees. Figure 3.23 shows RotatedTriangle.

cos(a ± b) = cos a cos b β sin a sin b

Sample Program (RotatedTriangle.js)

Listing 3.5 shows RotatedTriangle.js which, in a similar manner to TranslatedTriangle.js, modifies the vertex shader to carry out the rotation operation. The fragment shader is the same as in TranslatedTriangle.js and, as usual, is not shown. Again, to support the shader modification, several processing steps are added to main() in the JavaScript program. Additionally, Equation 3.3 is added in the comments from lines 4 to 6 to remind you of the calculation needed.

Listing 3.5 RotatedTriangle.js

Let’s look at the vertex shader, which is straightforward:

Because the goal is to rotate the triangle by 90 degrees, the sine and cosine of 90 need to be calculated. Line 8 defines two uniform variables for receiving these values, which are calculated in the JavaScript program and then passed to the vertex shader.

You could pass the rotation angle to the vertex shader and then calculate the values of sine and cosine in the shader. However, because they are identical for all vertices, it is more efficient to do it once in the JavaScript.

The name of these uniform variables, u_CosB and u_SinB, are defined following the naming rule used throughout this book. As you will remember, you use the uniform variable because the values of these variables are uniform (unchanging) per vertex.

Translate Tab 2 0 35

As in the previous sample programs, x, y, z, and w are passed in a group to the attribute variable a_Position in the vertex shader. To apply Equation 3.3 to x, y, and z, you need to access each component in a_Position separately. You can do this easily using the. operator, such as a_Position.x, a_Position.y, and a_Position.z (see Figure 3.24 and Chapter 6).

Figure 3.24 Access methods for each component in a vec4

Handily, you can use the same operator to access each component in gl_Position to which the vertex coordinate is written, so you can calculate x’ = x cos β – y sin β from Equation 3.3 as shown at line 10:

Similarly, you can calculate y’ as follows:

According to Equation 3.3, you just need to assign the original z coordinate to z’ directly at line 12. Finally, you need to assign 1.0 to the last component w²:

Now look at main() in the JavaScript code, which starts from line 25. This code is mostly the same as in TranslatedTriangle.js. The only difference is passing cos β and sin β to the vertex shader. To calculate the sine and cosine of β, you can use the JavaScript Math.sin() and Math.cos() methods. However, these methods expect parameters in radians, not degrees, so you need to convert from degrees to radians by multiplying the number of degrees by pi and then dividing by 180. You can utilize Math.PI as the value of pi as shown at line 50, where the variable ANGLE is defined as 90 (degrees) at line 23:

Once you have the angle in radians, lines 51 and 52 calculate cos β and sin β, and then lines 60 and 61 pass them to the uniform variables in the vertex shader:

When you load this program into your browser, you can see the triangle, rotated through 90 degrees, on the screen. If you specify a negative value to ANGLE, you can rotate the triangle in the opposite direction (clockwise). You can also use the same equation. For example, to rotate the triangle in the clockwise direction, you can specify –90 instead of 90 at line 23, and Math.cos() and Math.sin() will deal with the remaining tasks for you.

For those of you concerned with speed and efficiency, the approach taken here (using two uniform variables to pass the values of cos β and sin β) isn’t optimal. To pass the values as a group, you can define the uniform variable as follows:

and then pass the values by:

Then in the vertex shader, you can access them using u_CosBSinB.x and u_CosBSinB.y.

Transformation Matrix: Rotation

For simple transformations, you can use mathematical expressions. However, as your needs become more complex, you’ll quickly find that applying a series of equations becomes quite complex. For example a “translation after rotation” as shown in Figure 3.25 can be realized by using Equations 3.1 and 3.3 to find the new mathematical expressions for the transformation and then implementing them in a vertex shader.

Figure 3.25 Rotate first and then translate a triangle

However, it is time consuming to determine the mathematical expressions every time you need a new set of transformation and then implement them in a vertex shader. Fortunately, there is another tool in the mathematical toolbox, the transformation matrix, which is excellent for manipulating computer graphics.

As shown in Figure 3.26, a matrix is a rectangular array of numbers arranged in rows (in the horizontal direction) and columns (in the vertical direction). This notation makes it easy to write the calculations explained in the previous sections. The brackets indicate that these numbers are a group.

Before explaining the details of how to use a transformation matrix to replace the equations used here, you need to make sure you understand the multiplication of a matrix and a vector. A vector is an object represented by an n-tuple of numbers, such as the vertex coordinates (0.0, 0.5, 1.0).

The multiplication of a matrix and a vector can be written as shown in Equation 3.4. (Although the multiply operator × is often omitted, we explicitly write the operator in this book for clarity.) Here, our new vector (on the left) is the result of multiplying a matrix (in the center) by our original vector (on the right). Note that matrix multiplication is noncommutative. In other words, A × B is not the same as B × A. We discuss this further in Chapter 6.

Equation 3.4

This matrix has three rows and three columns and is called a 3×3 matrix. The rightmost part of the equation is a vector composed of x, y, and z. (In the case of a multiplication of a matrix and vector, the vector is written vertically, but it has the same meaning as when it is written horizontally.) This vector has three elements, so it is called a three-dimensional vector. Again, the brackets on both sides of the array of numbers (vector) are also just notation for recognizing that these numbers are a group.

In this case, x’, y’, and z’ are defined using the elements of the matrix and the vector, as shown by Equation 3.5. Note that the multiplication of a matrix and vector can be defined only if the number of columns in a matrix matches the number of rows in a vector.

Equation 3.5

x’ = ax + by + cz

y’ = dx + ey + fz

z’ = gx + hy + iz

Now, to understand how to use a matrix instead of our original equations, let’s compare the matrix equations and Equation 3.3 (shown again as Equation 3.6).

Equation 3.6

x’ = x cos β – y sin β

y’ = x sin β + y cos β

z’ = z

For example, compare the equation for x’:

x’ = ax + by + cz

x’ = x cos β – y sin β

In this case, if you set a = cos β, b = -sin β, and c = 0, the equations become the same. Similarly, let us compare the equation for y’:

y’ = dx + ey + fz

y’ = x sin β + y cos β

In this case, if you set d = sin β, e = cos β, and f = 0, you get the same equation. The last equation about z’ is easy. If you set g = 0, h = 0, and i = 1, you get the same equation.

Then, by assigning these results to Equation 3.4, you get Equation 3.7.

Equation 3.7

This matrix is called a transformation matrix because it “transforms” the right-side vector (x, y, z) to the left-side vector (x’, y’, z’). The transformation matrix representing a rotation is called a rotation matrix.

You can see that the elements of the matrix in Equation 3.7 are an array of coefficients in Equation 3.6. Once you become accustomed to matrix notation, it is easier to write and use matrices than to have to deal with a set of transformation equations.

As you would expect, because matrices are used so often in 3DCG, multiplication of a matrix and a vector is easy to implement in shaders. However, before exploring how, let’s quickly look at other types of transformation matrices, and then we will start to use them in shaders.

Transformation Matrix: Translation

Obviously, if we can use a transformation matrix to represent a rotation, we should be able to use it for other types of transformation, such as translation. For example, let us compare the equation for x’ in Equation 3.1 to that in Equation 3.5 as follows:

x’ = ax + by + cz - - - from Equation (3.5)

x’ = x + T_x - - - from Equation (3.1)

Here, the second equation has the constant term T_x, but the first one does not, meaning that you cannot deal with the second one by using the 3×3 matrix of the first equation. To solve this problem, you can use a 4×4 matrix and the fourth components of the coordinate, which are set to 1 to introduce the constant terms. That is to say, we assume that the coordinates of point p are (x, y, z, 1), and the coordinates of the translated point p (p’) are (x’, y’, z’, 1). This gives us Equation 3.8.

Equation 3.8

This multiplication is defined as follows:

Equation 3.9

x’ = ax + by + cz +d

y’ = ex + fy + gz + h

z’ = ix + jy + kz + l

1 = mx + ny + oz+ p

From the equation1 = mx + ny + oz + p, it is easy to find that the coefficients are m = 0, n = 0, o = 0, and p = 1. In addition, these equations have the constant terms d, h, and l, which look helpful to deal with Equation 3.1 because it also has constant terms. Let us compare Equation 3.9 and Equation 3.1 (translation), which is reproduced again:

x’ = x + T_x

y’ = y + T_y

z’ = z + T_z

When you compare the x’ component of both equations, you can see that a=1, b=0, c=0, and d=T_x. Similarly, when comparing y’ from both equations, you find e = 0, f = 1, g = 0, and h = T_y; when comparing z’ you see i=0, j=0, k=1, and l=T_z. You can use these results to write a matrix that represents a translation, called a translation matrix, as shown in Equation 3.10.

Equation 3.10

Rotation Matrix, Again

At this stage you have successfully created a rotation and a translation matrix, which are equivalent to the two equations you used in the example programs earlier. The final step is to combine these two matrices; however, the rotation matrix (3×3 matrix) and transformation matrix (4×4 matrix) have different numbers of elements. Unfortunately, you cannot combine matrices of different sizes, so you need a mechanism to make them the same size.

To do that, you need to change the rotation matrix (3×3 matrix) into a 4×4 matrix. This is straightforward and requires you to find the coefficient of each equation in Equation 3.9 by comparing it with Equation 3.3. The following shows both equations:

x’ = x cos β – y sin β

y’ = x sin β + y cos β

z’ = z

x’ = ax + by + cz + d

y’ = ex + fy + gz + h

z’ = ix + iy + kz + l

1 = mx + ny + oz + p

For example, when you compare x’ = x cos β – y sin β with x’ = ax + by + cz +d, you find a = cos β, b = –sin β, c = 0, and d = 0. In the same way, after comparing in terms of y and z, you get the rotation matrix shown in Equation 3.11:

Equation 3.11

This allows you to represent both a rotation matrix and translation matrix in the same 4×4 matrix, achieving the original goal!

Sample Program (RotatedTriangle_Matrix.js)

Having constructed a 4×4 rotation matrix, let’s go ahead and use this matrix in a WebGL program by rewriting the sample program RotatedTriangle, which rotates a triangle 90 degrees around the z-axis in a counterclockwise direction, using the rotation matrix. Listing 3.6 shows RotatedTriangle_Matrix.js, whose output will be the same as Figure 3.23 shown earlier.

Listing 3.6 RotatedTriangle_Matrix.js

First, let us examine the vertex shader:

At line 7, u_xformMatrix, containing the rotation matrix described in Equation 3.11, and a_Position, containing the vertex coordinates (this is the right-side vector in Equation 3.11), are multiplied, literally implementing Equation 3.11.

In the sample program TranslatedTriangle, you were able to implement the addition of two vectors in one line (gl_Position = a_Position + u_Translation). In the same way, a multiplication of a matrix and vector can be written in one line in GLSL ES. This is convenient, allowing the calculation of the four equations (Equation 3.9) in one line. Again, this shows how GLSL ES has been designed specifically for 3D computer graphics by supporting powerful operations like this.

Because the transformation matrix is a 4×4 matrix and GLSL ES requires the data type for all variables, line 5 declares u_xformMatrix as type mat4. As you would expect, mat4 is a data type specifically for holding a 4×4 matrix.

Translate Tab 2 0 3 0

Within the main JavaScript program, the rest of the changes just calculate the rotation matrix from Equation 3.11 and then pass it to u_xformMatrix. This part starts from line 44:

Lines 44 and 45 calculate the values of cosine and sine, which are required in the rotation matrix. Then line 48 creates the matrix xformMatrix using a Float32Array. Unlike GLSL ES, because JavaScript does not have a dedicated object for representing a matrix, you need to use the Float32Array. One question that arises is in which order you should store the elements of the matrix (which is arranged in rows and columns) in the elements of the array (which is arranged in a line). There are two possible orders: row major order and column major order (see Figure 3.27).

Figure 3.27 Row major order and column major order

WebGL, just like OpenGL, requires you to store the elements of a matrix in the elements of an array in column major order. So, for example, the matrix shown in Figure 3.27 is stored in an array as follows: [a, e, i, m, b, f, j, n, c, g, k, o, d, h, l, p]. In the sample program, the rotation matrix is stored in the Float32Array in this order in lines 49 to 52.

The array created is then passed to the uniform variable u_xformMatrix by using gl.uniformMatrix4fv() at line 61. Note that the last letter of this method name is v, which indicates that the method can pass multiple data values to the variable.

If you load and run the sample program in your browser, you’ll see the rotated triangle. Congratulations! You have successfully learned how to use a transformation matrix to rotate a triangle.

Reusing the Same Approach for Translation

Now, as you have seen with Equations 3.10 and 3.11, you can represent both a translation and a rotation using the same type of 4×4 matrix. Both equations use the matrices in the form <new coordinates> = <transformation matrix> * <original coordinates>. This is coded in the vertex shader as follows:

This means that if you change the elements of the array xformMatrix from those of a rotation matrix to those of a translation matrix, you will be able to apply the translation matrix to the triangle to achieve the same result as shown earlier but which used an equation (Figure 3.18).

To do that, change line 17 in RotatedTriangle_Matrix.js using the translation distances from the previous example:

You need to rewrite the code for creating the matrix, remembering that you need to store the elements of the matrix in column major order. Let’s keep the same name for the array variable, xformMatrix, even though it’s now being used to hold a translation matrix, because it reinforces the fact that we are using essentially the same code. Finally, you are not using the variable ANGLE, so lines 43 to 45 are commented out:

Once you’ve made the changes, run the modified program, and you will see the same output as shown in Figure 3.18. By using a transformation matrix, you can apply various transformations using the same vertex shader. This is why the transformation matrix is such a convenient and powerful tool for 3D graphics, and it’s why we’ve covered it in detail in this chapter.

Transformation Matrix: Scaling

Finally, let’s define the transformation matrix for scaling using the same assumption that the original point is p and the point after scaling is p’.

Assuming the scaling factor for the x-axis, y-axis, and z-axis is S_x, S_y, and S_z respectively, you obtain the following equations:

x’ = S_x × x

y’ = S_y × y

z’ = S_z × z

The following transformation matrix can be obtained by comparing these equations with Equation 3.9.

As with the previous example, if you store this matrix in xformMatrix, you can scale the triangle by using the same vertex shader you used in RotatedTriangle_Matrix.js. For example, the following sample program will scale the triangle by a factor of 1.5 in a vertical direction, as shown in Figure 3.29:

Figure 3.29 Triangle scaled in a vertical direction

Note that if you specify 0.0 to Sx, Sy, or Sz, the scaled size will be 0.0. If you want to keep the original size, specify 1.0 as the scaling factor.

Translate Tab 2 0 36

Related Resources

• Book $47.99

• Book $47.99

Translate Tab 2 0 3

• Web Edition $38.39