[Development] QML Image aliasing when animating

[Joshua Kolden]

Upon further experimentation I find that turning layer.mipmap on and off, has no effect.  While smooth on a layer vs. smooth on the image does effect the image differently.  This makes sense if one is being filtered against the original image size and the other against the Item’s layer texture size.  We should have a mipmap option on images themselves not just an Item layer since layer size != image size.  It appears to me mipmaping is not working at all and I’d hesitate to go to any trouble with QSGTexture as that may be where it’s broken if thats the base for Image.    

Enabling bilinear filtering without enabling mipmaping is not an intuitive choice.  In effect it means images can only be displayed properly at their original size or larger then their original size.  I would not consider this expected behavior.  You do not have this problem in web page rendering for example.  Given the wide verity of devices and resolutions QML is targeted for I would expect mipmaping to be default behavior, as well as exposing the filter setting or simply hardcoding `anisotropic` when smooth is enabled..

I just tested and indeed, it appears that even static images are not being rendered properly when they are displayed at a resolution lower then their original resolution, and 

layer.enabled: true
layer.smooth: true
layer.mipmap: true

has no effect on images that are displayed larger their there original resolution.

Thanks,
j

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

> Interesting.  I tried the layer.mipmap previously with no effect, I did’t catch that one needed to “enable” it too.  However, I just tried this, and although it created a different, marginally smoother result is is still very noticeably aliasing.  
> 
> Here is a move of that test:
> 
> http://c4.dev.s3.amazonaws.com/QMLImageRenderQuality2.mov
> 
> In fact this version is starting to look very similar to the results I was seeing with the font renders.
> 
> On Jan 21, 2014, at 11:50 PM, Gunnar Sletta <gunnar.sletta at jolla.com> wrote:
> 
>> 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
>> 
>