WebGL - 从渲染缓冲区读取像素数据

Question

有没有办法从WebGL渲染缓冲区或屏幕外的帧缓冲区获取原始像素数据？

我正在使用WebGL进行一些图像处理,例如模糊图像,调整颜色等.我使用帧缓冲区渲染到完整图像大小的纹理,然后使用该纹理在视口中以较小的尺寸显示.我可以获取缓冲区或纹理的像素数据,以便在普通的canvas 2d上下文中使用它吗？或者我是否坚持将视口更改为完整图像大小并使用canvas.toDataURL()获取数据？

谢谢.

Answer 1

这是一个非常古老的问题,但我最近在three.js中寻找过相同的问题.没有直接的方法来渲染帧缓冲区,但实际上它是通过渲染到纹理(RTT)过程来完成的.我检查框架源代码并找出以下代码:

renderer.render( rttScene, rttCamera, rttTexture, true );

// ...

var width = rttTexture.width;
var height = rttTexture.height;
var pixels = new Uint8Array(4 * width * height); // be careful - allocate memory only once

// ...

var gl = renderer.context;
var framebuffer = rttTexture.__webglFramebuffer;
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);        
gl.viewport(0, 0, width, height);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

Answer 2

readPixels()应该做你想做的事.有关WebGL规范的更多信息,请访问http://www.khronos.org/registry/webgl/specs/latest/