PNG Images with alpha are pixelated on GUI image element

Bugs
,
1

Hi,

this is really no big deal, but I think the documentation should contain a warning that downscaled PNG images will look really ugly if they contain an alpha channel:

https://www.babylonjs-playground.com/#XCPP9Y#2255

I spent over an hour trying to track the source of the problem. This (unsurprisingly) occurs both in image buttons (where I had the problem) and in Image objects when used directly and is obviously because alpha-testing is used instead of alpha blending. I completely understand why it’s done, but it is a bit counterintuitive.

edit: What makes this even more surprising is that with image.autoScale = true there is perfect alpha blending, just not when stretching. So alpha testing vs blending might not even be the root cause of this.

Thanks!

2

Hey this is pure html issue unfortunately :frowning:

Do you want to add a note in the doc?

1 Like
3

So the stretching is done through a temporary DOM element?

4

Everything in the (2D) GUI is done through DOM/HTML as it is using canvas.getContext(“2d”) to get a context and is using it to draw things in it (for eg, pictures are blit by using the drawImage function of the context).

1 Like
5

Interesting! I never realized that. The performance is excellent!

1 Like
6

It is well optimized :stuck_out_tongue:

2 Likes