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.
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:
Thanks for the fast response.
Can you guide me how to “disabling mipmaps and also make sure to set clamping to edge” on runtime?
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;
Hi Leonidas, its not working at my side, the texture disappears when I make it clamp to edge
can I resize the texture at runtime? to make it power of 2?
Can you share the URL for us to try?
Here you go
Hmm… You could resize the image in JS before creating a texture from it. That would probably be the best route TBH.
Hmmm, i think you are right I will do that.
Here you go
@nazeer_sany testing the url you sent on a Macbook Pro on Safari seems to be working fine:
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 !