I'm working on generating programmatic textures for 3d models and showing them in WebGL using Threejs. To do this I generate a texture image (PNG) that contains per-triangle textures (a rectangle on the image, that is a rasterization of the 3d triangle), and an associated uv map. To prevent bleeding I generate a 2 pixel border around each triangle's texture rectangle in the resulting PNG. The rest of the texture image is black. This results in visible artifact lines when rendering:
The texture sampler is set to use NearestFilter for magnification and minification, and the texture's wrapping is ClampToEdge for both S and T, which makes things even more confusing. I've also tried with bigger per-triangle image borders and the problem still persists.
This is the texture I generate:
These lines seem to overlap with thin triangles, which are rasterized to 2 pixels along the shortest axis.
I'm sure there is no physical gap in the model, because it renders fine as a solid, so it must be a texture sampling related thing, which is also confirmed by the fact that the color of the lines is affected by color of the "empty" parts of the texture. If I change those, then the line colors also change. I've also tried offsetting UVs by 0.5 / tex_size and the same thing is rendered.
Any help would be useful.
Thanks!
