Динамичная графика

Хоть пример из предыдущей статьи и рисует объект, но он выполняет это действие лишь один раз. Это легко проверить, изменив функцию drawScene() следующим образом.

function drawScene(delta) {
    r = r + 0.005;
    gl.clearColor(r, 0.0, 0.0 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
    loadIdentity();
    mvTranslate([-0.0, 0.0, -6.0]);
    l.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
    gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
    setMatrixUniforms();
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}

Мы добавили в функцию drawScene() команду clearColor(), которая меняет компоненту красного цвета r. Переменную r мы определили и присвоили ей значение 0 в функции start(). Стоит отметить, что теперь функция drawScene() принимает один параметр, который нам потребуется далее для плавной анимации.

Теперь добавим функцию requestAnimationFrame(), которая будет перерисовывать нашу сцену каждый кадр. Перерисовка сцены может происходить не более чем 60 раз в секунду. Итак, перепишем функцию start().

function start() {
    var canvas = document.getElementById("glcanvas");
    gl = initWebGL(canvas);
    if (gl) {
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.enable(gl.DEPTH_TEST);
        gl.depthFunc(gl.LEQUAL);
        gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
        initShaders();
        initBuffers();
        r = 0.0;
        requestAnimationFrame(render);
    }
}

Рассмотрим фумкцию render() подробнее.

var then = 0;
function render(now) {
    now *= 0.001;
    const deltaTime = now - then;
    then = now;
    drawScene(deltaTime);
    requestAnimationFrame(render);
}

Сначала мы считаем время, за которое был перерисован последний кадр и сохраняем его в переменной deltaTime. Затем вызываем функцию drawScene() и передаём ей значение deltaTime. После чего мы снова вызываем requestAnimationFrame(). Результат работы программы можно посмотреть ниже.

Please use a browser that supports "canvas"

  < НАЗАД | ДАЛЕЕ >