Webgl 不绘制数组

Question

我正在尝试在 canvas.The 数组上绘制正方形网格，该数组充满了顶点。但是页面仍然是空白的。似乎没有错误。谢谢

    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

属性 vec4 vPosition；空白主要的（） { gl_Position = v位置； }

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

Answer 1

你应该post 可执行代码。如果没有看到其余的代码，很难说出哪里出了问题。

我的头顶

什么是扁平化return？

我知道没有 flatten 需要一个 Float32Array 数组和并且 return 是 Float32Array 但我猜你的是？
看起来你传递的是像素坐标，但是 WebGL requires clip space coordinates.

Webgl 不绘制数组

Webgl does not draw array

javascript

webgl