LWJGL/OpenGL - Textured squares not displayed behind other transparent textured squares

Question

I've a MapView class that contains many tiles (MapTile class, a tile can be in the background), vertex array object and vertex buffer object for rendering of the map. I also have a function that update the buffers :

        // FloatBuffer(s) and IntBuffer for indices
        positionsBuffer = MemoryUtil.memAllocFloat( this.tiles.size() * 4 * 3 );
        colorsBuffer = MemoryUtil.memAllocFloat( this.tiles.size() * 4 * 3 );
        texCoordsBuffer = MemoryUtil.memAllocFloat( this.tiles.size() * 4 * 2 );
        indicesBuffer = MemoryUtil.memAllocInt( this.vertexCount = this.tiles.size() * 2 * 3 );

        TextureDefinition textureDefinition = game.getTexturesManager().getTextureDefinition("tiles");

        int i = 0;

        for ( MapTile mapViewTile : this.tiles ) {

            Tile tile = mapViewTile.getTile();
            if ( tile == null ) continue;

            String tileTextureIdentifier = tile.getTextureIdentifier( mapViewTile.getVariant() );

            TextureTilePosition tileTexturePosition = textureDefinition.getTextureTilePosition( tileTextureIdentifier );
            if ( tileTexturePosition == null ) continue;

            // If a tile is in the background, I place the triangles of the tile square 0.1f further back and I also darken the texture
            float z = mapViewTile.isBackground() ? -0.1f : 0f;
            float[] color = mapViewTile.isBackground() ? new float[]{ 0.5f, 0.5f, 0.5f } : new float[]{ 1.0f, 1.0f, 1.0f };

            positionsBuffer.put( mapViewTile.getX() - 0.5f ).put( mapViewTile.getY() + 0.5f ).put( z );
            positionsBuffer.put( mapViewTile.getX() - 0.5f ).put( mapViewTile.getY() - 0.5f ).put( z );
            positionsBuffer.put( mapViewTile.getX() + 0.5f ).put( mapViewTile.getY() - 0.5f ).put( z );
            positionsBuffer.put( mapViewTile.getX() + 0.5f ).put( mapViewTile.getY() + 0.5f ).put( z );

            colorsBuffer.put( color ).put( color ).put( color ).put( color );

            texCoordsBuffer.put( tileTexturePosition.getX() ).put( tileTexturePosition.getY() );
            texCoordsBuffer.put( tileTexturePosition.getX() ).put( tileTexturePosition.getY() + tileTexturePosition.getHeight() );
            texCoordsBuffer.put( tileTexturePosition.getX() + tileTexturePosition.getWidth() ).put( tileTexturePosition.getY() + tileTexturePosition.getHeight() );
            texCoordsBuffer.put( tileTexturePosition.getX() + tileTexturePosition.getWidth() ).put( tileTexturePosition.getY() );

            indicesBuffer.put( i ).put( i + 1 ).put( i + 3 );
            indicesBuffer.put( i + 1 ).put( i + 2 ).put( i + 3 );

            i += 4;

        }

        positionsBuffer.flip();
        colorsBuffer.flip();
        texCoordsBuffer.flip();
        indicesBuffer.flip();

        this.vao.bind();

        this.positionsVbo.bind( GL15.GL_ARRAY_BUFFER );
        VertexBufferObject.uploadData( GL15.GL_ARRAY_BUFFER, positionsBuffer, GL15.GL_STATIC_DRAW );
        ShaderProgram.pointVertexAttribute( 0, 3, 0, 0 );

        this.colorsVbo.bind( GL15.GL_ARRAY_BUFFER );
        VertexBufferObject.uploadData( GL15.GL_ARRAY_BUFFER, colorsBuffer, GL15.GL_STATIC_DRAW );
        ShaderProgram.pointVertexAttribute( 1, 3, 0, 0 );

        this.texCoordsVbo.bind( GL15.GL_ARRAY_BUFFER );
        VertexBufferObject.uploadData( GL15.GL_ARRAY_BUFFER, texCoordsBuffer, GL15.GL_STATIC_DRAW );
        ShaderProgram.pointVertexAttribute( 2, 2, 0, 0 );

        this.indicesVbo.bind( GL15.GL_ELEMENT_ARRAY_BUFFER );
        VertexBufferObject.uploadData( GL15.GL_ELEMENT_ARRAY_BUFFER , indicesBuffer, GL15.GL_STATIC_DRAW );

        VertexBufferObject.unbind( GL15.GL_ARRAY_BUFFER );

        VertexArrayObject.unbind();

But the background tiles are not display behind others squares : Screenshot

For information, i'm using an orthographic projection and the camera of this screenshot is slightly angled. OpenGL version is 4.3.0 and LWJGL version is 3.1.3. I'm using GL_BLEND for texture transparency

I hypothesize that it would be necessary to use two different vertex array objects, is that it or something else?

Answer 1

Blending happens after the fragment shader, which means that the fragments still get written to the depth buffer. If you try to draw something behind the object, then the fragments in that object will get culled. Use glsl's discard instead of blending.

Answer 2

Seems as though you need to enable blending. Your init function should have something like

glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);