Следующим этапом добавим нашей сцене движения — пусть квадрат вертится вокруг своей оси.
Тут, возможно, многие будут разочарованы. Дело в том, что 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. Квадрат вращается, честное слово!
Добавить комментарий