WebGL 启动加载触发更新流程分析

WebGL 启动加载触发更新流程分析

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句：太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究：iOS、Android、Html5、Arduino、pcDuino，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。

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();
}