@@ -8,13 +8,13 @@ commencé avec les fondamentaux](webgl-fundamentals.html) et le précédent
8
8
concernait [ animation] ( webgl-animation.html ) .
9
9
10
10
Comment appliquons-nous les textures en WebGL ? Vous pourriez probablement
11
- déduire comment par lire [ les articles sur le traitement
11
+ déduire comment si vous avez lu [ les articles sur le traitement
12
12
d'image] ( webgl-image-processing.html ) mais ce sera probablement plus facile à
13
13
comprendre si nous l'examinons plus en détail détail.
14
14
15
15
La première chose que nous devons faire est d'ajuster nos shaders pour utiliser
16
- des textures. Ici sont les modifications apportées au vertex shader. Il faut
17
- passer en texture coordonnées. Dans ce cas , nous les transmettons directement au
16
+ des textures. Voici les modifications apportées au vertex shader, il faut lui
17
+ passer les coordonnées de la texture. Ensuite , nous les transmettrons directement au
18
18
fragment shader.
19
19
20
20
attribute vec4 a_position;
@@ -115,7 +115,7 @@ seulement commencer à dessiner. L'autre solution consiste à créer une texture
115
115
à utiliser jusqu'à ce que l'image soit téléchargée. De cette façon, nous pouvons
116
116
commencer le rendu immédiatement. Ensuite, une fois que l'image a été
117
117
téléchargé, nous copions l'image dans la texture. Nous utiliserons cette méthode
118
- dessous.
118
+ ci- dessous.
119
119
120
120
*// Create a texture.
121
121
*var texture = gl.createTexture();
@@ -135,13 +135,13 @@ dessous.
135
135
* gl.generateMipmap(gl.TEXTURE_2D);
136
136
*});
137
137
138
- Et le voici
138
+ Et voilà
139
139
140
140
{{{example url="../webgl-3d-textures.html" }}}
141
141
142
142
Et si nous voulions simplement utiliser une partie de la texture sur le devant
143
143
du « F » ? Les textures sont référencées avec des "coordonnées de texture" et les
144
- coordonnées de texture vont de 0.0 à 1.0 de gauche à sur toute la texture, et de
144
+ coordonnées de texture vont de 0.0 à 1.0 de gauche à la largeur de la texture, et de
145
145
0,0 à 1,0 du premier pixel de la première ligne au dernier pixel de la dernière
146
146
ligne. Remarquez que je n'ai pas dit en haut ou en bas. Le haut et le bas
147
147
n'ont aucun sens dans l'espace de texture parce que jusqu'à ce que vous
@@ -231,8 +231,8 @@ Imaginez que nous ayons une texture de 16x16 pixels.
231
231
232
232
<img class =" webgl_center " src =" resources/mip-low-res-enlarged.png " style =" border : 2px solid black ;" />
233
233
234
- Imaginez maintenant que nous avons essayé de dessiner cette texture sur un
235
- polygone de 2x2 pixels de large sur l'écran. De quelles couleurs doit-on faire
234
+ Imaginez maintenant que nous ayons essayé de dessiner cette texture sur un
235
+ polygone de 2x2 pixels de large sur l'écran. De quelles couleurs seront
236
236
ces 4 pixels ? Il y a 256 pixels au choix. Dans Photoshop, si vous avez mis à
237
237
l'échelle une image de 16x16 pixels en 2x2 pixels, il fera la moyenne des 8x8
238
238
pixels de chaque côté de l'image pour calculer les 4 pixels de l'image 2x2.
@@ -321,7 +321,7 @@ effet. Par exemple, si vous voulez que quelque chose ait un effet *rétro* pixé
321
321
peut-être que vous utiliserez ` NEAREST ` . Les mips prennent
322
322
également de la mémoire. En fait ils prennent 33% de mémoire en plus. Cela peut
323
323
être beaucoup de mémoire, surtout pour un très grande texture comme vous
324
- pourriez l'utiliser sur un écran de titre d'un jeu. Si tu n'allez jamais
324
+ pourriez l'utiliser sur un écran de titre d'un jeu. Si vous n'allez jamais
325
325
dessiner quelque chose de plus petit que le plus grand mip pourquoi gaspiller
326
326
de la mémoire pour ces mips. Au lieu de cela, utilisez simplement ` NEAREST ` ou
327
327
` LINEAR ` car ils n'utilisent que le premier mip.
@@ -516,7 +516,7 @@ divisions en plans.
516
516
A few other very important things you might want to know about textures.
517
517
One is [ how texture unit state works] ( webgl-texture-units.html ) .
518
518
One is [ how to use 2 or more textures at once] ( webgl-2-textures.html ) . Another
519
- is [ how to use images from other domains] ( webgl-cors-permission.html ) . And
519
+ is [ how to use images from other domains] ( webgl-cors-permission.html ) . And
520
520
one more is [ perspective correct texture mapping] ( webgl-3d-perspective-correct-texturemapping.html ) which in some ways
521
521
is trivia but it's good to know.
522
522
Quelques autres choses très importantes que vous voudriez peut-être savoir sur
0 commit comments