Доступ к данным изображения/текстуры (текселям) в WebGL

У меня есть следующий фрагмент кода на 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


webgl
person pion    schedule 15.01.2011    source источник
comment
Возможный дубликат Чтение пикселей из текстуры WebGL   -  person Leon    schedule 18.10.2019

Ответы (2)


arrow_upward
11
arrow_downward

Вы можете создать фреймбуфер на основе текстуры, а затем использовать 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;
person nkron    schedule 14.09.2013

arrow_upward
9
arrow_downward

Я использую HTML5 для чтения текселей со следующими фрагментами кода:

var myCanvas = document.createElement("canvas");
myCanvas.width = texture.image.width; 
myCanvas.height = texture.image.height;
var myCanvasContext = myCanvas.getContext("2d"); // Get canvas 2d context
myCanvasContext.drawImage(texture.image, 0, 0); // Draw the texture
var texels = myCanvasContext.getImageData(0,0, width, height); // Read the texels/pixels back

Он делает то, что я хочу делать. Пожалуйста, дайте мне знать, если есть лучший способ

person pion    schedule 15.01.2011
comment
Это будет работать, но не даст вам точного значения RGB из-за того, как 2D-контекст работает на холсте. Подробнее объяснено здесь stackoverflow.com/a/24592348/1289287. - person Billy; 08.07.2014