Converting NPOT textures to POT

[Andrew Varga]

Hi,

I've tested the function described here for converting an NPOT image to POT (which you might need if you're using repeat wrap mode or mipmap filtering):
https://www.khronos.org/webgl/wiki/WebGL_and_OpenGL_Differences

the way I see this creates a canvas which has a POT size but it only copies the image into the upper left area the same size as the NPOT image, not stretching it to fill the entire canvas (and so leaving empty space on the right / bottom edges).

This messes up the texture because the uv coordinates are not valid any more.

I wonder if this is a bug in the code?

As far as I see this line:
ctx.drawImage(image, 0, 0, image.width, image.height);
should be:
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

thanks,

Andrew

[Mark Callow]

If you do that, the image will become distorted, assuming drawImage scales when the image and the specified draw sizes don’t match.

You need to apply a texture coordinate transform in the shader or modify the coordinates before sending them to WebGL. I’ve always used a transform.

Regards

-Mark

[Andrew Varga]

You're correct it will be distorted (it will scale it without keeping the original proportionals). I was thinking since sampling is in the range of [0, 1] it shouldn't matter much, and some simple tests showed up ok, but I understand it having artifacts especially if the distortion is big.

The transform you're suggesting has to deal with the repeat mode too, because you don't want to sample the empty space right?
So it would look something like this (uvMax being the non-empty area)?
uv = mod(uv * uvMax, uvMax)

This adds a bit of complexity, because now I have to handle the repeat mode in my shader, and also if I don't care about mipmap filtering than I could just implement repeat mode in the shader similarly to above, without needing to convert the texture to POT ?