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

发布于 2024-11-10 09:43:19 字数 224 浏览 1 评论 0原文

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

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

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

遇见了你 2024-11-17 09:43:19

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

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

回复收藏 0 原文

渡你暖光 2024-11-17 09:43:19

readPixels() 应该做你想做的事。在 WebGL 规范中了解更多信息，请访问 http://www.khronos.org/registry/webgl /规格/最新/

回复收藏 0 原文

梦初启 2024-11-17 09:43:19

是的，您可以读取原始像素数据。在获取 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)

Yes, you can read raw pixel data. Set preserveDrawingBuffer as true while getting webgl context and afterwards make use of readPixels by WebGL.

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)

回复收藏 0 原文

~没有更多了~