Теперь в движении

Следующим этапом добавим нашей сцене движения — пусть квадрат вертится вокруг своей оси.

Тут, возможно, многие будут разочарованы. Дело в том, что WebGL (как, впрочем, и OpenGL) отображает динамические преобразования (в данном случае анимацию) простой перерисовкой сцены. Поэтому поступаем следующим образом:

draw(scene): setInterval(function(){ draw(scene): }, 15

):

Рис. 66. Рисуем вторую фигуру

Так мы заставим функцию draw выполняться каждые 15 мс. Затем сделаем необходимые изменения в самом ее теле:

Mat4.rotate(mvMatrix, -60 * Math. PI / 180, [1,

0, 0]);

Mat4.translate(mvMatrix, cubeBuffer. translate):

Var copy = mat4.create():

Mat4.set(mvMatrix, copy);

MvMatrixStack. push(copy);

Mat4.rotate(mvMatrix, cubeBuffer. rad * Math. PI

180, [0, 1, 0]);

Gl. bindBuffer(gl. ARRAY_BUFFER, cubeBuffer);

Gl. drawArrays(gl. TRIANGLE_STRIP, 0, cubeBuffer. numItems); mvMatrix = mvMatrixStack. pop():

Здесь мы сначала сохраняем (заносим в стек) текущее состояние матрицы. Зачем это нужно?

Как вы, наверное, уже поняли, все наши перемещения и отрисовки всегда начинаются с того места, где мы остановились прошлый раз, и это не всегда удобно. Поэтому мы сохраним исходную матрицу и вернем ее после отрисовки (mvMatrixStack. pop()). Далее знакомой нам функцией mat4. rotate поворачиваем квадрат, причем на этот раз угол поворота задается переменной (ее надо заранее определить до вызова draw: cubeBuffer. rad = 0).

Теперь осталось менять угол при каждом вызове. Это не проблема:

Mat4.rotate(mvMatrix, cubeBuffer. rad * Math. PI / 180, [0, 1, 0]); var timeNow = new Date().getTime(): var elapsed = timeNow — lastTime; cubeBuffer. rad -= (75 * elapsed) / 1000.0;

}

LastTime = timeNow;

LastTime стоит сделать глобальной переменной с начальным значением 0.

Результат, к сожалению, на иллюстрации показать затруднительно, вам остается поверить мне на слово, что картинка на рис. 67 подвижна. Хотя лучше воспроизвести весь этот код у себя на компьютере, тогда сомнений не останется.

Рис. 67. Квадрат вращается, честное слово!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *