Рисуем куб

Для начала, в функции initBuffers(), изменим информацию о вершинах и их цвете, а так же добавим индексы, которые помогут определить, как выводить треугольники.

function initBuffers() {
    vertices_buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertices_buffer);
    var vertices = [
        -1.0, -1.0,  1.0,
         1.0, -1.0,  1.0,
         1.0,  1.0,  1.0,
        -1.0,  1.0,  1.0,
        -1.0, -1.0, -1.0,
         1.0, -1.0, -1.0,
         1.0,  1.0, -1.0,
        -1.0,  1.0, -1.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

    color_buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
    var colors = [
        0.0, 1.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 1.0,
        0.0, 0.0, 1.0, 1.0,
        0.0, 0.0, 1.0, 1.0,
        0.0, 0.0, 1.0, 1.0,
        0.0, 0.0, 1.0, 1.0
    ];
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( colors ), gl.STATIC_DRAW );

    index_buffer = gl.createBuffer();
    gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, index_buffer );
    var indices = [
        0, 1, 2,    2, 3, 0,
        2, 6, 7,    7, 3, 2,
        0, 1, 5,    5, 4, 0,
        6, 5, 4,    4, 7, 6,
        1, 5, 6,    6, 2, 1,
        0, 4, 7,    7, 3, 0
    ];
    gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW );
}

Далее изменим функцию initBuffers(). Для того чтобы вывести куб, воспользуемся командой drawElements(). Следует отметить, что значение переменной vertices равно размеру массива indices.

function drawScene(delta) {
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    perspectiveMatrix = makePerspective(45, 600.0/400.0, 0.1, 100.0);
    loadIdentity();
    mvPushMatrix();
    mvTranslate([-0.0, 0.0, -6.0]);
    mvRotate(sqrRot, [1, 0, 0.7]);

    gl.bindBuffer(gl.ARRAY_BUFFER, vertices_buffer);
    gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vertexPositionAttribute);

    gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
    gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vertexColorAttribute);

    gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, index_buffer );

    setMatrixUniforms();
    var vertices = 36;
    gl.drawElements( gl.TRIANGLES, vertices, gl.UNSIGNED_SHORT, 0 );

    mvPopMatrix();
    sqrRot -= delta * 40;
}

Ниже представлен результат работы программы.

Please use a browser that supports "canvas"

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