纹理帧缓冲区数据不准确

texture frame buffer data inaccurate

本文关键字：不准确 数据 缓冲区 纹理      更新时间：2023-09-26

我正在尝试渲染我的场景两次，一次渲染到主帧缓冲区，一次渲染到纹理帧缓冲区。

我像这样创建了我的纹理缓冲区，

var rttFramebuffer;
var rttTexture;
rttFramebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);
rttFramebuffer.width = canvas.clientWidth;
rttFramebuffer.height = canvas.clientHeight;
rttTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, rttTexture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
gl.generateMipmap(gl.TEXTURE_2D);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, rttFramebuffer.width, rttFramebuffer.height, 0, gl.RGBA, gl.FLOAT, null);
var renderbuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, rttFramebuffer.width, rttFramebuffer.height);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, rttTexture, 0);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuffer);
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

当我这样画画时，我正在交换"n"，

gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);
drawMain(canvasOverlay, params);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
drawMain(canvasOverlay, params);

并像这样渲染，

function drawMain(canvasOverlay, params) {
    gl.clear(gl.COLOR_BUFFER_BIT);
    pixelsToWebGLMatrix.set([2 / canvas.width, 0, 0, 0, 0, -2 / canvas.height, 0, 0, 0, 0, 0, 0, -1, 1, 0, 1]);
    gl.viewport(0, 0, canvas.width, canvas.height);
    // -- set base matrix to translate canvas pixel coordinates -> webgl coordinates
    mapMatrix.set(pixelsToWebGLMatrix);
    var bounds = leafletMap.getBounds();
    var topLeft = new L.LatLng(bounds.getNorth(), bounds.getWest());
    var offset = LatLongToPixelXY(topLeft.lat, topLeft.lng);
    // -- Scale to current zoom
    var scale = Math.pow(2, leafletMap.getZoom());
    scaleMatrix(mapMatrix, scale, scale);
    translateMatrix(mapMatrix, -offset.x, -offset.y);
    // -- attach matrix value to 'mapMatrix' uniform in shader
    gl.uniformMatrix4fv(u_matLoc, false, mapMatrix);
    gl.drawElements(gl.LINES, numPoints, gl.UNSIGNED_INT, 0);
}

但是当我单击主画布并检查值时，它们与屏幕上的内容不匹配，

d3.select('.leaflet-heatmap-layer').on('click', function() {
    var coordinates = [0, 0];
    coordinates = d3.mouse(this);
    var x = coordinates[0];
    var y = coordinates[1];
    console.log(coordinates);
    gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);
    if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE) {
        console.log("FRAMEBUFFER_COMPLETE")
        var pixels = new Float32Array(4);
        gl.readPixels(x, y, 1, 1, gl.RGBA, gl.FLOAT, pixels);
        console.log(pixels);
    }
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
})

我得到的值与我的预期相似 - 一些透明的区域返回颜色，而一些应该有颜色的区域返回空。我做错了什么？

OpenGL 使用左下角而不是左上角作为原点，因此当您读取像素值时，所有内容都被颠倒了。var y = 帆布高度 - 坐标[1] - 1;

相关文章：