Отрисовка сцены

В предыдущих статьях мы разобрались, как инициализируются WebGL контекст, шейдеры и вершинный буфер. Теперь мы разберёмся, как выполнить рендеринг нашего объекта. Рассмотрим функцию drawScene() представленную ниже.

function drawScene() {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  perspectiveMatrix = makePerspective(45, 600.0/400.0, 0.1, 100.0);
  loadIdentity();
  mvTranslate([-0.0, 0.0, -6.0]);
  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
  setMatrixUniforms();
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}

Команда clear() очищает буфер цвета и буфер глубины. Следующим шагом мы создаём матрицу перспективы с углом обзора в 45 градусов, соотношением сторон 600:400, а так же с областью видимости от 0.1 до 100 (относительно наблюдателя).

Функция loadIdentity() агружает единичную матрицу. Затем, используя функцию mvTranslate(), перемещаем объект на 6 единиц от наблюдателя. Командой bindBuffer() делаем буфер нашего объекта текущим. Затем мы устанавливаем указатель на чтение из буфера вершин.

И наконец, командой drawArrays() рисуем квадрат. Параметр TRIANGLE_STRIP говорит, что надо выводить серию связанных треугольников. Второй параметр задаёт индекс первой вершины. Третий параметр задаёт число выводимых вершин.

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