Recent

Author Topic: Text anti aliasing  (Read 5308 times)

user5

  • Sr. Member
  • ****
  • Posts: 357
Text anti aliasing
« on: September 06, 2020, 11:32:31 am »
    Does anyone know what the algorithms are for applying anti aliasing to block text and other shapes? I have seen the code on this forum for standard shapes, lines etc. but I'm talking about applying a TrueType kind of edge softening to images on video frames that can change and morph into any shape at all. Just by studying TrueType text edge softening up close I can see that the edge softening only applies to 'curved' portions of raster scan text images but I haven't got it all figured out yet.

Handoko

  • Hero Member
  • *****
  • Posts: 5132
  • My goal: build my own game engine using Lazarus

circular

  • Hero Member
  • *****
  • Posts: 4196
    • Personal webpage
Re: Text anti aliasing
« Reply #2 on: September 06, 2020, 05:51:48 pm »
Roughly explained, you need to draw the pictures 3 times as wide in grayscale. Then shrink it by assigning 3 values to one pixel into each channel (red, green, blue).
Conscience is the debugger of the mind

user5

  • Sr. Member
  • ****
  • Posts: 357
Re: Text anti aliasing
« Reply #3 on: September 07, 2020, 04:43:33 pm »
    Thank you for your responses. I hope that what you say isn't over my head but I will check out Handoko's suggestions and ponder what circular said which I assume involves BGRABitmap and that's fine with me. I may have some questions again later if that's okay. By the way, I now think that BGRABitmap is more reliable than RawImage though the latter has its very useful applications.

user5

  • Sr. Member
  • ****
  • Posts: 357
Re: Text anti aliasing
« Reply #4 on: September 07, 2020, 05:09:13 pm »
    I thought of something else. I was thinking about what circular said and it reminded of an edge softening sub-program that I've been working on which can also be used in reverse to do de-edging. It does its work in a way similar to what circular said, if I understand him correctly. This edging sub-program and another de-edging feature make the background shrink down (perfectly proportional) onto and into the foreground image which obliterates the previous anti aliasing so that it can be re-edged later. The great thing about this technique is that it preserves any existing internal edge softening. It would be nice to offer the user the ability to apply a TrueType kind of edge softening as well as the current ones. I will shortly check out your suggestions.

Handoko

  • Hero Member
  • *****
  • Posts: 5132
  • My goal: build my own game engine using Lazarus
Re: Text anti aliasing
« Reply #5 on: September 07, 2020, 05:39:59 pm »
I believe what circular meant is subpixel rendering too.

Subpixel rendering is a bit too technical for me to understand. But it is interesting to see how it works:
https://en.wikipedia.org/wiki/Subpixel_rendering

circular

  • Hero Member
  • *****
  • Posts: 4196
    • Personal webpage
Re: Text anti aliasing
« Reply #6 on: September 07, 2020, 10:18:48 pm »
Yes I am talking about sub pixel rendering.

Basically you have two things to consider:
- in a way, because the RGB channels are next to each other, the actual resolution of the screen is 3 times as wide. So a simple approach for example would be to render a grayscale image using each channel as a pixel. This kind of works but is not really nice, because of the second point:
- secondly, the color perceived depends on the 3 channels, so for example, if you have a thin line that would be 1 third of a pixel, of you change let's say only the red channel, then it would appear as a red line, even though you wanted a white line. To avoid this, you need to distribue the value to the adjacent channels.

Examples (values from 0 to 9)
grayscale     0    0    9             0     0    0
RGB            0    3    3             3     0    0
color         ---dark cyan--    ---dark red----
perceived         ----dark gray-----   -----black-----

you get some blurry effect though:
grayscale     0    0    0              9    9    9             0     0    0
RGB            0    0    3              6    9    6             3     0    0
color           ---dark blue---    ---pale green--      ---dark red----
perceived    --black--  ---pale orange/pale sky------   --black--

so probably you could get some mixed mechanism like:
grayscale     0    0    0              9    9    6             0     0    0
RGB gray     0    0    0              6    6    6             0     0    0   
remainder    0    0    0              3    3    0             0     0    0
RGB remain  0   0    1              2     2    1            0     0    0
RGB             0   0    1              8     8    7            0     0    0
color            --dkdkblue--       --cream---            ---black----
perceived     --black--   ----lightsilver----             ---black----
 
for a colored image as input, then you would need do that 3 times, one for each channel.
Conscience is the debugger of the mind

winni

  • Hero Member
  • *****
  • Posts: 3197
Re: Text anti aliasing
« Reply #7 on: September 08, 2020, 12:46:32 am »
Hi!

And I hope that @circulars explanation shows why AntiAliasing is such a thieve of CPU cycles. And so of time.

Winni

user5

  • Sr. Member
  • ****
  • Posts: 357
Re: Text anti aliasing
« Reply #8 on: September 08, 2020, 01:48:44 pm »
    A picture says a thousand words and it might help if I show you exactly what I'm trying to do. I'm sorry that I didn't do this before. The attached pictures are of an Arial Bold TrueType font before and after edge softening has been applied. b1.gif shows a part of the letter B in raster scan mode. b2.gif shows that letter after anti aliasing has been applied. All I want to know is how to do that anti aliasing. I know that the algorithms and possibly the code for this exist somewhere because the edge softening exists.
    The bold letter B is just a type of shape and as a shape changes its form then its edging must also change. circular, thank you for the information though I'm unsure how to apply it. You know more about this than I do and I'm floundering a bit. b3.gif shows a different type of anti aliasing, something that I did on my own.

user5

  • Sr. Member
  • ****
  • Posts: 357
Re: Text anti aliasing
« Reply #9 on: September 08, 2020, 01:55:37 pm »
    By the way, the anti aliasing shown in b2.gif was made by Lazarus! How does Lazarus do it?

furious programming

  • Hero Member
  • *****
  • Posts: 853
Re: Text anti aliasing
« Reply #10 on: September 08, 2020, 02:00:51 pm »
By the way, the anti aliasing shown in b2.gif was made by Lazarus!

So how? Lazarus is an IDE, so please provide more details.

Maybe the better question is: how the TFont.Quality works and what causes it in LCL/widgetset?
« Last Edit: September 08, 2020, 02:05:20 pm by furious programming »
Lazarus 3.2 with FPC 3.2.2, Windows 10 — all 64-bit

Working solo on an acrade, action/adventure game in retro style (pixelart), programming the engine and shell from scratch, using Free Pascal and SDL. Release planned in 2026.

user5

  • Sr. Member
  • ****
  • Posts: 357
Re: Text anti aliasing
« Reply #11 on: September 08, 2020, 02:55:22 pm »
    I'll try. As the attached code shows, the user picks a font and then pastes in over the form some memo box text in the chosen anti aliased font. The text appears in a non-transparent, movable banner that can be made transparent if desired. It occurred to me that maybe Lazarus didn't do the anti aliasing. Maybe the font itself does the edge softening and Lazarus merely sends it along. I am working with BMPs and PNGs that need this TrueType kind of edge softening. If text can be anti aliased this way then this should be applicable to any shape. Can the Lazarus antialiasing property be applied to BMPs and PNGs? It seems to me if I tried that but it didn't work out.

 
Code: Pascal  [Select][+][-]
  1. //The user chooses a font.
  2. procedure TForm5.MenuItem14Click(Sender: TObject);
  3. begin
  4.  if FontDialog1.execute then
  5.   StaticText10.font := FontDialog1.font;
  6. end;
  7.  
  8. //The user displays memo text in the chosen font. The movable text appears over the form
  9. //in a non-transparent colored banner that can be made transparent.
  10. procedure TForm5.MenuItem17Click(Sender: TObject);
  11. var tempnum:integer;
  12.     tempstr1:string;
  13. begin
  14.   text12visible := true;
  15.   statictext10loaded := true;
  16.   StaticText10.Visible := true;
  17.   StaticText10.Left := 34;
  18.   StaticText10.Top := 62;
  19.   StaticText10.Caption := Memo1.Text;
  20.  
  21.   if (custom = false) then
  22.   begin
  23.    if (statictext10.left + statictext10.width) > (paintbox6.left + 263) then
  24.     begin
  25.      tempnum := (statictext10.left + statictext10.width) - (paintbox6.left + 263);
  26.      statictext10.width := statictext10.width - tempnum;
  27.     end;
  28.  
  29.    if (statictext10.top + statictext10.height) > (paintbox6.top + 202) then
  30.     begin
  31.      tempnum := (statictext10.top + statictext10.height) - (paintbox6.top + 202);
  32.      statictext10.height := statictext10.height - tempnum;
  33.     end;
  34.   end;
  35.  
  36.    if (custom) then
  37.     begin
  38.      statictext10.Width := statictext10origwidth;
  39.      statictext10.height := statictext10origheight;
  40.      if (statictext10.left + statictext10.width) > (paintbox6.left + 551) then
  41.       begin
  42.        tempnum := (statictext10.left + statictext10.width) - (paintbox6.left + 551);
  43.        statictext10.width := statictext10.width - tempnum;
  44.       end;
  45.  
  46.      if (statictext10.top + statictext10.height) > (paintbox6.top + 408) then
  47.       begin
  48.        tempnum := (statictext10.top + statictext10.height) - (paintbox6.top + 408);
  49.        statictext10.height := statictext10.height - tempnum;
  50.       end;
  51.     end;
  52.  
  53. statictext10.height := statictext10newheight;
  54. if (statictext10.top + statictext10.height) > (paintbox6.top + 408) then
  55.  begin
  56.   tempnum := (statictext10.top + statictext10.height) - (paintbox6.top + 408);
  57.   statictext10.height := statictext10.height - tempnum;
  58.  end
  59. else
  60.  statictext10.height := statictext10newheight;
  61. ArrangeText;
  62.  
  63. statictext10.font.Quality := fqAntialiased;
  64. form78.ShowSettings;
  65.  
  66. if (statictext10loaded = true) and (borderextended = true) and (custom = true) then
  67.  AdjustWidthNow('StaticText10');
  68.  
  69.  
  70. end;


Handoko

  • Hero Member
  • *****
  • Posts: 5132
  • My goal: build my own game engine using Lazarus
Re: Text anti aliasing
« Reply #12 on: September 08, 2020, 03:05:44 pm »
It occurred to me that maybe Lazarus didn't do the anti aliasing.

If you use TStaticText you can set the quality:

Code: Pascal  [Select][+][-]
  1. type
  2.   TStaticText.Font.Quality = (fqDefault, fqDraft, fqProof, fqNonAntialiased, fqAntialiased,
  3.     fqCleartype, fqCleartypeNatural);

TCanvas.Font has such setting too.

marcov

  • Administrator
  • Hero Member
  • *
  • Posts: 11387
  • FPC developer.
Re: Text anti aliasing
« Reply #13 on: September 08, 2020, 04:15:26 pm »
Search for "signed distance font" both on google and on this forum.  This is a GPU acceleratable technique, and there are sources (from me) on this forum.

user5

  • Sr. Member
  • ****
  • Posts: 357
Re: Text anti aliasing
« Reply #14 on: September 08, 2020, 04:28:54 pm »

    I don't need apply this type of anti aliasing to just fonts and text. I need to apply it to TImages, bitmaps, bgrabitmaps, BMPs and PNGs like the program currently does using a different method.
    I'm talking about transparent TImages and bitmaps that have a foreground image surrounded by a solid color bacground that will flawlessly go transparent. The edging that the Lazarus program does now is applied to the foreground image based on what is UNDER the TImage, bmp, png etc. when the image background is transparent.
    Just by talking about this I may have a plan forming. The BGRABitmap edging sub-program currently does its obverse edging by comparing and mixing colors in a certain way but it occurred to me that maybe all I need do is simply modify it a bit to do TrueType anti aliasing. Apparently I will have to come up with those algorithms and code on my own and that will take more time. At least I have that as a fallback plan. The program can optionally go at an object from four directions to apply edging. I really do want this though it will take me away from other stuff that I want to do.

 

TinyPortal © 2005-2018