时间戳

首页 > 解决方案 > 金字塔未出现在画布 WEB GL 上

javascript - 金字塔未出现在画布 WEB GL 上

问题描述

我正在尝试在画布上创建两个对象，一个八边形和一个金字塔。八角形的出现没有任何问题，但金字塔却没有。我附上了金字塔的代码。

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);
}

我用与创建八角形相同的方式创建了金字塔，但由于某种原因它没有出现。如果我尝试画两次八边形，它没有问题。

标签： javascripthtmlcanvaswebgl

解决方案

该行有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 );

但可能这只在您在问题中发布的代码片段中丢失。

推荐阅读