WebGL：glDrawElements 导致“glDrawElements：尝试访问属性 0 中超出范围的顶点”答案

【问题标题】：WebGL: glDrawElements causes 'glDrawElements: attempt to access out of range vertices in attribute 0'WebGL：glDrawElements 导致“glDrawElements：尝试访问属性 0 中超出范围的顶点”
【发布时间】：2015-01-15 01:29:36
【问题描述】：

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

'glDrawElements: 尝试访问属性 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>

【问题讨论】：

标签： webgl

【解决方案1】：

嗯 - 我脸上多了个鸡蛋：问题出在 vertexData：

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 缺少简单的逗号，没有错误。应该仔细看看。

【讨论】：