<p>Two things come to mind:</p>

<ol>
<li><p>When generating your smaller mip map levels try to avoid using a simple 2x2 box filter because, though cheap and cheerful, they do a really poor job of removing high frequency information (that exceeds the Nyquist limit) as well as <em>over filtering</em> some of the lower frequency information you need to keep. (Also, as an aside, you need to perform the MIP map generation in linear space. If your source data is sRGB, you thus need to map to and from linear).  FWIW, In Williams' original paper on MIP mapping, he said he used a "box (Fourier) window" to generate the prefiltered levels, which would be a sinc function in image space.</p></li>
<li><p>Standard Trilinear filtering will also over- and under-filter parts of the texture. If you don't like the aliasing you may have to a) adjust the bias to increase the filtering (which will increase blurring) and/or b) try using anisotropic filtering.</p></li>
</ol>

CC BY-SA 3.0
2015-10-07T14:18:29.363Z
Sorry for maybe stupid question, but what is '2x2 box filter'? Does it have any other name?
bartosz.baczek
CC BY-SA 3.0
2015-10-07T14:25:08.200Z
I just meant the naive method of generating the next lower, X*Y MIP map level from the 2X *  2Y level above it. I.e.  that of averaging 2x2 texels in the upper level to produce the corresponding texel in the lower one.  It's cheap, but it's not great.  Even a simple 4x4 tent filter should produce a far better result.
Simon F
CC BY-SA 3.0
2015-10-07T14:34:54.963Z
Just to make sure I fully understand you - now I am creating my mip maps like this: http://pastebin.com/nX1MVvEp  . Instead of that i should generate mipmaps from my original texture with original size yes?
bartosz.baczek
CC BY-SA 3.0
2015-10-07T14:47:27.457Z
Well, I don't know what is inside the "resize" function so it's a little difficult to answer. The chaining, ie. 1024 generates 512, 512 generates 256, etc is not going to be a huge problem, as long as what's going on inside "resize" is ok.
As an experiment, could you create a 1024^2 texture that's all 0xFFFFFF _except_ for the top left pixel which you set to pure red, (0x0000FF).  What do you get in the 512^2  result?
Simon F
CC BY-SA 3.0
2015-10-07T14:55:04.413Z
My result: http://postimg.org/image/atd8nc4j3/3636ad65/
bartosz.baczek
CC BY-SA 3.0
2015-10-07T15:40:53.390Z
Sorry, I wasn't very clear. What I meant was "what is in the top left, say, 10x10 texels of 512x512 image".
Simon F
CC BY-SA 3.0
2015-10-08T12:05:38.610Z
Let us [continue this discussion in chat](http://chat.stackexchange.com/rooms/30017/discussion-between-simon-f-and-bartosz-baczek).
Simon F
CC BY-SA 3.0
2015-10-07T13:54:55.197Z
2015-10-07T14:21:16.043Z
2015-10-07T14:21:16.043Z
Simon F
<p><strong>SOLUTION</strong></p>

<p>I managed to solve my problem by increacing size of texture 2048x2048px so there would be generated more mipmaps. Also it seems like changing my SamplerState form anisotropic to something like that helped:</p>

<pre><code>SamplerState MirrorTexCoord = new SamplerState()
        {
            AddressU = TextureAddressMode.Mirror,
            AddressV = TextureAddressMode.Mirror,
            .
            .
            .
        };
</code></pre>

<p>Actually I don' t know what is TextureAdressMode.Mirror, but it helped a lot, now it looks like this:</p>

<p><a href="https://i.sstatic.net/2acRT.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/2acRT.png" alt="enter image description here"></a></p>

CC BY-SA 3.0
2015-10-09T16:15:52.590Z
Mirror is likely to define what happens when your texture repeats. In the normal mode (just considering horizontal only) if you had a texture that looked like "<"  you'd get "<<<<<".  With mirroring you get "<><><><><".  Obviously can also apply to vertical direction as well.
Simon F
CC BY-SA 3.0
2015-10-09T16:32:09.603Z
It looks like increasing the resolution is the main helper. Moires patterns are just barely starting to form in the back corner of the rectangle.
RichieSams
CC BY-SA 3.0
2015-10-09T16:38:44.877Z
Actually no, mirroring does most of the job :) I tested it with mirroring only and with bigger texture only as well, and turned out that mirror provides great effect. Fortunatelly tile texture is simetric so it' s not a big deal.
bartosz.baczek
CC BY-SA 3.0
2015-10-16T07:55:13.733Z
It's hard to judge how much of an improvement this has made since the plane does not extend as far into the distance as in the example in the question.
trichoplax is on Codidact now
CC BY-SA 3.0
2015-10-09T15:56:19.853Z
2015-10-09T15:56:19.853Z
bartosz.baczek
<p>I am working on Silverlight app. I am trying to render floor covered with tiles. Although I am using mip maps I am still getting awful Moire patterns, when trying to render big area.</p>

<p>What I am doing is creating cuboid and then cover it with single tile:</p>

<p><a href="https://i.sstatic.net/fZhKQ.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/fZhKQ.png" alt="enter image description here"></a></p>

<p>In my pixel shader I am multiplying texture coordinates in order to create tiled floor (otherwise I would get one tile stretched over my cuboid). Pixel shader code:</p>

<pre><code>float Width                 : register(c3);                  //Width of cuboid
float Height                : register(c4);                  //Height of cuboid

texture texTexture;
sampler textureSampler  : register(s0) = sampler_state {
    Texture = (texTexture);
};

struct VsOutput
{
    float4 position : POSITION;
    float3 dirLightPosition : COLOR;
    float2 texCoord : TEXCOORD0;
    float3 normal   : TEXCOORD1;
    float3 view : TEXCOORD2;
};

float4 main(VsOutput IN) : COLOR
{
    float2 texCoord = float2(IN.texCoord.x * Width / 4.0f, 
                             IN.texCoord.y * Height / 4.0f); //multiplying texture coordinates


    float4 texColor = tex2D(textureSampler, texCoord);

    return float4(color.r, color.g, color.b, 1.0f);
}
</code></pre>

<p>My output is:</p>

<p><a href="https://i.sstatic.net/pPOY1.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/pPOY1.png" alt="enter image description here"></a></p>

<p><strong>What else can I do to prevent from creating Moires patterns on texture?</strong></p>

CC BY-SA 3.0
2015-10-07T13:47:17.887Z
Have you verified that mipmaps are actually used? The screenshot looks like bilinear filtering, instead of trilinear,
Julien Guertault
CC BY-SA 3.0
2015-10-07T13:57:03.960Z
@JulienGuertault It may just be my poor eyesight but I can't see any distinct discontinuities that'd be indicative of just bilinear + nearest MIP map.
Simon F
CC BY-SA 3.0
2015-10-07T14:04:13.337Z
Actually my sampler state is set to AnisotropicWrap, which, I believe, is the best. Also I am 100% sure, that I use mipmaps.
bartosz.baczek
CC BY-SA 3.0
2015-10-07T14:06:34.733Z
@SimonF: sorry for the confusion, I meant linear. But anyway, apparently the problem would be elsewhere.
Julien Guertault
CC BY-SA 3.0
2015-10-09T15:41:33.163Z
@bartosz.baczek It's great that you found a solution to your problem. But instead of editing the solution into your question, please post it as an answer to your question, as [answering your own question is perfectly fine](http://computergraphics.stackexchange.com/help/self-answer).
Nero
CC BY-SA 3.0
2015-10-09T15:56:13.237Z
@Nero I did so :)
bartosz.baczek
<rendering><texture><pixel-shader><artifacts>
Moires patterns despite using mipmaps
bartosz.baczek
# Moires patterns despite using mipmaps

(Asked by: username_0 on 2015-10-07)

I am working on Silverlight app. I am trying to render floor covered with tiles. Although I am using mip maps I am still getting awful Moire patterns, when trying to render big area.

What I am doing is creating cuboid and then cover it with single tile:

[![enter image description here](https://i.sstatic.net/fZhKQ.png)](https://i.sstatic.net/fZhKQ.png)

In my pixel shader I am multiplying texture coordinates in order to create tiled floor (otherwise I would get one tile stretched over my cuboid). Pixel shader code:

```
float Width                 : register(c3);                  //Width of cuboid
float Height                : register(c4);                  //Height of cuboid

texture texTexture;
sampler textureSampler  : register(s0) = sampler_state {
    Texture = (texTexture);
};

struct VsOutput
{
    float4 position : POSITION;
    float3 dirLightPosition : COLOR;
    float2 texCoord : TEXCOORD0;
    float3 normal   : TEXCOORD1;
    float3 view : TEXCOORD2;
};

float4 main(VsOutput IN) : COLOR
{
    float2 texCoord = float2(IN.texCoord.x * Width / 4.0f, 
                             IN.texCoord.y * Height / 4.0f); //multiplying texture coordinates

    float4 texColor = tex2D(textureSampler, texCoord);

    return float4(color.r, color.g, color.b, 1.0f);
}

```

My output is:

[![enter image description here](https://i.sstatic.net/pPOY1.png)](https://i.sstatic.net/pPOY1.png)

**What else can I do to prevent from creating Moires patterns on texture?**

**Tags:** rendering, texture, pixel-shader, artifacts

> **Comments:**
> **username_1**: Have you verified that mipmaps are actually used? The screenshot looks like bilinear filtering, instead of trilinear,  
> **username_2**: @username_1 It may just be my poor eyesight but I can't see any distinct discontinuities that'd be indicative of just bilinear + nearest MIP map.  
> **username_0**: Actually my sampler state is set to AnisotropicWrap, which, I believe, is the best. Also I am 100% sure, that I use mipmaps.  
> **username_1**: @username_2: sorry for the confusion, I meant linear. But anyway, apparently the problem would be elsewhere.  
> **username_3**: @username_0 It's great that you found a solution to your problem. But instead of editing the solution into your question, please post it as an answer to your question, as [answering your own question is perfectly fine](http://computergraphics.stackexchange.com/help/self-answer).  
> **username_0**: @username_3 I did so :)  

---

## 2 answers

### Answer by username_2 on 2015-10-07. Score: 5 | Accepted answer

Two things come to mind:

1. When generating your smaller mip map levels try to avoid using a simple 2x2 box filter because, though cheap and cheerful, they do a really poor job of removing high frequency information (that exceeds the Nyquist limit) as well as *over filtering* some of the lower frequency information you need to keep. (Also, as an aside, you need to perform the MIP map generation in linear space. If your source data is sRGB, you thus need to map to and from linear). FWIW, In Williams' original paper on MIP mapping, he said he used a "box (Fourier) window" to generate the prefiltered levels, which would be a sinc function in image space.
2. Standard Trilinear filtering will also over- and under-filter parts of the texture. If you don't like the aliasing you may have to a) adjust the bias to increase the filtering (which will increase blurring) and/or b) try using anisotropic filtering.

> **Comments:**
> **username_0**: Sorry for maybe stupid question, but what is '2x2 box filter'? Does it have any other name?  
> **username_2**: I just meant the naive method of generating the next lower, X*Y MIP map level from the 2X *  2Y level above it. I.e.  that of averaging 2x2 texels in the upper level to produce the corresponding texel in the lower one.  It's cheap, but it's not great.  Even a simple 4x4 tent filter should produce a far better result.  
> **username_0**: Just to make sure I fully understand you - now I am creating my mip maps like this: http://pastebin.com/nX1MVvEp  . Instead of that i should generate mipmaps from my original texture with original size yes?  
> **username_2**: Well, I don't know what is inside the "resize" function so it's a little difficult to answer. The chaining, ie. 1024 generates 512, 512 generates 256, etc is not going to be a huge problem, as long as what's going on inside "resize" is ok. As an experiment, could you create a 1024^2 texture that's all 0xFFFFFF _except_ for the top left pixel which you set to pure red, (0x0000FF).  What do you get in the 512^2  result?  
> **username_0**: My result: http://postimg.org/image/atd8nc4j3/3636ad65/  
> **username_2**: Sorry, I wasn't very clear. What I meant was "what is in the top left, say, 10x10 texels of 512x512 image".  
> **username_2**: Let us [continue this discussion in chat](http://chat.stackexchange.com/rooms/30017/discussion-between-username_2-f-and-username_0).  

---

### Answer by username_0 on 2015-10-09. Score: 2

**SOLUTION**

I managed to solve my problem by increacing size of texture 2048x2048px so there would be generated more mipmaps. Also it seems like changing my SamplerState form anisotropic to something like that helped:

```
SamplerState MirrorTexCoord = new SamplerState()
        {
            AddressU = TextureAddressMode.Mirror,
            AddressV = TextureAddressMode.Mirror,
            .
            .
            .
        };

```

Actually I don' t know what is TextureAdressMode.Mirror, but it helped a lot, now it looks like this:

[![enter image description here](https://i.sstatic.net/2acRT.png)](https://i.sstatic.net/2acRT.png)

> **Comments:**
> **username_2**: Mirror is likely to define what happens when your texture repeats. In the normal mode (just considering horizontal only) if you had a texture that looked like "<"  you'd get "<<<<<".  With mirroring you get "<><><><><".  Obviously can also apply to vertical direction as well.  
> **username_4**: It looks like increasing the resolution is the main helper. Moires patterns are just barely starting to form in the back corner of the rectangle.  
> **username_0**: Actually no, mirroring does most of the job :) I tested it with mirroring only and with bigger texture only as well, and turned out that mirror provides great effect. Fortunatelly tile texture is simetric so it' s not a big deal.  
> **username_5**: It's hard to judge how much of an improvement this has made since the plane does not extend as far into the distance as in the example in the question.  

---

