Difference between revisions of "BGRABitmap tutorial 10"

From Free Pascal wiki
(created)
 
(Affine transformation: uses)
Line 38: Line 38:
  
 
We can apply an affine transformation like this :
 
We can apply an affine transformation like this :
<delphi>procedure TForm1.PaintImage;
+
<delphi>uses BGRABitmap, BGRABitmapTypes, BGRATransform;
 +
 
 +
procedure TForm1.PaintImage;
 
var image: TBGRABitmap;
 
var image: TBGRABitmap;
 
     tex: TBGRABitmap;
 
     tex: TBGRABitmap;

Revision as of 16:52, 12 April 2011

Deutsch (de) English (en) español (es) français (fr)


Home | Tutorial 1 | Tutorial 2 | Tutorial 3 | Tutorial 4 | Tutorial 5 | Tutorial 6 | Tutorial 7 | Tutorial 8 | Tutorial 9 | Tutorial 10 | Tutorial 11 | Tutorial 12 | Tutorial 13 | Tutorial 14 | Tutorial 15 | Tutorial 16 | Edit

This tutorial shows how to use texture mapping.

Create a new project

Create a new project and add a reference to BGRABitmap, the same way as in the first tutorial.

Using no particular mapping

Let's see what happens if we draw a polygon with a texture using default mapping : <delphi>procedure TForm1.FormPaint(Sender: TObject); var image: TBGRABitmap;

   tex: TBGRABitmap;

begin

 //black background
 image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
 tex:= TBGRABitmap.Create('image.png'); //load a bitmap
 image.FillPolyAntialias( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)], tex);
 tex.Free;
 image.Draw(Canvas,0,0,True); //draw on the screen
 image.free;

end; </delphi>

Run the program

You should obtain something like this :

BGRATutorial10a.png

As you can see the image is not deformed.

Affine transformation

We can apply an affine transformation like this : <delphi>uses BGRABitmap, BGRABitmapTypes, BGRATransform;

procedure TForm1.PaintImage; var image: TBGRABitmap;

   tex: TBGRABitmap;
   affine: TBGRAAffineBitmapTransform;

begin

 //black background
 image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
 tex:= TBGRABitmap.Create('image.png'); //load a bitmap
 //create a rotation of 45°
 affine := TBGRAAffineBitmapTransform.Create(tex,True);
 affine.RotateDeg(45);
 //use this transformation as parameter instead of tex
 image.FillPolyAntialias( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)], affine); 
 affine.Free;
 tex.Free;
 image.Draw(Canvas,0,0,True); //draw on the screen
 image.free;

end;</delphi>

Run the program

You should obtain a rotated picture in the polygon :

BGRATutorial10b.png

Texture mapping

Now, if we want the texture to be aligned with the polygon border, we can use texture mapping.

Linear mapping

Linear mapping stretched the image linearly along the borders. To do this : <delphi>procedure TForm1.PaintImage; var image: TBGRABitmap;

   tex: TBGRABitmap;

begin

 image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
 tex:= TBGRABitmap.Create('image.png');
 image.FillPolyLinearMapping( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)], tex,
            [PointF(0,0), PointF(tex.width-1,0), PointF(tex.Width-1,tex.Height-1), PointF(0,tex.Height-1)], true);
 tex.Free;
 image.Draw(Canvas,0,0,True);
 image.free;

end; </delphi>

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.

Run the program

Now the texture is deformed according to the polygonal shape.

BGRATutorial10c.png

Perspective mapping

The perspective mapping allow to change the depth of each point. <delphi>procedure TForm1.PaintImage; var image: TBGRABitmap;

   tex: TBGRABitmap;

begin

 image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
 tex:= TBGRABitmap.Create('image.png');
 image.FillPolyPerspectiveMapping( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)],
                                   [75,             75,             50,              50],
      tex, [PointF(0,0), PointF(tex.width-1,0), PointF(tex.Width-1,tex.Height-1), PointF(0,tex.Height-1)], true);
 tex.Free;
 image.Draw(Canvas,0,0,True);
 image.free;

end; </delphi>

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.

Run the program

Now it seems that it is a 3D polygon :

BGRATutorial10d.png

Conclusion

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).

Previous tutorial (phong shading)