WebGL créer la Texture

J'ai réussi à créer un WebGL texture à partir d'une image et le tira dans un élément canvas.

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

  texture.image.src = src;
}

J'ai aussi essayé de créer une texture à partir d'un de ces types de données, mais sans succès.

  • [de l'objet de données images]
  • [objet CanvasPixelArray]
  • [objet CanvasRenderingContext2D]

Est-il possible de créer une texture avec une image pixel de la matrice de?
Ou en d'autres termes: Est-il possible de créer un JS Image de l'objet d'un réseau de pixels?

Edit:

La gamme de pixels ressemble à ceci [r,g,b,a,r,g,b,a,r,g,b,a,...] et chaque valeur est dans une gamme de {0..255}.
Je veux créer une texture avec les pixels de la matrice.

Désolé, peut-être qu'il n'était pas trop clair ce que je voulais dire. J'ai mis à jour le Q.
Si vos données sont dans un ArrayBuffer vous pouvez utiliser une fonction de WebGL (dont je ne me souviens pas en ce moment)
pourriez-vous me donner un exemple sur la façon de créer un tel arrayBuffer?

OriginalL'auteur alex | 2012-01-28

  1. 31

    Il est tout à fait possible de créer une texture avec un réseau de pixels! J'utilise la suite de mon code tout le temps pour créer un pixel unique, solide couleur de la texture.

    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: D'extrapoler ce un peu plus loin, la plupart de ce que vous devez savoir est dans le gl.texImage2d appel. Afin de créer une texture à partir des matières premières RGB(A) données dont vous avez besoin d'un tableau d'octet non signé valeurs, vous devez spécifier à WebGL ce que les données représentent (RVB ou RVBA), et vous avez besoin de connaître les dimensions de la texture. Un plus généralisée de la fonction devrait ressembler à ceci:

    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);
    Génial. J'ai un réseau de pixels comme ça [r,g,b,a,r,g,b,a,...] (plage de 0..255). Peut-être que vous pourriez me donner quelques exemple sur comment faire une texture de solide?
    Quel est le sens du commentaire sur la ligne numéro 2 : Ne pas avoir besoin de faire cela si les données sont déjà dans un tableau typé

    OriginalL'auteur