[WebGL Primer] 17, recursive processing and moving? Rotation zoom

Note: The article is translated from http://wgld.org/, the original author Sambonja 広 (doxas), the article if there is my additional instructions, I will add [Lufy:], in addition, The WEBGL research is not deep enough, some professional words, if the translation is wrong, you are welcome to correct.

The results of this demo run

benefits of the Model coordinate transformation matrixLast time, several models were drawn by manipulating the model coordinate transformation matrix. This time, continue on this basis, to add a number of models plus rotation and zoom reduction and other processing.
People who have read the previous article should know that in the 3D rendering world, using VBO and some coordinate transformation matrices, you can draw a large number of models with only a small amount of modification. Of course, the amount of computation will also be reduced, and the efficiency will naturally be improved.
In other words, to be able to skillfully use the model coordinate transformation matrix, you can achieve efficient rendering, which is the benefits of model coordinate transformation.
This time, try to draw three polygons, a polygon to move along a circle, a polygon to rotate along the y axis, and a third polygon to zoom in and out.


add a continuous loop of processingthe last demo, just updated on the canvas, this time the demo will make the model continue to change, made a simple animation effect.
In order to animate, you need to add a continuous loop, there are many ways to continue looping in JavaScript, and this site is basically using the settimeout function.
The settimeout function described here is a function built into the window object in JavaScript that can be processed after a specified time.
The elapsed time is in milliseconds, 1 seconds is 1000 milliseconds, so you need to specify 1000 times times the description.


using settimeout for recursive processingAs you just said, using the settimeout function can be used to achieve repeated cyclic processing, so what is the specific approach?
The first argument to the SetTimeout function is the function that is called, and the second parameter is how long it takes (milliseconds) to call this function. If the first parameter is specified as the function that is currently running, then a continuous loop can be implemented.
? function A is called
? In function A, use settimeout and pass in function A as a parameter
After the specified time, function A is called
By following the steps above, the drawing portion of WebGL is written as a recursive function, which can be continuously cycled.


arguments and Callee propertiesThe function's internal invocation of the function itself, can be directly written to the name of the function, but if it is an anonymous function, this approach will not work.
The solution is to use the arguments and Callee attributes to invoke the function itself. The arguments object is generated automatically when a function is called, and the callee property is a reference to the function itself, and even an anonymous function can be recursive if used in this way.
This recursion is done using the Settimeout+arguments.callee combination described here.


the processing in recursive functionto the recursive function, add a minimal amount of processing. Because in the process of repeated loops, if the extra useless processing is added, the program efficiency will be reduced.
For example, WebGL's context acquisition, VBO, and shader generation are not called every time. Once the object is generated, it can be reused, and similarly, the generation of the view coordinate transformation matrix and the projection coordinate transformation matrix is not necessarily placed in the recursive function, because each time the same thing is used.
in this case, the processing contained in the recursive function is basically limited, specifically the processing listed below.
? Clear the screen
? Generation of Model coordinate transformation matrices
? Transfer the coordinate transformation matrix to the uniform
? Drawing commands
? Screen Refresh
? Settimeout+arguments.callee
So, take a look at the code of the recursive function section.
> code for recursive Functions

Minmatrix.js Matrix-related processing//Mativ object generation var m = new Mativ ();//generation and initialization of various matrices var Mmatrix = m.identity (M.create ()); var Vmatrix = M.identity (M.create ()), var PMatrix = m.identity (M.create ()), var Tmpmatrix = m.identity (M.create ()), var Mvpmatrix = M.identity (M.create ());//view x projection coordinate transformation matrix M.lookat ([0.0, 0.0, 5.0], [0, 0, 0], [0, 1, 0], Vmatrix); M.perspective (C.width/ C.height, 0.1, PMatrix, m.multiply (PMatrix, Vmatrix, Tmpmatrix);//Declare counter var count = 0;//Continuous loop (function () {//Canva    Sを initial Gl.clearcolor (0.0, 0.0, 0.0, 1.0);    Gl.cleardepth (1.0); Gl.clear (GL. Color_buffer_bit | Gl.        Depth_buffer_bit);        The counter increments count++;        Use counter to calculate the angle var rad = (count%) * MATH.PI/180;    Model 1 rotates in a circular orbit var x = Math.Cos (RAD);    var y = Math.sin (RAD);    M.identity (Mmatrix);        M.translate (Mmatrix, [x, Y + 1.0, 0.0], Mmatrix);    Complete the coordinate transformation matrix of model 1 and draw m.multiply (Tmpmatrix, Mmatrix, Mvpmatrix);    GL.UNIFORMMATRIX4FV (Unilocation, False, Mvpmatrix); Gl.drawarrays (GL.        Triangles, 0, 3);    Model 2 Rotates m.identity (Mmatrix) along the y axis;    M.translate (Mmatrix, [1.0, -1.0, 0.0], Mmatrix);        M.rotate (Mmatrix, Rad, [0, 1, 0], Mmatrix);    Complete the coordinate transformation matrix of Model 2 and draw m.multiply (Tmpmatrix, Mmatrix, Mvpmatrix);    GL.UNIFORMMATRIX4FV (Unilocation, False, Mvpmatrix); Gl.drawarrays (GL.        Triangles, 0, 3);    Model 3 zooms in and out of var s = Math.sin (RAD) + 1.0;    M.identity (Mmatrix);    M.translate (Mmatrix, [ -1.0, -1.0, 0.0], Mmatrix);    M.scale (Mmatrix, [s, S, 0.0], Mmatrix)//complete the coordinate transformation matrix of Model 3 and draw m.multiply (Tmpmatrix, Mmatrix, Mvpmatrix);    GL.UNIFORMMATRIX4FV (Unilocation, False, Mvpmatrix); Gl.drawarrays (GL.        Triangles, 0, 3);        Context refresh Gl.flush (); For loop, recursive processing setTimeout (Arguments.callee, 1000/30);}) ();

At the end of the article, we will give you a link to the demo, you can view the complete code directly, the HTML code still does not make any changes.

The focus of this process is to declare count outside the anonymous function, increment the variable each time in the anonymous function, and then use the value of the variable to perform a model coordinate transformation.
The variable count takes the remainder to 360, and then computes the radian using the remainder.
> Get the code for radians

var rad = (count%) * MATH.PI/180;

regardless of how large the variable count is, the remainder is always within the range of 0 to 359, so that the correct angle is obtained so that the arc is obtained, and then the radian is used as one of the parameters for the model coordinate transformation.

The first model uses radians to calculate the sin and cos, and to get X and Y is the amount of movement.
The second model, in order to rotate along the y axis, also uses this radian as the amount of rotation.
The third model uses the sin value of radians to calculate the amount of zoom in and out.
Note that the frequently occurring multiply and rotate functions are encapsulated in minmatrix.js in order to achieve various coordinate transformations. The specification of the parameter can be seen in the previous article (minmatrix.js and coordinate transformation matrix), which has been explained in detail.
In addition, we need to pay attention to the order of the Model coordinate transformation, movement, rotation and zoom reduction and other transformations, the order of execution if not, the result will change. Here before the article also said, not clear people can review the previous content.

SummaryThis paper uses recursive processing to realize the continuous loop, and introduces the processing of the model coordinate transformation matrix. Later, the dynamic demo will be more and more, the introduction of the continuous cycle will be more used.
The recursion of an anonymous function or a normal function can be a somewhat difficult concept to understand, but also to be anxious and carefully considered. If the processing is more, this part of the processing may be separated separately.


Next, introduce a cache index.


The following link is the demo, you can run directly, so be sure to refer to it.
Dynamic demo of model movement, rotation and zoom- out

http://wgld.org/s/sample_005/

reprint Please specify: transfer from Lufy_legend's blog Http://blog.csdn.net/lufy_legend