Question

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

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

感谢。

Answer 1

readPixels()应该做你想做的事。阅读http://www.khronos.org/registry/webgl/specs/latest/

中的WebGL规范中的更多内容

Answer 2

这是一个非常古老的问题，但我最近在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 3

是的，您可以读取原始像素数据。在获取webgl上下文时将preserveDrawingBuffer设置为true，然后再使用WebGL的readPixels。

var context = canvasElement.getContext("webgl", {preserveDrawingBuffer: true}
var pixels = new Uint8Array(4 * width * height);
context.readPixels(x, y, width, height, context.RGBA, context.UNSIGNED_BYTE, pixels)

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

3 个答案: