Объем

Все достигнутое неплохо, но, строго говоря, обычно в 3D-сцене не место плоскому квадрату (пусть даже цветному и вращающемуся), поэтому на следующем этапе мы сделаем из него куб.

Сначала зададим его координаты:

Var cubeBuffer = gl. createBuffer(); gl. bindBuffer(gl. ARRAY_BUFFER, cubeBuffer);

Vertices = [

Front face -0.3, -0.3,  0.3,

0.3, -0.3,  0.3,

0.3,  0.3,  0.3,

-0.3,  0.3,  0.3,

Back face -0.3, -0.3, -0.3,

-0.3,  0.3,  -0.3,

0.3,  0.3,  -0.3,

0.3, -0.3, -0.3,

Top face -0.3,  0.3,  -0.3,

-0.3,  0.3,  0.3,

0.3,  0.3,  0.3,

0.3,  0.3,  -0.3,

Bottom face -0.3, -0.3, -0.3,

0.3, -0.3, -0.3,

0.3, -0.3,  0.3,

-0.3, -0.3,  0.3,

Right face 0.3,  -0.3,  -0.3,

0.3,  0.3,  -0.3,

0.3,  0.3,  0.3,

0.3,  -0.3,  0.3,

Left face -0.3, -0.3, -0.3,

-0.3, -0.3,  0.3,

-0.3,  0.3,  0.3,

-0.3,  0.3,  -0.3

];

Тут все ясно — мы просто задаем координаты шести граней куба. Хотя некоторые пояснения наверняка требуются.

Всего нам нужно нарисовать шесть граней. Все они рисуются по порядку, против часовой стрелки. Первая точка расположена справа вверху, вторая точка — слева вверху, третья точка — слева внизу и т. д. Последняя точка — справа внизу. Следует учесть, что при отри-совке тыльной стороны направление «против часовой» со стороны наблюдателя будет выглядеть как прямо противоположное.

Теперь куб нарисован, что дальше?

Параметр numItems у нас изменится — «Items» стало зримо больше!

Gl. bufferData(gl. ARRAY_BUFFER, new Float32Array(vertices), gl. STATIC_DRAW); cubeBuffer. itemSize = 3; cubeBuffer. numItems = 24;

Теперь цвета:

CubeColorBuffer = gl. createBuffer(); gl. bindBuffer(gl. ARRAY_BUFFER, cubeColorBuffer); colors = [

[1

0,

0

0,

0

0,

1.0]

Front

Face

[1

0,

1

0,

0

0,

1.0]

Back

Face

[0

0,

1

0,

0

0,

1.0]

Top face

[1

0,

0

5,

0

5,

1.0]

Bottom face

[0

3,

1

0,

1

0,

1.0]

Right

Face

[0

0,

0

0,

1

0,

1.0]

Left

Face

];

Var unpackedColors = []; for (var i in colors) { var color = colors[i]; for (var j=0; j < 4; j++) {

UnpackedColors = unpackedColors. concat(color);

}

}

Gl. bufferData(gl. ARRAY_BUFFER, new Float32Array(unpackedColors), gl. STATIC_DRAW); cubeColorBuffer. itemSize = 4; cubeColorBuffer. numItems = 24;

Тут тоже все логично. Теперь введем новую сущность — индексный буфер:

CubeIndexBuffer = gl. createBuffer(); gl. bindBuffer(gl. ELEMENT_ARRAY_BUFFER, cubeIndexBuffer); var cubeVertexIndices = [

0, 1, 2,  0,  2,  3,   Front  face

4,

5,

6,

4,

6,

7,

Back face

8,

9,

10,

8,

10,

11,

Top face

12,

13,

14,

12,

14,

15,

Bottom face

16,

17,

18,

16,

18,

19,

Right face

20,

21,

22,

20,

22,

23

Left face

];

Gl. bufferData(gl. ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl. STATIC_DRAW); cubeIndexBuffer. itemSize = 1; cubeIndexBuffer. numItems = 36;

Эту конструкцию поясним чуть позже, а пока рисуем:

Mat4.translate(mvMatrix, cubeBuffer. translate); mvPushMatrix();

Mat4.rotate(mvMatrix, rCube * Math. PI / 180, [0, 1, 0]); gl. bindBuffer(gl. ARRAY_BUFFER, cubeBuffer);

Gl. vertexAttribPointer(shaderProgram. vertexPositionAttribute, cubeBuffer. itemSize, gl. FLOAT, false, 0, 0);

Gl. bindBuffer(gl. ARRAY_BUFFER, cubeBuffer. colors);

Gl. vertexAttribPointer(shaderProgram. vertexColorAttribute, cubeBuffer. colors. itemSize, gl. FLOAT, false, 0, 0); gl. bindBuffer(gl. ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); setMatrixUniforms();

Gl. drawElements(gl. TRIANGLES, cubeVertexIndexBuffer. numItems, gl. UNSIGNED_SHORT, 0); mvPopMatrix();

Теперь смотрим результат (рис. 68). Вращение, разумеется, никуда не делось.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *