webgl - 在 WebGL 上访问图像/纹理数据(纹素)

Question

我在 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() 获取绘图缓冲区内容的能力。

是否可以？如果是这样，最好的做法是什么？

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

在此先感谢您的帮助。

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

Answer 1

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

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;