1
\$\begingroup\$

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.

Thanks!

\$\endgroup\$

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.