Gray borders around .png images with TriangleList

Graphics
1

Pretty simply, gray borders appear along the outside of my images in 3d space. I load my png file into a Texture2d. I specify a VertexPositionColorTexture of 6 coordinates. My effect is an alpha test effect to remove the transparent parts of my png files (and experimenting with slightly transparent images and the z-buffer with alpha blend).

GrayBorders.png1041×602 34.5 KB

In this example, I have 2 sets of images meeting perpendicular. They are both opaque and are drawn using a Trianglelist.

I’ve seen System.Drawing methods of doing it that don’t seem to be available in Monogame (at least I can’t get it to show).

2

That is the effect of bilinear filtering and a clamp mode of wrap when it filters the white texels on the right edge of the texture with the black texels on the left edge. Bilinear filtering samples neighbouring texels. If the texel is on the right edge, the neighbouring texel wraps around to the left edge and thus samples a black texel. This gets blended and darkens the colour that gets rendered to screen at that position.

The easiest thing to try will be using SamplerState.LinearClamp. This will still use bilinear filtering, but it won’t wrap to the other side of the texture when sampling on the edge of the texture.

1 Like
3

Thank you very much. With these I had repeating texture coordinates which wrecked with LinearClamp, but PointWrap worked well for these. I may come back to linear clamp when I remove the repeating texture coordinates though.

4

An alternative so that you can keep LinearWrap and still use repeating texture coordinates is to offset your texture by half.

This simple change means that a wrap while filtering will always sample the same colour.

5

By offset the texture, do you mean the texture coordinates in the code or do you mean the image itself in an image editor? With the former, it still shows gray borders :confused:

6

Offset the image itself in the texture. This allows the wrap to work as expected (black → black, white → white, etc). Then the texture coordinates could be adjusted by +0.25 to get the original position of the checkerboard pattern back on the rendered mesh.

7

Before I offseted the coordinates (and using your image) the gray borders disappeared. After I applied the offset however, the gray borders reappeared.

float os = 0.25f; //offset
        Verts[0].TextureCoordinate = new Vector2(os, os);
        Verts[1].TextureCoordinate = new Vector2(os, os + reps);
        Verts[2].TextureCoordinate = new Vector2(os + reps, os);

        Verts[3].TextureCoordinate = Verts[1].TextureCoordinate;
        Verts[4].TextureCoordinate = new Vector2(os + reps, os + reps);
        Verts[5].TextureCoordinate = Verts[2].TextureCoordinate;

I double checked and LinearWrap is on and the image is still your offset .png.

8

Thinking about it more, the offset image and texture coordinate adjust does nothing. They cancel each other out and the wrap issue still exists. To get a clean edge you will need to use LinearClamp.

Edit: Not LinearClamp. Getting confused now. PointWrap would work, which turns off filtering though. You’ve got some things to use now and should be able to get something that works for you.

1 Like
9

Haha no problem. I don’t think I am ultimately going to use repeating textures in a primitive anyway, but for the sake of this PointWrap definitely does the trick. :smiley: Thanks.