Question

我是webgl的新手，并试图学习它。我正在尝试学习帧缓冲和渲染纹理，但我陷入困境。

我要做的是使用framebuffer将纹理的颜色（像素数据）复制到另一个纹理。我还有其他一些想法，比如在渲染到纹理等之前进行一些计算，但之后会这样做。

我创建了两个2x2纹理，在其中一个中添加了一些随机颜色，然后将其他颜色绑定到帧缓冲区。但我没有得到预期的产出。

顶点着色器

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]

如您所见，订单不一样。我想知道原因。

非常感谢任何帮助。感谢。

WebGL使用framebuffer渲染到纹理

0 个答案: