Log in

View Full Version : BGRABitmap tutorial



circular
02-04-2011, 09:48 PM
Hello people.

I've started a tutorial for BGRABitmap. It's a graphical library for Lazarus, that is used in LazPaint.

It shows how to load and stretch images, use direct pixel access, combine layers, fill with gradients, use line styles and splines, generate textures with Perlin noise and render lighting with Phong shading.

Each tutorial is accompanied by screenshots.

http://wiki.lazarus.freepascal.org/BGRABitmap_tutorial

code_glitch
02-04-2011, 10:14 PM
Not a lazarus user myself, but nice stuff nonetheless...

chronozphere
02-04-2011, 10:58 PM
Interesting! It offers a lot more than the delphi VCL does, out of the box. (allthough delphi has it's own set of graphics libraries).

I wonder how fast the library is. Has anyone ever done a stresstest? :)

WILL
03-04-2011, 11:10 AM
Those are some pretty cool tutorials. I'm curious though, would these uses of the Bitmap object using the OS' GUI not be rather slow even on Windows Vista/7 or Mac OS X?

circular
03-04-2011, 11:18 AM
Interesting! It offers a lot more than the delphi VCL does, out of the box. (allthough delphi has it's own set of graphics libraries).

I wonder how fast the library is. Has anyone ever done a stresstest? :)
Well it depends. Some code could be optimized. It's all in Pascal, no assembler here.


Those are some pretty cool tutorials. I'm curious though, would these uses of the Bitmap object using the OS' GUI not be rather slow even on Windows Vista/7 or Mac OS X?
The point of BGRABitmap is to use TBitmap only when necessary. It uses a DIB section if possible, so it is kind of direct drawing. Specific code for a platform can be added to have DIB sections. It's already done for Windows and on GTK.

WILL
03-04-2011, 11:25 AM
Well your last 2 tutorials go into 3D stuff, so I was just wondering how practical all that would be if you decided to do some animation for visual effect. Is it worth it to try this for a nicer looking application GUI or would we just be better off using OpenGL or Direct3D instead?

circular
03-04-2011, 02:03 PM
If you animate some phong buttons, it is very fast, but if you animate the whole screen, it is a little bit slow. So if you make some phong animation when the mouse moves over the controls, it would say it works.

There is sample chart in testbgrafunc (it's in LazPaint archive). You can give it a try. You can see how smooth are the different capabilities of BGRABitmap.

chronozphere
08-04-2011, 08:12 PM
I'd like to play with this, but the FPC wiki seems to be down. :(

WILL
09-04-2011, 01:28 AM
I was wondering about a water or ocean type effect on the background of the form or something like that. I think I know what the answer might be though. :)

circular
09-04-2011, 08:10 AM
I'd like to play with this, but the FPC wiki seems to be down. :(
Yes, unfortunately. You can still have a look at the bgrafunctest folder in LazPaint archive. You can find it here :
http://sourceforge.net/projects/lazpaint/files/src/


I was wondering about a water or ocean type effect on the background of the form or something like that. I think I know what the answer might be though. :)
Well, it depends. You can precalculate an ocean texture. Then, just showing it is ok. But if you want to animate it, well, it would be too slow, except maybe with a very small texture.

chronozphere
09-04-2011, 11:17 AM
Thanks. How can I install that lpk package? Can I move my source files after I have installed the package? (Really annoying that I have to ask this, because all the documentation for lazarus is inaccessible. >:( )

Update: It seems like they have fixed the problem. :)

circular
09-04-2011, 07:43 PM
Once the package is installed, you need to specify package dependency in the project inspector. Then you can move your project whereever you want.

chronozphere
09-04-2011, 08:24 PM
I have a little problem. I want to draw a closed polygon, but it doesn't work:



var
image: TBGRABitmap;
storedSpline: array of TPointF;
c: TBGRAPixel;
begin
image := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorT oBGRA(ColorToRGB(clBtnFace)));
c := ColorToBGRA(ColorToRGB(clWindowText));

setLength(storedSpline, 3);
storedSpline[0].x := 50;
storedSpline[0].y := 50;
storedSpline[1].x := 100;
storedSpline[1].y := 100;
storedSpline[2].x := 0;
storedSpline[2].y := 100;

image.DrawPolylineAntialias(storedSpline,c,1, true); //This call should draw a closed spline

image.Draw(Canvas,0,0,True);
image.free;
end;


The last parameter is called Closed, so I presume that when I pass true, I will get a closed spline, but It's still open.
Anybody?

circular
09-04-2011, 10:19 PM
It's normal. A polyline is not a closed figure. The closed parameter means that the end of the segment is closed. See here :
http://wiki.lazarus.freepascal.org/BGRABitmap_tutorial_6

If you want to draw a closed path, then use DrawPolygonAntialias.

By the way, naming a variable storedSpline does not automatically create a spline. You need to call ComputeClosedSpline. See here :
http://wiki.lazarus.freepascal.org/BGRABitmap_tutorial_7

If you feel the tutorial is ambiguous somewhere, please tell me what you suggest to add or change.

chronozphere
10-04-2011, 08:39 AM
Thanks! It works great now. :)



By the way, naming a variable storedSpline does not automatically create a spline. You need to call ComputeClosedSpline. See here :


Don't pay attention to that name. I was reusing that name from another piece of code that did use a spline. ;)

circular
11-04-2011, 04:37 PM
Hello,

I've added a new tutorial about texture mapping :

http://wiki.lazarus.freepascal.org/BGRABitmap_tutorial_10

Enjoy :)

circular
25-04-2011, 09:41 PM
Hello people,

I've added comments to BGRABitmap source code, so it's easy to browse and hopefully to understand it.

You can have a look in the last zip file (3.7) :
https://sourceforge.net/projects/lazpaint/files/src/

If something is hard to understand, tell me so I'll add more comments.

By the way, LazPaint textures look better, and blur filter is faster (the fast blur is very fast indeed).

chronozphere
25-04-2011, 09:46 PM
Thanks for the update! My Spline Editor project makes good use of the BGRABitmap library. I wouldn't have had such a good looking interface if you hadn't written those tutorials. ;)

circular
26-04-2011, 05:45 PM
cool 8)

I'm looking forward to see your spline editor. :)

For those interested, I've added lightness shading (like Gouraud). It's on subversion. Here is screenshot.

circular
29-04-2011, 06:22 AM
Hello people,

I've added CanvasBGRA property to TBGRABitmap to allow drawing with functions that work the same as the standard Canvas but with antialiasing and alphablending. The AntialiasingMode is always taken into account and there is an Opacity property added in Pen, Brush and Font.

gintasdx
03-05-2011, 07:06 PM
Makes me wonder if you plan to add FPGUI framework (http://sourceforge.net/projects/fpgui/) support. It really lacks of PNG support with alpha channels.

circular
04-05-2011, 01:38 PM
Well in fact I don't really understand what FPGUI is. Is it like applications that run in full screen mode and that draw windows themselves, or is it a framework that use basic window functions of different platforms to render their own controls ?

Does FPGUI has TCanvas objects and use the same Graphics unit as the standard LCL ?

gintasdx
05-05-2011, 06:16 PM
Does FPGUI has TCanvas objects and use the same Graphics unit as the standard LCL ?

Yes FPGUI has own Canvas object derived from GDI. It's a GUI toolkit just like Qt or LCL. It doesn't uses Graphics unit and that's why it procures much smaller executable and it doesn't depend on GTK in Linux.

circular
05-05-2011, 09:59 PM
I see. Well BGRABitmap depends on standard TCanvas, Gtk and LCL, and uses types from Graphics and GraphType units. So that would be much work to make a version for FPGUI. I'm not familiar with it nor with the way it accesses to graphics. So I will not do this, I guess. But if someone wants to try...

gintasdx
10-05-2011, 05:37 PM
I will see if I can make the FPCanvas work with FPGUI. Another question is how to get a pixel color by mouse click in 4th tutorial image?

Something like this.

TPaintBox.Canvas.Pixels[Mouse.CursorPos.X,MouseCursorPos.Y]

circular
11-05-2011, 10:02 AM
I would recommend you to save the bitmap as a variable in the interface section, and get pixel colors using BGRABitmap.GetPixel.

circular
04-06-2012, 12:39 PM
Hello people,

Just to notify that the 3D engine is finished. Well at least there could be some minor improvements, but it works great.

Here is a screenshot :