为什么webgl显示纹理像条纹

Question

我正在阅读webgl编程公会，然后进入第5章，在那里我学习如何在quad上显示简单的纹理。我将代码从书本复制到我的项目中。但我得到以下内容：

代码很简单。

shader.frag
    precision mediump float;
    uniform sampler2D u_Sampler;
    varying vec2 v_TexCoord;
    void main() {
        gl_FragColor = texture2D(u_Sampler, v_TexCoord);
    }
shader.vert

    attribute vec4 a_Position;
    attribute vec2 a_TexCoord;
    varying vec2 v_TexCoord;
    void main() {
        gl_Position = a_Position;
        v_TexCoord = a_TexCoord;
    }

这是initTexture函数。

    function initTexture(gl, img) {
        let texture = gl.createTexture();
        if (!texture) {
            console.log('Failed to create the texture object');
            return false;
        }
        let u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');
        if (!u_Sampler) {
            console.log('Failed to get the storage location of u_Sampler');
            return false;
        }
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);
        gl.uniform1i(u_Sampler, 0);
        return true;


    }

这是initVertex缓冲区函数，本书使用一个缓冲区作为顶点坐标和纹理坐标。直接从书中复制坐标。所以看来是对的。

function initVertexBuffers(gl) {

        var verticesTexCoords = new Float32Array([
            -0.5, 0.5,  0.0, 1.0,
            -0.5, -0.5, 0.0, 0.0,
             0.5, 0.5,  1.0, 1.0,
             0.5, -0.5, 1.0, 0.0,
        ]);
        let n = 4; // The number of vertices

        let vertexTexCoordBuffer = gl.createBuffer();
        if (!vertexTexCoordBuffer) {
            console.log('Failed to create the buffer object');
            return -1;
        }

        gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);

        let FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;

        let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
        if (a_Position < 0) {
            console.log('Failed to get the storage location of a_Position');
            return -1;
        }
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0);
        gl.enableVertexAttribArray(a_Position);  // Enable the assignment of the buffer object

        let a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');
        if (a_TexCoord < 0) {
            console.log('Failed to get the storage location of a_PointSize');
            return -1;
        }
        gl.vertexAttribPointer(a_TexCoord, 1, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);
        gl.enableVertexAttribArray(a_TexCoord);  // Enable buffer allocation


        gl.bindBuffer(gl.ARRAY_BUFFER, null);

        return n;

    }

Answer 1

在以下代码中找到了错误。应该分配第二个参数2. webgl不能获得y坐标，但因此我学会了如何绘制这个效果。感谢您的关注。 gl.vertexAttribPointer（a_TexCoord，1，gl.FLOAT，false，FSIZE * 4，FSIZE * 2）;