How to Reduce Artifacts from Aliasing After Projective Transformation

[brickman1444]

I have a use case where I'm seeing artifacts in an image after projective transforming it with significant downscaling.

I'm transforming this, (This image is public domain):

And the result I get is this:

Note the jagged and dotted lines on the inner edge of the frame while in the original the edge is smooth.

At the high level, my intention is to take a flat art image and perspective transform it onto a stock background image to make images like this: https://twitter.com/AppraisalBot/status/1398487427145211904

I've simplified the code I'm using to do this down to this:

using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Processing;
using SixLabors.ImageSharp.PixelFormats;
using System.Numerics;

namespace AppraisalBot
{
    public class Program
    {
        public static int Main(string[] executionArguments)
        {
            var artImage = Image.Load<Rgba32>("art.jpg");
            var backgroundImage = Image.Load<Rgba32>("background.jpg");

            Matrix4x4 newMatrix = new Matrix4x4(0.1411272f, -0.002358602f, 0, -0.000002420954f,
                                                -0.01812401f, 0.1316522f, 0, -0.00004851806f,
                                                0, 0, 1, 0,
                                                193.0991f, 218.889f, 0, 1);

            artImage.Mutate(x => x.Transform(new ProjectiveTransformBuilder().AppendMatrix(newMatrix), SixLabors.ImageSharp.Processing.KnownResamplers.Spline));

            artImage.Save("transformed.jpg");

            backgroundImage.Mutate(x => x.DrawImage(artImage, 1.0f));

            backgroundImage.Save("result.jpg");

            return 0;
        }
    }
}

Background is this image:

The matrix is calculated based on the art images dimensions and the target corners on the background image. The math I'm using can be seen here but I don't expect it to be relevant to this question.

I'm using the Spline resampler because it had the best result relative to the other known samplers from my testing. It was also labelled as having "Smooth" output which I think is what I'm looking for.

The artifacts are present in artImage before it's drawn onto backgroundImage, so passing GraphicsOptions to x.DrawImage() won't help.

Does anyone have any ideas to achieve this sort of perspective transform with downscaling with less visible artifacts? Some sort of different resampler? A parameter I'm missing? Should I downscale first and then perspective transform?

Thanks! 🙏

[JimBobSquarePants]

Performing a perspective transform then scaling via Resize will give you much better quality output. It looks like there's still work to do improving the output quality of our transforms EDIT. I just did a comparison with SkiaSharp and our output is virtually identical.

Here's the output of a very rough approximation of your transform