WebGL Programming Guide Reading Notes-fourth chapter

First, preface

Today continue to the fourth chapter of the study content, began to learn the complex transformation of knowledge.

Second, the text

Example1: Composite Transformations

In the book, the author encapsulates a set of matrix objects for transformations: Matrix4 objects. It contains the following methods:

2. Matrix4. setidentity (): Instantiate Matrix4 as the unit matrix
4. Matrix4 . settranslate (x, Y, z): Sets the Matrix4 instance to the translation transformation matrix, the x-axis translation distance is x, the y-axis translation distance is Y, and the z-axis translation distance is Z;
6. Matrix4. Setscale (x, Y, z): Sets the Matrix4 instance to a scaled transformation matrix with a scaling factor of x, Y, Z;
8. Matrix4. setRotate (ANGLE,X,Y,Z): Sets the Matrix4 instance to the rotation transformation matrix, the angle is angle, the axis of rotation is (x, y, z);
10. Matrix4. Translate (x, Y, z): Multiplies the Matrix4 instance itself by a translation transformation matrix;
12. Matrix4. rototate (angle,x,y,z): Multiply the Matrix4 instance itself by a rotation transformation matrix;
14. < Span style= "font-size:14pt" >matrix4. Scale (x, Y, z): < Span style= "COLOR: #000000" >
16. < Span style= "font-size:14pt" > < Span style= "font-size:16px" >matrix4. set (m): < Span style= "font-size:14pt" > < Span style= "font-size:16px" > Matrix4 set to M;
18. < Span style= "font-size:14pt" > < Span style= "font-size:16px" > < Span style= "COLOR: #ff0000" > matrix4.elements : The typed array contains the matrix elements of the Matrix4 instance;

var New Matrix4 (); Modelmatrix.setrotate (ANGLE,0,0,1); Modelmatrix.translate (Tx,  0,0);.....GL.UNIFORMMATRIX4FV (U_modelmatrix,false, modelmatrix.elements);

Example2: Animation

&NBSP; requ Estanimationframe (func): Requests that the browser callback the function func at some point in the future to complete the redraw. We should start the request again at the end of the callback function.

var tick = function () {    = animate (Currentangle);  // Update the rotation angle    Draw (GL, N, Currentangle, Modelmatrix, U_modelmatrix);   // Draw the triangle    // Request that the browser calls tick };tick ();

Since the time the browser executes tick () is not controllable, we need to make the triangle rotate at a constant speed, then we need to control the time:

var g_last = date.now (); function animate (angle) {  //  Calculate the elapsed time  var now = date.now ();   var elapsed = now- g_last;   = Now ;   // Update The current rotation angle (adjusted by the elapsed time)  var 1000.0)  ;   return  the ;}

Third, end

The fifth chapter continues to be updated in Sunday.

WebGL Programming Guide Reading Notes-fourth chapter