WebGL 启动加载触发更新流程分析
太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)
本文遵循“署名-非商业用途-保持一致”创作公用协议
requestAnimFrame(tick);
此命令是 HTML5 中新增的用于替换定时器触发更新的命令，以实现动画更新，其后台实现有一特殊之处，是将页面上的动画进行合并再呈现，提供了很高的执行效率，且当当前页面标签离开未展现在屏幕上时，其自动暂停。
不妨试一试，打开一个 html5 的三维示例，展现的过程中，CPU 风扇在几分钟后会狂转不止；但将页面标签切换到其它页面，再过几分钟，CPU 风扇明显降速，发热也没那么大了。
不过还不清楚是 CPU 还是 GPU发热，如果能找一部台式机来测试，打开机箱盖子，摸一下两者的散热片温度前后变化应该就能很清楚了，或者用温度监测软件也可以查得到。
moonAngle 和 cubeAngle 是两个用于视图模型转换时使用的视角的变化值，这里通过动画更新，使其随时间的流逝，发生一定角度的旋转，以达到动态更新旋转的展示目的。
当仅保留 drawScene(); 这一句时，并不会呈现出内容来，而 animate(); 仅用于更新旋转角度，可以不考虑，那么 requestAnimFrame(tick); 这一句可能是确保其显示的一个必要条件；
然而，requestAnimFrame(tick); 在我的理解中，它仅用于触发执行 tick(); 方法本身，怎么会有这样致命的影响呢？
也许资源的延迟加载，可能需要定时刷新以达到更新各状态的最新结果吧。
这是否对于静态显示来说，资源消耗过大呢？又或者，我们是否可以以另一种方式，即加载完成触发的方式来考虑这个问题进行解决呢？
那么 JS 也许可以有这样的功能吧！也许 JQuery 对 JS 事件的封装可能会很好的解决这些问题，有待进一步研究，后文续补。
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);
// 清屏并启用深度测试
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
initShaders();
initBuffers();
initTextures();
tick();
}