Javascript Webgl不绘制数组

我试图在画布上绘制正方形网格。数组中充满了顶点。但这一页仍然是空白的。似乎没有错误。多谢各位

    var canvas;
    var gl;
    var grid = [];

    var maxNumTriangles = 200;
    var maxNumVertices = 3 * maxNumTriangles;
    var index = 0;

    window.onload = function init() {
        canvas = document.getElementById("gl-canvas");
        gl = WebGLUtils.setupWebGL(canvas);
        if (!gl) { alert("WebGL isn't available"); }
        canvas.addEventListener("mousedown", function (event) {
            gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
            gridarray();
            document.write(grid[0]);
            gl.bufferSubData(gl.ARRAY_BUFFER, 8 * index, flatten(grid));

        });


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

        var program = initShaders(gl, "vertex-shader", "fragment-shader");
        gl.useProgram(program);


        var vBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, 8 * maxNumVertices, gl.STATIC_DRAW);

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

        var cBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
        //gl.bufferData(gl.ARRAY_BUFFER, 16 * maxNumVertices, gl.STATIC_DRAW);

        render();

    }

    function gridarray() {
        p = 10;

        for (var x = 0; x <= 500; x += 40) {
            var g = new Float32Array([0.5 + x + p, p]);
            var g1 = new Float32Array([0.5 + x + p, 500 + p]);
            grid.push(g);
            grid.push(g1);
        }


        for (var x = 0; x <= 500; x += 40) {
            var g = new Float32Array([p, 0.5 + x + p]);
            var g1 = new Float32Array([500 + p, 0.5 + x + p]);
            grid.push(g);
            grid.push(g1);
        }
    }
    function render() {

        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.LINES, 0, 20);
        window.requestAnimFrame(render);

    }
Fragment and Vertex shader

---

您应该发布可执行代码。如果看不到代码的其余部分，就很难判断出哪里出了问题

在我的头顶

• 扁平化的回报是什么
  我知道没有

  flatten

  会接受

  Float32Array

  s数组和 并返回一个

  Float32Array

  ，但我想您的是这样的

• 看起来你在传递像素坐标，但是

void main()
    {
    gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
    }