WebGL 呈现大量元素的 Float32Array，在属性 0 错误中显示超出范围的顶点

Question

我正在尝试生成一个将被递归细分的三角形。每次递归后，我都会将这些点推送到一个数组中。退出递归后，我正在渲染三角形。但是我收到以下警告

[.WebGLRenderingContext-008E98C8]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 0

这是我在 javascript

中的代码

var canvas=document.getElementById("painter");
var gl;
var points = [];
var NumTimesToSubdivide = 5;
try
{
    gl=canvas.getContext("experimental-webgl");
}catch(e)
{
    alert("WebGL not supported");
}
// Create Shaders

var shader_vertex_source="\n\
attribute vec4 vPosition;\n\
void main(void)\n\
{\n\
    gl_Position=vPosition;\n\
}\n\
";

var shader_fragment_source="\n\
precision mediump float;\n\
void main(void)\n\
{\n\
    gl_FragColor=vec4(1.0,0,0.0,1);\n\
}\n\
";

var vertices = [
         [-1, -1],
         [0,  1],
         [1, -1] 
    ];

divideTriangle( vertices[0], vertices[1], vertices[2],
                    NumTimesToSubdivide);

gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 0.0, .5, .5, 1.0 );

var get_shader=function(shadersource,shadertype)
{
    var shader=gl.createShader(shadertype);
    gl.shaderSource(shader,shadersource);
    gl.compileShader(shader);
    return shader;
}

var vertex_shader=get_shader(shader_vertex_source,gl.VERTEX_SHADER);
var fragment_shader=get_shader(shader_fragment_source,gl.FRAGMENT_SHADER);

var program=gl.createProgram();
gl.attachShader(program,vertex_shader);
gl.attachShader(program,fragment_shader);

gl.linkProgram(program);
gl.useProgram(program);

var buffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(points),gl.STATIC_DRAW);

var position=gl.getAttribLocation(program,"vPosition");
gl.vertexAttribPointer(position,2,gl.FLOAT,false,0,0);
gl.enableVertexAttribArray(position);

console.log(points);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS,0,points.length);
function triangle( a, b, c )
{
    points.push( a, b, c );
}

function divideTriangle( a, b, c, count )
{

    // check for end of recursion

    if ( count === 0 ) {
      //  console.log(a[0]+"   \t"+b[0]+"\n");
        triangle( a[0], a[1], b[0] );
        triangle( b[1], c[0], c[1] );
    }
    else {

        //bisect the sides

        var ab = [(a[0]+b[0])/2,(a[1]+b[1])/2];
        var ac = [(a[0]+c[0])/2,(a[1]+c[1])/2];
        var bc = [(b[0]+c[0])/2,(b[1]+c[1])/2];
       // console.log(ac[0]+" "+ac[1]+" "+"\n" )

        --count;

        // three new triangles

        divideTriangle( a, ab, ac, count );
        divideTriangle( c, ac, bc, count );
        divideTriangle( b, bc, ab, count );
    }
}

这是我正在使用的jsfiddle。谁能帮我找出问题所在？

Answer 1

我将其更改为 gl.drawArrays(gl.TRIANGLES,0,points.length/2);，它呈现：http://jsfiddle.net/4Lbb78vs/1。 /2 是因为它需要绘制唯一顶点的数量，并且您在 gl.vertexAttribPointer(position,2,gl.FLOAT,false,0,0);

中指定每个顶点需要 2 个数据点

WebGL 呈现大量元素的 Float32Array，在属性 0 错误中显示超出范围的顶点

WebGL rendering an Float32Array of a lot of elements showing out of range vertices in attribute 0 error

webgl