WebGL：glDrawElements 导致 'glDrawElements: attempt to access out of range vertices in attribute 0'

Question

我正在尝试画一个简单的正方形，没有什么特别的，但我最终得到了

'glDrawElements: attempt to access out of range vertices in attribute 0'

我指定了 4 个索引并使用索引缓冲区来引用它们。如果我将 icount 更改为 3，我会得到第一个三角形，但值为 6 会导致引用错误。

引用的类VertexShader、FragmentShader、Program和Environment都是简单的util类，程序编译时不报错

TIA ...

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="glx" width="400" height="400"></canvas>

<script type="text/javascript" src="../vendor/gl-matrix/gl-matrix.js"></script>
<script type="text/javascript" src="../vendor/underscore/underscore-min.js"></script>

<script type="text/javascript" src="../lib/GLObject.js"></script>
<script type="text/javascript" src="../lib/Environment.js"></script>
<script type="text/javascript" src="../lib/Shader.js"></script>
<script type="text/javascript" src="../lib/Program.js"></script>


<script type="x-shader/vertex" id="vshader">
        attribute vec4 a_position;
        //attribute vec4 a_colour;
        varying vec4 v_colour;

        void main() {
            gl_Position = a_position;
            v_colour = vec4(1.0, 0.0, 0.0, 1.0);
        }


</script>

<script type="x-shader/fragment" id="fshader">
        precision mediump float;

        varying vec4 v_colour;

        void main() {
            gl_FragColor = v_colour;
        }


</script>

<script type="text/javascript">

    var
        program, vshader, fshader,
        gl, p, env,// gl, program instance and environment info
        vertexData, indexData, // typed arrays for the vertex and index data
        vbuffer,    // vertex positions buffer
        ibuffer     // index buffer
        ;

    gl = glx.getGL('glx');
    env = new glx.Environment(gl);


    vshader = new glx.VertexShader(gl, 'vshader');
    fshader = new glx.FragmentShader(gl, 'fshader');

    program = new glx.Program(gl, vshader, fshader);

    program.compile();

    p = program.getProgram();
    gl.useProgram(p);

    vbuffer = gl.createBuffer();
    ibuffer = gl.createBuffer();

    // setup buffers
    vertexData = new Float32Array([
       -0.5, 0.5, -0.5,
        -0.5, -0.5, -0.5,
        0.5, -0.5, -0.5,
        0.5, 0.5 -0.5
    ]);

    indexData = new Uint8Array([
       0, 1, 2,
       0, 2, 3
    ]);

    gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);

    // get program attributes
    var fsize = Float32Array.BYTES_PER_ELEMENT;
    var a_position = gl.getAttribLocation(p, 'a_position');
    gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, fsize * 3, 0);
    gl.enableVertexAttribArray(a_position);

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
    var icount = indexData.length;

    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, icount, gl.UNSIGNED_BYTE, 0);


</script>


</body>
</html>

Answer 1

好吧 - 我脸上有更多鸡蛋：问题出在顶点数据中：

vertexData = new Float32Array([ -0.5, 0.5, -0.5, -0.5, -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5 -0.5 ]);

特别是 0.5 -0.5 没有错误地缺少简单的逗号。应该再仔细看一下。

WebGL：glDrawElements 导致 'glDrawElements: attempt to access out of range vertices in attribute 0'

WebGL: glDrawElements causes 'glDrawElements: attempt to access out of range vertices in attribute 0'

webgl