WebGL start loading trigger update process analysis

WebGL start loading trigger update process analysis

Beautiful Life of the sun and fire god (http://blog.csdn.net/opengl_es)

This article follows the "signature-non-commercial use-consistency" creation public agreement

Reprinted please keep this sentence: Sun huoshen's beautiful life-this blog focuses on Agile development and mobile and IOT device research: iOS, Android, Html5, Arduino, pcDuino, otherwise, this blog post is rejected or reprinted. Thank you for your cooperation.

RequestAnimFrame (tick );

This command is newly added in HTML5 to replace the timer to trigger an update to achieve animation update. Its Background implementation has a special feature: merging and re-rendering the animations on the page, it provides high execution efficiency and is automatically paused when the current page tag leaves the current screen.

If you open a 3D html5 example, the CPU fan will go crazy in a few minutes, but the page tag will be switched to another page. In a few minutes, the CPU fan speed is obviously reduced, and the fever is not that big.

However, it is still unclear whether it is CPU or GPU fever. If you can find a desktop computer to test, open the chassis lid, and check whether the temperature of the two heat sink changes before and after it, you can also use the temperature monitoring software.

MoonAngle and cubeAngle are two different values of the View Angle Used for view model conversion. Here, we use animation updates to make them rotate at a certain angle over time, to display the dynamic update rotation.

When only drawScene (); is retained, the content is not displayed, whereas animate (); is used only to update the rotation angle, which can be ignored. Therefore, requestAnimFrame (tick ); this sentence may be a necessary condition for ensuring its display;

However, in my understanding, requestAnimFrame (tick); is used only to trigger execution of tick (); how can the method itself have such a fatal impact?

You may need to regularly refresh the delayed loading of resources to update the latest results of various statuses.

Is this too high resource consumption for static display? Or, can we solve this problem in another way, that is, the method of loading completion triggering?

So JavaScript may have such a function! Maybe JQuery's encapsulation of JS events may solve these problems very well and need further research.

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 the screen and enable deep test gl. clearColor (0.0, 0.0, 0.0, 1.0); gl. enable (gl. DEPTH_TEST); initShaders (); initBuffers (); initTextures (); tick ();}