Анимация объектов с помощью WebGL

• Предыдущая
• Следующая

В этом примере мы будем вращать камеру. Таким образом, будет казаться, что мы вращаем квадрат. Сначала нам понадобятся переменные для отслеживания текущего вращения камеры.

let squareRotation = 0.0;
let deltaTime = 0;

Теперь нам нужно обновить функцию drawScene(), чтобы при отрисовке применять текущее вращение к камере. После перемещения камеры в начальную позицию для отрисовки квадрата, мы применяем вращение.

function drawScene(gl, programInfo, buffers, squareRotation) {

mat4.rotate(
  modelViewMatrix, // destination matrix
  modelViewMatrix, // matrix to rotate
  squareRotation, // amount to rotate in radians
  [0, 0, 1],
); // axis to rotate around

Это вращает матрицу modelView на текущее значение squareRotation, вокруг оси Z.

Для анимации нам нужно добавить код, который будет изменять значение squareRotation со временем.

let then = 0;

// Draw the scene repeatedly
function render(now) {
  now *= 0.001; // convert to seconds
  deltaTime = now - then;
  then = now;

  drawScene(gl, programInfo, buffers, squareRotation);
  squareRotation += deltaTime;

  requestAnimationFrame(render);
}
requestAnimationFrame(render);

Этот код использует requestAnimationFrame, чтобы попросить браузер вызывать функцию render в каждом кадре. requestAnimationFrame передаёт нам время в миллисекундах с момента загрузки страницы. Мы преобразуем его во секунды, а затем вычитаем из него последнее время, чтобы вычислить deltaTime, количество секунд, прошедших с момента рендеринга предыдущего кадра.

Наконец, мы обновляем squareRotation.

Посмотреть весь код | Открыть демонстрацию в новой странице

• Предыдущая
• Следующая