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

Question

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:

Shaders

//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;
}

//Fragment shader:
#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);
shaderProgram_mesh.begin();
shaderProgram_mesh.setUniformMatrix("u_projTrans", camera.combined);
texture.bind();
m.render(shaderProgram_mesh, GL20.GL_TRIANGLE_STRIP, 0, 5);
shaderProgram_mesh.end();

Answer 1

You're constructing your triangle strip incorrectly.

After the first two vertices, each additional vertex that you specify defines a new triangle, with the far side defined by the preceding two points.

So by putting five vertices in your vertex buffer, you're actually drawing three triangles:

You want only four vertices, arranged in a Z pattern that zig-zags from one side of the strip to the other.

Note that because one side of your quad is smaller than the other, you'll get an affine texture mapping seam along the diagonal. If you want the texture to smoothly taper, you should either make it a rectangle tilted in space so that the camera perspective tapers it for you correctly, or use projective texturing to control this effect in the shader..