CODEWITHSUNDEEP
javalibgdxtexture-mapping
Snailer
Snailer

Reputation: 3839

Libgdx texture mapping

I have a simple plane Mesh that is 100x100. Following the libgdx tutorials I've successfully mapped a texture over the mesh. However, it looks odd right from the start, and even stranger when I zoom out. What I'm aiming for is a simple grid pattern.

Here's the plane zoomed in:

Zoomed in

Now zoomed out:

Zoomed out

The texture itself is a small 64x64 square, outlined.

My Grid class looks like this (Grid extends gdx.graphics.Mesh):

private final int HALFWIDTH = 50, HALFLENGTH = 50;
private Texture texture;

public Grid() {

    super( true, 4, 4,
            new VertexAttribute(Usage.Position, 3, "a_position"),
            new VertexAttribute(Usage.ColorPacked, 4, "a_color"),
            new VertexAttribute(Usage.TextureCoordinates, 2, "a_texCoords")
    );

    setVertices(new float[] {
            -HALFWIDTH, -HALFLENGTH, -2f, Color.toFloatBits(255, 0, 0, 255), -HALFWIDTH, HALFLENGTH,
            HALFWIDTH, -HALFLENGTH, -2f, Color.toFloatBits(0, 255, 0, 255), HALFWIDTH, -HALFLENGTH,
            -HALFWIDTH, HALFLENGTH, -2f, Color.toFloatBits(0, 0, 255, 255), -HALFWIDTH, HALFLENGTH,
            HALFWIDTH, HALFLENGTH, -2f, Color.toFloatBits(0, 255, 255, 0), HALFWIDTH, HALFLENGTH
    });   
    setIndices(new short[] { 0, 1, 2, 3 }); 

    this.texture = new Texture( Gdx.files.internal("assets/grid.png") );
    this.texture.setWrap( TextureWrap.Repeat, TextureWrap.Repeat );
    this.texture.setFilter( TextureFilter.Linear, TextureFilter.Linear );
}

void draw() {

    Gdx.graphics.getGL10().glEnable(GL10.GL_TEXTURE_2D);
    this.texture.bind();
    render(GL10.GL_TRIANGLE_STRIP, 0, 4);
}

Upvotes: 1

Views: 6424

Answers (2)

aaronsnoswell
aaronsnoswell

Reputation: 6261

I'm not 100% sure, but I have a strong suspicion this is because you're using Linear interpolation on your texture. When you zoom in and out on the texture, OpenGL has to choose how to display the texture at different resolutions. Using linear interpolation is well-known to cause the effect your screenshots show (sometimes called Zagging). It's due to the thin lines (high information density) in the texture you are using.

Try changing your texture mode to use Mip Maps.

this.texture.setFilter(TextureFilter.MipMap, TextureFilter.MipMap);

This will pre-compute scaled versions of your textures and avoid the zagging effect. Let me know if this works.

Upvotes: 3

lheezy
lheezy

Reputation: 542

Not sure if this will help, but your HALFWIDTH is not the same as the first one.

 -HALFWIDTH, **-HALFLENGTH**, -2f, Color.toFloatBits(255, 0, 0, 255), -HALFWIDTH, **HALFLENGTH**,
 HALFWIDTH, -HALFLENGTH, -2f, Color.toFloatBits(0, 255, 0, 255), HALFWIDTH, -HALFLENGTH,
 -HALFWIDTH, HALFLENGTH, -2f, Color.toFloatBits(0, 0, 255, 255), -HALFWIDTH, HALFLENGTH,
 HALFWIDTH, HALFLENGTH, -2f, Color.toFloatBits(0, 255, 255, 0), HALFWIDTH, HALFLENGTH

Is not negative, like it is in the first coordinate. This may be throwing off the texturing calculation.

Upvotes: 1

Related Questions