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:

Rendering artifact lines

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: texture

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.



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.