WebGL рендерится в текстуру с помощью кадрового буфера

Question

Я новичок в WebGL и пытаюсь научиться этому. Я пытаюсь изучить кадровый буфер и рендеринг в текстуру, но я застрял.

Я пытаюсь скопировать цвета (данные пикселей) текстуры в другую текстуру с помощью кадрового буфера. Я имею в виду некоторые другие вещи, такие как выполнение некоторых вычислений до рендеринга в текстуру и т. Д., Но сделаю это позже.

Я создал две текстуры 2х2, поместил несколько случайных цветов в одну из них и связал другую с кадровым буфером. Но я не получаю ожидаемый результат.

Вершинный шейдер

precision mediump float;

attribute vec2 a_texcoord;
varying vec2 v_texcoord;

void main() {
    // Convert texture coordinate to render coordinate
    gl_Position = vec4(2.0 * a_texcoord.x - 1.0, 1.0 - 2.0 * a_texcoord.y, 0, 1);
    gl_PointSize = 1.0;
    v_texcoord = a_texcoord;
}

Фрагмент шейдера

precision mediump float;

uniform sampler2D u_texture;
varying vec2 v_texcoord;

void main() {
    vec4 data = texture2D(u_texture, v_texcoord);
    gl_FragColor = data;
}

Javascript

var canvas = document.getElementById("canvas");

// WebGL context
var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
if (!gl) {
    console.log("WebGL not supported");
}

// Set canvas dimensions
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Create program with shaders
var program = glUtils.createProgram(gl, 'vshader', 'fshader');

// Texture dimensions
var textureWidth = 2,
    textureHeight = 2;

// Texture coordinates
var coords = [];
for (var i = 0; i < textureWidth; ++i) {
    for (var j = 0; j < textureHeight; ++j) {
        coords.push(i / textureWidth, j / textureHeight);
    }
}

// Random colors for texture
var d = [];
for (var i = 0; i < textureWidth * textureHeight; ++i) {
    d.push(
        Math.floor(Math.random() * 256),
        Math.floor(Math.random() * 256),
        Math.floor(Math.random() * 256),
        Math.floor(Math.random() * 256)
    );
}

// Texture with random colors
var data = new Uint8Array(d);
var texture0 = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture0);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, textureWidth, textureHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.bindTexture(gl.TEXTURE_2D, null);

// Texture to render to
var texture1 = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture1);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, textureWidth, textureHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.bindTexture(gl.TEXTURE_2D, null);

// Framebuffer
var fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture1, 0);

// Program
gl.useProgram(program);

// Bind texture0
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture0);
gl.uniform1i(program.uniforms.u_texture, 0);

// Bind framebuffer
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture1, 0);

// Set coordinate array
sendCoords(program);

// Set WebGL viewport
setupViewport(gl, textureWidth, textureHeight);

// Clear
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// Draw
gl.drawArrays(gl.POINTS, 0, textureWidth * textureHeight);

// Read pixels
var pixels = new Uint8Array(textureWidth * textureHeight * 4);
gl.readPixels(0, 0, textureWidth, textureHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
gl.deleteFramebuffer(fb);
console.log(pixels);

// Enable and bind data to attribute for the texture coordinates
function sendCoords(program) {
    var coordBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, coordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(coords), gl.STATIC_DRAW);

    gl.vertexAttribPointer(
        program.attribs.a_texcoord,
        2,
        gl.FLOAT,
        gl.FALSE,
        0,
        0
    );
    gl.enableVertexAttribArray(program.attribs.a_texcoord);
}

// Viewport setup
function setupViewport(gl, width, height) {
    gl.viewport(0, 0, width, height);
}

Я ожидаю точно такие же данные, что у меня есть в texture0 но не получая это в gl.readPixels(), Возможно я делаю неправильные вычисления.

Обновить:

Вот примеры данных, чтобы прояснить мою проблему.

// Texture coordinates
[0,   0,
 0,   0.5,
 0.5, 0,
 0.5, 0.5]

// Random colors to copy from
[197, 103, 13, 0,
 199, 17,  0,  18,
 61,  177, 5,  14,
 15,  72,  18, 10]

// Data getting by gl.readPixels()
[61,  177, 5,  14,
 15,  72,  18, 10,
 197, 103, 13, 0,
 199, 17,  0,  18]

Как видите, порядок не тот же. Я хотел бы знать, почему.

Любая помощь приветствуется. Благодарю.