Question

我似乎无法弄清楚为什么我的代码无效。当我运行它时，我得到了这些错误：

错误：WebGL警告：vertexAttribPointer：错误type：无错误：WebGL警告：drawArrays：没有VBO绑定到启用顶点attrib索引1u！

我按照这个例子：Link

编辑：现在代码有效，它应该显示一个彩色三角形 mycode的：

    var gl;
    var shaderProgram;

    var triangleVertices = 
    [ // X, Y,       R, G, B
            0.0, 0.5,    1.0, 1.0, 0.0,
            -0.5, -0.5,  0.7, 0.0, 1.0,
            0.5, -0.5,   0.1, 1.0, 0.6
    ];
    var triangleVertexBufferObject;
    var positionAttribLocation;
    var colorAttribLocation;


    var vertShaderCode = 'precision mediump float;'+
                'attribute vec2 vertPosition;'+
                'attribute vec3 vertColor;'+
                'varying vec3 fragColor;'+
                'void main()'+
                '{'+
                '  fragColor = vertColor;'+
                '  gl_Position = vec4(vertPosition, 0.0, 1.0);'+
                '}';

    var fragShaderCode =
            'precision mediump float;'+
            'varying vec3 fragColor;'+
            'void main()'+
            '{'+
            '  gl_FragColor = vec4(fragColor, 1.0);'+
            '}';


    function initGL(canvas) {
        try {
            gl = canvas.getContext("webgl");
            gl.viewportWidth = canvas.width;
            gl.viewportHeight = canvas.height;
        } catch (e) {
        }
        if (!gl) {
            alert("Could not initialise WebGL, sorry :-(");
        }
    }




    function initShaders() {
        var fragmentShader = getShader(fragShaderCode, gl.FRAGMENT_SHADER);
        var vertexShader = getShader(vertShaderCode, gl.VERTEX_SHADER);

        shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);

        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
            alert("Could not initialise shaders");
        }




    }



    function initBuffers() {
        triangleVertexBufferObject = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferObject);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

        positionAttribLocation = gl.getAttribLocation(shaderProgram, "vertPosition");
        colorAttribLocation = gl.getAttribLocation(shaderProgram, "vertColor");

        gl.vertexAttribPointer(
            positionAttribLocation, // attribute location
            2, //number of elements per attribute
            gl.FLOAT, // type of element
            gl.FALSE,
            5 * Float32Array.BYTES_PER_ELEMENT,//size of induvidual vertex
            0//offset from the beginning of a single vertex to this attribute
            );
        gl.vertexAttribPointer(
            colorAttribLocation,
            3,
            gl.FLOAT,
            gl.FALSE,
            5 * Float32Array.BYTES_PER_ELEMENT,
            2 * Float32Array.BYTES_PER_ELEMENT
        );
        gl.enableVertexAttribArray(positionAttribLocation);
        gl.enableVertexAttribArray(colorAttribLocation);
    }


    function drawScene() {
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES, 0/*verts to skip*/, 3/*verts to draw*/);

    }


    function getShader(code, type){
        var shader = gl.createShader(type);
        gl.shaderSource(shader, code);
        gl.compileShader(shader);
        return shader; 
    }



    this.start = function(spritesCompiledDone, scriptsCompiledDone, roomsCompiledDone, customObjectsCompiledDone, soundsCompiledDone, currentIdGen){
        document.body.style.cursor = "auto";
        var canvas = document.createElement("canvas");
        canvas.width = 640;
        canvas.height = 480;
        canvas.style.position = "fixed";
        canvas.style.top = "0px";
        canvas.style.left = "0px";
        document.body.appendChild(canvas);
        initGL(canvas);
        initShaders();
        initBuffers();
        gl.useProgram(shaderProgram);

        gl.clearColor(0.2, 0.1, 0.7, 1.0);

        drawScene();

    }

看起来我已经完成了获取属性位置和指针的所有步骤，但它不起作用。我不明白VBO是如何绑定的，因为我使用了gl.bindBuffer，它应该在绘制阶段仍然有效。

Answer 1

您应该更改以下内容：

function initBuffers() {
    triangleVertexBufferObject = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferObject);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

    positionAttribLocation = gl.getAttribLocation(shaderProgram, "vertPosition");
    colorAttribLocation = gl.getAttribLocation(shaderProgram, "vertColor");

    gl.vertexAttribPointer(
        positionAttribLocation, // attribute location
        2, //number of elements per attribute
        gl.FLOAT, // type of element
        gl.FALSE, // to => false,
        5 * Float32Array.BYTES_PER_ELEMENT,//size of induvidual vertex
        0//offset from the beginning of a single vertex to this attribute
        );
    gl.vertexAttribPointer(
        colorAttribLocation,
        3,
        gl.Float, //to => gl.FLOAT,
        gl.False, //to => false,
        5 * Float32Array.BYTES_PER_ELEMENT,
        5 * Float32Array.BYTES_PER_ELEMENT //to => 2 * Float32Array.BYTES_PER_ELEMENT
    );
    gl.enableVertexAttribArray(positionAttribLocation);
    gl.enableVertexAttribArray(colorAttribLocation);
}

webGL - vertexAttribPointer：Bad`type`：NONE

1 个答案: