在 WebGL 上访问图像/纹理数据(纹素) [英] Accessing image/texture data (texels) on WebGL

问题描述

我在 WebGL 上有以下代码片段:

I have the following code snippet on WebGL:

var texture = gl.createTexture();
texture.image = new Image();
texture.image.onload = function() { 
     .... // I want to read the pixels once the image has been loaded
};
texture.image.src = urlImage;

我想在加载后获取纹理贴图的内容 (RGBA).类似的， readPixels() 获取绘图缓冲区内容的能力.

I want to obtain the contents (RGBA) of the texture map once it has been loaded. Similar, capability of readPixels() to obtain the contents of the drawing buffer.

有可能吗?如果是这样，最好的方法是什么?

Is it possible? If so, what's the best to do it?

我正在使用 Chrome Canary 版本进行开发.

I am using Chrome Canary build for my development.

预先感谢您的帮助.

注意:在 http://www.khronos 上交叉发布.org/message_boards/viewtopic.php?f=43&t=3439

推荐答案

您可以创建一个 framebuffer 支持通过纹理，然后使用 readPixels() 获取原始 RGBA 数据.

You can create a framebuffer backed by the texture and then use readPixels() to get the raw RGBA data.

var texture = gl.createTexture();
texture.image = new Image();
texture.image.onload = function() { 

  // Push Texture data to GPU memory
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

  // Create a framebuffer backed by the texture
  var framebuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

  // Read the contents of the framebuffer (data stores the pixel data)
  var data = new Uint8Array(this.width * this.height * 4);
  gl.readPixels(0, 0, this.width, this.height, gl.RGBA, gl.UNSIGNED_BYTE, data);

  gl.deleteFramebuffer(framebuffer);
};
texture.image.src = urlImage;

这篇关于在 WebGL 上访问图像/纹理数据(纹素)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！