Наконец-то 3D
По задумке художника, который пытается во мне проснуться, это будет основание для некой фигуры, и, как и положено основанию, оно должно лежать на полу (сейчас фигура стоит на ребре). Для этого мы используем еще один метод из арсенала gl-matrix:
Mat4.translate(mvMatrix, [-0.5, 0, -5.0]); mat4.rotate(mvMatrix, 60 * Math. PI / 180, [1, 0, 0]);
Понятно, что 60 здесь — угол поворота в градусах, а массив из трех чисел соответствует трем измерениям предполагаемой оси поворота.
Ну а чтобы опустить фигуру вниз изображения, где пьедесталу и место, просто изменяем параметры в функции mat4.translate:
Mat4.translate(mvMatrix, [-0.5, -1.75, -5.0]); mat4.rotate(mvMatrix, 68 * Math. PI / 180, [1, 0, 0]);
Результат — на рис. 65.
Рис. 65. Кладем многоугольник основанием вниз
Разовьем нашу сцену, нарисуем еще одну фигуру. Сначала, во избежание лишнего кода, чуть-чуть изменим вызов draw(). Для этого создадим глобальный объект Scene:
Var Scene
Здесь мы будем хранить все фигуры, подлежащие отрисовке. Соответственно, все их данные, включая перемещения и поворот, должны храниться там же.
Теперь рисуем фигуру — это будет квадрат:
Var cubeBuffer;
CubeBuffer = gl. createBuffer(): gl. bindBuffer(gl. ARRAY_BUFFER, cubeBuffer); vertices = [
];
Gl. bufferData(gl. ARRAY_BUFFER, new Float32Array(vertices), gl. STATIC_DRAW); cubeBuffer. itemSize = 3; cubeBuffer. numItems = 4;
Мы его, правда, назвали cube, но, как известно, плох тот rectangl, который не мечтает стать cube. Мы потом поможем этой мечте осуществиться, а пока раскрасим фигуру:
Var cubeColorBuffer = gl. createBuffer(); colors = [
0.5, 0.5, 1.0, 0.5,
0.5, 0.5, 1.0, 1.0,
0.0, 1.0, 1.0, 1.0,
0.0, 1.0, 1.0, 1.0,
];
Gl. bufferData(gl. ARRAY_BUFFER, new Float32Array(colors), gl. STATIC_DRAW); cubeColorBuffer. itemSize = 4; cubeColorBuffer. numItems = 4; cubeBuffer. colors = cubeColorBuffer;
Теперь поднимем и развернем квадрат лицом к наблюдателю:
CubeBuffer. translate = [ 0.0, 2.0, -1.0]: cubeBuffer. rotate. gr = -60;
CubeBuffer. rotate. os = [1, 0, 0];
Тут надо помнить, что контекст отрисовки фигуры надо отображать от предыдущего изображения, следовательно, нам пришлось разворачивать наш квадрат «обратно».
Результат можно видеть на рис. 66.
Добавить комментарий