Texture loaded from external links not working on safari browser

nazeer_sany · July 2, 2020, 9:14am

I have product configurator where user can upload their custom logo and apply it on the product.
It is working on windows and android mobiles too.But not working on mac safari browser.

Later on I checked that the png image was not power of 2.
So I converted the image to power of 2 and now its working but I cannot ask every user to convert their logo to power of 2 and then upload it.

Can some one help me why non power of 2 textures are not working?
Here is the link to the configurator if any one want to test it.
You will need to click on logo and then upload a png.
Thanks

https://playcanv.as/p/Po8lzmyn/

Leonidas · July 2, 2020, 9:39am

Hi @nazeer_sany,

So Safari is still supporting only WebGL 1.0 which comes with a number of restrictions. One of them is that non power of 2 textures are only partially supported: only for textures that have mipmaps disabled as far as I know.

Found a sample of a non PO2 texture with no mipmaps which seems to be working fine on Safari.

So try disabling mipmaps and also make sure to set clamping to edge on your uploaded texture first:

https://webglfundamentals.org/webgl/webgl-3d-textures-good-npot.html

nazeer_sany · July 2, 2020, 9:45am

HI Leonidas,
Thanks for the fast response.
Can you guide me how to “disabling mipmaps and also make sure to set clamping to edge” on runtime?
Thanks

Leonidas · July 2, 2020, 9:50am

Sure, I imagine you are creating a texture in code, so you can apply the following properties to it:

    myTexture.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
    myTexture.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
    myTexture.mipmaps = false;

nazeer_sany · July 2, 2020, 10:07am

Thank you very much

nazeer_sany · July 2, 2020, 5:03pm

Hi Leonidas, its not working at my side, the texture disappears when I make it clamp to edge

nazeer_sany · July 2, 2020, 5:06pm

can I resize the texture at runtime? to make it power of 2?

yaustar · July 2, 2020, 5:18pm

Can you share the URL for us to try?

nazeer_sany · July 2, 2020, 5:35pm

Here you go

yaustar · July 2, 2020, 5:41pm

Hmm… You could resize the image in JS before creating a texture from it. That would probably be the best route TBH.

nazeer_sany · July 2, 2020, 5:42pm

Hmmm, i think you are right I will do that.

Leonidas · July 2, 2020, 6:30pm

@nazeer_sany testing the url you sent on a Macbook Pro on Safari seems to be working fine:

nazeer_sany · July 9, 2020, 8:28am

Hi Leonidas, sorry for the delayed response.
I did what what yaustar suggested. To resize the image in JS before creating the texture.
Now its working fine.
Thanks you all for your support !