Edge texture bleed with custom UV mappings

Questions
, ,
1

Hello creative enthusiasts,

I’m new to Three.js and am currently playing around with UVs. I believe I am experiencing what is commonly known as “texture bleed” or “uv bleed”, where my geometry is picking up surrounding texels along the edges from my texture atlas.

bleed

I have read that you can solve the problem by indexing the center of the texels - while this seems to prevent bleed, it does not render the full 8x8 texture so I can’t use this method. Please also assume I am unable to make any changes to the texture atlas.

Fiddle: https://jsfiddle.net/vyb41jpt/

Anyone mind giving me a hand with this problem?

2

Bump, any kindred spirit out there?

3

If you want to use textures for blocks like Minecraft (just a wild assumption), generally textures that are always squares i would use a texture array as it gets rid of all the issues you have with a texture atlas.

Since texture arrays are WebGL2 only if you depend on WebGL1 the issue can be reduced by extending each tile with a border (just extending with the neighbour color) and custom mipmap generation. However sampling mipmaps when rendering and getting rid of issues caused from there is more tricky.

For your case you get rid of the issue by as you said, ensuring it will sample from the center of the tile texels, but you will see bleeding again in the distance and steep angles as it selects lower mipmaps that bleed into your tile.

4

Thanks for your reply!

Let’s say I don’t want to limit viewing my creation only to users with WebGL2. Do you have an example or guide to how I can achieve the result with WebGL1 and custom mipmaps? I am not experienced enough to have worked with it before.

5 
return new Float32Array([
0.378,0.873,0.498,0.873,0.378,0.752,0.498,0.752,
0.378,0.873,0.498,0.873,0.378,0.752,0.498,0.752,
0.378,0.873,0.498,0.873,0.378,0.752,0.498,0.752,
0.378,0.873,0.498,0.873,0.378,0.752,0.498,0.752,
0.378,0.873,0.498,0.873,0.378,0.752,0.498,0.752,
0.378,0.873,0.498,0.873,0.378,0.752,0.498,0.752
    ]);

image

6

http://mikolalysenko.github.io/voxel-mipmap-demo