Дополнительно о матрицах в WebGL

В предыдущем примере была опробована лишь небольшая толика возможных операций с матрицами, однако показан общий принцип использования, который во многих случаях будет оставаться неизменным.

Установка камеры

Чтобы прочувствовать, что у нас не прямоугольник, а куб, в предыдущем примере мы повернули этот самый куб на определенное количество градусов и еще сместили его по оси Z. Но есть еще и другая стратегия. Мы можем не куб поворачивать или перемещать, а можно устанавливать камеру в определенное место и направлять ее определенным образом, вращать и т.д. То есть можно менять не свойства объекта, а свойства точки обзора.

Для установки камеры в библиотеке glMatrix используется функция mat4.lookAt(matrix, eye, center, up). Она принимает следующие параметры:

• matrix: матрица модели, которая меняется от изменения свойств камеры

• eye: позиция камеры

• center: точка, на которую направлена камера

• up: вектор вертикальной ориентации

Посмотрим на примере. Для этого используем пример из прошлого параграфа, изменив так только одну функцию setupWebGL():

function setupWebGL()
{
	gl.clearColor(0.0, 0.0, 0.0, 1.0); 	
	gl.clear(gl.COLOR_BUFFER_BIT); 	
				
	gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
	mat4.perspective(pMatrix, Math.PI/2, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0);
	mat4.identity(mvMatrix);
	mat4.lookAt(mvMatrix, [2, 0,-2], [0,0,0], [0,1,0]);	
}

Здесь никакого вращения или перемещения. Камера устанавливается в точку пространства с координатами (2, 0,-2) и направлена на точку пространства (0, 0, 0). Направить камеру можно на любую точку пространства. И затем устанавливается вектор вертикальной ориентации.

Операции с матрицами

Мы уже рассмотрели выше две операции с матрицами - перемещение и вращение.

Для перемещения применяется метод mat4.translate(output, input, vec), где output - итоговая выходная матрица, которая получается после перемещения матрицы input на трехмерный вектор vec. Например, mat4.translate(mvMatrix, mvMatrix,[0, 0, -2.0]); - перемещение матрицы mvMatrix на 2.0 назад по оси Z.

Для вращения применяется метод mat4.rotate(output, input, rad, axis), где output - также итоговая матрица, которая получается поворотом матрицы input на угол rad (в радианах) вокруг оси axis. Например, mat4.rotate(mvMatrix, mvMatrix, Math.PI/2, [1, 0, 0]) - здесь мы поворачиваем матрицу mvMatrix на 90 градусов вокруг оси X.

Мы можем не указывать вектор, а воспользоваться специальными методами: mat4.rotateX(output, input, rad), mat4.rotateY(output, input, rad) и mat4.rotateZ(output, input, rad)

Кроме этих операций мы можем применить масштабирование с помощью метода mat4.scale(output, input, vec). Вектор vec указывает масштаб, на который изменяются значения матрицы input. Например, mat4.scale(mvMatrix, mvMatrix, [0.5, 1, 1]) - здесь мы сжимаем значения объекта по оси Х, то есть уменьшаем ширину в 2 раза.