WebGLRenderingContext.texImage2D()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La méthode WebGLRenderingContext.texImage2D() de l'API WebGL spécifie une image de texture bidimensionnelle.

Syntaxe

js
// WebGL1:
void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, ArrayBufferView? pixels);
void gl.texImage2D(cible, niveau, formatinterne, format, type, ImageData? pixels);
void gl.texImage2D(cible, niveau, formatinterne, format, type, HTMLImageElement? pixels);
void gl.texImage2D(cible, niveau, formatinterne, format, type, HTMLCanvasElement? pixels);\void gl.texImage2D(cible, niveau, formatinterne, format, type, HTMLVideoElement? pixels);

// WebGL2:
void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, GLintptr decalage);
void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, HTMLCanvasElement source);
void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, HTMLImageElement source);
void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, HTMLVideoElement source);
void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, ImageBitmap source);
void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, ImageData source);
void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, ArrayBufferView donneesSrc, decalageSrc);

Paramètres

cible

Un GLenum indiquant le point de liaison (cible) de la texture active. Valeurs possibles :

  • gl.TEXTURE_2D : une texture bidimensionnelle ;
  • gl.TEXTURE_CUBE_MAP_POSITIVE_X : face X positive pour une texture mappée sur un cube ;
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_X : face X négative pour une texture mappée sur un cube ;
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Y : face Y positive pour une texture mappée sur un cube ;
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Y : face Y négative pour une texture mappée sur un cube ;
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Z : face Z positive pour une texture mappée sur un cube ;
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Z : face Z négative pour une texture mappée sur un cube.
niveau

Un GLint indiquant le niveau de détail. Le niveau 0 est le niveau de l'image de base et le niveau n est le n-ième niveau de réduction du mipmap.

formatinterne

Un GLint indiquant les composantes de couleur dans la texture. Valeurs possibles :

  • gl.ALPHA : ignore les composantes rouge, vert et bleu, et lit la composante alpha ;

  • gl.RGB : ignore la composante alpha et lit les composantes rouge, vert et bleu ;

  • gl.RGBA : les composantes rouge, vert, bleu et alpha sont lues à partir du tampon des couleurs ;

  • gl.LUMINANCE : chaque composante de couleur est une composante de luminance, alpha vaut 1,0 ;

  • gl.LUMINANCE_ALPHA : chaque composante est une composante de luminance/alpha ;

  • lors de l'utilisation de l'extension WEBGL_depth_texture :

    • gl.DEPTH_COMPONENT
    • gl.DEPTH_STENCIL

  • lors de l'utilisation de l'extension EXT_sRGB :

    • ext.SRGB_EXT
    • ext.SRGB_ALPHA_EXT

  • Lors de l'utilisation d'un WebGL 2 context, les valeurs suivantes sont en outre disponibles :

    • gl.R8
    • gl.R16F
    • gl.R32F
    • gl.R8UI
    • gl.RG8
    • gl.RG16F
    • gl.RG32F
    • gl.RG8UI
    • gl.RG16UI
    • gl.RG32UI
    • gl.RGB8
    • gl.SRGB8
    • gl.RGB565
    • gl.R11F_G11F_B10F
    • gl.RGB9_E5
    • gl.RGB16F
    • gl.RGB32F
    • gl.RGB8UI
    • gl.RGBA8
    • gl.SRGB8_APLHA8
    • gl.RGB5_A1
    • gl.RGB10_A2
    • gl.RGBA4
    • gl.RGBA16F
    • gl.RGBA32F
    • gl.RGBA8UI
largeur

Un GLsizei indiquant la largeur de la texture.

hauteur

Un GLsizei indiquant la hauteur de la texture.

bordure

Un GLint indiquant la largeur de la bordure. Doit être 0.

format

Un GLenum indiquant le format des données de texel. En WebGL 1, cela doit être identique à formatinterne (voir ci-dessus). En WebGL 2, les combinaisons sont répertoriées dans ce tableau.

type

Un GLenum indiquant le type de données des données de texel. Valeurs possibles :

  • gl.UNSIGNED_BYTE : 8 bits par canal pour gl.RGBA ;

  • gl.UNSIGNED_SHORT_5_6_5 : 5 bits de rouge, 6 bits de vert, 5 bits de bleu ;

  • gl.UNSIGNED_SHORT_4_4_4_4 : 4 bits de rouge, 4 bits de vert, 4 bits de bleu, 4 bits d'alpha ;

  • gl.UNSIGNED_SHORT_5_5_5_1 : 5 bits de rouge, 5 bits de vert, 5 bits de bleu, 1 bit d'alpha ;

  • lors de l'utilisation de l'extension WEBGL_depth_texture :

    • gl.UNSIGNED_SHORT
    • gl.UNSIGNED_INT
    • ext.UNSIGNED_INT_24_8_WEBGL (constante fournie par l'extension)

  • lors de l'utilisation de l'extension OES_texture_float :

    • gl.FLOAT

  • lors de l'utilisation de l'extension OES_texture_half_float :

    • ext.HALF_FLOAT_OES (constante fournie par l'extension)

  • lors de l'utilisation d'un WebGL 2 context, les valeurs suivantes sont en outre disponibles :

    • gl.BYTE
    • gl.UNSIGNED_SHORT
    • gl.SHORT
    • gl.UNSIGNED_INT
    • gl.INT
    • gl.HALF_FLOAT
    • gl.FLOAT
    • gl.UNSIGNED_INT_2_10_10_10_REV
    • gl.UNSIGNED_INT_10F_11F_11F_REV
    • gl.UNSIGNED_INT_5_9_9_9_REV
    • gl.UNSIGNED_INT_24_8
    • gl.FLOAT_32_UNSIGNED_INT_24_8_REV (les pixels doivent être null)
pixels

L'un des objets suivants peut être utilisé comme source de pixels pour la texture :

decalage

(WebGL 2 seulement) Un décalage en octets GLintptr dans le magasin de données du WebGLBuffer. Utilisé pour télécharger des données vers la WebGLTexture liée, depuis le WebGLBuffer lié à la cible PIXEL_UNPACK_BUFFER.

Valeur retournée

Aucune.

Exemples

js
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

Spécifications

Specification
WebGL Specification
# 5.14.8
WebGL 2.0 Specification
# 3.7.6

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi