Iced: Semi-transparent image blending problem
I have a semi-transparent image and custom theme, but seems like the semi-transparent pixels still blend with white (default) color even when custom theme is active. Screenshot:
See "styling" example here: https://github.com/0xd34d10cc/iced/tree/image_edges
Is there a way to fix this?
0xd34d10cc
>All comments
@0xd34d10cc Thanks for the report!
Here is how your image looks without its alpha channel:
iced_wgpu uses bilinear filtering for images by default which can cause artifacts when combined with transparent pixels like the ones in your image. There is a blog post—Beware of Transparent Pixels—that explains some of the details.
If we want to avoid this consistently, we should eventually store images with a premultiplied alpha. This should not be hard, but it's an operation that we should either defer to the GPU, as it consists in applying a transformation to every single pixel of the image, or run in a background worker once we introduce async support to our rendering pipeline.
In the meanwhile, you may be able to fix the issue by editing the image and extend the purple transparent pixels to completely surround the edges of the circle.
hecrj
on 10 Aug 2020
Related issues
CallistoM
·
3Comments
pbspbsingh
·
4Comments
Charles-Schleich
·
3Comments
johannesvollmer
·
4Comments
michael-hart
·
4Comments
Most helpful comment
@0xd34d10cc Thanks for the report!
Here is how your image looks without its alpha channel:
iced_wgpuuses bilinear filtering for images by default which can cause artifacts when combined with transparent pixels like the ones in your image. There is a blog post—Beware of Transparent Pixels—that explains some of the details.If we want to avoid this consistently, we should eventually store images with a premultiplied alpha. This should not be hard, but it's an operation that we should either defer to the GPU, as it consists in applying a transformation to every single pixel of the image, or run in a background worker once we introduce async support to our rendering pipeline.
In the meanwhile, you may be able to fix the issue by editing the image and extend the purple transparent pixels to completely surround the edges of the circle.