紋理幀緩衝區數據不準確

我試圖渲染我的場景兩次，一次到主幀緩衝區，一次到紋理幀緩衝區。紋理幀緩衝區數據不準確

我已經建立了我的紋理緩衝像這樣，

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

紋理幀緩衝區數據不準確

回答

相關問題