почему webgl отображает текстуру как полосу - PullRequest
Новая
       8

почему webgl отображает текстуру как полосу

0 голосов
/ 08 мая 2018

Я читаю гильдию программирования webgl и перехожу к главе 5, где я учусь отображать простую текстуру на квадре. Я копирую код из книги в свой проект. Но я получаю следующее result:

код прост. 

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;

    }

1 Ответ

0 голосов
/ 09 мая 2018

ошибка была найдена в следующем коде. Второй параметр должен быть назначен 2. webgl не может получить координату y, но тем самым я научился рисовать этот эффект. Спасибо за внимание. gl.vertexAttribPointer (a_TexCoord, 1, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);

...