Texture distortion

[MyShallowTime]

Hello, have you encountered this problem?

When I draw this image in small size, part of it disappears.


Look, the vertical lines disappeared。why？

Does anyone know why?
Thanks in advance!

demo:
texture.zip

[kdashg]

Probably just naive texture minification sampling. If you shrink something enough, the two texels averaged for sampling can stretch across the line.

        7px: | W | W | W | B | W | W | W |
 Sampled at:   ^    ^   ^     ^   ^    ^
Averages to: | W +  W | W  +  W | W +  W |

If you want that visual data to be preserved, you'll want to calculate and supply your own mipmaps.

[MyShallowTime]

Thank you very much, I will try it!

[MyShallowTime]

Hi, @kdashg
How to calculate and supply own mipmaps.
I only see this api gl.generateMipmaps(type)， type has only a few fixed values

[greggman]

You can upload mips levels by setting the 2nd parameter for texImage2D or texSubImage2 to the mip level you're supplying data for. The 2nd the last example on this page has every mip level in different colors.

As for calculating the mip level data on your own, that's a huge topic. You'd use an image scaling algorithm. WebGL does not provide these. You have to provide them yourself.

[MyShallowTime]

Thanks, it feels hard for me. I still need to learn.