WebGL boot load trigger update process Analysis

WebGL boot load trigger update process Analysis

The beautiful Life of the Sun Vulcan (http://blog.csdn.net/opengl_es)

This article follows "Attribution-non-commercial use-consistent" authoring public agreement

Reprint Please keep this sentence: Sun Vulcan's Beautiful Life-this blog focuses on Agile development and mobile and IoT device research: IOS, Android, HTML5, Arduino, Pcduino , Otherwise, the article from this blog refused to reprint or re-reproduced, thank you for your cooperation.

Requestanimframe (tick);

This command is a new command in HTML5 to replace the timer trigger update for animated updates, and its background implementation has a special feature, which is to merge and re-render the animations on the page, providing a high level of execution efficiency and automatically pausing when the current page label leaves the screen.

Try it and open a three-dimensional example of HTML5, which shows that the CPU fan will go crazy in a few minutes, but switch the page label to another page, and in a few minutes, the CPU fan is slowing down and the heat is not that big.

However, it is not clear whether the CPU or GPU is hot, if you can find a desktop to test, open the chassis lid, touch the heat sink temperature changes should be clear before and after, or with temperature monitoring software can be found.

Moonangle and Cubeangle are two variations of the angle of view used in the transformation of the views model, where the animation is updated to make it go through the time, and a certain angle of rotation occurs to achieve the display purpose of dynamic update rotation.

When only Drawscene () is retained; This sentence does not present content to the while Animate (); Only used to update the rotation angle, can not be considered, then requestanimframe (tick); This sentence may be a necessary condition for ensuring its display;

However, requestanimframe (tick); In my understanding, it is only used to trigger the execution of tick (); How could the method itself have such a deadly effect?

Perhaps the delayed loading of resources may require a timed refresh to meet the latest results of updating each state.

Does this mean that the resource consumption is too large for a static display? Or, can we solve this problem in another way, that is, loading the trigger to complete?

Then JS may be able to have such a function! Perhaps JQuery to the JS event package may be a good solution to these problems, pending further study, after the continuation of the text.

var lasttime = 0;function animate () {    var timenow = new Date (). GetTime ();    if (lasttime! = 0) {        var elapsed = Timenow-lasttime;        Moonangle + = 0.05 * elapsed;        Cubeangle + = 0.01 * elapsed;    }    Lasttime = TimeNow;} function tick () {    requestanimframe (tick);    Drawscene ();    Animate ();} function Webglstart () {    var canvas = document.getElementById ("Lesson13-canvas");    INITGL (canvas);    Clear screen and enable depth test    gl.clearcolor (0.0, 0.0, 0.0, 1.0);    Gl.enable (GL. Depth_test);        Initshaders ();    Initbuffers ();    Inittextures ();    Tick ();}