# Correct way of texture-mapping a 2D mesh in libgdx

this is a question regarding the libGDX framework.

I have managed to UV-map a texture to vertices (in 2D) but have come across a few problems that I think might be caused by incorrect order of vertices.

In the first two pictures, you can see a rendering produced by the code-bits below (without blending enabled). It seems fine at first, but you can clearly notice that the lower triangle seems to have a rough transition. Is there an easy way to prevent this (without writing too much low level stuff) or is this an expected limitation of this approach?

The second problem occurs with the same code but with blending turned on. In the fragment shader, you can see that I adjust the alpha level of each pixel in the region, but with this mesh, it produces a rather weird and distorted image in the right triangle area.

Here's the code:

//Vertex shader:
attribute vec4 a_position;
attribute vec4 a_color;
attribute vec2 a_texCoord0;
uniform mat4 u_projTrans;
varying vec4 v_color;
varying vec2 v_texCoords;
void main() {
v_color = vec4(1, 1, 1, 1);
v_texCoords = a_texCoord0;
gl_Position =  u_projTrans * a_position;
}

#ifdef GL_ES
precision mediump float;
#endif
varying vec4 v_color;
varying vec2 v_texCoords;
uniform sampler2D u_texture;
void main() {
gl_FragColor = v_color * texture2D(u_texture, v_texCoords) + vec4(0, 0, 0, -0.50);
}


Mesh

Mesh m = new Mesh(true, 5, 0,
new VertexAttribute(Usage.Position, 2, "a_position"), //x,y
new VertexAttribute(Usage.TextureCoordinates,2,"a_texCoord" + 0)); //u,v
m.setVertices(new float[]{20f, 360f, 0f,0f, //upper left
60f, 20f, 0f, 1f, //lower left
180f,20f,1f,1f, //lower right
220f, 360f, 1f, 0f, //upper right
20f, 360f, 0f, 0f}); //upper left (closure)


Render

//Gdx.gl.glEnable(GL20.GL_BLEND);
//Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
texture.bind();