aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/webglrenderingcontext/teximage2d/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/api/webglrenderingcontext/teximage2d/index.html')
-rw-r--r--files/fr/web/api/webglrenderingcontext/teximage2d/index.html249
1 files changed, 249 insertions, 0 deletions
diff --git a/files/fr/web/api/webglrenderingcontext/teximage2d/index.html b/files/fr/web/api/webglrenderingcontext/teximage2d/index.html
new file mode 100644
index 0000000000..902985faf4
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/teximage2d/index.html
@@ -0,0 +1,249 @@
+---
+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>Un {{domxref ("GLenum")}} indiquant le point de liaison (cible) de la texture active. Valeurs possibles :
+ <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>
+</dl>
+
+<dl>
+ <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>Un {{domxref ("GLint")}} indiquant les composantes de couleur dans la texture. Valeurs possibles :
+ <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>Un {{domxref("GLenum")}} indiquant le type de données des données de texel. Valeurs possibles :
+ <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>L'un des objets suivants peut être utilisé comme source de pixels pour la texture :
+ <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>
+ <dd>
+ <ul>
+ </ul>
+ </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 class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<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>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-16 01:47:10 +0000