Пирамида не появляется на холсте WEB GL - PullRequest
Новая
       9

Пирамида не появляется на холсте WEB GL

0 голосов
/ 22 ноября 2018

Я пытаюсь создать на холсте два объекта: восьмиугольник и пирамиду.Восьмиугольник появляется без каких-либо проблем, а пирамида - нет.Я прилагаю код пирамиды. 

pyramidPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pyramidPositionBuffer);

let pyramidVerts = [
       0.0,  0.5,  0.0, //0
      -0.5,  0.0, -0.5, //1
       0.5,  0.0, -0.5, //2
       0.5,  0.0,  0.5, //3
      -0.5,  0.0,  0.5 //4
      ];

pyramidPositionBuffer.itemSize = 3;
pyramidPositionBuffer.numItems = 5;
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(pyramidVerts), gl.STATIC_DRAW);

pyramidColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pyramidColorBuffer);

let pyramidColors = [
        1.0, 1.0, 1.0, 1.0,
        1.0, 0.0, 0.0, 1.0,
        1.0, 1.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 1.0,
        0.0, 0.0, 1.0, 1.0
        ];

pyramidColorBuffer.itemSize = 4;
pyramidColorBuffer.numItems = 5;
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(pyramidColorBuffer),gl.STATIC_DRAWS);

pyramidIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, pyramidIndexBuffer);

let pyramidIndeces = [
        0, 1, 2,
        0, 2, 3,
        0, 3, 4,
        0, 4, 1
];

pyramidIndexBuffer.itemSize = 1;
pyramidIndexBuffer.numItems = 12;
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(pyramidIndeces), gl.STATIC_DRAW);

}

function drawScene() {
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

    mat4.identity(mvMatrix);

    mat4.translate(mvMatrix, [-1.5, 0.0, -6.5]); // We store a translation to our matrix, so when the first object is drawn it will be in that position.

    // Connect the attributes with the shaders and draw...
    gl.bindBuffer(gl.ARRAY_BUFFER,octagonPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, octagonPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
    gl.bindBuffer(gl.ARRAY_BUFFER, octagonColorBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, octagonColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, octagonIndexBuffer);

        setMatrixUniforms();
    gl.drawElements(gl.TRIANGLES, octagonIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);

    mat4.translate(mvMatrix, [2.8, 0.0, 0.0]);
    gl.bindBuffer(gl.ARRAY_BUFFER,pyramidPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, pyramidPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
    gl.bindBuffer(gl.ARRAY_BUFFER, pyramidColorBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, pyramidColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, pyramidIndexBuffer);

        setMatrixUniforms();
    gl.drawElements(gl.TRIANGLES, pyramidIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
}

Я создал пирамиду так же, как я создал восьмиугольник, но по какой-то причине он не появляется.Если я попытаюсь нарисовать восьмиугольник дважды, это не проблема.

1 Ответ

0 голосов
/ 22 ноября 2018

В строке 2 проблемы 

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(pyramidColorBuffer),gl.STATIC_DRAWS);

STATIC_DRAWS не является допустимой константой перечисления, правильное имя - STATIC_DRAW.В этом случае вы должны получить ошибку INVALID_ENUM .

pyramidColorBuffer - это буферный объект (pyramidColorBuffer = gl.createBuffer()), но не массив для общих данных атрибутов вершины.Имя массива pyramidColors.В этом случае вы должны получить ошибку INVALID_OPERATION .

Измените строку на 

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(pyramidColors), gl.STATIC_DRAW);

, чтобы решить проблему.

Включите универсальныйВ вашем коде отсутствуют массивы атрибутов вершин: 

gl.enableVertexAttribArray( shaderProgram.vertexPositionAttribute );
gl.enableVertexAttribArray( shaderProgram.vertexColorAttribute );

Но, возможно, этого нет только в фрагменте кода, который вы разместили в своем вопросе.

...