Sign in Join
Wiki copytemporary

BGRABitmap tutorial 10/es: what changed

Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.

Title: BGRABitmap tutorial 10/es

OldNewLine
1+Esta tutoría muestra como usar mapeo de texturas.
2+
3+### Crear un nuevo proyecto
4+
5+Crea un nuevo proyecto y añade referencia a [[BGRABitmap]], de la misma forma que en [[BGRABitmap tutorial/es|la primer tutoría]].
6+
7+### Usando mapeo no particular
8+
9+Veamos que pasa cuando dibujamos un polígono con una textura usando el mapeo predeterminado :
10+
11+``` pascal
12+procedure TForm1.FormPaint(Sender: TObject);
13+var image: TBGRABitmap;
14+ tex: TBGRABitmap;
15+begin
16+ //black background
17+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
18+
19+ tex:= TBGRABitmap.Create('image.png'); //cargar un bitmap
20+ image.FillPolyAntialias( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)], tex);
21+ tex.Free;
22+
23+ image.Draw(Canvas,0,0,True); //dibujar en la pantalla
24+ image.free;
25+end;
26+```
27+
28+### Ejecuta el programa
29+
30+Deberías obtener algo parecido a esto :
31+
32+<figure>
33+<img src="BGRATutorial10a.png" title="BGRATutorial10a.png" />
34+<figcaption>BGRATutorial10a.png</figcaption>
35+</figure>
36+
37+Como puedes ver la imágen no es deformada.
38+
39+### Transformación afín
40+
41+Podemos aplicar transformación afín como esta :
42+
43+``` pascal
44+uses BGRABitmap, BGRABitmapTypes, BGRATransform;
45+
46+procedure TForm1.PaintImage;
47+var image: TBGRABitmap;
48+ tex: TBGRABitmap;
49+ affine: TBGRAAffineBitmapTransform;
50+
51+begin
52+ //fondo negro
53+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
54+
55+ tex:= TBGRABitmap.Create('image.png'); //load a bitmap
56+
57+ //crear rotación de 45°
58+ affine := TBGRAAffineBitmapTransform.Create(tex,True);
59+ affine.RotateDeg(45);
60+
61+ //usar esta transformación como parámetro en vez de tex
62+ image.FillPolyAntialias( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)], affine);
63+
64+ affine.Free;
65+ tex.Free;
66+
67+ image.Draw(Canvas,0,0,True); //dibujar en la pantalla
68+ image.free;
69+end;
70+```
71+
72+### Ejecutar el programa
73+
74+Deberías obtener una imágen rotada en el polígono :
75+
76+<figure>
77+<img src="BGRATutorial10b.png" title="BGRATutorial10b.png" />
78+<figcaption>BGRATutorial10b.png</figcaption>
79+</figure>
80+
81+### Mapeo de texturas
82+
83+Ahora, si queremos que la textura sea alineada con el borde del polígono, podemos usar mapeo de texturas.
84+
85+#### Mapeo linear
86+
87+Mapeo linear ajusta la imágen linearmente a traves de los bordes. Para hacer esto :
88+
89+``` pascal
90+procedure TForm1.PaintImage;
91+var image: TBGRABitmap;
92+ tex: TBGRABitmap;
93+begin
94+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
95+
96+ tex:= TBGRABitmap.Create('image.png');
97+ image.FillPolyLinearMapping( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)], tex,
98+ [PointF(0,0), PointF(tex.width-1,0), PointF(tex.Width-1,tex.Height-1), PointF(0,tex.Height-1)], true);
99+ tex.Free;
100+
101+ image.Draw(Canvas,0,0,True);
102+ image.free;
103+end;
104+```
105+
106+Para hacer el mapeo, usamos FillPolyLinearMapping. Algunos nuevos parámetros aparecen. Las coordenadas de la textura definen, para cada punto del polígono, la posición en la textura. La opción de interpolación es usada para mejor calidad.
107+
108+#### Ejecuta el programa
109+
110+Ahora la textura es deformada de acuerdo a la figura poligonal.
111+
112+<figure>
113+<img src="BGRATutorial10c.png" title="BGRATutorial10c.png" />
114+<figcaption>BGRATutorial10c.png</figcaption>
115+</figure>
116+
117+#### Mapeo de perspectiva
118+
119+El mapeo de perspectiva permita cambiar la profundidad de cada punto.
120+
121+``` pascal
122+procedure TForm1.PaintImage;
123+var image: TBGRABitmap;
124+ tex: TBGRABitmap;
125+begin
126+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
127+
128+ tex:= TBGRABitmap.Create('image.png');
129+ image.FillPolyPerspectiveMapping( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)],
130+ [75, 75, 50, 50],
131+ tex, [PointF(0,0), PointF(tex.width-1,0), PointF(tex.Width-1,tex.Height-1), PointF(0,tex.Height-1)], true);
132+ tex.Free;
133+
134+ image.Draw(Canvas,0,0,True);
135+ image.free;
136+end;
137+```
138+
139+Aquí la profundidad es 75 para la parte superior del polígono y 50 para la parte inferior del polígono. Esto significa que la parte inferior está mas cerca del observador, como si fuera horizontal, como un suelo.
140+
141+#### Ejecuta el programa
142+
143+Ahora parece que esto es un polígono 3D :
144+
145+<figure>
146+<img src="BGRATutorial10d.png" title="BGRATutorial10d.png" />
147+<figcaption>BGRATutorial10d.png</figcaption>
148+</figure>
149+
150+### Conclusion
151+
152+Usando estas técnicas, es posible deformar una imágen, como en la herramienta de LazPaint "grid deformation", o para renderizar objetos 3D con texturas, como en los test 19-21 de testbgrafunc (también en el archivo de LazPaint).
153+
154+[[BGRABitmap tutorial 9/es|Tutoría anterior (phong shading y texturas)]] \| [[BGRABitmap tutorial 11/es|Siguiente tutoría (combinando transformaciones)]]
155+
156+---
157+*From the Free Pascal wiki, page "BGRABitmap tutorial 10/es", as it stood on 2020-02-09 after a change by Trev, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).*
158+Category: Castellano
159+Category: Español

Back to history