纹理帧缓冲区数据不准确

我试图渲染我的场景两次，一次到主帧缓冲区，一次到纹理帧缓冲区。纹理帧缓冲区数据不准确

我已经建立了我的纹理缓冲像这样，

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

我得到的值与我所期望的相似 - 某些区域是透明的，它们会返回颜色，而一些应该有颜色的区域会返回空白。我究竟做错了什么？

来源

2016-02-12 sumarlidason

你能提供一个与这个例子的链接吗？ – Qbic

肯定的事情; http://sumarlidason.com/perm/stackoverflow/我禁用平移导致我只是试图让阅读工作。在地图上点击以获取纹理的值可以发现某些东西已关闭。 – sumarlidason

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

来源

2016-02-17 21:38:02 sumarlidason

纹理帧缓冲区数据不准确

回答

相关问题