WebGL - 从渲染缓冲区读取像素数据 [英] WebGL - reading pixel data from render buffer

问题描述

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

Is there a way to get the raw pixel data from a WebGL render buffer or frame buffer that is off screen?

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

I'm using WebGL to do some image processing, e.g. blurring an image, adjusting color, etc. I'm using frame buffers to render to textures at the full image size, then using that texture to display in the viewport at a smaller size. Can I get the pixel data of a buffer or texture so I can work with it in a normal canvas 2d context? Or am I stuck with changing the viewport to the full image size and grabbing the data with canvas.toDataURL()?

谢谢。

推荐答案

这是一个很老的问题，但我最近在three.js中找到了相同的。没有直接的方式来渲染到帧缓冲区，但实际上它是通过渲染到纹理（RTT）过程完成的。我检查框架源代码，并找出以下代码：

This is very old question, but I have looked for the same in three.js recently. There is no direct way to render to frame buffer, but actually it is done by render to texture (RTT) process. I check the framework source code and figure out the following code:

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

这篇关于WebGL - 从渲染缓冲区读取像素数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！