webGL

Question

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

Error: WebGL warning: vertexAttribPointer: Bad type: NONE
Error: WebGL warning: drawArrays: no VBO bound to enabled vertex attrib index 1u!

我遵循了这个例子：Link

编辑：现在代码可以工作了，它应该显示一个彩色三角形 我的代码：

    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();

    }

看起来我已经完成了获取属性位置和指针的所有步骤，但它不起作用。我不明白如何在我使用 gl.bindBuffer 时不能绑定 VBO，它在绘制阶段仍应处于活动状态。

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：错误的“类型”：NONE

webGL - vertexAttribPointer: Bad `type`: NONE

javascript

vertex-shader