[Development] QML Image aliasing when animating

[Gunnar Sletta]

This is the expceted result. smooth: true uses bilinear filtering which is what is supported in hardware. When scaling down, this starts to degrade. The effect is drastic for high-contrast content like the edges of a font. Once go get below 0.5x scale factor the sampling starts to ignore pixels and aliasing become very visible. 

The preferred solution is to prepare raster content (images in your case) close to the size you intend to show them. If you must scale them down, then use mipmapping. With the image element, you can get this by doing:

Image {
    layer.enabled: true
    layer.smooth: true
    layer.mipmap: true
    ...
}

However, by enabling the layer you get an extra texture copy of your rather large image, so it might be preferable to implement a custom QQuickItem which returns a QSGSimpleTextureNode with a QSGTexture with mipmapping.

cheers,
Gunnar

On 22 Jan 2014, at 04:03, Joshua Kolden <joshua at crackcreative.com> wrote:

> I’m getting boxed in with rendering bugs on two fronts.  Originally I tried to work with fonts for the following animation, but have both render quality and font ‘subfamily’ selection bugs to deal with there. So I took the effort to switch a lot of stuff around and use images instead, however I’m getting aliasing artifacts now.  I’m rather stuck at the moment for rendering a good quality large font design.
> 
> This video shows the aliasing I’m talking about.  There are 3 images here one is 2048x512 and two are 512x512 for the Camera4 and C4 text logos.  The movie is captured pixel for pixel, and the images at their largest (in this example) are smaller then the source resolution.
> 
> http://c4.dev.s3.amazonaws.com/QMLImageRenderQuality.mov
> 
> Here is an example of one of the Image invocations:
> 
> Image {
>    id: c4CameraImage
>    fillMode: Image.PreserveAspectFit
>    source: “path/to/c4camera.png"
>    anchors.left: parent.left
>    anchors.top: parent.top
>    anchors.bottom: parent.bottom
>    smooth : true
>    opacity: 0.0
>  }
> 
> The animation is created with a number animation on the width and height of the parent rectangles.
> 
> I’ve asked on IRC, and in the [interest] list, but one said it should just work and the other didn’t reply.
> 
> Is this a known issue, a bug, or and I’m I doing it wrong?  
> 
> Thanks,
> j
> _______________________________________________
> Development mailing list
> Development at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/development