No announcement yet.

Canvas Attributes question

  • Filter
  • Time
  • Show
Clear All
new posts

  • Canvas Attributes question

    'Holographic' doesn't show anything, 'SDF' just show a rectangle fill with one color, 'Outline ' looks the same as original image, is it normal?
    Last edited by DraculaLin; 01-26-2020, 01:40 AM.

  • #2
    When using TCanvasAttribute.Holographic, you need to set TCanvas.Transform to your combined View/Projection matrix. This will make canvas render in a particular plane in 3D world, which could be useful to add drawings and text to 3D objects.

    TCanvasAttribute.SDF enables rendering of images and text, which are represented as Signed-Distance Fields. This can be particularly useful to render scaled text and graphics, which will appear crisp as if it was a vector graphics, without blurriness. TCanvasAttribute.Outline adds an outline to an existing Signed-Distance Field, which can also vary in brightness and color.

    For text, Afterwarp can internally produce SDF-based font glyphs by setting TFontSettings.Effect.SignedFieldDistance to non-zero values, e.g. 1 or 2. You can also generate SDF from your existing image with alpha-channel by calling TRasterSurface.MakeSignedDistanceField (set its ASpread values to something like 1 or 2).

    The biggest benefit of SDF is to be able to render some image shapes that can be freely scaled, while still maintaining sharp looks as if they were vector graphics. The only drawback is that it works for single-color solid shapes or text.

    The usage of all three attributes is illustrated in Chart3D example that comes with the distribution (in addition to C++, it has both Delphi and FreePascal/Lazarus ports). In this example, you can make very large zooms and text will still appear sharp as if it was a vector graphics. Also, if you zoom out quite a lot, the text will still be readable because Afterwarp uses 16x super-sampling for SDF images, so both magnification and shrinking would produce precise results with sub-pixel accuracy.

    I've attached a screenshot from Chart3D sample, where you can see text with large zoom. The text that says "Chart 2" uses all three attributes: Holographic, SDF and Outline. You can also see SDF text in action in Afterwarp v2 wallpaper, where each box is labeled with an appropriate code (this can be seen on left side of wallpaper).
    Attached Files


    • #3
      But what is the exact way to use SDF ?, As I've mentioned above,it only show a rectangle.In ImageBasics example i just change the code.
       // Color manipulation samples.
      // FCanvas.Attributes := [TCanvasAttribute.ColorAdjust];
         FCanvas.Attributes := [TCanvasAttribute.SDF];
      Last edited by DraculaLin; 01-27-2020, 04:24 PM.


      • #4
        I have attached a very crude example of SDF that I've baked quickly myself. My hand drawing of happy face isn't very good, but you'd get the idea. This one is for FreePascal/Lazarus, but you can convert it easily to Delphi (MainFm.lfm to MainFm.dfm, and change "{$R *.lfm}" to "{$R *.dfm}" inside MainFm.pas). The idea is that you can scale freely that image and it'll still look like vectorized.

        Your modifications to ImageBasics produce rectangles because the image doesn't have varying alpha-channel. Alpha-channel is used a reference for SDF.

        Edit: for comparison, I've attached a second screenshot, where the same image is just scaled and colored, without using SDF. You can notice that it looks ugly when shrank to really small sizes or greatly magnified; furthermore, in a 3D scene under perspective, it looks even uglier, whereas SDF looks good at any angle.
        Attached Files


        • #5
          Still does not function properly. Could you please try my png ?

          Click image for larger version  Name:	sdf.jpg Views:	0 Size:	35.4 KB ID:	166
          Last edited by DraculaLin; 01-27-2020, 04:23 PM.


          • #6
            Why do you say it is not working properly? From the picture you have attached, it looks like working perfectly. Remember that for SDF, only mask (alpha-channel) is considered, and the resulting shape is rendered of solid color. In case of example I've attached and screenshot that you generated, the shape is yellow with red outline.


            • #7
              So i'm totally misunderstood that function. I thought that was similar to cubic interpolation or TextureFilter, antialias...etc