Webgl1 Dynamic Texture stretching

I am seeing a dynamic texture i am using stretching when running in webgl1.

I am guessing its because it is resizing the texture to a power of 2 as per this page - WebGL2 - Babylon.js Documentation

On this page - Using textures in WebGL - Web APIs | MDN

i found the following:

WebGL1 can only use non power of 2 textures with filtering set to NEAREST or LINEAR and it can not generate a mipmap for them. Their wrapping mode must also be set to CLAMP_TO_EDGE . On the other hand if the texture is a power of 2 in both dimensions then WebGL can do higher quality filtering, it can use mipmap, and it can set the wrapping mode to REPEAT or MIRRORED_REPEAT .

does this apply to babylon? can i set up my textures in a mode that is supported by both webgl1 and 2 but not have to worry about power of 2 sizing? and if so, how would I go about that?

For all the static textures it is usually not a problem as we resize under the hood for you.

In case of dynamic texture and to have the most perfs out of it I would either use any size if you are not falling into the webgl1 unsupported cases or a POT texture in any other cases.

Iā€™m just looking at the textures now.

As a bit of background, im using these dynamic textures for overlaying text of frames in my scene

when running in webgl2, the texture size im using is 1392x270 (double the size of the frame, so the text isnt blurry)
when i disable webgl2 its resizing the texture down to 1024x256. which means some of my text is cut off, and the rest is stretched.

Is there anyway to stop this power of 2 resizing without changing my texture size?

If no, how do I go about mapping my textures properly if I have to make the texture POT?

Also I am curious as to why the texture is being scaled down. I would have assumed it would scale up to the next POT

Answering my own question.

I oversized my dynamic textures to the next POT, and then set the UVs for my planes, so that it grabbed the right amount I needed to overlay my plane. Works fine in webgl 1 and 2 now.

2 Likes

Love it that is indeed the best solution !!!