diffuseTexture with alpha channel has edge artifacts on iOS?

[jps0611]

Howdy friends!

I've noticed that if I use either the alpha channel of a diffuseTexture or an opacityTexture, there are really bad artifacts around the edge of the alpha channel on iOS. Consider this playground:

http://playground.babylonjs.com/#35QZ3E#1

On Desktop all seems ok: 

But on iOS i'm getting:

@Deltakosh is there some magic ingredient i'm missing to refine the edges of the alpha channel?

Thanks!

JPS

[jps0611]

Does the Sprite manager offer better refinement here?

[Guest]

This may be linked to iOS reading the alpha as premultiplied.

Can you try with a TGA?

[jps0611]

@DeltakoshHmmm my Targa doesn't seem to playing nice: 

http://playground.babylonjs.com/#35QZ3E#2

[jps0611]

Confirmed that this issue is also present while using the SpriteManager.

[Guest]

what about this one: http://playground.babylonjs.com/#35QZ3E#3

[jps0611]

It sure does! My targa came right out of Photoshop CC...any documentation around the Targa support?

[jps0611]

Are there performance implications of using a Targa over PNG?

[jps0611]

Also related...on black I am noticing artifacts on the right edge of the plane with the Targa:

http://playground.babylonjs.com/#35QZ3E#5

 

 

 

[Guest]

So no perf penalty by using TGA (it is just slower to load)

the artifacts surely come from my TGA file which is bit crappy

 

for the TGA, I think you need to export it as 32bits

[jps0611]

Ok! Let me poke around a bit with this. Thanks!

[Nabroski]

interesting i see a seem on my windows machine too. for me it works by changing the wrap properties 
http://playground.babylonjs.com/#35QZ3E#15

[jps0611]

@Deltakosh  for our unique circumstances (we're building a web game) .png will have to be the chosen texture format.

I've been beating my head against a wall trying to find some work around....no luck thus far. Is there anything i'm missing? I'm surprised that nobody has discovered this issue before me. Building games for mobile platforms like iOS seems like precisely what Babylon is well positioned to handle. But if transparency doesn't work on textures cleanly...I'm sorta stuck.

Here's another playground explicitly showing the issue: http://playground.babylonjs.com/#2IY6VG#1

Thanks for any help!

JPS

 

[Sebavan]

Hello,

Can you send me a screenshot of what you are experiencing with the cat ?

I ll get an ios device tomorrow to try out.

[Pryme8]

Works just fine on my iPhone 6s

 

Actually now looking at the screenshot, I can see a little line... odd I cant see that while actively viewing it though.

[jps0611]

@Pryme8 It looks like even in your screenshot the issue is present.

 

[jps0611]

@Sebavan along the edges of the opacity I would expect to see the following for the Cat:

 

[Pryme8]

I bet it has to do with fully transparent pxls saving as 0,0,0,0  and the transition between from aliasing mixes that with the color and raises its alpha.

Or it might be something else are you using for your export setting on the pngs?
 

[Pryme8]

Pretty sure it’s the alias mixing, can you turn of mips as well to check that.

I can pretty confidently say it has to do with mipmapping or aliasing changing the values of the transitional pixel.

[jps0611]

From photoshop would could I change to producer a better export?

[Pryme8]

Its on the BJS side then after looking at your export (its correct).  Pretty sure its the mips or the aliasing.  First test turn off mips on the textures when importing them and lets start there.

It could be the alpha is getting premultiplied also.

[jps0611]

4 minutes ago, Pryme8 said:

First test turn off mips on the textures when importing them and lets start there.

Hmmm I'm not sure how to do that. Got some documentation I could take a look at? Or a playground:?

 

[Pryme8]

When I get some free time maybe, Im pretty busy this evening but if I get a second!

Ive had to fix this before as well, it was just a long time ago.

After some testing it seems related to the emissive not when you use an diffuse with alpha.  but more tests are needed.

[jps0611]

Thanks for you help @Pryme8 @Sebavan

[Pryme8]

http://www.babylonjs-playground.com/#YDO1F#69

I'm really leaning tword that 0,0,0,0 mixing thing I was talking about being the culprit and it having to do something with the way we handle emissive textures and alphas.