Mip map bleeding at the edges on tile atlas

Graphics Shaders & Materials
1

I’m making a Minecraft-type voxel engine (ok no surprises here, I guess), and have textures packed in an atlas. I’ve made a shader which then chooces the right tile according color alpha channel. When there are no mip maps it works all too well, but with mip maps there’s strange bleeding at the edges of blocks. For test purposes I’ve colored each mip map level differently. At the image, the lines you see are from level 5. Any ideas what would cause this?

2283873--153363--Problem.png
2283873--153363--Problem.png940×505 49.9 KB

Here’s the same view with actual textures (problem isn’t as striking, but still persists). For testing, textures are from Minecraft texture pack “Faithful” by Vattic.
2283873--153364--Problem textured.png
2283873--153364--Problem textured.png940×505 222 KB

Here’s the shader code. I have currently set the safe margin to 0, as it doesn’t affect this problem (it’s for filtered images).

Shader "Custom/Textured" {
    Properties {
        _MainTex ("Atlas", 2D) = "gray" {}
    }
    SubShader {
        Tags { "RenderType"="Opaque" }
        LOD 200
      
        CGPROGRAM
        #pragma surface surf Standard fullforwardshadows
        #pragma target 3.0

        sampler2D _MainTex;

        struct Input {
            float4 color : COLOR;
            float3 worldNormal;
            float3 worldPos;
        };

        void surf (Input i, inout SurfaceOutputStandard o) {
            const float gridSize = 16; //How many cells are in a row
            const float margin = 0; //(1 / gridSize) / 16; //Margin for preventing bleeding
            const float cellSize = (1 / gridSize) - (margin * 2); //Size of one cell
            float blockId = int(i.color.a * gridSize * gridSize) / gridSize; //Get tile id from alpha channel, and transform it so that fraction is horizontal position [0, 1] and integer part points vertical position [0, gridSize]
            fixed4 c = tex2D (_MainTex, frac(float2(
                i.worldPos.x * (1 - i.worldNormal.x) + i.worldPos.z * i.worldNormal.x, //Figure out texel location inside a cell.
                i.worldPos.y * (1 - i.worldNormal.y) + i.worldPos.z * i.worldNormal.y)) * cellSize  //Take in account face normal
            + float2(blockId + margin, floor(blockId) / gridSize + margin)); //Choose the actual tile
          
            o.Albedo = c.rgb;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

ps. Why code block doesn’t have option for shader code? Forum newbie here…

2

I think the section of mip-mapping there can help you…, also check out greedy meshing if you have’nt already =)
Lots of cool stuff in there

3

Thanks for reply. Having read that, and just about every other article about voxel engines I’ve found I am already using greedy meshing, figured per tile mip mapping all right and tried to add the huge bleeding area (quadrupling texture size) - it kind of solves the problem, as no other tile shows up, but strange seams of higher mip map persist and they’re pretty ugly. Here’s a zoomed up image with the seam highlighted.

2283885--153369--Seam.png
2283885--153369--Seam.png716×552 107 KB

As you can see, the seam isn’t continuous - so it isn’t bleeding problem. Somehow for these pixels wrong mip map is chosen :confused:

4

Ah I know what that is!!
I think atleast…, since the uvs are “jumping” from one part of the texture to another place (instead of normal wraping) it thinks it needs to use a lower mip-mapping level…, got the same problem myself in a custom shader…,

you can use your own values for the uv-delta (I think it’s called)

I’ll check real quick…

5

Yeah this is a great example of how to solve it! :slight_smile:

Hope that’s the problem (I’m almost 100% sure)

6

Thank you, that seems to be the solution. I gave the article a quick read, but so far I didn’t find the equivalent function for texture2DGrad in cg. I’ll look more to it after work.
EDIT: Ah, it is simply tex2Dgrad, but editor just didn’t highlight it properly. Still gotta figure those delta values somehow :slight_smile:

7

I think you can just use tex2D or Texture2D directly without the grad…, I’m not sure what the differnce is exactly…
I definitely used tex2D in my shaders…

8

How exactly did you solve the problem in your shader? Tex2Dgrad lets you use your own delta values, which ensures correct mip level is chosen. Normal tex2D makes this calculation for you, but in this case, chooses the wrong mip map at the seams.

9

It worked! Thank you :slight_smile: . Here’s the fixed shader function:

        void surf (Input i, inout SurfaceOutputStandard o) {
            const float gridSize = 16;
            const float margin = (1 / gridSize) / 4;//For 16x16 textures, margin of 1px, 32x32 => 2px etc.
            const float cellSize = (1 / gridSize) - (margin * 2);
            float blockId = int(i.color.a * gridSize * gridSize) / gridSize;
            float2 uv = float2(
                i.worldPos.x * (1 - i.worldNormal.x) + i.worldPos.z * i.worldNormal.x,
                i.worldPos.y * (1 - i.worldNormal.y) + i.worldPos.z * i.worldNormal.y);
            fixed4 c = tex2Dgrad (_MainTex, frac(uv) * cellSize + float2(blockId + margin, floor(blockId) / gridSize + margin), ddx(uv * cellSize), ddy(uv * cellSize));
           
            o.Albedo = c.rgb;
        }

There’s still some seams between chunks (altough these chunks consist one mesh)… I’ll see if I can work it out myself. Other problem, which is still harder to fix is when mip maps get too small to contain tiles :confused:
Here’s solution, but it’s been there since 2013: http://feedback.unity3d.com/suggestions/maximum-mipmap-level

2 Likes
10

regarding tex2D vs tex2Dgrad…, For me it seems tex2D can take two more values and thus behaving exactly like tex2Dgrad…, I’m not sure if there’s any difference then…, maybe it’s good to use tex2Dgrad for claritys sake