1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
|
---
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>
|
