WebGL crear Textura

Question

Creé correctamente una textura WebGL a partir de una imagen y la dibujé en un elemento de lienzo.

function initTexture(src) { 
    texture = gl.createTexture(); 
    texture.image = new Image(); 
    texture.image.onload = function() { 
    handleLoadedTexture(texture) 
    } 

    texture.image.src = src; 
} 

También intenté crear una textura a partir de uno de estos tipos de datos, pero sin éxito.

• [objeto ImageData]
• [objeto CanvasPixelArray]
• [objeto CanvasRenderingContext2D]

¿Es posible crear una textura simplemente con arreglo píxel de una imagen? O en otras palabras: ¿Es posible crear un objeto JS Image de una matriz de píxeles?

Editar:

La matriz de píxeles se parece a esto [r,g,b,a,r,g,b,a,r,g,b,a,...] y cada valor se encuentra en un rango de 0..255 {}. Quiero crear una textura con los píxeles en la matriz dada.

Answer 1

¡Es absolutamente posible crear una textura con una matriz de píxeles! Utilizo lo siguiente en mi código todo el tiempo para crear una textura de color sólido de un solo píxel.

function createSolidTexture(gl, r, g, b, a) { 
    var data = new Uint8Array([r, g, b, a]); 
    var texture = gl.createTexture(); 
    gl.bindTexture(gl.TEXTURE_2D, texture); 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, data); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
    return texture; 
} 

EDIT: extrapolar esto un poco más, la mayor parte de lo que necesita saber está en la llamada gl.texImage2d. Para crear una textura a partir de datos RGB (A) sin formato, necesita una matriz de valores de bytes sin signo, debe especificar a WebGL qué representan los datos (RGB o RGBA) y necesita conocer las dimensiones de la textura. Una función más generalizada se vería así:

function textureFromPixelArray(gl, dataArray, type, width, height) { 
    var dataTypedArray = new Uint8Array(dataArray); // Don't need to do this if the data is already in a typed array 
    var texture = gl.createTexture(); 
    gl.bindTexture(gl.TEXTURE_2D, texture); 
    gl.texImage2D(gl.TEXTURE_2D, 0, type, width, height, 0, type, gl.UNSIGNED_BYTE, dataTypedArray); 
    // Other texture setup here, like filter modes and mipmap generation 
    return texture; 
} 

// RGB Texture: 
// For a 16x16 texture the array must have at least 768 values in it (16x16x3) 
var rgbTex = textureFromPixelArray(gl, [r,g,b,r,g,b...], gl.RGB, 16, 16); 

// RGBA Texture: 
// For a 16x16 texture the array must have at least 1024 values in it (16x16x4) 
var rgbaTex = textureFromPixelArray(gl, [r,g,b,a,r,g,b,a...], gl.RGBA, 16, 16);