Les textures ont une couleur noire, quelles que soient les données que j'y ai insérées.

Question

J'ai essayé de mettre des données dans le fragment shader pour colorer 2 triangles à travers les textures, mais la couleur donnée est noire (peut-être par défaut ?), pas verte ou rouge comme prévu.

La source à partir de laquelle j'ai essayé de faire cela est la suivante https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html#textures-in-fragment-shaders . J'ai mis tout ce qui s'y trouvait dans ma source et j'ai pensé que si je mettais un pixel vert avec un pixel rouge dans ma texture, alors il devait avoir une couleur différente du noir, mais il était noir.

C'est le fragment shader :

precision mediump float;

uniform sampler2D u_texture;

void main() {
   vec2 texcoord = vec2(0.5, 0.5)  // get a value from the middle of the texture
   gl_FragColor = texture2D(u_texture, texcoord);
}

Là, j'ai créé la texture et j'y ai mis des données.

var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
var level = 0;
var width = 2;
var height = 1;
var data = new Uint8Array([
   255, 0, 0, 255,   // a red pixel
   0, 255, 0, 255,   // a green pixel
]);
gl.texImage2D(gl.TEXTURE_2D, level, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);

J'ai essayé de mettre des données différentes dans la texture avec même d'autres couleurs, mais le résultat était le même.

Answer 1

Vous devez régler la fonction de réduction de la texture sur un filtre "non mipmap", sinon la texture n'est pas traitée. mipmap complet. Par exemple :

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

Par défaut, le paramètre de minification est NEAREST_MIPMAP_LINEAR . Cette valeur de paramètre nécessite une mipmap pour la texture, pour être complète.

L'autre option consiste à générer des mipmaps par :

gl.generateMipmap(gl.TEXTURE_2D)

Mais pour cela, la largeur et la hauteur de la texture doivent être une puissance de deux (pour WebGL 1.0). Voir Spécification WebGL - 5.13.8 Objets de texture .

Notez que si une texture n'est pas mipmap complète, alors la valeur de retour d'une recherche de texel est (0, 0, 0, 1), ce qui provoque la couleur "noire".