---
title: WebGLRenderingContext.texImage2D()
slug: Web/API/WebGLRenderingContext/texImage2D
tags:
  - API
  - Méthode
  - Reference
  - Textures
  - WebGL
  - WebGLRenderingContext
translation_of: Web/API/WebGLRenderingContext/texImage2D
---
<div>{{APIRef("WebGL")}}</div>

<p>La méthode <strong><code>WebGLRenderingContext.texImage2D()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> spécifie une image de texture bidimensionnelle.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox">// WebGL1:
void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var>, <var>format</var>, <var>type</var>, ArrayBufferView? <var>pixels</var>);
void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, ImageData? <var>pixels</var>);
void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, HTMLImageElement? <var>pixels</var>);
void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, HTMLCanvasElement? <var>pixels</var>);
void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, HTMLVideoElement? <var>pixels</var>);
void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, ImageBitmap? <var>pixels</var>);

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

<h3 id="Paramètres">Paramètres</h3>

<dl>
 <dt><code>cible</code></dt>
 <dd><p>Un {{domxref ("GLenum")}} indiquant le point de liaison (cible) de la texture active. Valeurs possibles :</p>
 <ul>
  <li><code>gl.TEXTURE_2D</code> : une texture bidimensionnelle ;</li>
  <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_X</code> : face X positive pour une texture mappée sur un cube ;</li>
  <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_X</code> : face X négative pour une texture mappée sur un cube ;</li>
  <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_Y</code> : face Y positive pour une texture mappée sur un cube ;</li>
  <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_Y</code> : face Y négative pour une texture mappée sur un cube ;</li>
  <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_Z</code> : face Z positive pour une texture mappée sur un cube ;</li>
  <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_Z</code> : face Z négative pour une texture mappée sur un cube.</li>
 </ul>
 </dd>
 <dt><code>niveau</code></dt>
 <dd>Un {{domxref ("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.</dd>
 <dt><code>formatinterne</code></dt>
 <dd><p>Un {{domxref ("GLint")}} indiquant les composantes de couleur dans la texture. Valeurs possibles :</p>
 <ul>
  <li><code>gl.ALPHA</code> : ignore les composantes rouge, vert et bleu, et lit la composante alpha ;</li>
  <li><code>gl.RGB</code> : ignore la composante alpha et lit les composantes rouge, vert et bleu ;</li>
  <li><code>gl.RGBA</code> : les composantes rouge, vert, bleu et alpha sont lues à partir du tampon des couleurs ;</li>
  <li><code>gl.LUMINANCE</code> : chaque composante de couleur est une composante de luminance, alpha vaut 1,0 ;</li>
  <li><code>gl.LUMINANCE_ALPHA</code> : chaque composante est une composante de luminance/alpha ;</li>
  <li>lors de l'utilisation de l'extension {{domxref("WEBGL_depth_texture")}} :
   <ul>
    <li><code>gl.DEPTH_COMPONENT</code></li>
    <li><code>gl.DEPTH_STENCIL</code></li>
   </ul>
  </li>
  <li>lors de l'utilisation de l'extension {{domxref("EXT_sRGB")}} :
   <ul>
    <li><code>ext.SRGB_EXT</code></li>
    <li><code>ext.SRGB_ALPHA_EXT</code></li>
   </ul>
  </li>
  <li>Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :
   <ul>
    <li><code>gl.R8</code></li>
    <li><code>gl.R16F</code></li>
    <li><code>gl.R32F</code></li>
    <li><code>gl.R8UI</code></li>
    <li><code>gl.RG8</code></li>
    <li><code>gl.RG16F</code></li>
    <li><code>gl.RG32F</code></li>
    <li><code>gl.RG8UI</code></li>
    <li><code>gl.RG16UI</code></li>
    <li><code>gl.RG32UI</code></li>
    <li><code>gl.RGB8</code></li>
    <li><code>gl.SRGB8</code></li>
    <li><code>gl.RGB565</code></li>
    <li><code>gl.R11F_G11F_B10F</code></li>
    <li><code>gl.RGB9_E5</code></li>
    <li><code>gl.RGB16F</code></li>
    <li><code>gl.RGB32F</code></li>
    <li><code>gl.RGB8UI</code></li>
    <li><code>gl.RGBA8</code></li>
    <li><code>gl.SRGB8_APLHA8</code></li>
    <li><code>gl.RGB5_A1</code></li>
    <li><code>gl.RGB10_A2</code></li>
    <li><code>gl.RGBA4</code></li>
    <li><code>gl.RGBA16F</code></li>
    <li><code>gl.RGBA32F</code></li>
    <li><code>gl.RGBA8UI</code></li>
   </ul>
  </li>
 </ul>
 </dd>
 <dt><code>largeur</code></dt>
 <dd>Un {{domxref ("GLsizei")}} indiquant la largeur de la texture.</dd>
 <dt><code>hauteur</code></dt>
 <dd>Un {{domxref ("GLsizei")}} indiquant la hauteur de la texture.</dd>
 <dt><code>bordure</code></dt>
 <dd>Un {{domxref("GLint")}} indiquant la largeur de la bordure. Doit être 0.</dd>
 <dt><code>format</code></dt>
 <dd>Un {{domxref("GLenum")}} indiquant le format des données de texel. En WebGL 1, cela doit être identique à <code>formatinterne</code> (voir ci-dessus). En WebGL 2, les combinaisons sont répertoriées dans <a href="https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE">ce tableau</a>.</dd>
 <dt><code>type</code></dt>
 <dd><p>Un {{domxref("GLenum")}} indiquant le type de données des données de texel. Valeurs possibles :</p>
 <ul>
  <li><code>gl.UNSIGNED_BYTE</code> : 8 bits par canal pour <code>gl.RGBA</code> ;</li>
  <li><code>gl.UNSIGNED_SHORT_5_6_5</code> : 5 bits de rouge, 6 bits de vert, 5 bits de bleu ;</li>
  <li><code>gl.UNSIGNED_SHORT_4_4_4_4</code> : 4 bits de rouge, 4 bits de vert, 4 bits de bleu, 4 bits d'alpha ;</li>
  <li><code>gl.UNSIGNED_SHORT_5_5_5_1</code> : 5 bits de rouge, 5 bits de vert, 5 bits de bleu, 1 bit d'alpha ;</li>
  <li>lors de l'utilisation de l'extension {{domxref ("WEBGL_depth_texture")}} :
   <ul>
    <li><code>gl.UNSIGNED_SHORT</code></li>
    <li><code>gl.UNSIGNED_INT</code></li>
    <li><code>ext.UNSIGNED_INT_24_8_WEBGL</code> (constante fournie par l'extension)</li>
   </ul>
  </li>
  <li>lors de l'utilisation de l'extension {{domxref("OES_texture_float")}} :
   <ul>
    <li><code>gl.FLOAT</code></li>
   </ul>
  </li>
  <li>lors de l'utilisation de l'extension {{domxref("OES_texture_half_float")}} :
   <ul>
    <li><code>ext.HALF_FLOAT_OES</code> (constante fournie par l'extension)</li>
   </ul>
  </li>
  <li>lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :
   <ul>
    <li><code>gl.BYTE</code></li>
    <li><code>gl.UNSIGNED_SHORT</code></li>
    <li><code>gl.SHORT</code></li>
    <li><code>gl.UNSIGNED_INT</code></li>
    <li><code>gl.INT</code></li>
    <li><code>gl.HALF_FLOAT</code></li>
    <li><code>gl.FLOAT</code></li>
    <li><code>gl.UNSIGNED_INT_2_10_10_10_REV</code></li>
    <li><code>gl.UNSIGNED_INT_10F_11F_11F_REV</code></li>
    <li><code>gl.UNSIGNED_INT_5_9_9_9_REV</code></li>
    <li><code>gl.UNSIGNED_INT_24_8</code></li>
    <li><code>gl.FLOAT_32_UNSIGNED_INT_24_8_REV</code> (les pixels doivent être {{jsxref("null")}})</li>
   </ul>
  </li>
 </ul>
 </dd>
 <dt><code>pixels</code></dt>
 <dd><p>L'un des objets suivants peut être utilisé comme source de pixels pour la texture :</p>
 <ul>
  <li>{{domxref("ArrayBufferView")}},
   <ul>
    <li>un {{jsxref("Uint8Array")}} doit être utilisé si <code>type</code> est <code>gl.UNSIGNED_BYTE</code> ;</li>
    <li>un {{jsxref("Uint16Array")}} doit être utilisé si <code>type</code> est <code>gl.UNSIGNED_SHORT_5_6_5</code>, <code>gl.UNSIGNED_SHORT_4_4_4_4</code>, <code>gl.UNSIGNED_SHORT_5_5_5_1</code>, <code>gl.UNSIGNED_SHORT</code> ou <code>ext.HALF_FLOAT_OES</code> ;</li>
    <li>un {{jsxref("Uint32Array")}} doit être utilisé si <code>type</code> est <code>gl.UNSIGNED_INT</code> ou <code>ext.UNSIGNED_INT_24_8_WEBGL</code> ;</li>
    <li>un {{jsxref("Float32Array")}} doit être utilisé si <code>type</code> est <code>gl.FLOAT</code> ;</li>
   </ul>
  </li>
  <li>{{domxref("ImageData")}},</li>
  <li>{{domxref("HTMLImageElement")}},</li>
  <li>{{domxref("HTMLCanvasElement")}},</li>
  <li>{{domxref("HTMLVideoElement")}},</li>
  <li>{{domxref("ImageBitmap")}}.</li>
 </ul>
 </dd>
 <dt><code><strong>decalage</strong></code></dt>
 <dd>(WebGL 2 seulement) Un décalage en octets {{domxref("GLintptr")}} dans le magasin de données du {{domxref("WebGLBuffer")}}. Utilisé pour télécharger des données vers la {{domxref ("WebGLTexture")}} liée, depuis le <code>WebGLBuffer</code> lié à la cible <code>PIXEL_UNPACK_BUFFER</code>.</dd>
</dl>

<h3 id="Valeur_retournée">Valeur retournée</h3>

<p>Aucune.</p>

<h2 id="Exemples">Exemples</h2>

<pre class="brush: js">gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
</pre>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
  <tr>
   <td>{{SpecName('WebGL', "#5.14.8", "texImage2D")}}</td>
   <td>{{Spec2('WebGL')}}</td>
   <td>
    <p>Définition initiale pour WebGL.</p>
   </td>
  </tr>
  <tr>
   <td>{{SpecName('OpenGL ES 2.0', "glTexImage2D.xml", "glTexImage2D")}}</td>
   <td>{{Spec2('OpenGL ES 2.0')}}</td>
   <td>
    <p>Page man de l’API OpenGL ES 2.0 (similaire).</p>
   </td>
  </tr>
  <tr>
   <td>{{SpecName('WebGL2', "#3.7.6", "texImage2D")}}</td>
   <td>{{Spec2('WebGL2')}}</td>
   <td>Définition mise à jour pour WebGL.</td>
  </tr>
  <tr>
   <td>{{SpecName('OpenGL ES 3.0', "glTexImage2D.xhtml", "glTexImage2D")}}</td>
   <td>{{Spec2('OpenGL ES 3.0')}}</td>
   <td>Page man de l’API OpenGL ES 3.0 (similaire).</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("api.WebGLRenderingContext.texImage2D")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
 <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li>
 <li>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</li>
 <li>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</li>
 <li>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</li>
 <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li>
 <li>{{domxref("WEBGL_depth_texture")}}</li>
 <li>{{domxref("OES_texture_float")}}</li>
 <li>{{domxref("OES_texture_half_float")}}</li>
 <li>{{domxref("EXT_sRGB")}}</li>
</ul>