Question

我试图将场景渲染两次，一次渲染到主帧缓冲区，一次渲染到纹理帧缓冲区。

我已经创建了我的纹理缓冲区，

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);

我正在换回＆＃39; n＆＃39;当我这样画时，

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);
})

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

Answer 1

OpenGL使用左下角作为原点而不是左上角，因此当您读取像素值时，所有内容都会颠倒翻转。 var y = canvas.height - coordinates [1] - 1;

纹理帧缓冲区数据不准确

1 个答案: