diffuseTexture with alpha channel has edge artifacts on iOS?

[Sebavan 610]

@jps0611 I have go t a feeling it might be linked to specular anti aliasing. Could you try this pg and let me know ? http://playground.babylonjs.com/#2IY6VG#8

 

[jps0611 20]

12 hours ago, Pryme8 said:

g about being the culprit and it having to do something with the way we handle emissive textures and alphas.

@Sebavan hmmm unfortunately the issue still seems to be there. I've uploaded a video to illustrate:

 

[jps0611 20]

It does seem to be more pronounced when viewing the mesh at oblique angles. Is that expected?

[Sebavan 610]

Interesting, if it is dependant on the view angle it might be related to light. let s then try an unlit version to confirm this: http://playground.babylonjs.com/#2IY6VG#9

[Sebavan 610]

Also I noticed the mip map mode is linear -> Nearestr_mipmap_linear. Could you try a full linear one ?

[jps0611 20]

10 minutes ago, Sebavan said:

Interesting, if it is dependant on the view angle it might be related to light. let s then try an unlit version to confirm this: http://playground.babylonjs.com/#2IY6VG#9

Unfortunately still there when unlit as well:

[Sebavan 610]

Ok the last thing I can think of is alpha premultiplication while loading the png on ios.

Basically it looks like the border:

has the alpha premultiplied at load time by ios on webgl: https://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html

If it is the case it would be an unfortunate ios bug 😞 to prevent any texture rsizing and so on, could we also check that the size is a power of two ?

 

[jps0611 20]

2 minutes ago, Sebavan said:

Ok the last thing I can think of is alpha premultiplication while loading the png on ios.

This was @Deltakosh's fear as well. ^

[jps0611 20]

5 minutes ago, Sebavan said:

could we also check that the size is a power of two ?

Double checked it's a 4K texture at 4096 x 4096.

[Sebavan 610]

So yup, definitely looks more and more like alpha premul on ios. Quick test: Could you confirm you see the image below on ios ?

https://playground.babylonjs.com/#U6F7E2

[jps0611 20]

 

1 minute ago, Sebavan said:

Quick test: Could you confirm you see the image below on ios ?

Confirmed! I can see it on iOS.

[Sebavan 610]

It is not darker ???

[jps0611 20]

Also updated the sampling method to full linear...no luck:

[Sebavan 610]

Final one before I need to think about completely different ideas : https://playground.babylonjs.com/#U6F7E2#1

Is this one ok (I tried to reexport the png differently)

[V!nc3r 223]

I notice also that this black edge border can came from the software export, here an example comparing the same vector shape created on Inkscape & Photoshop:

The one from Inkscape come with more black edge border than the one from 'toshop.

[jps0611 20]

52 minutes ago, Sebavan said:

Final one before I need to think about completely different ideas : https://playground.babylonjs.com/#U6F7E2#1

Is this one ok (I tried to reexport the png differently)

The good news is...something changed. The bad news......it's worse.

 

[jps0611 20]

59 minutes ago, Sebavan said:

It is not darker ???

Here's what I see:

[Pryme8 735]

I swear it has to do with the transparent pxls being held as pure black with no alpha being mixed at the edges to the semi transparent ones.

[jps0611 20]

1 hour ago, Pryme8 said:

I swear it has to do with the transparent pxls being held as pure black with no alpha being mixed at the edges to the semi transparent ones.

Is this something that needs to be addressed in BJS? Or something I can change in the way I'm exporting my assets?

[Pryme8 735]

I'm pretty sure there is a setting somewhere we can adjust.  
Let me do some testing, and research I am almost sure I've fixed this in the past with Deltas help on one of my projects.

I'm pretty sure this came up as well when I was doing ping-pong buffers for simulations where it would corrupt my simulations by setting a pixel to an alpha 0 cause inherently to turn black... its an interesting behavior but I think its there to save memory, cause why hold a bunch of byte data for something you wont see, I get it... its just F&*(@#$! annoying.

Give me a little bit, I have a busy day and should prolly not even be on here right now but luckly I'm waiting on someone for a second so I had a moment.

[jps0611 20]

22 hours ago, Pryme8 said:

Give me a little bit, I have a busy day and should prolly not even be on here right now but luckly I'm waiting on someone for a second so I had a moment.

You're awesome! Have a great weekend!

JPS

[Sebavan 610]

@jps0611, I had a bit more time to work on this issue.

It seems that the mip map generated for ios have black info on the neighbors transparent pixels hence the darken colors. Disabling Mips completely is solving it: https://playground.babylonjs.com/#U6F7E2#6

At the drawback of Quality obviously but it is already progress meaning only the inerpolation with full transparent pixel looks like broken on ios.

 

[Sebavan 610]

@jps0611 I did a quick test displaying the image without alpha:

https://playground.babylonjs.com/#U6F7E2#9

and yes it looks like on IOS every transparent pixel has been lost like on IE so when the filtering is turned on you get some black mixed in the cat creating the border.

Let me see if there is any setup we can tweak but if it is like IE, this would be a browser issue without workaround except changing the texture format for something less compressed 😞.

[jps0611 20]

@Sebavan oh wow...this is much a much more interesting story than I first thought! Thanks for continuing to investigate!

[Sebavan 610]

So even trying to force the alpha unpremultiply does not work on safari:

https://playground.babylonjs.com/#U6F7E2#11

Whereas we can see it working on Chrome by turning the feature off:

https://playground.babylonjs.com/#U6F7E2#10

@jps0611 unfortunately there is nothing we can do at the Babylon level for this, You can contact the Safari team to report the issue and in the mean time you could try to use another format for your picture in webgl.