Question

我试图画一个简单的正方形，没什么特别的，但我最终还是

＆＃39; glDrawElements：尝试访问属性0＆＃39;

中超出范围的顶点

我指定了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：

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导致＆gt; glDrawElements：尝试访问属性0＆＃39;中的范围顶点。

1 个答案: