BGRABitmap tutorial 10: what changed

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

Title: BGRABitmap tutorial 10

New		Line
1	+	This tutorial shows how to use texture mapping. A sample project can be found in [[BGRABitmap AggPas]].
2	+
3	+	### Create a new project
4	+
5	+	Create a new project and add a reference to [[BGRABitmap]], the same way as in [[BGRABitmap tutorial\|the first tutorial]].
6	+
7	+	### Using no particular mapping
8	+
9	+	Let's see what happens if we draw a polygon with a texture using default mapping:
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'); //load a 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); //draw on the screen
24	+	image.free;
25	+	end;
26	+	```
27	+
28	+	### Run the program
29	+
30	+	You should obtain something like this:
31	+
32	+	<figure>
33	+	<img src="BGRATutorial10a.png" title="BGRATutorial10a.png" />
34	+	<figcaption>BGRATutorial10a.png</figcaption>
35	+	</figure>
36	+
37	+	As you can see the image is not deformed.
38	+
39	+	### Affine transformation
40	+
41	+	We can apply an affine transformation like this:
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	+	//black background
53	+	image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
54	+
55	+	tex:= TBGRABitmap.Create('image.png'); //load a bitmap
56	+
57	+	//create a rotation of 45°
58	+	affine := TBGRAAffineBitmapTransform.Create(tex,True);
59	+	affine.RotateDeg(45);
60	+
61	+	//use this transformation as parameter instead of 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); //draw on the screen
68	+	image.free;
69	+	end;
70	+	```
71	+
72	+	### Run the program
73	+
74	+	You should obtain a rotated picture in the polygon:
75	+
76	+	<figure>
77	+	<img src="BGRATutorial10b.png" title="BGRATutorial10b.png" />
78	+	<figcaption>BGRATutorial10b.png</figcaption>
79	+	</figure>
80	+
81	+	### Texture mapping
82	+
83	+	Now, if we want the texture to be aligned with the polygon border, we can use texture mapping.
84	+
85	+	#### Linear mapping
86	+
87	+	Linear mapping stretched the image linearly along the borders. To do this:
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	+	To do the mapping, we use FillPolyLinearMapping. Some new parameters appear. Texture coordinates define, for each point of the polygon, the location in the texture. Interpolation option is used for best quality.
107	+
108	+	#### Run the program
109	+
110	+	Now the texture is deformed according to the polygonal shape.
111	+
112	+	<figure>
113	+	<img src="BGRATutorial10c.png" title="BGRATutorial10c.png" />
114	+	<figcaption>BGRATutorial10c.png</figcaption>
115	+	</figure>
116	+
117	+	#### Perspective mapping
118	+
119	+	The perspective mapping allow to change the depth of each point.
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	+	Here the depth is 75 for the top of the polygon and 50 for the bottom of the polygon. It means that the bottom is closer to the observer, as if it were horizontal, like a floor.
140	+
141	+	#### Run the program
142	+
143	+	Now it seems that it is a 3D polygon:
144	+
145	+	<figure>
146	+	<img src="BGRATutorial10d.png" title="BGRATutorial10d.png" />
147	+	<figcaption>BGRATutorial10d.png</figcaption>
148	+	</figure>
149	+
150	+	### Conclusion
151	+
152	+	Using these techniques, it is possible to deform an image, like in LazPaint tool "grid deformation", or to render 3D objects with textures, like in tests 19-21 of testbgrafunc (also in LazPaint archive).
153	+
154	+	[[BGRABitmap tutorial 9\|Previous tutorial (phong shading)]] [[BGRABitmap tutorial 11\|Next tutorial (combining transformations)]]
155	+
156	+	---
157	+	From the Free Pascal wiki, page "BGRABitmap tutorial 10", as it stood on 2023-05-20 after a change by Circular, 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: BGRABitmap
159	+	Category: Graphics

Back to history