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

Posted 2020-09-14 brucemengbm

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