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

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

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

谢谢。

来源

2011-05-30 Sean Kent

您真的得到了这个答案吗？你标记的答案看起来并不像是真的回答了问题。 – 2012-11-12 08:57:31

我想实际答案是否定的，你不能从缓冲区获取像素数据。你必须使用'readPixels（）'这是最接近我的答案，所以我接受了它。我应该不接受这个答案吗？ – 2012-11-20 20:25:04

我不认为这是必要的。除非有人提供更有用的答案，brainjam间接回答了你的问题。我只是好奇而已。 – 2012-11-20 22:02:35

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

来源

2014-03-22 14:50:49

readPixels()应该做你想做的。阅读更多的WebGL规范http://www.khronos.org/registry/webgl/specs/latest/

来源

2011-05-31 18:04:29 brainjam

谢谢，我会尝试。不幸的是，它看起来像我仍然需要调整大小的画布到我想要读取像素的大小。这会在调整大小时导致“闪光灯”。也许在屏幕外使用单独的背景，然后从中读取像素可能工作...？ – 2011-05-31 23:50:19

是的，使用一个单独的屏幕外上下文应该工作..但我没有尝试过。此外，您可以明显创建可用于渲染但不显示的辅助帧缓冲区。有关如何创建此类帧缓冲区并将其内容用作纹理的说明，请参阅http://learningwebgl.com/blog/?p=1786。希望这会让你走。 – brainjam 2011-06-01 02:52:14

我在webgl上下文中使用framebuffer作为纹理，但是我遇到的问题是将该数据从上下文中取出以在我的应用程序的其他地方使用。我已经有了独立的屏幕上下文sorta工作，所以我现在要去追寻这条路线。谢谢。 – 2011-06-01 15:41:10

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

回答

相关问题